Using WordPress ‘enqueue_block_styles_assets()’ PHP function

by

The enqueue_block_styles_assets() WordPress PHP function is responsible for enqueuing the styles required for block styles functionality on the editor and on the frontend.

Usage

You can utilize the enqueue_block_styles_assets() function to opt-out of loading CSS for the core blocks. This is achieved by deregistering the style, then registering it again but with an empty value. Here’s an example:

function mytheme_block_assets() {
    wp_deregister_style( 'wp-block-library' );
    wp_register_style( 'wp-block-library', '' );
}
add_action( 'enqueue_block_assets', 'mytheme_block_assets' );

Parameters

  • This function does not have any parameters.

More information

See WordPress Developer Resources: enqueue_block_styles_assets

Examples

Opting out of loading CSS for core blocks

In this example, we deregister the ‘wp-block-library’ style and register it again with an empty value. This effectively stops WordPress from loading the default styles for the core blocks. 

function remove_block_library_css() {
    wp_deregister_style( 'wp-block-library' );
    wp_register_style( 'wp-block-library', '' );
}
add_action( 'enqueue_block_assets', 'remove_block_library_css' );

Adding Custom Styles

You can add custom styles to the block editor and frontend by enqueuing a new stylesheet.

function mytheme_enqueue_block_style() {
    wp_enqueue_style( 'mytheme-blocks', get_template_directory_uri() . '/blocks.css', array( 'wp-edit-blocks' ) );
}
add_action( 'enqueue_block_assets', 'mytheme_enqueue_block_style' );

In this example, ‘mytheme-blocks’ is the handle of the new stylesheet and ‘/blocks.css’ is the location of the stylesheet relative to the root of your theme.

Conditionally Loading Styles in the Editor

You can load styles only in the editor by using the is_admin() function.

function mytheme_enqueue_editor_style() {
    if( is_admin() ) {
        wp_enqueue_style( 'mytheme-editor-blocks', get_template_directory_uri() . '/editor-blocks.css', array( 'wp-edit-blocks' ) );
    }
}
add_action( 'enqueue_block_assets', 'mytheme_enqueue_editor_style' );

In this example, ‘/editor-blocks.css’ is a separate stylesheet that only loads in the block editor.

Conditionally Loading Styles on the Frontend

Similarly, you can load styles only on the frontend by using the ! is_admin() condition.

function mytheme_enqueue_frontend_style() {
    if( ! is_admin() ) {
        wp_enqueue_style( 'mytheme-frontend-blocks', get_template_directory_uri() . '/frontend-blocks.css', array( 'wp-edit-blocks' ) );
    }
}
add_action( 'enqueue_block_assets', 'mytheme_enqueue_frontend_style' );

In this example, ‘/frontend-blocks.css’ is a stylesheet that only loads on the frontend.

Using Different Styles for Different Post Types

You can enqueue different styles for different post types using the get_post_type() function.

function mytheme_enqueue_posttype_style() {
    if( 'post' === get_post_type() ) {
        wp_enqueue_style( 'mytheme-post-blocks', get_template_directory_uri() . '/post-blocks.css', array( 'wp-edit-blocks' ) );
    } else {
        wp_enqueue_style( 'mytheme-page-blocks', get_template_directory_uri() . '/page-blocks.css', array( 'wp-edit-blocks' ) );
    }
}
add_action( 'enqueue_block_assets', 'mytheme_enqueue_posttype_style' );

In this example, if the post type is ‘post’, we enqueue the ‘/post-blocks.css’ stylesheet. For all other post types, we enqueue the ‘/page-blocks.css’ stylesheet.