Extending Gutenberg Core Blocks with Custom Attributes and Controls

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

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.

Mobile devices visibility toggle control

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.

  1. Would be great if this was also an example is ES5 (not ESNext) Not everyone is Reactive Native capable, and I was hoping to just copy/paste this into a JS file, but it generates and error.

    1. Thanks John! I’m planning to create one actually. I’ve got few requests on ES5 article. I’m just finishing up new features for EditorsKit and will get back to it 😉

Leave a Reply

Your email address will not be published. Required fields are marked *

Up Next:

Block Options is now EditorsKit

Block Options is now EditorsKit