Customizing a Block

The heading block displays a hard coded message on the editor as well as on the frontend screen. This lesson shows how to add custom content for the heading and style it. Before we delve into the lesson, let’s discuss some terminology.

Attributes

Attributes are essentially the properties or values that define the behavior and appearance of a block. Attributes help us manage our data. We can store data, update it, and show it to our users.

Attributes are defined as an object when registering block types. Every attribute has a name and a type. In addition, we can specify a default value. Attributes are essentially all the properties that we want to save for the block for example the content, font size, color etc for the heading block. We will add attributes to the block.json file.

Open the block.json in the heading folder. It contains a property called attributes, which is an object. We will nest other objects inside that represent each attribute. Let’s create an attribute called headingText. This is an object which contains the mandatory property type and optional properties named default, source, etc.