Enqueues a stylesheet for a specific block.
Description
If the theme has opted-in to load block styles on demand, then the stylesheet will be enqueued on-render, otherwise when the block inits.
Parameters
$block_namestringrequired- The block-name, including namespace.
$argsarrayrequired- An array of arguments. See wp_register_style() for full information about each argument.
handlestringThe handle for the stylesheet.srcstring|falseThe source URL of the stylesheet.depsstring[]Array of registered stylesheet handles this stylesheet depends on.verstring|bool|nullStylesheet version number.mediastringThe media for which this stylesheet has been defined.pathstring|nullAbsolute path to the stylesheet, so that it can potentially be inlined.
Source
function wp_enqueue_block_style( $block_name, $args ) { $args = wp_parse_args( $args, array( 'handle' => '', 'src' => '', 'deps' => array(), 'ver' => false, 'media' => 'all', ) ); /** * Callback function to register and enqueue styles. * * @param string $content When the callback is used for the render_block filter, * the content needs to be returned so the function parameter * is to ensure the content exists. * @return string Block content. */ $callback = static function ( $content ) use ( $args ) { // Register the stylesheet. if ( ! empty( $args['src'] ) ) { wp_register_style( $args['handle'], $args['src'], $args['deps'], $args['ver'], $args['media'] ); } // Add `path` data if provided. if ( isset( $args['path'] ) ) { wp_style_add_data( $args['handle'], 'path', $args['path'] ); // Get the RTL file path. $rtl_file_path = str_replace( '.css', '-rtl.css', $args['path'] ); // Add RTL stylesheet. if ( file_exists( $rtl_file_path ) ) { wp_style_add_data( $args['handle'], 'rtl', 'replace' ); if ( is_rtl() ) { wp_style_add_data( $args['handle'], 'path', $rtl_file_path ); } } } // Enqueue the stylesheet. wp_enqueue_style( $args['handle'] ); return $content; }; $hook = did_action( 'wp_enqueue_scripts' ) ? 'wp_footer' : 'wp_enqueue_scripts'; if ( wp_should_load_block_assets_on_demand() ) { /** * Callback function to register and enqueue styles. * * @param string $content The block content. * @param array $block The full block, including name and attributes. * @return string Block content. */ $callback_separate = static function ( $content, $block ) use ( $block_name, $callback ) { if ( ! empty( $block['blockName'] ) && $block_name === $block['blockName'] ) { return $callback( $content ); } return $content; }; /* * The filter's callback here is an anonymous function because * using a named function in this case is not possible. * * The function cannot be unhooked, however, users are still able * to dequeue the stylesheets registered/enqueued by the callback * which is why in this case, using an anonymous function * was deemed acceptable. */ add_filter( 'render_block', $callback_separate, 10, 2 ); return; } /* * The filter's callback here is an anonymous function because * using a named function in this case is not possible. * * The function cannot be unhooked, however, users are still able * to dequeue the stylesheets registered/enqueued by the callback * which is why in this case, using an anonymous function * was deemed acceptable. */ add_filter( $hook, $callback ); // Enqueue assets in the editor. add_action( 'enqueue_block_assets', $callback ); } Changelog
| Version | Description |
|---|---|
| 5.9.0 | Introduced. |
Following the standard approach, you can enqueue your block custom styles iteratively like this. Place your block custom style sheet in /assets/css/blocks/ directory. For example, if you want to override the Post Author block Avatar and content style, create /assets/css/blocks/post-author.css and add your custom styles for the respective classes there. After that, add the following snippet to your
after_setup_themecallback function which is,twentytwentytwo_support()in this example.Finally, include this in your functions.php file.
post-author.css for your reference, I would like the avatar to be round and the Author name centered inline with the Avatar.
.wp-block-post-author__avatar img {
border-radius: 50%;
}
.wp-block-post-author__name {
line-height: 2.5em;
}
This function can be called directly, without hooking it to specific action, because it hooks enqueuing internally to
enqueue_block_assets. If it is hooked to the same hook, it will not work.add_filter( 'should_load_separate_core_block_assets', '__return_true' );in functions.php or plugin if you callwp_enqueue_block_style()without hook. This setting should happen automatically if you are using FSE, but adding this filter to true happens in theme.php which is called after enqueueing starts. Alternatively, useafter_setup_themehook to call this function, like in the example from abditsori.If your block is called ‘namespace/name’, do not set handle argument to ‘namespace-name-style’, because that style is already used by the WordPress to enqueue block styles and style will not be enqueued.