Skip to content
pinegrow.com
Docs menuWordPress
WordPress

Adding attributes and controls

Updated

Attributes are editable properties of a block. Editable attributes make blocks much more useful, because we can use the same block type with different content.

On this page

Our About me block will have editable title, description, image and the button (we will take care of the counters in the next part).

Title

To make the heading editable, select the <h3> element and add Block Attributes action: 

Pinegrow About Me heading selected, with Block Attributes - Smart listed under Blocks Smart Actions and a callout to add it.

Each attribute needs an id, such as title. Attribute id needs to be unique within its block.

WordPress Actions for an h3 heading with Block Attribute 1 set to attribute id title and Use as Content.

Next, we set how the attribute is used on the selected element. Will it set the element inner content, add a class, set a style, element attribute…?

Use as dropdown open for a block attribute, listing Content, Image, Background image, Link, Style, Attribute and Class.

For the title attribute we will select Content. The attribute value will replace the inner content of the <h3> element.

Title is a human readable name of the attribute.

What to do if the attribute value is not set?

Attribute options let us further customize the attribute.

Attribute Options with the If empty dropdown open, offering Use default value or Remove the element.

We have two options: use the default value or remove the element from the output.

Default values are taken from the source HTML element. For example, if the attribute is used as the element content, its default value will be the element content found in the source HTML. In this case we will leave the setting as it is and use the default value.

Description

To make the description editable, select the <p> element and add Block Attributes action with the id description. Here we will set the control type to Rich text, so that we can format the text if needed.

Control type dropdown for a paragraph description attribute, with Rich Text checked among Auto, Input, Textarea, Select and Toggle.

Image

To make the image editable, we select the <img> element and add the Block Attributes action. The attribute will be used as the value of src attribute and image selector control will be displayed in the sidebar.

Image element selected in the About Me block, with Block Attribute 1 set to attribute id image and Use as Image.

Button

Then select the button <a> and add Block Attributes action. Select Use as “Link” to make the href editable:

Button selected in the About Me block, with Block Attribute 1 set to more_link, Use as Link and title Learn more link.

Let’s also make the label editable. Click on the Add attribute button on the Block Attributes action to add another editable attribute to the selected element:

Block Attribute 1 for more_link set as Link, with the Add attribute button and a callout to add another editable attribute.

Here, we will make the Content editable:

Button element with two block attributes, more_link used as Link and more_label used as Content, with a callout explaining both.

The block is now editable!

Export the project and reload the Block editor.

Now we can edit the title and description directly on the block, and customize all its properties in the sidebar.

WordPress block editor on the Front Page showing the surfing heading and text, with a callout to edit texts on the page view.

Learn more about Block Attributes action.

Next step

We need to make the counters editable as well. We could use a fixed number of counters and make their numbers and descriptions editable with attributes such as Counter number 1, Counter label 1, Counter number 2…

But, we have a much better solution: nested blocks.

Next step: Adding inner blocks (blocks within the block).