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.

Practice

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

easy

A. To create reusable content pieces that users can add visually

B. To write PHP code for custom themes

C. To manage user roles and permissions

D. To optimize database queries

Solution

1. Step 1: Understand the role of blocks in WordPress

   Blocks are designed to let users add content pieces easily without coding each time.

2. Step 2: Identify the main benefit of blocks

   Blocks are reusable and visually manageable content units improving editing experience.

3. Final Answer:

   To create reusable content pieces that users can add visually -> Option A

4. Quick Check:

   Blocks = reusable visual content [OK]

Hint: Blocks are for reusable visual content pieces [OK]

Common Mistakes:

• Confusing blocks with PHP theme coding
• Thinking blocks manage users or database
• Assuming blocks are only for styling

2. Which function is used to register a new block type in WordPress block development?

easy

A. createBlockType()

B. initBlock()

C. addBlock()

D. registerBlockType()

Solution

1. Step 1: Recall the standard WordPress block registration function

   The official function to register blocks is registerBlockType.

2. Step 2: Verify other options are incorrect

   Functions like createBlockType, addBlock, and initBlock do not exist in WordPress block API.

3. Final Answer:

   registerBlockType() -> Option D

4. Quick Check:

   Register blocks = registerBlockType() [OK]

Hint: Remember: registerBlockType() registers blocks [OK]

Common Mistakes:

• Using createBlockType() which is not a WordPress function
• Confusing with addBlock() or initBlock() which don't exist
• Misspelling the function name

3. Given this block registration code snippet, what will the block display in the editor?

registerBlockType('myplugin/example', {
  edit: () => {
    return 
Hello, WordPress!
;
  },
  save: () => {
    return 
Hello, WordPress!
;
  }
});

medium

A. A paragraph with text 'Hello, WordPress!' in both editor and saved content

B. An empty block with no content

C. A syntax error preventing block registration

D. A block showing 'edit' text only

Solution

1. Step 1: Analyze the edit function output

   The edit function returns a paragraph with 'Hello, WordPress!' which shows in the editor.

2. Step 2: Analyze the save function output

   The save function returns the same paragraph, so saved content also shows 'Hello, WordPress!'.

3. Final Answer:

   A paragraph with text 'Hello, WordPress!' in both editor and saved content -> Option A

4. Quick Check:

   Edit and save return same paragraph = A paragraph with text 'Hello, WordPress!' in both editor and saved content [OK]

Hint: Edit and save return same JSX content means same display [OK]

Common Mistakes:

• Thinking edit content differs from saved content
• Assuming syntax error due to JSX
• Confusing block output with empty or error

4. Identify the error in this block registration code:

registerBlockType('myplugin/test', {
  edit: () => {
    return 
Test Block
;
  },
  save: () => {
    return div>Test Block;
  }
});

medium

A. edit function missing return statement

B. Missing opening < in save function JSX

C. registerBlockType function name is incorrect

D. Block name 'myplugin/test' is invalid

Solution

1. Step 1: Check the save function JSX syntax

   The save function returns div>Test Block; which is missing the opening < for the div tag.

2. Step 2: Verify other parts are correct

   The edit function correctly returns JSX with <div>, the function name is correct, and block name format is valid.

3. Final Answer:

   Missing opening < in save function JSX -> Option B

4. Quick Check:

   JSX tags must start with < [OK]

Hint: Check JSX tags start with < and end with > [OK]

Common Mistakes:

• Ignoring missing < in JSX tags
• Thinking function names or block names are wrong
• Overlooking return statements

5. You want to create a block that shows a dynamic greeting with a user name passed as an attribute. Which approach correctly uses attributes in block development?

hard

A. Hardcode the user name inside the save function JSX

B. Use a global variable for the name inside edit and save functions

C. Define attributes in registerBlockType and use props.attributes.name in edit and save

D. Only define attributes in edit function, ignore save function

Solution

1. Step 1: Understand attribute usage in blocks

   Attributes must be declared in registerBlockType and accessed via props.attributes in both edit and save functions.

2. Step 2: Evaluate other options

   Using global variables or hardcoding breaks reusability and dynamic behavior; ignoring attributes in save causes data loss.

3. Final Answer:

   Define attributes in registerBlockType and use props.attributes.name in edit and save -> Option C

4. Quick Check:

   Attributes declared and used properly = Define attributes in registerBlockType and use props.attributes.name in edit and save [OK]

Hint: Declare and use attributes via props in edit and save [OK]

Common Mistakes:

• Using global variables instead of attributes
• Hardcoding values losing flexibility
• Not using attributes in save function