By Michael


2019-01-06 15:05:36 8 Comments

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

0 comments

Related Questions

Sponsored Content

2 Answered Questions

[SOLVED] How to detect the usage of Gutenberg

  • 2018-11-30 10:01:01
  • KAGG Design
  • 1688 View
  • 6 Score
  • 2 Answer
  • Tags:   block-editor

2 Answered Questions

Help Unregistering a Core Block Type in Gutenberg

  • 2018-08-03 19:04:04
  • LKD
  • 1031 View
  • 3 Score
  • 2 Answer
  • Tags:   block-editor

1 Answered Questions

[SOLVED] Add Formatting Buttons to Gutenberg core/paragraph BlockControls

  • 2018-11-29 13:41:49
  • uruk
  • 99 View
  • 2 Score
  • 1 Answer
  • Tags:   block-editor

1 Answered Questions

2 Answered Questions

[SOLVED] For developers, what impact can we expect Gutenberg to have on the loop?

  • 2018-10-29 02:38:25
  • GoingMush
  • 52 View
  • 0 Score
  • 2 Answer
  • Tags:   block-editor

0 Answered Questions

Gutenberg: Is there a way to know if current block is inside InnerBlocks?

1 Answered Questions

[SOLVED] How can I add a custom attribute to Gutenberg core blocks?

  • 2018-09-26 03:51:08
  • Eric Murphy
  • 611 View
  • 2 Score
  • 1 Answer
  • Tags:   block-editor

1 Answered Questions

[SOLVED] Block validation: Block validation failed for `my-block`

  • 2018-09-20 08:58:50
  • André Kelling
  • 1015 View
  • 1 Score
  • 1 Answer
  • Tags:   block-editor

1 Answered Questions

[SOLVED] Extend core block in Gutenberg

0 Answered Questions

Gutenberg: @element queries

  • 2018-04-20 09:58:19
  • Iadi
  • 74 View
  • 0 Score
  • 0 Answer
  • Tags:   block-editor

Sponsored Content