WordPress 建站指南 Gutenberg Blocks Practical Guide

My real experience: I once built a site for a client who initially demanded I install Elementor Pro. After two hours demonstrating the built-in Blocks functionality, he admitted "maybe WordPress comes with enough after all." This experience made me reconsider Gutenberg — it really is evolving, but too many people haven't caught up.

Why Built-in Blocks Are Already Enough

I have seen too many people install page builder plugins in their WordPress dashboard, only to have everything break after a single update.

The truth is, the built-in Gutenberg editor in WordPress 6.x is already quite capable. Media Blocks handle images and videos, Text Blocks write content, Design Blocks create layouts, Embed Blocks embed external content, and Widget Blocks manage sidebars — these five categories cover 90% of my daily editing needs.

This guide is based on WordPress 6.9.4 (the latest stable release as of April 2026) and official documentation (wordpress.org/documentation). It covers the core usage and pitfalls for each Block category.

Media Blocks: Images and Videos

Image Block

The most fundamental way to insert images. After uploading, you can:

• Crop (click the image → select ratio like 16:9)
• Add captions (caption area below)
• Add alt text (Alt Text field in the right sidebar, important for SEO)

Pitfall: WordPress 6.x Image Block already supports WebP format, but if you are using an older theme, uploading WebP might display as blank. Solution: Add to wp-config.php:

define('ALLOW_UNFILTERED_UPLOADS', true);

Or use an Image Optimization plugin.

Gallery Block

Multi-image grid display. After inserting, you can switch between 3 layouts: Tiled, Stacked, and Grid. Grid layout supports column count (1-8 columns).

Cover Block

Full-width background image with overlaid text. This previously required a separate plugin. Pro tip: After uploading the background image, the right sidebar has a "Fixed Background" option — checking it creates a parallax effect where the image stays fixed during scrolling.

Video Block

Upload MP4 directly or embed via URL. Important: If self-hosting videos, compress them first (HandBrake free tool can compress 1GB video to 50MB), otherwise page load speed will suffer.

Media & Text Block

Classic left-image/right-text or left-text/right-image layout. Much cleaner than using Table Block for layout. Pro tip: On mobile, it automatically switches to top-bottom layout with no extra configuration needed.

Text Blocks: Content Body

Paragraph Block

The most commonly used block. Right sidebar settings: text color, background color, font size (Large/Normal/Small/Custom). Gutenberg's inline spacing is much better than Classic Editor era.

Heading Block

H1-H6 hierarchy. Pro tip: Select a heading and use shortcuts Alt+1 to Alt+6 to quickly switch levels, no need to click the toolbar every time.

List Block

Ordered and unordered lists. Gutenberg supports nested lists — Tab for children, Enter to continue at parent level.

Blockquote Block

Quote styling. Three styles available (default/solid left border/large text). Right sidebar can fill in quote source URL.

Code Block

Code syntax highlighting. Language selected in the right sidebar (60+ languages supported). Pro tip: WordPress 6.x code block uses Prism.js, highlighting is much better than plain pre tags in Classic Editor.

Preformatted Block

Preserve exact formatting. Good for ASCII art or scenarios requiring precise whitespace.

Table Block

Insert tables. Gutenberg Table functionality is relatively basic: can only set row/column count, cannot merge cells. For complex tables, use TablePress plugin or HTML directly. Pro tip: Tables have a "Fixed Header" option — checking it keeps the header fixed when scrolling long tables.

Design Blocks: Layout Tools

Group Block

Bundle multiple Blocks together, apply unified background color, padding, etc. Practical use: add background color or border to an entire content section without setting each child block individually.

Row Block

Arrange child elements horizontally. Pairs with Columns for complex multi-column layouts.

Columns Block

The most used layout tool. After inserting, select column count (2-6 columns), each column can continue inserting any blocks. Pro tip: If you find a column height does not align with others, go to that column's Group Block settings and change "Stack Alignment" to "Top Alignment".

Stack Block

Vertical arrangement with uniform spacing control. Much easier than manually adjusting Paragraph spacing.

Buttons Block

Insert button groups. Can set multiple buttons (side-by-side or stacked), each button independently sets link, style (solid/outline), and color.

Separator Block

Divider lines. Boring but useful. Three styles: horizontal line, dotted line, and whitespace.

Embed Blocks: External Content

YouTube/Vimeo Embed

Paste a YouTube or Vimeo URL directly on a line, WordPress auto-converts to embed block. Pro tip: If the video has age restrictions or regional restrictions, the embed will show blank and cannot play. Solution: Use the Video block with self-hosted video file instead.

Twitter/X Embed

Paste tweet link to auto-embed. After 2024, Twitter embeds have CORS issues — on domestic servers it may fail to load. If you need to embed tweets, screenshot and use Image Block instead.

Instagram Embed

Same as above, paste link to embed. But Instagram embeds frequently fail to load on domestic servers (requires access to instagram.com).

Common Embed Block Settings

All embed blocks have in the right sidebar:

• **Caption**: Add descriptive text
• **Edit as HTML**: Switch to raw HTML for modification
• **Resizable**: Adjust width

Important Note: Embed blocks are essentially iframes, they affect page load speed. If embedding multiple YouTube videos, use "lazy load" setting (⋮ menu top-right → Show nested context) or consider using cover image with custom link instead.

Widget Blocks: Sidebar Tools

Search Block

Site search. Clean appearance but limited functionality (only searches article titles, not full site content). For more powerful search, recommend SearchWP plugin.

Calendar Block

Display article publishing calendar. Useful but appearance has not changed in years, suitable for personal blog display.

Tag Cloud Block

Tag cloud. Set display count and grouping (by tag or category).

RSS Block

Aggregate content from other websites. Fill in RSS feed URL to auto-fetch. Pitfall: RSS feed must have complete item description fields, otherwise displays blank. Some websites (especially Chinese sites) have incomplete RSS feeds — this block will not work for them.

Navigation Block

Create site navigation menu. If your theme supports block-based navigation, this block is much more flexible than the traditional menu system.

My Practical Workflow

For every page I write, I follow this order:

1. Columns to determine overall layout (2-column or 3-column)

2. Cover for page top banner (one good image is worth a thousand words)

3. Group to package related content

4. Media & Text for product/service introduction sections

5. Image with captions for text-image mix

6. Buttons at the end for CTA

This workflow lets me build a professional-looking page in under 30 minutes without any additional plugins.

Who This Is For

Scenarios where WordPress built-in Blocks work well:

• Blog posts and simple pages
• Personal portfolio
• Small business websites (no complex interactions needed)
• Users who value stability and maintainability (fewer plugins = fewer updates = fewer bugs)

Scenarios where it is NOT suitable:

• Complex e-commerce pages (requires WooCommerce custom filters)
• High-interaction landing pages (use professional tools instead)
• Complex tables or data visualization (use TablePress/DataTables/Notion embed)

Summary

WordPress Gutenberg's five categories of built-in Blocks (Media/Text/Design/Embed/Widget) cover the vast majority of content editing needs. Once you are familiar with these blocks, you do not need to learn the complex interfaces of Elementor or Divi just to build a simple page.

The key is: first understand each block's applicable scenario, then use Columns/Group for layout skeleton, Media/Text to fill content, Embed/Widget to add external features and sidebar widgets. This approach is much clearer than installing a bunch of plugins.

👉 If you are using WordPress for website building and care about content publishing efficiency, AI automation can help you batch generate drafts: Learn more about MiniMax

For deeper WordPress development, recommended reading: WordPress Plugin Development

---