Action Hook since 5.0.0

enqueue_block_assets

Loads scripts/styles in both the block editor and the front-end

Description

enqueue_block_assets is the one enqueue hook that runs in both places — the block editor and the public front-end — making it the right spot for a block's own shared styling.

When it runs

Runs on wp-admin editor screens and on the public front-end wherever blocks render — once per context, so effectively twice as often as enqueue_block_editor_assets.

Signature

do_action( 'enqueue_block_assets' );

Examples

Basic

add_action( 'enqueue_block_assets', function() {
    wp_enqueue_style( 'my-block-style', get_template_directory_uri() . '/css/block.css' );
} );

Load a custom block's CSS so it looks right in both the editor and the front-end.

Real case

add_action( 'enqueue_block_assets', function() {
    wp_enqueue_style( 'my-block-style', get_template_directory_uri() . '/css/block.css' );
    if ( is_admin() ) {
        wp_enqueue_style( 'my-block-style-editor-only', get_template_directory_uri() . '/css/block-editor-extra.css' );
    }
} );

Share one base stylesheet everywhere, and add an editor-only extra with an is_admin() guard.

Common Use Cases

Load a custom block's CSS so it looks right in the editor and on the front-end
Share fonts/variables between editor preview and rendered output
Avoid duplicating enqueue code across wp_enqueue_scripts and enqueue_block_editor_assets

Common mistakes

Forgetting this hook fires in both contexts and accidentally loading admin-only or front-end-only code without an is_admin() guard

Related hooks

Alternative enqueue_block_editor_assets
Alternative wp_enqueue_scripts

FAQ

Should block CSS go on enqueue_block_assets or block.json's style property?

block.json's style/editorStyle properties are the modern, preferred way for a registered block's own CSS. enqueue_block_assets is better for shared/global styling that isn't tied to one specific block registration.

Source: wp-includes/script-loader.php

Group wizard

One session: this hook, then each related_hooks entry. Walk it and tell us what to change.

enqueue_block_assets → enqueue_block_editor_assets → wp_enqueue_scripts

functions.php — enqueue_block_assets

functions.php

<?php
/**
 * Practice: hook into enqueue_block_assets
 */
add_action( 'enqueue_block_assets', function() {
	// Write your callback here.

} );

Group tour

enqueue_block_assets · Hook 1 of 3 · Step 1 of 7

Meet enqueue_block_assets

Loads scripts/styles in both the block editor and the front-end

enqueue_block_assets is the one enqueue hook that runs in both places — the block editor and the public front-end — making it the right spot for a block's own shared styling.

type actionphase templatesince 5.0.0source wp-includes/script-loader.php

do_action( 'enqueue_block_assets' );

add_action( 'enqueue_block_assets', function() {
    wp_enqueue_style( 'my-block-style', get_template_directory_uri() . '/css/block.css' );
} );

PHP enqueue_block_assets · Hook 1 of 3 · Step 1 of 7

Practice the enqueue_block_assets WordPress action hook in our interactive sandbox — a VS Code-style editor with a step-by-step enqueue_block_assets tutorial, add_action exercises, and instant feedback. No local WordPress install required.