WordPress Gutenberg: How to Use the Block Editor

Gutenberg is the WordPress default editor, replacing the previous classic editor. It enables users to create and design content using individual blocks for text, images, videos, and other site elements on a drag-and-drop interface – providing enhanced flexibility and design capabilities.

How the Gutenberg Editor Works

The Gutenberg WordPress block editor offers individual content blocks for users to add and edit various elements in posts and pages. Each block is a standalone component with settings for users to configure.

Creating content using the block editor is straightforward. On the WordPress dashboard, go to Pages or Posts  Add New to open the Gutenberg interface.

Clicking the block inserter + icon on the left will show all the blocks organized by their function. Simply drag and drop a block to the Gutenberg editor and place it where suitable.

With the WordPress block system, you can customize the entire block using the toolbar that appears on top of the element or in the settings bar on the left-side panel.

Gutenberg Editor vs Classic Editor

The Gutenberg WordPress update brought a notable transition from the previous WordPress editor to the now built-in block system.

In contrast to the block editor interface, which we shared in the previous section, here’s what the classic editor looks like:

When considering Gutenberg vs classic editor for content creation, keep in mind that they differ in several aspects:

 

  Gutenberg Editor Classic Editor
Editor Interface Responsive and intuitive with self-explanatory menu settings. Simple text interface, similar to an online document processor like Google Docs.
Content Creation Employs a block system. Each element has features for content creation and visual customization. Offers a blank canvas for writing posts and pages.
Ease of Use Utilizes drag and drop blocks with no need for technical expertise. Editing the content’s code is possible but not a must. Similar to using Google Docs or Microsoft Word but requires some HTML knowledge to make the most of it.
Features Features include template parts, block patterns, and vast design flexibility. The classic editor has tools to format the page and post but lacks design customizability.
Pros Beginner-friendly.Intuitive user experience for media-rich content.Plenty of design possibilities through blocks and block patterns. Straightforward writing environment.Ideal for text-focused content creation.
Cons Potential compatibility issues with older themes and plugins. Limited in terms of design flexibility and advanced features.