How to extend blocks in block-editor.js

[tleifj]

Hello,

I'm wondering if it's possible and if you can provide guidance on how to extend blocks within _tw block-editor.js as in the example found here: https://github.com/ndiego/enable-button-icons/blob/main/src/index.js. I understand that block-editor.js uses the global wp rather than importing modules but I can't seem to get it to work.

Thank you for your help!

[gregsullivan]

Hi Travis—Thanks for posting this!

Extending core blocks is beyond the scope of what you're able to do in block-editor.js, which is meant only to be used to extend the block editor using its APIs. So things like this:

// Add drop caps.
wp.blocks.registerBlockStyle('core/paragraph', {
	name: 'drop-caps',
	label: 'Drop Caps',
});

// Remove formats.
wp.richText.unregisterFormatType('core/text-color');
wp.richText.unregisterFormatType('core/image');
wp.richText.unregisterFormatType('core/keyboard');

// Remove core image block.
wp.blocks.unregisterBlockType('core/image');

You could potentially do more involved things like in your example within the theme; depending on your workflow, they may be more suited as part of a plugin. If they were in the theme, you'd likely want them to have their own build process. You can find the one for the example you provided here:

https://github.com/ndiego/enable-button-icons/blob/main/package.json

The key things to note are the added devDependencies and the use of wp-scripts build to build the JavaScript portion of the plugin.

Hope that helps! I'm going to convert this to a discussion, but please let me know if you have any other questions.

[tleifj]

Thanks for clarifying and the quick response. (and for the great starter theme!)