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