Block attributes and controls in Wordpress - Step-by-Step Execution

Concept Flow - Block attributes and controls

Define block attributes

↓

Render block editor UI

↓

User changes control input

↓

Update attribute value

↓

Re-render block with new attribute

↓

Save block content with attributes

This flow shows how block attributes are defined, controlled by UI inputs, updated on user interaction, and saved with the block.

Execution Sample

Wordpress

registerBlockType('my/block', {
  attributes: { content: { type: 'string' } },
  edit({ attributes, setAttributes }) {
    return <input value={attributes.content} onChange={e => setAttributes({ content: e.target.value })} />;
  },
  save({ attributes }) {
    return <p>{attributes.content}</p>;
  }
});

This code registers a block with a string attribute 'content' controlled by an input field in the editor.

Execution Table

Step	Action	Attribute 'content' Value	UI Control Value	Rendered Output
1	Block loads with default attribute	'' (empty string)	'' (empty input)	<input value=''>
2	User types 'Hello'	'Hello'	'Hello'	<input value='Hello'>
3	Block re-renders with updated attribute	'Hello'	'Hello'	<input value='Hello'>
4	User changes input to 'Hello World'	'Hello World'	'Hello World'	<input value='Hello World'>
5	Block re-renders with new attribute	'Hello World'	'Hello World'	<input value='Hello World'>
6	Block saved with attribute 'Hello World'	'Hello World'	N/A	<p>Hello World</p>

💡 User finishes editing; block saves content attribute as 'Hello World'.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
attributes.content	''	'Hello'	'Hello World'	'Hello World'
UI input value	''	'Hello'	'Hello World'	N/A (saved)

Key Moments - 2 Insights

Why does the input field show the updated text immediately after typing?

Because the onChange event calls setAttributes to update the attribute, triggering a re-render with the new value as shown in steps 2 and 3 of the execution table.

What happens if you don't update the attribute on input change?

The input would not reflect user typing changes because the attribute value stays the same, so the block won't re-render with new content. See step 1 vs step 2 for contrast.

Visual Quiz - 3 Questions

Look at the execution table, what is the attribute 'content' value after step 4?

A 'Hello World'

B 'Hello'

C '' (empty string)

D N/A

💡 Hint

Check the 'Attribute content Value' column at step 4 in the execution table.

At which step does the block save the content attribute?

A Step 3

B Step 2

C Step 6

D Step 5

💡 Hint

Look for the row mentioning 'Block saved' in the execution table.

If the onChange handler did not call setAttributes, how would the UI control value change after typing?

A It would stay empty

B It would show previous attribute value

C It would update normally

D It would cause an error

💡 Hint

Refer to the key moment about attribute update and UI reflection.

Concept Snapshot

Block attributes hold data for blocks.
Controls let users change attributes.
Changing controls updates attributes.
Attributes update triggers re-render.
Saved content uses attribute values.

Full Transcript

In WordPress block development, blocks have attributes that store data. Controls in the editor let users change these attributes. When a user types in a control like an input box, the onChange event updates the attribute using setAttributes. This triggers the block to re-render with the new attribute value, so the UI stays in sync. Finally, when saving, the block outputs content based on the attribute values. This flow ensures user input is captured and saved correctly.