Extending Gutenberg Core Blocks with Custom Attributes and Controls

Extensibility is one of WordPress features that I love the most. From custom filters to actions, now they are applying the same thing with the new Gutenberg Editor.

It’s pretty great but aside from the WordPress handbook, there are only few tutorials available for Gutenberg development as of the moment. This is the main reason I’ve decided to pitch in and help out with creating tutorials starting from custom attributes and controls. These tutorials are the ones I’ve learned by actively participating on Gutenberg development on Github. I also used these methods on CoBlocks and EditorsKit plugins.

Let’s dig in. 😎

Adding Custom Attributes to Core Gutenberg Blocks

First, let’s add our custom attributes. In this tutorial, we will be using visibleOnMobile custom attributes to add custom CSS mobile-hidden class when it’s set to false.

By using blocks.registerBlockType filter we can extend each block setting, which includes the attributes.

Here’s how you can easily add our custom attribute. 👇

Adding Custom Attributes to Core Gutenberg Blocks

Tweet

Create Custom Controls on Advanced Block Panel

Now that we have registered our custom attributes, we need custom control to handle/change the value. I’ll be using ToggleControl component to easily switch our control on or off.

Using editor.BlockEdit filter, we can modify block’s edit component. It receives the original block via BlockEdit component and returns the new component. Then InspectorAdvancedControls component will help us target the Advanced Block Panel. It’s easier to show than tell. Check my codes below.

Apply Custom Element Class to Gutenberg Blocks

Almost done! All I need to do now is apply our mobile-hidden to the block. I just need to make sure that it will only be added when toggle is off.

blocks.getSaveContent.extraProps filter applies to all blocks returning the element in the save() function. This filter has extraProps attribute that we can use to add custom classNames.

That’s it! I made sure that it’s pretty easy to follow — I hope I achieved that. Now you can just add .mobile-hidden{ display: none } on your frontend css.

Below is the full code with dependencies and filters altogether. I’ve also added allowedBlocks variable so you can check how to apply the custom attributes and control to specific blocks only.

Closing

As you can see, this will open up a lot of possibilities to extend existing Gutenberg blocks. I highly suggest you explore the Gutenberg Handbook for more filters available. I urge you to subscribe to my newsletter too to get notified for new tutorials and news. With that being said, please share the love and do not hesitate to say hi on the comment section.