WordPress

The WordPress Block Editor: A Practical Guide for Beginners

by dotCanada Team
The WordPress Block Editor: A Practical Guide for Beginners

If you have been using WordPress for a while, you might remember the classic editor - a single text box that felt a lot like a word processor. The block editor, introduced in 2019 and sometimes called Gutenberg, replaced that experience with something far more flexible. Instead of one big text area, everything on your page is a separate block: paragraphs, headings, images, buttons, columns. It takes a little getting used to, but once it clicks, you will wonder how you managed before.

What Makes the Block Editor Different

The classic editor treated your content like a document. The block editor treats it like a layout. Each element - a paragraph, an image, a call-to-action button - lives in its own container. You can move blocks up and down, duplicate them, apply settings to each one individually, and build complex layouts without touching any code. This is the fundamental shift, and it is worth understanding before you try to fight the interface.

Working with Common Blocks

When you open a new post or page, you will see a large empty area with a prompt to start writing. Click it and type to create a paragraph block. Press Enter to create a new one, or click the plus icon to insert a different block type.

The blocks you will use most often are:

Paragraph - Standard text. You can change font size, colour, and alignment in the settings panel on the right.

Heading - Levels H2 through H6. Use these to structure your content for both readers and search engines.

Image - Upload from your computer or choose from the Media Library. You can set alt text directly in the block.

Gallery - Multiple images displayed in a grid. Drag to reorder.

Columns - Split your layout into two, three, or more columns. Each column can hold any other block inside it.

Buttons - Add a styled call-to-action link. Customize colour, text, and border in the settings.

List - Bullet or numbered lists.

Quote - Styled blockquote for testimonials or pull quotes.

Using Patterns and Reusable Blocks

Patterns are pre-built combinations of blocks that you can insert with one click. WordPress ships with dozens of patterns for things like hero sections, call-to-action rows, and testimonials. You will find them in the block inserter under the Patterns tab.

If you create a combination of blocks that you want to reuse - say, a contact card that appears at the bottom of every post - you can convert it into a Reusable Block. Select the blocks, click the three-dot menu, and choose Create Reusable Block. It will then be available across every post and page on your site, and updating it once updates every instance.

Page Editing vs Post Editing

Posts and pages use the same block editor, but they behave differently in a few ways. Posts use categories and tags, and typically appear in your blog feed in reverse chronological order. Pages are static and live outside the blog structure - your About page, Services page, and Contact page are all pages.

For most pages, you will want to think more carefully about layout. The Columns block and patterns are especially useful here. For posts, the writing usually takes precedence and the layout is simpler.

Adding and Rearranging Blocks

Click the plus icon anywhere in the editor to insert a block at that position. You can also type a forward slash (/) at the start of a block to search by name - /image inserts an image block, /heading inserts a heading.

To rearrange blocks, hover over one and use the drag handle on the left to move it, or use the up and down arrows. To select multiple blocks, hold Shift and click.

When to Use a Page Builder Instead

The block editor is excellent for content-heavy pages and standard layouts. If you need a highly custom landing page with precise pixel control, advanced animations, or a layout that feels more like a design tool than a word processor, a page builder like Elementor might serve you better. Elementor offers a true drag-and-drop canvas with more design controls. The trade-off is added complexity and potential performance overhead.

For most Canadian small business sites, the block editor is more than capable. Start there.

Tips for Working Faster

  • Use the keyboard shortcut / to insert blocks without reaching for the mouse
  • Press Ctrl+Z (or Cmd+Z on Mac) to undo any change
  • Use the List View (the icon in the top toolbar that looks like three lines) to see all your blocks in a hierarchy and click to navigate to any one of them
  • Save often with Ctrl+S
  • Use the Preview button to see exactly how your page looks before publishing

The block editor rewards a bit of patience. Spend 20 minutes clicking around and experimenting, and it will feel natural quickly.

100% Satisfaction Guarantee

We're so confident you'll love dotCanada that we offer a 30-day money-back guarantee. Not satisfied? Get a full refund, no questions asked.

Ready to Get Started?

Join thousands of Canadian website owners who trust dotCanada for reliable, fast web hosting.

Get Started Today