wp_enqueue_block_style( string $block_name, array $args )

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_namestringrequired
The block-name, including namespace.
$argsarrayrequired
An array of arguments. See wp_register_style() for full information about each argument.
  • handle string
    The handle for the stylesheet.
  • src string|false
    The source URL of the stylesheet.
  • deps string[]
    Array of registered stylesheet handles this stylesheet depends on.
  • ver string|bool|null
    Stylesheet version number.
  • media string
    The media for which this stylesheet has been defined.
  • path string|null
    Absolute 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

VersionDescription
5.9.0Introduced.

User Contributed Notes

  1. Skip to note 3 content

    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.

    function twentytwentytwo_support() {
    			/*
    			 * Load additional block styles.
    			 */
    			    $styled_blocks = ['post-author'];
    			foreach ( $styled_blocks as $block_name ) {
    				$args = array(
    					'handle' => "twentytwentytwo-$block_name",
    					'src'    => get_theme_file_uri( "assets/css/blocks/$block_name.css" ),
    				);
    				wp_enqueue_block_style( "core/$block_name", $args );
    			}
    		}

    Finally, include this in your functions.php file.

    add_action( 'after_setup_theme', 'twentytwentytwo_support' );

    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;
    }

  2. Skip to note 4 content

    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.

You must log in before being able to contribute a note or feedback.