Using WordPress ‘enqueue_block_assets’ PHP action

The enqueue_block_assets WordPress PHP action allows you to enqueue block assets for both the editor and front-end after registering your custom Gutenberg block.

Usage

add_action('enqueue_block_assets', 'your_custom_function');
function your_custom_function() {
    // your custom code here
    return;
}

Parameters

None

More information

See WordPress Developer Resources: enqueue_block_assets

Examples

Enqueueing a custom CSS file for a block

Enqueue a custom CSS file to style your Gutenberg block.

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

Enqueueing a custom JavaScript file for a block

Enqueue a custom JavaScript file to add interactivity to your Gutenberg block.

add_action('enqueue_block_assets', 'enqueue_my_block_scripts');
function enqueue_my_block_scripts() {
    wp_enqueue_script('my-block-script', get_template_directory_uri() . '/my-block-script.js', array('wp-blocks', 'wp-element', 'wp-editor'));
}

Enqueueing both CSS and JavaScript for a block

Enqueue both a custom CSS file and a JavaScript file for your Gutenberg block.

add_action('enqueue_block_assets', 'enqueue_my_block_assets');
function enqueue_my_block_assets() {
    wp_enqueue_style('my-block-style', get_template_directory_uri() . '/my-block-style.css');
    wp_enqueue_script('my-block-script', get_template_directory_uri() . '/my-block-script.js', array('wp-blocks', 'wp-element', 'wp-editor'));
}

Conditionally enqueueing assets for the editor

Enqueue assets only for the Gutenberg editor.

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

Conditionally enqueueing assets for the front-end

Enqueue assets only for the front-end of your website.

add_action('enqueue_block_assets', 'enqueue_my_block_frontend_assets');
function enqueue_my_block_frontend_assets() {
    if (!is_admin()) {
        wp_enqueue_style('my-block-frontend-style', get_template_directory_uri() . '/my-block-frontend-style.css');
    }
}