When developing Gutenberg blocks, the correct way to enqueue assets includes: 1. Use register_block_type to specify the paths of editor_script, editor_style and style; 2. Register resources through wp_register_script and wp_register_style in functions.php or plug-in, and set the correct dependencies and versions; 3. Configure the build tool to output appropriate module formats and ensure that the paths are consistent; 4. Control the loading logic of front-end styles through add_theme_support or enqueue_block_assets to ensure that the styles take effect and avoid conflicts.

When developing Gutenberg blocks, correctly enqueue assets (such as JavaScript and CSS files) are a key step to ensure that the blocks work properly. This is not just loading files into the backend editor, but also considering front-end display and dependency management issues.

1. Use register_block_type to correctly specify the asset path

WordPress provides the register_block_type function to register a block type and allows you to specify the corresponding JS and CSS file paths through parameters.

 register_block_type( __DIR__, array(
    'editor_script' => 'my-block-editor-script',
    'editor_style' => 'my-block-editor-styles',
    'style' => 'my-block-frontend-styles',
) );

• editor_script : Used for scripts in block editors (usually compiled .js or .jsx files)
• editor_style : only the style loaded in the editor, and does not affect the foreground
• style : a style that will be loaded in the front and backend, usually used for the basic appearance of blocks

2. Register scripts and stylesheets in functions.php or plugin

You need to register these resources first with wp_register_script and wp_register_style so that WordPress can recognize the handle you mentioned in register_block_type .

 function my_block_assets() {
    wp_register_script(
        'my-block-editor-script',
        get_template_directory_uri() . '/blocks/my-block/build/index.js',
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( get_template_directory() . '/blocks/my-block/build/index.js' )
    );

    wp_register_style(
        'my-block-editor-styles',
        get_template_directory_uri() . '/blocks/my-block/editor.css',
        array(),
        filemtime( get_template_directory() . '/blocks/my-block/editor.css' )
    );

    wp_register_style(
        'my-block-frontend-styles',
        get_template_directory_uri() . '/blocks/my-block/style.css',
        array(),
        filemtime( get_template_directory() . '/blocks/my-block/style.css' )
    );
}
add_action( 'init', 'my_block_assets' );

Pay attention to several key points:

• The script dependencies need to be written in full, such as wp-blocks , wp-element , wp-editor
• Use filemtime() to avoid the browser from caching old version of files
• If you are using the theme directory structure, it is recommended to use get_template_directory ; if it is a plugin, use plugins_url() to cooperate with __FILE__

3. Precautions for building tool configuration

If you use Webpack, Vite or other build tools to package block code, you need to pay attention to the following points:

• The output JS file should be a UMD module or be correctly packaged in a format suitable for WordPress environments.
• Don't package React and ReactDOM into your script separately, but use global variable references provided by WordPress (such as window.React , window.ReactDOM )
• Make sure the output path is consistent with the path registered in PHP

Common practices:

• Put the editor script in /src/blocks/your-block/index.js
• Compile to /build/your-block/index.js using Webpack
• At the same time, generate .asset.php file to automatically obtain dependencies and version numbers (WordPress default support)

4. Tips for loading front-end styles

By default, the style parameter of the Gutenberg block will automatically load the style in the foreground. But sometimes you will find that the style is not effective, the reason may be:

• The theme does not enable block style support correctly (check if add_theme_support( 'wp-block-styles' ) is called)
• The style is covered by other theme styles, it is recommended to add some namespace class names
• Some blocks will not be rendered on the front end (such as some dynamic blocks). At this time, you can consider using enqueue_block_assets hook to load on demand.

 function my_enqueue_frontend_assets() {
    if ( has_block( 'my/block-name' ) ) {
        wp_enqueue_style( 'my-block-frontend-styles' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_frontend_assets' );

This method is more flexible, but it also requires determining whether the block actually exists on the page.

Basically that's it. As long as you follow WordPress’ block registration specifications and pay attention to the construction and path issues, you can successfully load the assets into the block.

The above is the detailed content of How to enqueue assets for a Gutenberg block. For more information, please follow other related articles on the PHP Chinese website!