{"id":1931,"date":"2020-12-22T21:48:17","date_gmt":"2020-12-22T14:48:17","guid":{"rendered":"https:\/\/wptips.dev\/?p=1931"},"modified":"2020-12-22T22:52:13","modified_gmt":"2020-12-22T15:52:13","slug":"gutenberg-custom-styles","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/gutenberg-custom-styles\/","title":{"rendered":"How to Create Custom Block Styles (Advanced Way)"},"content":{"rendered":"\n

Gutenberg at its core lacks features, but its simplicity is second to none<\/strong> compared to other WordPress page builders.<\/p>\n\n\n\n

One way to cover that flaw is by utilizing custom block styles. This is powerful and easy to implement, yet most themes are not using this properly.<\/p>\n\n\n\n

In this tutorial, we will cover how to create custom block styles and showcase how it can be used for a more complex design.<\/p>\n\n\n\n

Step 1 – List What You Need<\/h2>\n\n\n\n

For example, we need to replicate this design:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

According to that, let’s break down what Gutenberg doesn’t have yet:<\/p>\n\n\n\n

  1. Media & Text<\/strong> block but with a square background behind the image.<\/li>
  2. Heading<\/strong> block with five-stars decoration.<\/li>
  3. Button<\/strong> block with only border and arrow pointing to the right.<\/li><\/ol>\n\n\n\n

    So we need 3 custom styles, let’s register them.<\/p>\n\n\n\n

    Step 2 – Register Custom Styles<\/h2>\n\n\n\n

    The code to add them is quite simple:<\/p>\n\n\n\n

    add_action( 'after_setup_theme', 'my_register_block_styles' );\n\nfunction<\/em> my_register_block_styles() {\n  register_block_style( 'core\/media-text', [\n    'name' => 'half-bg',\n    'label' => __( 'Half Background' ),\n  ] );\n \n  register_block_style( 'core\/heading', [\n    'name' => 'stars',\n    'label' => __( 'Stars' ),\n  ] );\n\n  register_block_style( 'core\/button', [\n    'name' => 'outline-arrow',\n    'label' => __( 'Outline Arrow' ),\n  ] );\n}<\/code><\/pre>\n\n\n\n
    Now when you create the respective block, you will see the Styles<\/strong> option on Sidebar:<\/p>\n\n\n\n
    \"\"
    Gutenberg’s style option<\/figcaption><\/figure>\n\n\n\n
    Step 3 – Output Color Palette into CSS Variables<\/h2>\n\n\n\n
    When we select a color in Gutenberg, it will apply extra classes to the wrapper. If the color name is accent<\/code>, then it will add has-accent-background-color<\/code> class.<\/p>\n\n\n\n
    How they handle that class name is up to the theme. Most of them do it like this:<\/p>\n\n\n\n
    .has-accent-background-color {\n  background-color: #cd2653;\n}\n\n.has-accent-color {\n  color: #cd2653;\n}<\/code><\/pre>\n\n\n\n
    The problem with the above is that the color is locked to that property<\/strong>. You can’t use it for something else like a border or in a :before<\/code> pseudoselector.<\/p>\n\n\n\n
    It’s much more flexible<\/strong> if you output it as CSS Variables instead:<\/p>\n\n\n\n
    .has-accent-background-color {\n  --bgColor: #cd2653;\n}\n\n.has-accent-color {\n  --textColor: #cd2653;\n}<\/code><\/pre>\n\n\n\n
    To output those classes automatically, use the snippet below. It will read the colors defined in editor-color-palette<\/a><\/code> and echo it inside <head><\/code>:<\/p>\n\n\n\n
    add_action( 'wp_head', 'my_output_gutenberg_palette' );\nadd_action( 'admin_head', 'my_output_gutenberg_palette' );\n\nfunction<\/em> my_output_gutenberg_palette() {\n  \/\/ abort if in Admin but not inside Gutenberg editor\n  if( is_admin() ) {\n    global $current_screen;\n    $in_editor = method_exists($current_screen, 'is_block_editor') &&\n      $current_screen->is_block_editor();\n    if( !$in_editor ) { return; }\n  }\n\n  $palette = get_theme_support( 'editor-color-palette' );\n  if( !$palette ) { return; } \/\/ abort if no palette\n   \n  \/\/ format styles\n  $styles = \":root .has-background { background-color: var(--bgColor); }\n  :root .has-text-color { color: var(--textColor); } \";\n\n  foreach( $palette[0] as $name => $value ) {\n    $slug = $value['slug'];\n    $color = $value['color'];\n\n    $styles .= \".has-{$slug}-background-color { --bgColor: {$color}; } \";\n    $styles .= \".has-{$slug}-color { --textColor: {$color}; } \";\n  }\n\n  echo \"<style> $styles <\/style>\";\n}<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    With those variables ready, we can re-purpose the color<\/strong> such as using Heading’s background as the star’s color instead:<\/p>\n\n\n\n
    .is-style-stars {\n  background-color: transparent !important;\n}\n\n.is-style-stars::before {\n  content: \"\u2605\u2605\u2605\u2605\u2605\";\n  color: var(--bgColor);\n}<\/code><\/pre>\n\n\n\n
    Step 4 – Write CSS for Admin<\/h2>\n\n\n\n
    One important tip for this is to be lazy<\/strong>. No need to perfectly match the design, as long as it has resemblance, it’s fine.<\/p>\n\n\n\n
    Also no need to factor in mobile responsiveness because the admin most likely uses a PC to edit the site anyway.<\/p>\n\n\n\n
    Now that we have the right mindset, here’s how to enqueue the CSS to Gutenberg:<\/p>\n\n\n\n
    add_action( 'enqueue_block_editor_assets', 'my_editor_assets', 100 );\n\nfunction<\/em> my_editor_assets() {\n  $css_dir = get_stylesheet_directory_uri() . '\/css';\n  \n  wp_enqueue_style( 'my-editor', $css_dir . '\/my-editor.css',\n    [ 'wp-edit-blocks' ], '' );\n}<\/code><\/pre>\n\n\n\n
    \n
    View my-editor.css<\/a><\/div>\n<\/div>\n\n\n\n
    \"\"
    The editor view of our new section.
    This will look different depending on the theme.<\/strong><\/figcaption><\/figure>\n\n\n\n
    Step 5 – Write CSS for Frontend<\/h2>\n\n\n\n
    This is where we should focus our effort in.<\/p>\n\n\n\n
    Start by copy-pasting the admin CSS<\/strong>. Then tune it according to the theme and finally add mobile responsiveness.<\/p>\n\n\n\n
    We can put this custom styling in existing CSS or create new one like below:<\/p>\n\n\n\n
    add_action( 'wp_enqueue_scripts', 'my_frontend_assets', 99 );\n\nfunction<\/em> my_frontend_assets() {\n  $css_dir = get_stylesheet_directory_uri() . '\/css';\n\n  wp_enqueue_style( 'my-style', $css_dir . '\/my-style.css', [] );\n}<\/code><\/pre>\n\n\n\n
    \n
    View my-style.css<\/a><\/div>\n<\/div>\n\n\n\n
    \n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    You might get intimidated by how long the process for creating just 1 section. But remember that Step 3 and the enqueue process are one-time-only.<\/p>\n\n\n\n
    Once you learn once, it won’t take long. You’ll also be surprised at how seamless it is to convert the admin CSS into the frontend.<\/p>\n\n\n\n
    If you have any question regarding Custom Block Style, feel free to leave a comment below \ud83d\ude42<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
    One way to patch Gutenberg’s lack of features is to use custom block styles. But most themes are not utilizing it properly. We will learn the proper way here.<\/p>\n","protected":false},"author":1,"featured_media":1974,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[21,22,32],"class_list":["post-1931","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg","tag-css","tag-gutenberg","tag-javascript"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1931"}],"version-history":[{"count":10,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1931\/revisions"}],"predecessor-version":[{"id":1979,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1931\/revisions\/1979"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1974"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}