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.

Practice

1. What is the main purpose of registerBlockType in WordPress block development?

easy

A. To add a new custom block to the WordPress editor

B. To register a new theme for WordPress

C. To create a new user role in WordPress

D. To install a plugin automatically

Solution

1. Step 1: Understand the role of registerBlockType

   This function is used specifically to add custom blocks to the WordPress block editor.

2. Step 2: Compare with other WordPress features

   Registering themes, user roles, or plugins are done by different functions, not registerBlockType.

3. Final Answer:

   To add a new custom block to the WordPress editor -> Option A

4. Quick Check:

   Block registration = add custom block [OK]

Hint: Remember: registerBlockType = add custom block [OK]

Common Mistakes:

• Confusing block registration with theme or plugin registration
• Thinking it creates user roles
• Assuming it installs plugins automatically

2. Which of the following is the correct way to start registering a block named "myplugin/example" in JavaScript?

easy

A. registerBlockType('myplugin_example', { edit: () => {}, save: () => {} });

B. registerBlock('myplugin/example', { edit: () => {}, save: () => {} });

C. registerBlockType('myplugin/example', { edit: () => {}, save: () => {} });

D. registerBlockType('myplugin/example');

Solution

1. Step 1: Identify the correct function name and parameters

   The correct function is registerBlockType and it requires a unique block name and an object with edit and save functions.

2. Step 2: Check the block name format and object completeness

   The block name must be a string with a namespace and name separated by a slash, like 'myplugin/example'. The object must include both edit and save functions.

3. Final Answer:

   registerBlockType('myplugin/example', { edit: () => {}, save: () => {} }); -> Option C

4. Quick Check:

   Correct function and full object = registerBlockType('myplugin/example', { edit: () => {}, save: () => {} }); [OK]

Hint: Use registerBlockType with namespace/name and edit/save [OK]

Common Mistakes:

• Using registerBlock instead of registerBlockType
• Using underscore instead of slash in block name
• Omitting edit or save functions

3. Given this block registration code snippet, what will be the saved content output in the post?

registerBlockType('myplugin/simple', {
  edit: () => {
    return wp.element.createElement('p', null, 'Hello Editor');
  },
  save: () => {
    return wp.element.createElement('p', null, 'Hello Saved');
  }
});

medium

A. <p>Hello Editor</p>

B. <p>Hello Saved</p>

C. Hello Editor

D. Hello Saved

Solution

1. Step 1: Understand the difference between edit and save functions

   The edit function controls what the editor shows while editing. The save function controls what HTML is saved and shown on the front end.

2. Step 2: Identify the saved output

   The save function returns a paragraph with text 'Hello Saved', so this is the content saved in the post and shown to visitors.

3. Final Answer:

   <p>Hello Saved</p> -> Option B

4. Quick Check:

   Saved content = save() output = <p>Hello Saved</p> [OK]

Hint: Remember: save() output is what visitors see [OK]

Common Mistakes:

• Confusing edit() output with saved content
• Ignoring that save() returns HTML elements
• Assuming edit() content is saved

4. Identify the error in this block registration code:

registerBlockType('myplugin/test', {
  edit() {
    return <p>Edit Block</p>
  },
  save() {
    return <p>Save Block</p>
  }
});

medium

A. JSX syntax used without React or Babel setup

B. Block name missing namespace

C. Missing semicolons after return statements

D. edit and save functions must be arrow functions

Solution

1. Step 1: Check the syntax used in edit and save functions

   The code uses JSX syntax like <p>Edit Block</p> directly, which requires React and Babel setup to compile.

2. Step 2: Identify environment requirements

   If JSX is used without proper setup, this code will cause syntax errors. The code should use wp.element.createElement or have JSX compiled.

3. Final Answer:

   JSX syntax used without React or Babel setup -> Option A

4. Quick Check:

   JSX needs compilation = JSX syntax used without React or Babel setup [OK]

Hint: JSX needs React/Babel; otherwise use createElement [OK]

Common Mistakes:

• Assuming JSX works without setup
• Thinking semicolons are mandatory after return
• Believing edit/save must be arrow functions

5. You want to register a block that shows a list of items passed as an attribute and saves them as a comma-separated string. Which approach correctly registers this block?

hard

A. Store the list as a string attribute, use edit to split it into an array, and save to output the array directly.

B. Store the list as an object attribute, use edit to convert it to string, and save to output JSON.

C. Use no attributes, hardcode the list in save, and ignore edit.

D. Use attributes to store an array, edit to update it, and save to join array into a string inside a <p> tag.

Solution

1. Step 1: Define attributes properly for data handling

   To handle a list, store it as an array attribute so it can be easily manipulated in edit.

2. Step 2: Implement edit and save functions correctly

   edit updates the array attribute. save joins the array into a comma-separated string inside a paragraph tag for saving as HTML.

3. Final Answer:

   Use attributes to store array, edit to update, save to join as string -> Option D

4. Quick Check:

   Array attribute + join in save = Use attributes to store an array, edit to update it, and save to join array into a string inside a <p> tag. [OK]

Hint: Store list as array attribute, join in save() output [OK]

Common Mistakes:

• Storing list as string and trying to output array directly
• Ignoring attributes and hardcoding data
• Saving data as JSON instead of HTML