Creating Custom Styles Specifically for WordPress Gutenberg Blocks

Introduction

WordPress Gutenberg blocks were introduced in WordPress version 5.0, bringing a modular and efficient approach to content editing. For developers, Gutenberg blocks not only offer ease of use but also support customizing block appearance and interaction through custom styles and scripts. This article will guide you step-by-step on how to create personalized styles for Gutenberg blocks, enhancing your website’s professionalism and user experience.

Steps

Step 1: Preparation

Before you start, make sure you are using WordPress version 5.0 or higher and have a basic understanding of CSS and JavaScript, which will help you better understand and apply custom styles.

Step 2: Creating Custom Styles

The key to custom styles lies in modifying your theme’s functions.php file to load new CSS files into the editor. Open functions.php and add the following code at the end of the file:

function my_custom_block_style() {
  wp_enqueue_style(
    'my-custom-block-style', // Style name
    get_stylesheet_directory_uri() . '/css/my-block-style.css', // Style file path
    array( 'wp-blocks' ),
    filemtime( get_stylesheet_directory() . '/css/my-block-style.css' ) // Auto cache refresh
  );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_style' );

Here, “my-custom-block-style” is the style identifier, which you can modify as needed. The style file is assumed to be located in the css folder within your theme directory, named my-block-style.css. The filemtime function ensures the browser automatically loads the latest version whenever the style file is updated, preventing caching issues.

Next, create the “my-block-style.css” file in your theme’s css folder and add all your custom styles there.

Step 3: Selecting Blocks and Adding Styles

After preparing the style file, open the WordPress editor and add or select the block you want to customize. In the block settings, find the “Add Custom Styles” feature and enter the corresponding block’s CSS selector.

For example, to change the text color of a paragraph block, you can write:

.wp-block-paragraph {
  color: red;
}

“.wp-block-paragraph” is the default CSS class for the paragraph block. If you want to set styles for multiple blocks, you can enter multiple selectors in the selector box, and the styles will apply to all corresponding blocks.

Step 4: Saving Changes

After entering your styles, click the “Add Style” button to save. Refresh the editor, and you will see the selected blocks with the custom styles applied, giving your website a fresh new look.

Conclusion

By integrating custom CSS into your theme files and setting styles for specific blocks, customizing WordPress Gutenberg blocks becomes flexible and powerful. With these techniques, you can easily create uniquely styled content modules that enhance your website’s professionalism and user experience. We hope this article helps you design custom styles for Gutenberg blocks effectively.