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_assetsis now discouraged for enqueuing styles specifically for the editor content. Instead, the recommendation is to useenqueue_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:
/**
* 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:
/**
* 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.
Leave a Reply