L2.1 – Using the Block Editor (Gutenberg)
Module : 02 – Creating Website Content
Lesson < : Lesson 1.10 — Understanding Categories and Tags
Lesson > : Lesson 2.2 — Using Block Patterns and Layouts
Table of Contents
- What Is the Block Editor?
- Understanding Blocks
- The Block Toolbar
- The Settings Sidebar
- Adding Blocks
- Editing and Moving Blocks
- Reusable Blocks (Overview)
- Summary
1. What Is the Block Editor?
The Block Editor, also known as Gutenberg, is WordPress’s visual editing interface used to create and format content. Instead of using a traditional text editor, the Block Editor allows you to build pages and posts using individual content units called blocks.
This approach makes it easier to design structured, modern content layouts without needing technical skills.
2. Understanding Blocks
Blocks are the fundamental building elements of the editor. Each block serves a specific purpose and can be arranged or styled independently.
Common Block Types
- Paragraph
- Heading
- Image
- Gallery
- List
- Quote
- Button
- Columns
- Separator
Each block includes formatting controls tailored to its purpose.
3. The Block Toolbar
The Block Toolbar appears above the selected block and provides contextual editing options. The toolbar changes depending on the type of block being edited.
- Text alignment controls
- Bold and italic formatting
- Link insertion
- Block transformation (change block type)
- Move block up or down
Understanding the toolbar helps you quickly adjust formatting without navigating menus.
4. The Settings Sidebar
The settings sidebar contains block-level and document-level options. It appears on the right side of the editor.
Document Settings
- Categories
- Tags
- Featured image
- Permalink
- Discussion settings
Block Settings
- Typography options
- Color settings
- Spacing and margins
- Block-specific settings such as image size
These settings provide fine control over styling and structure.
5. Adding Blocks
Blocks can be added in several ways:
- Click the “Add Block” button (plus icon)
- Use the slash command (e.g., /paragraph)
- Press Enter to create a new default block
Searching for blocks by name speeds up the workflow.
6. Editing and Moving Blocks
You can easily edit, rearrange, or remove blocks as needed. The block editor is designed to make page layout flexible.
- Drag and drop blocks into new positions
- Use arrow icons to move blocks up or down
- Duplicate blocks for repeated layouts
- Remove blocks using the block menu
These controls make it simple to reorganize your content layout without affecting the rest of the page.
7. Reusable Blocks (Overview)
Reusable blocks allow you to save blocks or groups of blocks that can be inserted across multiple posts or pages. When updated, changes appear everywhere the reusable block is used.
- Useful for call-to-action sections
- Good for repeating design elements
- Helpful for multi-page consistency
Reusable blocks support efficient content creation and consistent branding.
8. Summary
- The Block Editor is the main tool for creating content in WordPress
- Blocks are individual content elements such as text, images, and buttons
- The Block Toolbar provides context-specific formatting controls
- The Settings Sidebar includes both document and block settings
- Blocks can be added, edited, moved, and removed easily
- Reusable blocks provide efficiency for repeated content