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.
Our About me block will have editable title, description, image and the button (we will take care of the counters in the next part).
To make the heading editable, select the
<h3> element and add Block Attributes action:
Each attribute needs an id, such as
title. Attribute id needs to be unique within its block.
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…?
For the title attribute we will select Content. The attribute value will replace the inner content of the
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.
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.
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.
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.
Then select the button
<a> and add Block Attributes action. Select Use as “Link” to make the href editable:
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:
Here, we will make the Content editable:
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.
Learn more about Block Attributes action.
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).