WordPress block editor (Gutenberg) guide for beginners

Gutenberg has come a long way since its rocky 2018 launch. In 2025, it's capable enough for most websites without needing a page builder. Here is everything you need to use it confidently — and the honest limitations that still exist.

What is Gutenberg?

Gutenberg is the block-based editor built into WordPress since version 5.0. Instead of writing in a plain text field, you build pages by adding "blocks" — each block is a content element (paragraph, image, video, button, column, etc.).

Older WordPress users remember the "Classic Editor" with a text area and toolbar. Gutenberg replaced that. The Classic Editor plugin restores the old interface, but using it is increasingly fighting against WordPress's direction.

The basic interface

When you create or edit a post or page:

• Left sidebar: settings for the entire document or selected block
• Center: your page canvas — click to place the cursor, type or use the block inserter
• Top toolbar: save, preview, undo/redo, and access to all editor settings

To add a block: click the + button or press / on an empty line to search for a block.

Essential blocks

Text blocks:

• Paragraph: default text block. Click anywhere and start typing.
• Heading: H1–H6 headings. Use H2 for main sections, H3 for sub-sections.
• List: bullet or numbered lists.
• Quote: styled blockquote with optional attribution.
• Code: monospace code block for code snippets.

Media blocks:

• Image: upload, select from Media Library, or enter a URL.
• Gallery: multi-image grid with lightbox support.
• Video: uploaded video or YouTube/Vimeo embed.
• Audio: for podcasts or audio files.

Layout blocks:

• Columns: divide the page into 2, 3, or 4 columns. Put any block inside each column.
• Group: wrap blocks together for styling or background colour.
• Cover: image with overlaid text (ideal for hero sections).
• Row and Stack: horizontal or vertical Flexbox-based layouts.

Widget blocks:

• Button: call-to-action link styled as a button.
• Table: create tables without HTML.
• Search: search bar for your site.
• Shortcode: embed classic widget shortcodes if needed.

Block settings

Click any block to select it. The settings panel on the right shows:

• Block tab: settings specific to that block (colour, font size, spacing)
• Styles tab: alternative visual styles for the block (some blocks have multiple presets)

Every block has a toolbar that appears above it:

• Drag handle (six dots)
• Change block type
• Bold, italic, link (for text blocks)
• Alignment
• More options (move up/down, duplicate, delete)

Keyboard shortcuts (saves significant time)

Reusable blocks (now called Patterns)

If you use the same content in multiple places — a call-to-action section, a testimonial, a contact banner — save it as a reusable block:

1. Select the block (or group of blocks)
2. Click the three-dot menu in the toolbar
3. Create Pattern (or "Add to Reusable Blocks" in older versions)
4. Name it and save

Now you can insert this pattern on any page. When you update the source pattern, it updates everywhere it appears.

Find your saved patterns in the block inserter → Patterns tab.

Full Site Editing (FSE)

If your theme supports Full Site Editing (FSE), you can edit every part of your site — header, footer, sidebar, archive templates, single post template — using the same block editor.

Themes that support FSE: Twenty Twenty-Three, Twenty Twenty-Four, Kadence, Astra (with block theme kit), GeneratePress.

Access FSE: Appearance → Editor (not Appearance → Customize)

You see your entire site as an editable canvas. Click any part to edit it — navigation menu, footer copyright, header layout.

Warning for agencies: FSE is powerful but different from classic theme customisation. Clients with FSE-enabled themes may accidentally edit global templates thinking they're editing a page. Set up user roles carefully.

Building a page with blocks: practical example

A basic service page structure:

1. Heading (H1): "Web Design Services in Chennai"
2. Paragraph: introductory text
3. Columns (3 columns):
   • Column 1: Image + Heading (H3) + Paragraph (service 1)
   • Column 2: Image + Heading (H3) + Paragraph (service 2)
   • Column 3: Image + Heading (H3) + Paragraph (service 3)
4. Cover block: background image with overlay, text, and Button
5. Heading (H2): "Why choose us"
6. List or Columns with benefit points
7. Heading (H2): "Contact us"
8. Buttons: WhatsApp link + email link

This entire page can be built without any page builder.

When blocks are not enough

The native block editor has real limitations:

• Complex animations: for scroll-triggered animations, parallax, and interactions, page builders have better support
• Non-technical editors: for clients who are not comfortable with tech, Elementor's visual drag-and-drop is genuinely easier to learn
• Pixel-perfect design control: spacing, typography, and colour control in blocks is improving but not as granular as Elementor Pro
• Mega menus: header mega menus still typically require a plugin or custom code

Blocks are better for:

• Performance (no plugin JS/CSS overhead)
• Long-term maintainability (no external plugin dependency)
• SEO (leaner HTML output)
• Developers building sites for clients who will maintain content

Plugins that extend Gutenberg

Several free plugins add more blocks or capabilities:

• Spectra (formerly Ultimate Addons for Gutenberg): adds 40+ new blocks including testimonials, icon lists, and timeline
• Kadence Blocks: advanced column layouts, icon blocks, advanced buttons
• Otter Blocks: popup blocks, video pop-outs, live search

These are lighter than full page builders and integrate with the native editor.

The bottom line

In 2025, Gutenberg is the right choice for new WordPress websites — especially those where a developer builds the structure and a non-technical client maintains the content. The learning curve is shallow, performance is better, and you're building with WordPress's future rather than against it.

Elementor and Divi remain valid choices for designers who need pixel-precise visual control or for clients who need a drag-and-drop interface. But they should be a deliberate choice, not the default.