Block editor styles in WordPress

September 2, 2023

By

Taras Dashkevych

Block editor styles refer to the custom CSS applied within the WordPress block editor, to give a more accurate representation of the front-end appearance.

Add editor styles

With the release of WordPress 6.3, there are changes in how block editor assets are handled:

The post editor has been iframed for blocks that support Block API version 3 or higher.
The enqueue_block_editor_assets is now discouraged for enqueuing styles specifically for the editor content. Instead, the recommendation is to use enqueue_block_assets.

Before the changes introduced in WordPress 6.3, the primary way to add styles specifically for the block editor was to use the enqueue_block_editor_assets action:

PHP

/**
 * Enqueue block editor styles for the theme.
 * 
 * This function enqueues a stylesheet specifically for the block editor. 
 * The stylesheet, 'editor-style.css', should be located in the root of your theme directory.
 * 
 * @since 1.0.0
 */
function mytheme_enqueue_editor_styles() {
    // Enqueue the editor stylesheet located in the theme's root directory.
    wp_enqueue_style(
        'mytheme-block-editor-styles',          // Handle for the stylesheet.
        get_theme_file_uri('editor-style.css'), // Path to the stylesheet.
        [],                                     // Dependencies (none in this case).
        '1.0'                                   // Version number.
    );
}
// Hook the function to 'enqueue_block_editor_assets' to load the stylesheet in the block editor.
add_action( 'enqueue_block_editor_assets', 'mytheme_enqueue_editor_styles' );

While the older method using enqueue_block_editor_assets can still work for some cases because of backward compatibility, it’s highly recommended to transition to the enqueue_block_assets method to avoid potential issues.

Here is an example with the newer recommended method:

PHP

/**
 * Enqueue block editor and front-end styles for the theme.
 * 
 * This function enqueues a stylesheet for both the block editor and the front end. 
 * The stylesheet, 'style-blocks.css', should be located in the root of your theme directory.
 * 
 * If you wish to enqueue styles exclusively for the editor, you can use the is_admin() 
 * function to conditionally load assets.
 * 
 * @since 1.0.0
 */
function mytheme_enqueue_block_styles() {
    // Register the block stylesheet located in the theme's root directory.
    wp_register_style(
        'mytheme-block-styles',                 // Handle for the stylesheet.
        get_theme_file_uri('style-blocks.css'), // Path to the stylesheet.
        [],                                     // Dependencies (none in this case).
        '1.0'                                   // Version number.
    );

    // Enqueue (load) block styles.
    wp_enqueue_style( 'mytheme-block-styles' );

    // If you want to add styles exclusively for the block editor, you can use:
    if ( is_admin() ) {
        // Register the editor stylesheet located in the theme's root directory.
        wp_register_style(
            'mytheme-editor-styles',                 
            get_theme_file_uri('editor-blocks.css'),
            [],                                     
            '1.0'                                   
        );

        // Enqueue editor styles.
        wp_enqueue_style( 'mytheme-editor-styles' );
    }
}
// Hook the function to 'enqueue_block_assets' to load the stylesheet in the block editor and the front end.
add_action( 'enqueue_block_assets', 'mytheme_enqueue_block_styles' );

The major difference with enqueue_block_assets is that it affects both the block editor and the front-end. To target only the editor, use the is_admin() condition inside the function.