Block development basics in Wordpress - Step-by-Step Execution

Concept Flow - Block development basics

Start: Define block metadata

↓

Register block with WordPress

↓

Create edit function (block editor UI)

↓

Create save function (front-end output)

↓

Use block in editor

↓

Render block on site

This flow shows how a WordPress block is created by defining metadata, registering it, coding its editor UI, saving output, and then using it.

Execution Sample

Wordpress

wp.blocks.registerBlockType('myplugin/simple-block', {
  title: 'Simple Block',
  edit: () => wp.element.createElement('p', null, 'Hello Editor'),
  save: () => wp.element.createElement('p', null, 'Hello Frontend')
});

This code registers a simple WordPress block that shows 'Hello Editor' in the editor and 'Hello Frontend' on the site.

Execution Table

Step	Action	Evaluation	Result
1	Call registerBlockType with block name and settings	Registers block metadata	Block 'myplugin/simple-block' registered
2	Editor loads block in editor	Calls edit function	Displays <p>Hello Editor</p> in editor
3	User saves content	Calls save function	Saves <p>Hello Frontend</p> as block output
4	Site renders block	Uses saved output	Shows <p>Hello Frontend</p> on site
5	End	No further actions	Block fully functional

💡 Block registered and rendered; no more steps

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
blockName	undefined	'myplugin/simple-block'	'myplugin/simple-block'	'myplugin/simple-block'	'myplugin/simple-block'
editFunction	undefined	function	called, returns <p>Hello Editor</p>	called, returns <p>Hello Editor</p>	function
saveFunction	undefined	function	function	called, returns <p>Hello Frontend</p>	function

Key Moments - 2 Insights

Why does the block show different content in the editor and on the site?

Because the edit function controls what appears in the editor (Step 2), and the save function controls what is saved and shown on the site (Step 3 and 4).

What happens if you forget to register the block?

The block won't appear in the editor or on the site because registration (Step 1) is required to tell WordPress about the block.

Visual Quiz - 3 Questions

Look at the execution table, what does the edit function return at Step 2?

A undefined

B <p>Hello Frontend</p>

C <p>Hello Editor</p>

D Block metadata

💡 Hint

Check the 'Result' column at Step 2 in the execution_table

At which step is the block metadata registered?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Action' column for registration in the execution_table

If the save function returned <p>Goodbye</p> instead, what would change in the execution table?

A Step 2 'Result' would change

B Step 3 and 4 'Result' would show <p>Goodbye</p>

C Step 1 'Result' would change

D No changes in the table

💡 Hint

Check what save function returns at Steps 3 and 4 in the execution_table

Concept Snapshot

WordPress block basics:
- Use wp.blocks.registerBlockType(name, {edit, save})
- edit() shows block in editor
- save() outputs block on site
- Register block before use
- Editor and frontend can differ

Full Transcript

This lesson shows how to create a basic WordPress block. First, you register the block with a unique name and provide metadata. Then you write an edit function that controls what the block looks like inside the editor. Next, you write a save function that controls what HTML is saved and shown on the live site. When you use the block in the editor, WordPress calls the edit function to display it. When you save and view the site, WordPress uses the save function output. This flow ensures blocks behave correctly in both editor and frontend environments.