2

I'm trying to extend the core/paragraph block to add additional settings to the Gutenberg Inspector(?) (the right side panel settings) but I'm running into issues with it not yet being registered. I'm trying to start out simple just to wrap my head around what's going on and simply change the title of the block for now.

I've seen many of articles/readme's/discussions on how to achieve this:
- https://riad.blog/2017/10/16/one-thousand-and-one-way-to-extend-gutenberg-today/
- https://github.com/WordPress/gutenberg/tree/master/packages/hooks
- https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/

The closest I have come is that first article where you unregister, make your changes, then re-register the block. The only problem is, when I attempt to unregister the block, it says that Block "core/paragraph" is not registered. :(.

Here is the section in my functions.php where I enqueue the block editor assets:

class StarterSite extends Site {
    /** @var string App Version */
    const VERSION = '0.0.1';

    public function __construct() {
        parent::__construct();
        $this->register_autoload();
        $this->register_timber();
    }

    ...

    public function backend() {
        add_action('init', [$this, 'register_menus']);
        add_action('after_setup_theme', [$this, 'theme_supports']);
        add_theme_support('editor-styles');
        add_action('admin_enqueue_scripts', [$this, 'admin_enqueue_scripts']);
        add_action('enqueue_block_assets', [$this, 'enqueue_block_editor_assets']);
    }

    ...

    public function enqueue_block_editor_assets() {
        wp_register_script('block-js', get_stylesheet_directory_uri() . '/dist/js/blocks.js', ['wp-blocks'], self::VERSION, true);
        wp_enqueue_script('block-js');
        wp_enqueue_style('site-gutenberg-css', get_stylesheet_directory_uri() . '/dist/css/gutenberg.css', ['wp-edit-blocks'], '1.0.0', 'all');
    }
}


$site = new StarterSite();

if (!is_admin() || wp_doing_ajax()) {
    $site->frontend();
}
else {
    $site->backend();
}

Here is my JS that gets compiled into the dist/js/blocks.js files:

console.log(wp.blocks.getBlockTypes());

let paragraphBlock = wp.blocks.unregisterBlockType('core/paragraph');
paragraphBlock.title = 'Text';
wp.blocks.registerBlockType('core/paragraph', paragraphBlock);

The console.log(wp.blocks.getBlockTypes()); shows this in the browser console:

So at this point the issue is definitely because the core blocks have not yet been registered, but how do I wait for those blocks to be registered? How can I wait for a specific block to be registered to know that I can modify that block?

UPDATE
I have found this documentation

So I have added this little code snippet:

wp.blocks.registerBlockStyle( 'core/paragraph', {
    name: 'container',
    label: 'Fixed Container'
} );
wp.blocks.registerBlockStyle( 'core/paragraph', {
    name: 'container-fluid',
    label: 'Fluid Container'
} );

This adds the "Style" section in the block: enter image description here

Is this the recommended solution?

If yes, how do I apply this to ALL blocks programmatically? I still run into the loading issue where not all blocks are available to my script. For example, when I loop through the available blocks at the time of my script's execution:

wp.blocks.getBlockTypes().forEach(function (e) {
    console.log(e);
});

I get the following: enter image description here

  • If your goal is to add new controls to the block and/or modify the html there is no need to unregister it. I guess the new control will modify some new attribute value that you want to add; how is the attribute going to then modify the html of the block (eg: adding a class, some inline style, a data attribute)? – Alvaro Jan 6 at 17:08
  • My ultimate goal is to add a global setting to each block that can control the container width of the block via Bootstrap classes. This setting will add a class to the block of either container or container-fluid – Michael Jan 7 at 13:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.