Enqueues a stylesheet for a specific block.
Description
If the theme has opted-in to separate-styles loading, then the stylesheet will be enqueued on-render, otherwise when the block inits.
Parameters
$block_name
stringrequired- The block-name, including namespace.
$args
arrayrequired- An array of arguments. See wp_register_style() for full information about each argument.
handle
stringThe handle for the stylesheet.src
string|falseThe source URL of the stylesheet.deps
string[]Array of registered stylesheet handles this stylesheet depends on.ver
string|bool|nullStylesheet version number.media
stringThe media for which this stylesheet has been defined.path
string|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_separate_core_block_assets() ) {
/**
* 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_theme
callback 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_theme
hook to call this function, like in the example from abditsori.