Gutenberg Dev Tip: Move Your Components to the Editor Module
One of the great parts about Gutenberg blocks is the ability to pick and choose which components from the core editor to integrate into your block. For example, if you wanted to add a media upload button or alignment toolbar to your block, you could use the components already found in the new editor by declaring support for them. There’s no need to write your own! Using the built-in components will be easier to maintain and provides a cohesive UI across all blocks.
Here are the components you can currently utilize in your blocks:
- Autocomplete
- BlockAlignmentToolbar
- BlockControls
- BlockFormatControls
- BlockEdit
- BlockIcon
- ColorPalette
- ContrastChecker
- ImagePlaceholder
- InnerBlocks
- InspectorControls
- InspectorAdvancedControls
- PlainText
- MediaUpload
- RichText
- RichTextProvider
- UrlInput
- UrlInputButton
Up until now, these reusable components were defined within the wp.blocks module, but this proved to have several drawbacks, as outlined in this Github issue. In Gutenberg 2.9, the block components have been moved to the wp.editor module.
Gutenberg will still support blocks defined in the blocks module until version 3.1. After that, you will need to move your block components if you want them to work properly. I’ve found that some of my custom blocks didn’t work properly after the 2.9.2 update, so I would encourage updating your blocks as soon as possible.
How to update your blocks to wp.editor
Luckily, updating is really easy! You simply need to create a new module and put the components in it. Previously, your component setup looked something like this:
// Register block type and editor components
const {
registerBlockType,
RichText,
BlockControls,
BlockAlignmentToolbar,
MediaUpload,
} = wp.blocks;
Notice how the components are defined within the wp.blocks module. Let’s create a new wp.editor module and move those components over.
// Register block type
const { registerBlockType } = wp.blocks;
// Register editor components
const {
RichText,
BlockControls,
BlockAlignmentToolbar,
MediaUpload,
} = wp.editor;
Notice how we didn’t move everything to the new module. We still have registerBlockType in wp.blocks where it belongs. Refer to the component list above to know which blocks to migrate to wp.editor. That’s all it takes to update your block! Make sure you make this change for every block that has these components defined.
Keeping up with these kinds of changes can be dizzying in this Gutenberg development phase, but it’s important to keep your blocks up to date. The errors thrown when a block breaks aren’t pretty and can prevent your users from seeing their content. We’ll continue to publish little tricks and tips here, but you can also check out Gutenberg News to keep up with articles from other developers as well.
