Block registration in Wordpress - Step-by-Step Execution

Concept Flow - Block registration

Define block settings

↓

Call registerBlockType()

↓

WordPress adds block to editor

↓

Block available in editor sidebar

↓

User inserts block in post

↓

Block renders with defined behavior

This flow shows how defining and registering a block makes it available in the WordPress editor for users to insert and use.

Execution Sample

Wordpress

import { registerBlockType } from '@wordpress/blocks';

registerBlockType('myplugin/example', {
  title: 'Example Block',
  edit: () => <p>Hello Editor</p>,
  save: () => <p>Hello Frontend</p>,
});

This code registers a simple block named 'Example Block' that shows text in editor and frontend.

Execution Table

Step	Action	Input/Code	Result	Block State
1	Import registerBlockType	import { registerBlockType } from '@wordpress/blocks';	Function available	No blocks registered
2	Call registerBlockType	registerBlockType('myplugin/example', {...})	Block registered internally	Block 'myplugin/example' added
3	WordPress editor loads blocks	Editor initializes	Block appears in block inserter	Block ready to insert
4	User inserts block	User selects 'Example Block'	Block inserted in editor content	Block instance created
5	Editor renders block	edit() function runs	Displays <p>Hello Editor</p>	Block visible in editor
6	Save post	save() function runs	Outputs <p>Hello Frontend</p>	Block content saved
7	Exit	No more actions	Block fully registered and usable	Stable block state

💡 Block is fully registered and available for use in editor and frontend rendering.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6	Final
blockRegistry	{}	{ 'myplugin/example': {...} }	{ 'myplugin/example': {...} }	{ 'myplugin/example': {...} }	{ 'myplugin/example': {...} }
editorContent	[]	[]	[block instance]	[block instance]	[block instance]

Key Moments - 2 Insights

Why does the block not appear in the editor before calling registerBlockType?

Because registerBlockType adds the block to WordPress's internal registry, only after this call does the editor know about the block (see execution_table step 2 and 3).

What is the difference between edit() and save() functions in block registration?

edit() defines what the block looks like inside the editor, while save() defines the HTML saved and shown on the frontend (see execution_table steps 5 and 6).

Visual Quiz - 3 Questions

Look at the execution table, at which step is the block added to WordPress's internal registry?

A Step 4

B Step 1

C Step 2

D Step 6

💡 Hint

Check the 'Result' column for when 'Block registered internally' happens.

According to the variable tracker, what is the state of editorContent after step 4?

A Array with block instance

B Undefined

C Empty array []

D Null

💡 Hint

Look at editorContent value in variable_tracker after Step 4.

If the save() function returned null, what would happen to the block content on the frontend?

A Block content would show editor content

B Block content would not be saved or rendered

C Block would throw an error

D Block would render default content

💡 Hint

save() defines frontend output; returning null means no content saved (see execution_table step 6).

Concept Snapshot

registerBlockType('namespace/block-name', {
  title: 'Block Title',
  edit: () => JSX for editor,
  save: () => JSX for frontend
});

- Registers a block with WordPress editor
- edit() controls editor display
- save() controls frontend output
- Must call registerBlockType for block to appear

Full Transcript

Block registration in WordPress involves calling the registerBlockType function with a unique name and settings including title, edit, and save functions. This process adds the block to WordPress's internal registry, making it available in the editor's block inserter. When a user inserts the block, the edit function controls how it looks inside the editor, and the save function defines the HTML saved and shown on the frontend. The execution flow starts with importing registerBlockType, then registering the block, loading it in the editor, user inserting it, rendering in editor, saving post, and finally the block is fully usable. Variables like blockRegistry track registered blocks, and editorContent tracks inserted blocks. Key points include understanding when the block is registered and the difference between edit and save functions. The visual quiz tests knowledge of these steps and variable states.