A beginner-friendly tutorial for non-technical users.
If you’re new to WordPress or simply feel overwhelmed while editing pages or blog posts, don’t worry. WordPress’s Gutenberg Block Editor makes content creation visual, flexible, and code-free.
This guide will walk you through everything you need to know about the Gutenberg editor — including how to use blocks, style content, and even build a line like:
Updated on 23rd, by Kishore
Let’s dive in!
What Is the Gutenberg Block Editor?
The Gutenberg Editor, also known as the Block Editor, replaced the old “Classic Editor” in WordPress 5.0. Instead of writing everything in one large text area, Gutenberg breaks everything into blocks — paragraphs, headings, images, videos, buttons, lists, and more.
Each block is movable, editable, and styled independently, making your content creation modular and beginner-friendly.
🧰 Why Use Gutenberg?
- No coding required
- Drag-and-drop layout
- Visual design previews
- Pre-made block patterns
- Reusable content blocks
Whether you’re managing a blog, portfolio, or business site, Gutenberg helps you create structured, modern layouts.
Getting Started with Gutenberg
1. Open the Editor
- Go to your WordPress dashboard
- Click Posts → Add New (or Pages → Add New)
You’ll enter the Gutenberg editor, which looks like a blank canvas with a blinking cursor that says:
“Start writing or type / to choose a block”
➕ Adding Your First Block
Click the + Plus icon at the top-left or inside the editor.
Here are common blocks you’ll use:
| Block | Use |
|---|---|
| Paragraph | Add normal text |
| Heading | Add titles (H1, H2, etc.) |
| Image | Upload or select a photo |
| List | Bullet or number lists |
| Quote | Stylized quotes |
| Post Date | Display publish or modified date |
| Buttons | Add call-to-action buttons |
To quickly insert a block, you can also type /paragraph, /image, etc.
Formatting and Styling Content
When you click on a block, the sidebar on the right (called Block settings) lets you:
- Change font size
- Change text color or background
- Adjust spacing
- Set alignment
- Add borders, paddings, etc.
Each block has toolbar controls right above it for quick formatting (like bold, italic, alignment, and link).
Practical Example:
Create “Updated on 23rd, by Kishore” Using Blocks
Let’s build this line in Gutenberg using blocks (no code!):
✅ Final Output: Updated on 23rd, by Kishore
👣 Steps:
- Add a Group Block
- Click ➕ and search for “Group”
- Set the Layout to “Row” (you’ll see this in block settings on the right)
- Inside the Group, add a Paragraph Block
- Type:
Updated on
- Add a Post Date Block
- In the sidebar, select:
- Display Type: Modified date
- Format: Custom → enter
jS(for dates like “23rd”) - Font size: small (optional)
- Add another Paragraph Block
- Type:
, by Kishore
🎉 Done! Now your post will show:
Updated on 23rd, by Kishore
…and it updates automatically if the post changes.
Bonus: Reuse Your Design
You don’t have to repeat this process every time.
- Select the entire Group Block
- Click the 3 dots (⋮) → Create Reusable Block
- Name it something like “Post Update Info”
Now you can insert it into any future post with just one click!
Extra Tips for Non-Tech Users
- Use the List View (top toolbar) to manage blocks easily
- Use the Preview button before publishing
- Use Block Patterns to insert full pre-made sections
- Undo mistakes using Ctrl+Z or Command+Z
Final Thoughts
The Gutenberg editor gives you the freedom to build beautiful content without touching a single line of code. Once you understand the concept of blocks, everything becomes easy — whether you’re adding a heading, image, or even custom layouts.
It’s perfect for bloggers, small business owners, and anyone who wants control over their content without relying on a developer.
Want a Reusable Template?
Let us know — we can send you a ready-to-import Gutenberg template with the “Updated on” layout pre-configured.
Leave a Reply