WordPress Block Editor Tutorial: Master Gutenberg in 15 Minutes

The WordPress block editor (Gutenberg) revolutionized content creation when it launched in 2018. Instead of a single text editor, you now build pages using individual blocks—each paragraph, image, heading, or element is its own block that you can move, style, and customize independently.

If you’re new to the block editor or coming from the classic editor, this tutorial will get you up to speed in 15 minutes. You’ll learn the basics, discover powerful features, and master techniques that make content creation faster and more flexible.

What Is the WordPress Block Editor?

The block editor (officially called Gutenberg) is WordPress’s default content editor since version 5.0. It replaces the classic TinyMCE editor with a block-based system.

Key Concept: Everything is a block—paragraphs, images, headings, lists, buttons, galleries. Each block has its own settings and can be moved independently.

Why Blocks Matter:

• More flexible layouts without code
• Easier to move content around
• Individual styling per block
• Reusable components
• Better mobile editing
• Visual page building

Understanding the Block Editor Interface

When you create or edit a post/page, you’ll see three main areas.

Top Toolbar

Left Side:

• WordPress logo (return to dashboard)
• Add block button (+)
• Undo/Redo
• List view (document outline)
• Block navigation

Right Side:

• Save draft
• Preview
• Publish button
• Settings toggle (show/hide sidebar)
• More options (⋮)

Content Area (Middle)

This is where you create content by adding and arranging blocks. Click anywhere to start typing or click the + icon to add blocks.

Settings Sidebar (Right)

Two tabs at the top:

• Post tab: Post settings (categories, tags, excerpt, featured image)
• Block tab: Settings for currently selected block

With Nexus Pro: Additional panels appear here:

• Schema Settings
• Advanced Schema
• FAQ Schema
• AI Summary & SEO
• Readability

Adding Your First Blocks

Let’s create content using different block types.

Method 1: Type to Add Blocks

1. Click in the content area
2. Start typing
3. WordPress automatically creates a paragraph block
4. Press Enter to create a new block

Quick Transforms:

• Type ## + Space = H2 heading
• Type ### + Space = H3 heading
• Type - + Space = Bulleted list
• Type 1. + Space = Numbered list
• Type > + Space = Quote

Method 2: Use the Block Inserter

1. Click the + icon (top left or within content)
2. Browse or search for blocks
3. Click to insert
4. Block appears in content area

Common Blocks:

• Paragraph
• Heading
• Image
• List
• Quote
• Button
• Gallery
• Embed (YouTube, Twitter, etc.)

Method 3: Slash Commands

1. Type / in any block
2. Start typing block name
3. Select from dropdown
4. Press Enter

Examples:

• /image = Insert image block
• /heading = Insert heading
• /button = Insert button
• /table = Insert table

Working with Block Settings

Each block type has unique settings and options.

Block Toolbar

Appears above selected block:

• Transform: Change block type (paragraph to heading, etc.)
• Alignment: Left, center, right, wide, full width
• Formatting: Bold, italic, link
• More options: Duplicate, remove, insert before/after

Block Settings Sidebar

Select any block, then check the right sidebar for:

Common Settings:

• Typography (font size, line height)
• Color (text and background)
• Spacing (padding, margin)
• Advanced (custom CSS classes, anchor)

Block-Specific Settings:

• Image: Alt text, size, border radius
• Button: Link, style, border
• Heading: Level (H2, H3, etc.)
• List: Ordered/unordered style

Creating Layouts with Blocks

Build complex layouts using container blocks.

Columns Block

Create multi-column layouts:

1. Add Columns block
2. Choose column layout (2, 3, or custom)
3. Add content blocks inside each column
4. Adjust column widths in settings

Use Cases:

• Feature comparisons
• Service descriptions side-by-side
• Image + text layouts
• Product showcases

Group Block

Group multiple blocks together:

1. Select blocks (Shift+Click)
2. Click three dots > Group
3. Or add Group block first, then add blocks inside
4. Apply background color/padding to entire group

Benefits:

• Style multiple blocks together
• Move grouped blocks as one unit
• Add backgrounds to sections
• Better organization

Stack and Row Blocks

Stack (Vertical):

• Blocks stacked vertically
• Control spacing between
• Good for sections

Row (Horizontal):

• Blocks arranged horizontally
• Responsive controls
• Wraps on mobile

Using Block Patterns

Block patterns are pre-designed block combinations you can insert instantly.

What Are Patterns?

Pre-built layouts combining multiple blocks:

• Call-to-action sections
• Feature grids
• Testimonial layouts
• Pricing tables
• Team member showcases

How to Use Patterns

1. Click + to open block inserter
2. Click “Patterns” tab
3. Browse categories
4. Click pattern to insert
5. Customize content and styling

With Nexus Pro: 28+ additional patterns including:

• Complete landing pages
• Service showcases
• Product comparisons
• Portfolio layouts
• Contact sections
• FAQ accordions

Editing Patterns

Once inserted:

• Edit any block individually
• Change colors and fonts
• Replace images
• Modify text
• Rearrange blocks

Patterns are just starting points—fully customizable.

Creating Reusable Blocks

Save block combinations to reuse across posts.

Why Use Reusable Blocks?

Benefits:

• Create once, use everywhere
• Update in one place, changes everywhere
• Consistent design elements
• Time-saving for repeated content

Common Use Cases:

• Author bio boxes
• Call-to-action sections
• Disclaimer notices
• Product highlights
• Newsletter signup forms

Creating a Reusable Block

1. Create and style your block(s)
2. Select the block(s)
3. Click three dots (⋮)
4. Choose “Create Reusable block”
5. Name it (e.g., “Author Bio”)
6. Click Save

Using Reusable Blocks

1. Open block inserter (+)
2. Search for your reusable block name
3. Click to insert
4. Appears exactly as saved

Editing Reusable Blocks

Edit All Instances:

1. Click the block
2. Click “Edit” in block toolbar
3. Make changes
4. Changes apply everywhere

Convert to Regular Blocks:

1. Click the reusable block
2. Click three dots
3. Choose “Convert to regular blocks”
4. Now editable independently

Advanced Block Editor Techniques

Level up your skills with these powerful features.

List View (Document Outline)

See all blocks in hierarchical list:

1. Click list icon (top toolbar)
2. View entire document structure
3. Click any block to jump to it
4. Drag blocks to reorder
5. Nest blocks by dragging

Benefits:

• Navigate long documents easily
• Visualize structure
• Quick reordering
• Find specific blocks fast

Keyboard Shortcuts

Speed up editing with shortcuts:

Navigation:

• Tab = Move to next block
• Shift+Tab = Move to previous block
• Ctrl+Alt+T = Insert block before
• Ctrl+Alt+Y = Insert block after

Editing:

• Ctrl+Z = Undo
• Ctrl+Shift+Z = Redo
• Ctrl+A = Select all in block (press again for all blocks)
• Ctrl+C = Copy
• Ctrl+X = Cut
• Ctrl+V = Paste

Formatting:

• Ctrl+B = Bold
• Ctrl+I = Italic
• Ctrl+K = Insert link
• Ctrl+Shift+K = Remove link

Block Actions:

• / = Slash command menu
• Ctrl+Shift+D = Duplicate block
• Alt+Shift+Z = Remove block

Block Locking

Prevent accidental changes:

1. Select block
2. Click three dots
3. Choose “Lock”
4. Select options:
   • Lock movement
   • Lock removal
   • Lock both

Use Cases:

• Protect important content
• Prevent clients from removing sections
• Template enforcement

Custom HTML and Code

Add custom code when needed:

HTML Block:

• Add raw HTML
• Embed third-party widgets
• Custom styling

Code Block:

• Display code snippets
• Syntax highlighting
• Preserve formatting

Custom CSS:

• Add CSS class to any block (Advanced settings)
• Target with custom CSS
• Unique styling per block

Nexus Pro Block Editor Enhancements

Nexus Pro adds powerful features to the block editor.

Table of Contents Block

Auto-generates navigable TOC:

1. Add “Table of Contents” block
2. Automatically detects all headings (H2-H4)
3. Creates clickable links
4. Smooth scrolling
5. Customizable appearance

Perfect for:

• Long-form content
• Guides and tutorials
• Resource pages
• Documentation

TL;DR Block

Add article summaries:

1. Insert “TL;DR” block
2. Write 2-3 sentence summary
3. Styled prominently
4. Adds Article summary schema
5. Improves user experience

Benefits:

• Helps time-constrained readers
• Boosts engagement
• Adds structured data
• Better for AI search engines

Citation Block

Properly attribute quotes:

1. Insert “Citation” block
2. Add quoted text
3. Include source/author
4. Proper semantic markup
5. Professional formatting

Use For:

• Expert quotes
• Research citations
• Testimonials
• Source attribution

Common Block Editor Issues and Solutions

Troubleshoot common problems.

Issue: Blocks Won’t Move

Cause: Block might be locked or nested incorrectly

Solution:

1. Check if block is locked (three dots > Lock status)
2. Use List View to see nesting
3. Try cutting and pasting instead of dragging

Issue: Formatting Looks Different on Frontend

Cause: Theme CSS overrides block styles

Solution:

1. Check theme supports block editor styles
2. Add custom CSS if needed
3. Use Full Site Editing theme (like Nexus)

Issue: Can’t Find a Block

Cause: Block might be disabled or from inactive plugin

Solution:

1. Search by different name
2. Check Settings > Writing for disabled blocks
3. Ensure plugin is active (for plugin blocks)

Issue: Changes Not Saving

Cause: Browser issues or server timeout

Solution:

1. Click “Save draft” regularly
2. Check browser console for errors
3. Disable browser extensions temporarily
4. Check server PHP timeout settings

Issue: Block Editor Is Slow

Cause: Too many blocks or browser extensions

Solution:

1. Break long posts into multiple posts
2. Disable browser extensions
3. Clear browser cache
4. Update WordPress and plugins

Tips for Efficient Content Creation

Speed up your workflow with these techniques.

Start with Structure

Before writing:

1. Add all heading blocks first (H2, H3 outline)
2. Fill in content under each heading
3. Add images and media last
4. This creates better structure

Use Patterns for Speed

Instead of building from scratch:

1. Find similar pattern
2. Insert and customize
3. Saves 50% of time
4. Consistent design

Create Template Reusable Blocks

For recurring content:

• Standard intro paragraphs
• Author bios
• CTAs
• Disclaimers

Save once, reuse everywhere.

Learn Key Shortcuts

Master these 5:

• / for slash commands
• Ctrl+Shift+D to duplicate
• Alt+Shift+Z to remove
• Tab/Shift+Tab to navigate
• Ctrl+K to add links

Use List View for Long Posts

When posts exceed 20 blocks:

• Keep List View open
• Navigate via list
• Drag to reorder
• Much faster than scrolling

Switching from Classic Editor

If you’re used to the classic editor, here’s how to adapt.

Main Differences

Classic Editor:

• Single text field
• TinyMCE toolbar
• Limited layouts
• HTML for formatting

Block Editor:

• Individual blocks
• Block-specific toolbars
• Visual layouts
• No HTML needed

Migration Tips

Don’t panic:

• Classic content converts automatically
• Each paragraph becomes a block
• Formatting preserved
• Can convert back if needed

Use Classic Block: If you really need classic editor:

1. Add “Classic” block
2. Exact same TinyMCE editor
3. Use for specific sections

Install Classic Editor Plugin: For full classic editor:

1. Install “Classic Editor” plugin
2. Reverts to old editor
3. Not recommended (blocks are better)

Embracing Blocks

Give it time:

• First week feels different
• Second week feels natural
• Third week you’ll prefer it

Benefits you’ll love:

• Moving content is easier
• Better layouts without code
• Mobile editing improved
• Visual page building
• Reusable components

Conclusion

The WordPress block editor might seem overwhelming at first, but it’s incredibly powerful once you understand the basics. Blocks give you flexibility and control that the classic editor never could.

Key Takeaways:

1. Everything is a block (paragraphs, images, headings)
2. Use + button or / commands to add blocks
3. Each block has unique settings
4. Patterns are pre-designed combinations
5. Reusable blocks save time
6. List view helps navigate long documents
7. Learn key shortcuts for efficiency

With Nexus Pro, you get:

• Table of Contents block
• TL;DR summary block
• Citation block
• 28+ block patterns
• Additional template parts
• Enhanced editor experience

Spend 15 minutes experimenting with blocks, patterns, and the interface. Create a test post, try different block types, and explore the patterns library. Within an hour of hands-on practice, you’ll feel comfortable creating beautiful, structured content.

---

Related Articles:

• How to Install and Activate WordPress Plugins (Complete Guide)
• WordPress Customizer Guide: Customize Without Coding
• Complete WordPress SEO Checklist: 25 Tips to Rank Higher
• WordPress Performance Optimization: Speed Up Your Site