Gutenberg block editor basics in Wordpress - Step-by-Step Execution

Concept Flow - Gutenberg block editor basics

Open Post/Page Editor

↓

Click + to Add Block

↓

Select Block Type

↓

Block Inserted in Content

↓

Edit Block Content

↓

Save or Publish Post/Page

This flow shows how you open the editor, add a block, edit it, and save your content.

Execution Sample

Wordpress

1. Click '+' button
2. Choose 'Paragraph' block
3. Type text inside block
4. Click 'Save' button

This sequence adds a paragraph block, types text, and saves the post.

Execution Table

Step	Action	Editor State	Block Added/Edited	Result
1	Open editor	Empty content or existing content loaded	No block added yet	Editor ready for editing
2	Click '+' to add block	Shows block inserter panel	No block added yet	Block inserter visible
3	Select 'Paragraph' block	Block inserter closes	Paragraph block inserted at cursor	Blank paragraph block appears
4	Type 'Hello World!'	Paragraph block content updated	Paragraph block text set	Text visible inside block
5	Click 'Save'	Content saved to database	All blocks saved	Post updated with new content
6	Exit editor	Editor closes	Content remains saved	Post ready for viewing

💡 User finishes editing and saves content, editor closes

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	Final
Content	""	"<p></p>"	"<p>Hello World!</p>"	"<p>Hello World!</p>"	"<p>Hello World!</p>"
Block Inserter Visible	false	true	false	false	false
Editor Open	true	true	true	true	false

Key Moments - 3 Insights

Why does the block inserter panel close after selecting a block?

After selecting a block (see Step 3 in execution_table), the inserter closes to show the block inserted in the content area for editing.

What happens if you type text before adding a block?

You cannot type text before adding a block because the editor requires a block to hold content. See Step 3 and 4 where the paragraph block is inserted first.

Does saving immediately publish the post?

Saving updates the post content but does not necessarily publish it. Publishing is a separate action. Step 5 shows content saved, but publishing depends on post status.

Visual Quiz - 3 Questions

Look at the execution_table, what is the editor state after Step 2?

A Paragraph block inserted

B Block inserter panel is visible

C Content saved to database

D Editor closed

💡 Hint

Check the 'Editor State' column for Step 2 in execution_table

At which step does the paragraph block get inserted into the content?

A Step 4

B Step 1

C Step 3

D Step 5

💡 Hint

Look at the 'Block Added/Edited' column in execution_table

If you typed text before adding a block, how would the variable 'Content' change after Step 3?

A It would remain empty

B It would contain the typed text

C It would contain a blank paragraph block

D It would cause an error

💡 Hint

Refer to key_moments about typing text before adding a block and variable_tracker for 'Content'

Concept Snapshot

Gutenberg block editor basics:
- Click '+' to add a block
- Choose block type (e.g., Paragraph)
- Edit block content directly
- Save or publish your post
Blocks are content containers making editing flexible and visual.

Full Transcript

The Gutenberg block editor lets you build content by adding blocks. First, you open the editor for a post or page. Then you click the plus button to open the block inserter panel. You select a block type, like a paragraph, which inserts a blank block into your content. You type your text inside this block. When done, you click save to store your changes. The editor closes when you exit, keeping your content safe. Blocks help organize content visually and make editing easier.