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 can I add a custom attribute to Gutenberg core blocks?

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

2 Answered Questions

[SOLVED] Help Unregistering a Core Block Type in Gutenberg

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

0 Answered Questions

Is paragraph block keepPlaceholderOnFocus not filterable?

  • 2019-04-12 07:49:38
  • maurisrx
  • 18 View
  • 0 Score
  • 0 Answer
  • Tags:   block-editor

0 Answered Questions

2 Answered Questions

2 Answered Questions

[SOLVED] Gutenberg InspectorControls is deprecated, how to add custom block settings?

  • 2019-01-26 22:42:28
  • user382738
  • 738 View
  • 2 Score
  • 2 Answer
  • Tags:   block-editor

0 Answered Questions

Overriding HTML/CSS Classes of "Columns" block from Gutenberg editor

1 Answered Questions

1 Answered Questions

[SOLVED] Gutenberg & Pre-formatted Templates: Core Block Attributes

0 Answered Questions

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

Sponsored Content