The Complete Beginner‘s Guide to Using the WordPress Block Editor (Gutenberg)

The WordPress block editor, nicknamed Gutenberg, introduced a brand new way to create content in WordPress. Released in 2018, it changed how users build pages and posts on WordPress sites.

In this complete beginner‘s guide, we‘ll cover everything you need to know to start using Gutenberg to build professional looking WordPress sites.

What is the WordPress Block Editor (Gutenberg)?

The WordPress block editor, officially named Gutenberg, is the new default content editor that comes standard with WordPress. It replaced the classic WordPress editor starting with WordPress 5.0.

The block editor allows you to build pages and posts by adding different types of blocks. This gives you more flexibility and control over the structure and design of your content.

Blocks are like building blocks for web pages. You add a block for each content element, like a paragraph, image, video, etc. Blocks can be moved and rearranged, giving you more freedom to customize the layout.

The block editor uses a modular approach that is common in modern web design tools and page builders. It makes creating content for the web visual and intuitive.

Advantages of the Block Editor

Here are some of the key advantages of using the block editor in WordPress:

• More intuitive way to build web pages
• Visual approach allows you to see changes as you edit
• Easily customize layout and design
• Add multimedia and embedded content
• Reuse blocks and save time
• Improved writing experience for all users
• Extensible and future-proof

The block editor is especially beneficial for beginners as it makes content creation easy and approachable. But advanced users can also appreciate the flexibility it provides.

Difference from the Classic Editor

To understand Gutenberg better, let‘s look at how it differs from the previous default WordPress editor.

The classic editor was similar to a traditional word processor like Microsoft Word. It had an open text field where you typed text and applied formatting like bold, italics, links, etc.

Here‘s what the old WordPress editor looked like:

The block editor is a completely visual editor. Each element on your page is its own block that you can add, remove, and rearrange.

This is what the new block editor looks like:

As you can see, the editing approaches are quite different. The block editor gives you more flexibility and a better visual workflow for building pages.

Creating New Content with Gutenberg

The process of creating new pages and posts is essentially the same as in the classic editor. You simply start a new page or post like you normally would from your WordPress admin dashboard.

Once you add the title and click to start writing, you‘ll be in the new block editor screen.

Adding Blocks

The first block is always the title block. Below it, you‘ll find a default paragraph block to start writing text.

To add a new block, click on the + button. You‘ll see a pop-up with different block types you can add:

You can also add a block by clicking Enter after the current block or by typing / on a new line to invoke the block inserter popup.

The block inserter allows you to search for blocks by name or browse different categories of blocks available:

When you select a block type to add, it will be inserted below the current block. This way you can continuously add new blocks and build up your page‘s content.

Selecting and Editing Blocks

Each block on the page can be edited individually. Simply click on a block to select it.

The selected block will have a light blue outline and show controls for that block. Here are some things you can do:

• Edit content – Edit text, upload media, etc. depending on the block.
• Modify settings – Change settings specific to that block like alignment, size, etc. Settings appear in the right sidebar when a block is selected.
• Reorder – Drag blocks up or down to rearrange their order.
• Copy/Delete – Make copies or delete the block.
• Add before/after – Add a new block before or after the selected block.

This allows you to work on each block independently. You can build up your page by shaping each block just the way you want.

Arranging Blocks Visually

The WordPress block editor makes it easy to structure your content visually. You can see exactly how your page is shaping up as you add and edit blocks.

You can use these techniques to arrange your blocks:

• Drag and drop blocks to manually reorder them.
• Group blocks to combine them into a section. Adjust spacing and styling for the group.
• Add columns to your page and fill them with content blocks. You can create up to 6 columns layouts.
• Use the Block alignment setting to align blocks left, right, or center.

This allows you to create advanced layouts and designs without the need to write any HTML or CSS code.

Saving and Reusing Blocks

Gutenberg makes it easy to save and reuse blocks. This is helpful when you need to use certain content structures repeatedly.

To save a block:

1. Select the block and click on the three dots to open the sidebar menu.
2. Choose "Add to Reusable blocks".
3. Give the block a title and save it.

To reuse a block:

1. When adding a new block, go to the "Reusable" tab.
2. Find the block you want and click on it to insert it.

You can also view and manage all your reusable blocks from the main WordPress admin menu.

Now let‘s look at how to add some common content elements using Gutenberg blocks.

Adding Common Blocks in Gutenberg

The WordPress block editor provides blocks to add all common content elements like images, galleries, lists, quotes, and more.

Let‘s go over how to add some of the most used content blocks:

Insert Images

The image block allows you to easily add images to your page. To insert an image:

1. Click the + button and select the "Image" block.
2. Upload an image or select from your media library.
3. The image will appear in the editor along with a sidebar to edit image settings.

You can set the alt text, alignment, size, and more from the sidebar. You can also link the image by pasting in a URL.

Create Image Galleries

To add a gallery, select the "Gallery" block from the inserter. You can upload multiple images at once to create a gallery.

The settings allow you to customize the number of columns, size, spacing, and more.

Format Text

The paragraph block is used to add regular text content. It comes with formatting options to add bold, italic, links, etc.

Select text and use the formatting toolbar that appears to adjust formatting as needed.

You can also highlight text to style it differently, like highlighting a quote within a paragraph.

Create Lists

To create an ordered or unordered list, use the List block. Simply start typing list items and hit Enter after each one. To change the list type, use the toolbar that appears.

You can indent list items by using the arrow buttons in the toolbar or by tabbing over. Add links, formatting, etc just like a regular paragraph.

Add Quotes

Insert the Quote block and enter your quote text. You can cite the author and change text alignment from the settings.

Optionally highlight the text first before making it a Quote block. This will preserve any formatting like italics or bold.

Embed Media

You can easily embed videos, tweets, audio, and more using block editor embed blocks.

Paste the URL into a new block and the embed will automatically be generated. Or manually select an embed block for more customization options.

This covers the essentials of how to add common types of content using blocks. Next let‘s look at some of the more advanced block features available.

New Block Features in Gutenberg

In addition to the standard set of blocks, Gutenberg comes packed with some powerful advanced block options.

These optional blocks allow you to add unique design elements and content structures to your pages that are difficult to do with plain HTML and CSS.

Media and Text Block

This block allows you to easily add an image with text wrapping around it. Great for magazine style layouts or instructional content.

Add the block, insert the image and use the sidebar settings to adjust image placement and text flow.

Buttons Block

The Buttons block makes adding call-to-action buttons easy without writing HTML anchor tags.

Add text for the button, link URL, and style choices like color, size, and shape. Easily add multiple buttons in a row.

Columns Block

To create a multi-column layout, insert the Columns block. You can create up to 6 columns and populate each with other blocks.

Adjust column widths using the settings sidebar or by dragging column borders. Add spacing, borders, etc.

Cover Block

The Cover block allows you to add a full-width image or video at the top of your content with a text overlay. It‘s great for headers and introducing new sections.

Select media and add overlay text. Adjust text color, opacity, and position as needed.

Table Block

Adding tables using custom HTML code can be complex. The Table block provides an easy way to create tables visually.

Select number of columns and rows. Insert content into table cells. Customize alignment, colors, and more.

The new blocks in Gutenberg open up tons of new creative possibilities for your WordPress site content.

Tips for Using Gutenberg Efficiently

With some practice, you can use the WordPress block editor to quickly build professional looking web pages. Here are some pro tips:

• Use keyboard shortcuts to save time inserting and managing blocks. For example, type / to add a new block.
• Drag and drop images onto the editor to instantly turn them into image blocks.
• Reuse blocks and sections by saving them for later use. Your reusable blocks sync across sites.
• Use the block mover tool to easily rearrange blocks without dragging them individually.
• Adjust editor width to make it easier to view on different devices.
• Make use of template blocks from plugins that allow you to insert pre-built sections.
• Add custom CSS to your page using the Additional CSS block if needed.
• Use the Preview button frequently to see what your finished page will look like.

The block editor also has a growing ecosystem of plugins that add more capabilities. Let‘s look at some of the top plugins that extend Gutenberg.

Extending Gutenberg with Plugins

One benefit of Gutenberg being built on top of WordPress is the thousands of plugins available. Useful plugins are being created to enhance the editing experience.

Here are some of the most popular Gutenberg plugins you should know about:

Ultimate Addons for Gutenberg

Adds a huge library of additional blocks:

• Advanced media blocks
• Layout blocks like tabs, accordion, testimonials
• More buttons and icons
• Social share blocks
• Spacing and separator blocks

Made by the creators of the Astra WordPress theme.

Stackable Blocks

Stackable is another great option for additional blocks like:

• Containers with background options
• Posts/page blocks with custom layouts
• Feature blocks with images, icons, and text

Kadence Blocks

Get more design controls with blocks that offer:

• Advanced row and column layouts
• Button and text effect options
• Custom font choices
• Background image/color overlay blocks

Created by Kadence Themes.

EditorsKit

Adds enhanced formatting options:

• Visual drop cap creator
• Advanced text highlighting
• Custom color palette
• Typewriter text effect
• Full screen mode

Gutenberg Ramp

Improves the editor user experience:

• Saved page layouts
• Reusable page sections
• Page templates
• Custom styling toolkit

Block Lab

Allows you to create custom Gutenberg blocks to reuse across your site. Define custom fields and controls for your blocks.

With these plugins, you can power up Gutenberg and build custom designed sites faster.

Common Gutenberg Questions

Here are answers to some frequently asked questions about using the block editor:

What happens to my old content?

Your existing pages and posts will still be completely editable from Gutenberg. They will load in a Classic block that contains the old editor. You can keep editing normally or convert the post to blocks. Converting breaks it into individual blocks but allows you to edit it in Gutenberg.

How do I switch back to the classic editor?

If needed, you can disable the block editor and continue using the classic editor. Simply install and activate the Classic Editor plugin. Then you‘ll have an option to switch to the old editor when creating content.

What if my plugins/themes don‘t support Gutenberg?

Most plugins and themes now support Gutenberg. But if you find one that doesn‘t, you can use the Classic Editor plugin as a temporary fix. Or contact the developer and ask if they plan to add support.

Where can I learn more about Gutenberg?

Check out the WordPress Block Editor Handbook for detailed documentation on using Gutenberg. WPBeginner also has many tutorials showing how to use different aspects of Gutenberg in more depth.

Conclusion

Learning how to use the WordPress block editor may seem intimidating at first. But by following this beginner‘s guide, you can quickly get up to speed on how to be productive with Gutenberg.

The key is to start experimenting with adding different block types to get comfortable with its visual approach. Take advantage of reusable blocks and templates to accelerate your workflows.

Gutenberg makes it easier than ever for anyone to build professional WordPress sites. With a little practice, you‘ll be able to harness its full potential to create spectacular web content.