David Mkandhla

Introduction to WordPress Part 2: Mastering Content Creation with Gutenberg

Introduction

Welcome to Part 2 of my WordPress tutorial series, where we master Gutenberg, the heart of WordPress content creation. Gutenberg is the block editor that lets you create, format, and design content for posts, pages, and even entire websites with Full Site Editing (FSE). Whether you’re writing a blog post, building an About Us page, or laying the foundation for a professional site, Gutenberg’s intuitive blocks make it simple and powerful. This beginner-friendly guide assumes you’ve installed WordPress (see Part 1 for setup) and will teach you through real-world scenarios—from formatting posts to creating reusable patterns. By the end, you’ll be a Gutenberg expert, ready to explore FSE in Part 3. Let’s dive in!

About the Author

I’m David Mkandhla, a self-taught webmaster and no-code website designer. My expertise includes:

  • Setting up cPanel servers and domains.
  • Installing and managing WordPress, including security and user access.
  • Designing websites, writing SEO-optimized content, and optimizing performance.
  • Mastering WordPress tools like Gutenberg to create lightweight, stunning sites.

After years of hesitation with WordPress, I discovered its simplicity through Gutenberg. As someone who once struggled with HTML/CSS and feared WordPress’s complexity, I’m here to break it down for you, making content creation accessible and fun.

What is Gutenberg?

Gutenberg is WordPress’s default block editor, introduced in 2018 to replace the Classic Editor. It’s the tool you use to create and format content for posts, pages, and site-wide designs in Full Site Editing (FSE). With Gutenberg, every piece of content—text, images, buttons, or layouts—is a block you can add, style, and arrange. Whether you’re using a classic theme, a page builder like Elementor, or an FSE theme, Gutenberg is the editor that powers your content.

Role in WordPress

Gutenberg is the core editor for:

  • Posts and Pages: Enter and format content (e.g., titles, headings, paragraphs, images).
  • Page Builders: Create content pulled into templates (e.g., Elementor, Divi).
  • FSE: Build patterns and templates for site-wide design (e.g., headers, footers).

It’s one editor, used everywhere, with the same blocks and process—just saved differently (e.g., as post content or site patterns).

Key Features

  • Blocks: Modular units like Paragraph, Heading, Image, Button, or Columns.
  • Patterns: Pre-designed block layouts (e.g., a hero section) you can insert and customize.
  • Reusable Blocks: Custom blocks saved for reuse across posts/pages.
  • Block Toolbar: Formatting options (e.g., bold, align, link) above each block.
  • Block Settings: Right sidebar for styling (e.g., font size, color, padding).

Benefits

  • Simple: Drag-and-drop blocks, no coding needed.
  • Lightweight: Built into WordPress, no heavy plugins.
  • Versatile: Works for blog posts, pages, and FSE designs.
  • Responsive: Blocks adapt automatically for mobile devices.
  • SEO-Friendly: Supports headings, alt text, and structured content.

Principles

Gutenberg’s block-based modularity is like building with Lego pieces:

  • Each block is independent, letting you focus on one element at a time.
  • Combine blocks to create complex layouts (e.g., a hero section with text, image, button).
  • Reuse blocks or patterns for consistency and efficiency.

This simplicity makes Gutenberg the foundation of modern WordPress, from content creation to site design.

Gutenberg in WordPress

Gutenberg fits into the WordPress ecosystem after you:

  1. Set up a CPanel server and install WordPress (a content management system).
  2. Choose and install a theme (e.g., Twenty Twenty-Five, Ollie).
  3. Optionally add plugins (e.g., Yoast SEO, LiteSpeed Cache).

Once your site is ready, Gutenberg is the editor you use to create and format content, whether you’re:

  • Writing posts in a classic theme.
  • Building pages with a page builder.
  • Designing site-wide templates in FSE.

It’s the same tool across all workflows, making it essential for every WordPress user.

Use Case Scenarios: Practical Applications of Gutenberg

Let’s master Gutenberg by applying it to real-world scenarios for our auto repair website. We’ll create content, format it, and build patterns, using the same editor you’ll use in FSE. Each scenario teaches blocks, formatting, and practical skills.

Creating a Blog Post

Goal: Create a blog post titled “Why Regular Car Maintenance Matters” with a pattern-like structure (heading, image, text, button).

Steps:

  1. Open the Post Editor:
    • From the WordPress dashboard, click Posts > Add New.
    • In the “Add title” field, type “Why Regular Car Maintenance Matters”.
  2. Add a Heading Block:
    • Click the + (Block Inserter, top-left) and select Heading.
    • Type “The Importance of Maintenance” and set to H2 (Block Toolbar dropdown).
    • In Block Settings (right sidebar), set Font Size to 28px.
  3. Add a Paragraph Block:
    • Press Enter or click + and select Paragraph.
    • Type: “Regular maintenance keeps your car running smoothly and saves money.”
    • Highlight “saves money” and click Bold in the Block Toolbar.
    • Set Text Align to “Justify” for a clean look.
  4. Add an Image Block:
    • Click +, select Image, and upload a car repair photo.
    • In Block Settings, set Width to 600px, Alignment to “Center”.
    • Add Alt Text: “Car maintenance in garage” for SEO.
  5. Add a Button Block:
    • Click +, select Buttons, and type “Book a Service”.
    • Click the Link icon, search for “Contact Us” page, and link it.
    • In Block Settings, set Background Color to red (#FF0000).
  6. Check Mobile:
    • Click Preview > Mobile (top-right). Ensure the image scales, text is readable, and the button is centered.
    • If needed, add Padding (10px) to the Paragraph block in Block Settings.
  7. Publish:
    • Click Save Draft, add a category (e.g., “Car Care Tips”) in Post Settings.
    • Click Publish and preview the live post.

Principle: Blocks (Heading, Paragraph, Image, Button) combine to form a pattern-like structure, formatted with the toolbar and settings. This is the same process used in FSE.

Creating a Page

Goal: Format an About Us page with headings, a quote, and a two-column layout.

Steps:

  1. Open the Page Editor:
    • Click Pages > Add New and title it “About Us”.
  2. Add an H2 Heading:
    • Click +, select Heading, type “Our History”, and set to H2.
    • Set Font Size to 28px in Block Settings.
  3. Add a Paragraph:
    • Click +, select Paragraph, and type: “Founded in 2010, we’ve served thousands of customers.”
    • Use Italic for “thousands of customers” in the Block Toolbar.
  4. Add a Quote Block:
    • Click +, select Quote, and type: “Best service ever! – John Doe”.
    • Set Text Color to blue (#0000FF) in Block Settings.
  5. Add a Columns Block:
    • Click +, select Columns, and choose 50/50 layout.
    • Left Column:
      • Add a Heading (H3, “Our Mission”).
      • Add a Paragraph: “Reliable, affordable repairs.”
    • Right Column:
      • Add a Heading (H3, “Our Vision”).
      • Add a Paragraph: “Top auto repair center.”
    • Ensure Stack on mobile is enabled (default).
  6. Check Mobile:
    • Preview on mobile to confirm columns stack (Mission above Vision).
    • Set H3 Font Size to 24px for mobile (Styles > Media Queries > Mobile).
  7. Publish:
    • Click Publish and preview the live page.

Principle: Columns and Quote blocks create structured layouts, using the same Gutenberg editor as FSE patterns.

With Page Builders

Goal: Create a post in Gutenberg, pulled into an Elementor/Divi/Brizy template, preserving formatting.

Steps:

  1. Create a Post:
    • Go to Posts > Add New, title it “Car Care Tips”.
    • Add blocks: H2 (“Top Tips”), Paragraph (bold text), List (3 tips), Image (alt text).
  2. Use in Page Builder:
    • In Elementor/Divi/Brizy, create a page template.
    • Add a Post Content widget (e.g., Elementor’s “Post Content”).
    • Select the “Car Care Tips” post. The Gutenberg formatting (H2, bold, list, image) displays unchanged.
  3. Test:
    • Preview the page. The post’s Gutenberg blocks (e.g., headings, lists) appear as formatted in the editor.

Principle: Gutenberg’s HTML-based content (stored in post_content) integrates seamlessly with page builders, making it versatile.

FSE Foundations

Goal: Build a hero section in a post, save it as a pattern/reusable block, and note its use in FSE.

Steps:

  1. Open a Post:
    • Go to Posts > Add New, title it “Test Hero”.
  2. Create a Hero Section:
    • Add a Cover block, upload a car repair image, set Minimum Height to 350px.
    • Inside the Cover, add:
      • Heading: “Welcome to Our Auto Repair Shop” (36px, white text, centered).
      • Paragraph: “Quality service you trust” (18px, white).
      • Button: “Contact Us” (red background, linked to Contact Us page).
    • Set Content Position to “Center Center” in Block Settings.
  3. Save as a Pattern:
    • Select the Cover block, click the three-dot menu in the Block Toolbar, and choose Create Pattern.
    • Name it “Hero Section”, check Synced (updates everywhere), and save.
  4. Test in Another Post:
    • Create a new post, click +, go to Patterns > My Patterns, and insert “Hero Section”.
    • Preview to confirm it displays identically.
  5. Note FSE Use:
    • This hero section could be used in FSE as a site-wide pattern (e.g., homepage header), created the same way (see Part 3).
  6. Check Mobile:
    • Preview on mobile. Adjust Heading Font Size to 28px for mobile if needed.

Principle: Creating a pattern in a post uses the same Gutenberg blocks as FSE, preparing you for site-wide design.

Pattern Creation

Goal: Design a service section and save it as a pattern for reuse.

Steps:

  1. Open a Page:
    • Go to Pages > Add New, title it “Services Test”.
  2. Create a Service Section:
    • Add a Group block, set Alignment to Wide Width (~1200px).
    • Inside the Group:
      • Add a Heading (H2, “Engine Repairs”, 28px, centered).
      • Add an Image (engine photo, 300px width, centered).
      • Add a Paragraph (“Comprehensive repairs for all engines.”, 16px).
    • Set Group Background to light gray (#F5F5F5) in Block Settings.
  3. Save as a Pattern:
    • Select the Group block, click the three-dot menu, and choose Create Pattern.
    • Name it “Service Section”, leave Synced unchecked (for unique edits), and save.
  4. Reuse the Pattern:
    • In another page, insert the “Service Section” pattern from Patterns > My Patterns.
    • Edit the H2 to “Brake Repairs” and update the image/text.
  5. Check Mobile:
    • Preview on mobile to ensure blocks stack vertically and text is readable.

Principle: Patterns combine multiple blocks into reusable designs, used in posts, pages, or FSE, with sync/unsync options controlling updates.

Best Practices

  • SEO:
    • Use H2/H3 headings for structure.
    • Add Alt Text to images (e.g., “Car repair shop”).
    • Use Lists for scannable content.
  • Accessibility:
    • Maintain heading hierarchy (H2, then H3).
    • Ensure text contrast (e.g., white on dark backgrounds).
  • Responsiveness:
    • Preview on mobile to check stacking and font sizes.
    • Add Padding (10px) for spacing on small screens.
  • Workflow:
    • Use /blockname (e.g., /paragraph) to add blocks quickly.
    • Plan content as patterns (e.g., intro, services) before building.

Next Steps

You’re now a Gutenberg expert, ready to create stunning content and patterns! Practice by:

  • Building more posts (e.g., “Top 5 Car Maintenance Tips”).
  • Enhancing the About Us page with a Gallery block.
  • Exploring blocks like Table or Video.

For site-wide design, check out Part 3: Full Site Editing (coming soon), where you’ll use the same Gutenberg skills to create headers, footers, and templates. Visit learn.wordpress.org for more tips, and optimize your site with plugins like LiteSpeed Cache.

Please leave a Comment that Directly posts to your Facebook.

My Social Handles