WordPress Block Editor (Gutenberg)
The block editor, also called Gutenberg, is the editor for posts and pages in WordPress. Instead of one big text box, your content is made of blocks. Paragraph, heading, image, list, button, table and video are all blocks.
Parts of the editor
- Top bar: save, preview and publish buttons, and undo or redo.
- Block inserter (the + button): opens the list of all blocks and patterns, with a search box.
- Canvas: the middle area where you write.
- Block toolbar: appears above the selected block and has the options for that block (bold, link, align and others).
- Settings sidebar: two tabs, Post (or Page) settings and Block settings.
- List View: a tree of all blocks of the page, useful for long pages.
Commonly used blocks
| Group | Blocks |
|---|---|
| Text | Paragraph, Heading, List, Quote, Code, Table |
| Media | Image, Gallery, Video, Audio, File |
| Design | Columns, Group, Buttons, Spacer, Separator |
| Widgets | Shortcode, Custom HTML, Latest Posts, Archives |
| Theme | Site Title, Post Title, Query Loop, Navigation |
Type / to add a block fast
In an empty paragraph, type / and a block name, like /image or /heading, and press Enter. Press Ctrl + / (Cmd on Mac) to see all keyboard shortcuts. The command palette opens with Ctrl + K.
Patterns
A pattern is a group of blocks saved as one ready made layout, for example a hero section or a pricing table. Themes bring their own patterns, and you can save your own pattern from any group of blocks. A synced pattern is a pattern used in many places, and a change in it updates everywhere.
How a block is saved
WordPress saves the blocks as normal HTML in the post_content column of the database, with special comments around each block. This is what a paragraph and a heading look like:
$ wp post create –post_title="Block demo" –post_status=draft –post_content='<!– wp:heading –><h2 class="wp-block-heading">Hello</h2><!– /wp:heading –><!– wp:paragraph –><p>This is a block.</p><!– /wp:paragraph –>' –post_date="2026-02-03 09:00:00" –porcelain
5
$ wp post get 5 –field=post_content
<!– wp:heading –><h2 class="wp-block-heading">Hello</h2><!– /wp:heading –><!– wp:paragraph –><p>This is a block.</p><!– /wp:paragraph –>
$ wp eval 'echo count(parse_blocks(get_post(5)->post_content));'
2
$ wp eval 'foreach (parse_blocks(get_post(5)->post_content) as $b) { if ($b["blockName"]) echo $b["blockName"], "\n"; }'
core/heading
core/paragraph
The comments <!-- wp:heading --> tell WordPress which block it is. Because the result is plain HTML, the content still works even if the block editor is disabled.
Classic editor and Custom HTML
Old sites may use the Classic block or the Classic Editor plugin. You can convert them to blocks with one click. For raw HTML you can use the Custom HTML block, and for a shortcode use the Shortcode block.
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |