How to make an editable WordPress Gutenberg block with Inspector Controls on the sidebar

Eudes
Eudes
May 16, 2018 · 3 min read

The new WordPress editor is coming and we have to deal with it if we want to ship new cool things on the new WordPress editor interface.

Before reading this tutorial, you’ve got to read my other two previous tutorials:

1 — How to make a simple block

2 — How to make an editable block

Great, you’ve read the two tutorials about a simple Gutenberg block and an editable block. Now let’s work on the inspected one.

In this tutorial, we’ll make a link button block with inspector controls to change link, text colour and button colour.

Requirements

We’ll be writing the block using JSX markup, so we need this:

  • NPM/Node

Recipe ingredients

  • The PHP plugin file that will queue and register the JS and the CSS.

PHP part

If you’ve read my first two tutorials, you know the drill.

Setting up the block environment

If you’ve read my first two tutorials, you’ve already set up a block environment to compile your JSX markup.

The block itself

You know that for an editable block, you need to use at least one editable component like RichText. It allows you to add an input to edit whatever data you want to let you user edit.

Now, not only we want to write an editable block, but we want to add controls to the sidebar when the user focus on your block, so you need to make your block inspected whenever the users clicks on it.

You will need the InspectorControls component.

InspectorControls

It’s really simple: everything you add as a child of this component, will be at the sidebar when the user focus on you block:

return (
<InspectorControls>
{/* Whatever is inside this block will be displayed on the sidebar */}
</InspectorControls>
{/* Whatever is outside, will be displayed on the editor as usual */}

)

Let’s then make the edit() function return an array with both regular markup and inspected markup:

return [
<InspectorControls>
{/* Whatever is inside this block will be displayed on the sidebar */}
</InspectorControls>
,
{/* Whatever is here, will be displayed on the editor as usual */}
]

ColorPalette

One more thing, on the sidebar of the inspector controls, we want to add that fancy colour selector. Don’t worry. For that, Gutenberg provides us this component called ColorPalette. You just need to add it with an onChange callback. You’ll see it on the full code.

CSS class in JSX

Another thing is the CSS of the button. Since we’re going to change it’s text and background colour based on user selection, I decided to add the entire CSS class of the button, for the editor side, inside the block code. It gives us a good opportunity to see how to write a CSS class in JSX markup.

Basically, the CSS class is a JS object whose dashes turn into CamelCase. So background-color turns into backgroundColor. Take a look:

button_style = {
backgroundColor: button_color,
color: text_color,
padding: ‘14px 25px’,
textAlign: ‘center’,
textDecoration: ‘none’,
display: ‘inline-block’,
}

Enjoy the full code

The complete plugin code

Go take a look.

Read more

Eudes

Written by

Eudes

Developing and managing web and cloud products for a while. Currently into WebDev, WordPress, Mobile apps and such.. ✅