Modify the core/paragraph block

Question

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:

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:

Answer 1

Very similar to your goal, I recently wanted to add a block-style to all existing blocks. I found that upon loading an editor page, I must wait for the WP editor JS data to populate before adding my styles, and AFAIK, there's no callback hook for this. So I chose to add a not-so-elegant delay loop.

My solution works but it's not yet robust (e.g., delay loop should exit after a while, should fail gracefully if future WP updates alter the "block types" structure, etc.), but it may get you moving in a workable direction.

Use the WordPress Block Filters tutorial to get your designated JavaScript file loaded for admin/editor pages. Here's the essential snippet from my code that does this:

"use strict";
wp.domReady(function () {

    function addFullWidthStylesToAll(block_types) {
        for (let block_type of block_types) {
            wp.blocks.registerBlockStyle(block_type.name, {
                name: 'full-page-width',
                label: 'Full Page Width',
            });
        }

    }

    (function waitForBlocksDataToFill() {
        let block_types = wp.data.select('core/blocks').getBlockTypes();
        if (0 === block_types.length) {
            setTimeout(waitForBlocksDataToFill, 100);

        } else {
            addFullWidthStylesToAll(block_types)

        }
    })();

});