Registering multiple custom gutenberg blocks in a plugin with webpack build Registering multiple custom gutenberg blocks in a plugin with webpack build wordpress wordpress

Registering multiple custom gutenberg blocks in a plugin with webpack build


It should be enough to define the build-JS with wp_register_script() and all dependencies and then register each block with register_block_type():

function plugin_slug_register_blocks() {    // Register build.js    wp_register_script(      'plugin-slug-blocks',        plugins_url( 'build.js', __FILE__ ),        array( 'wp-blocks', 'wp-element', 'wp-data' )    );    // Register Block 1    register_block_type( 'plugin-slug/block-name-1', array(       'editor_script' => 'plugin-slug-blocks',    ) );    // Register Block 2    register_block_type( 'plugin-slug/block-name-2', array(        'editor_script' => 'plugin-slug-blocks',    ) );}add_action( 'init', 'plugin_slug_register_blocks' );

Besides editor_script, register_block_type() also accepts style and editor_style as arguments for the CSS files. If it is a dynamic block, you can also pass a render function with render_callback.