A post on Basics of Gutenberg WordPress editor

Jun 3, 2025 | Blog

Drag, Drop, Done: Discover the Magic of Gutenberg WordPress Blocks Editor

You can’t think of content creation without WordPress. While your site’s success depends on picking the right editor, Gutenberg WordPress blocks appear to be the right choice for most creators. 

Since 2018, users have used either Gutenberg’s modern block system instead of the old Classic Editor.

Because it offers visual flexibility and advanced features, allowing users to get the most out from the WordPress development environment. 

Today, we’ll look at both editors, comparing their strengths, the weaknesses, and how they affect your WordPress experience. 

A Short History of the Gutenberg WordPress Editor

What is Gutenberg Editor? 

The Gutenberg Block Editor is named after Johannes Gutenberg, who changed publishing with the movable type printing press. Inspired from this, the Gutenberg Editor in WordPress brings a modular and block-based approach to creating WordPress pages and posts. 

Gutenberg editor in the WordPress org.

The project was started in 2017 by WordPress co-founder Matt Mullenweg. It aims to modernize the platform and compete with Wix and Squarespace. After a lot of development, Gutenberg was launched on December 6, 2018, with WordPress 5.0.

It replaced the old Classic Editor with a flexible block system. Each piece of content is now a block that can be moved and customized. Creating complex layouts has become possible since then without needing coding skills. 

Gutenberg is part of a larger plan to make WordPress a full website customization platform. It aims to make publishing accessible to everyone. 

Though some users initially resisted it, it’s now WordPress’s future. 

How is the New WordPress Gutenberg Editor Different from Classic Editor?

The Gutenberg Editor has introduced major changes from the Classic Editor. So many that in fact, it can be challenging to show them all at once.

A Tale of Two Editors

The WordPress Classic Editor has been the standard for years. It offers a word-processor-like experience with a single text box and a toolbar on top. 

A showcase of how the Classic editor looked

It’s similar to using Microsoft Word or Google Docs. You work on one document where all elements (text, images, and links) are together. 

However, The Gutenberg Editor is different. It uses a “block-based” system. Each element of your content, such as paragraphs, headings, and images, is a separate block. 

Here you can see the Heading block where a user can edit Color, Typography, Dimensions, Border, and more. Also you can transform the Heading to different blocks. 

Gutenberg editor view with content

To understand the Image Block we have added an image in our post and here you can check there are two options. In Settings you can add Alt Text, Aspect Ratio with desired Width and Height

Image block customization settings.

In the Styles section, you can go after any image Filter like below. There are also useful options like Dimensions, Border, and Radius.

Image block styles options

You can edit each block individually. It’s almost similar to Wix or Squarespace work. 

The Block Concept: Gutenberg’s Building Blocks

Complete list of blocks in the Gutenberg WordPress editor.

To understand Gutenberg, think of your content as LEGO blocks. Each paragraph, image, heading, quote, list, or button is a block. It’ll make it easier to control each part of your content.

Example: With the Classic Editor, adding a button requires HTML knowledge or a plugin. But with Gutenberg, you just can add a “Button” block and customize it. No coding needed

Real-World Example: Creating a Blog Post

A visual showcase of Classic editor and Gutenberg Editor of WordPress

Let’s say you’re writing a blog post titled “10 Tips for Beginner Bloggers.” Here’s how the experience differs between the two editors:

Gutenberg vs Classic Editor

FeatureClassic EditorGutenberg Editor
1Text LayoutOne big text areaTitle as Heading block, content in Paragraph blocks
2Adding ImagesInsert images at the cursor locationAdd Image block between the content
3Image AlignmentCan struggle with alignment Easier control over image placement
4Rearranging Difficult to rearrange contentEasy drag & drop content rearrangement
5FormattingSingle toolbar for an entire documentEach block has its own specific formatting options

Have you got the key difference? 

The Classic Editor treats your post as one whole piece. And, Gutenberg breaks it into separate content blocks. You can arrange these blocks however you need. 

Major Differences Between the Two Editors

When comparing the Classic and Gutenberg editors, the main differences lie in their interface, layout options, and ease of use. Each offers unique features for different needs. 

Gutenberg provides more flexibility and customization, while Classic offers simplicity for users familiar with traditional word processors.

CategoryClassicGutenberg
1InterfaceA single document (like a word processor).A set of blocks you can move and change separately.
2Content LayoutLimited layout options unless you use custom HTML or plugins.Offers more layout options such as columns, spacers, and media blocks.
3Learning CurveEasy for anyone who has used a word processor.Requires learning the block system.
4CustomizationLimited without coding or plugins.Lots of built-in options for colors, spacing, and layout.
5Future DevelopmentStill maintained, but no major updates are coming.Actively developed with new features and blocks added regularly.

Which Is Better? A Simple Analogy

The Classic Editor will feel like a notebook where you write everything in one flow. And, the Gutenberg Editor is more like a scrapbook. You can place text, photos, and designs wherever you want.

Neither editor is “Bad.” They just suit different needs. If you like simplicity, Classic Editor will feel easier. If you want more control over layout and design, Gutenberg is the one you need.

You can also use the Classic Editor as a plugin, even if Gutenberg is your default WordPress editor. Many users keep both editors and use them based on the type of content they’re creating.

How Good is Gutenberg Compared to Other Popular Alternatives?

Since its launch in 2018, Gutenberg has grown from a basic editor to a full site-building tool. It’s now moving toward Full Site Editing, which will let users design entire websites using the same intuitive block system.

Shouldn’t it be better than other popular alternatives? Let’s find out by comparing the other technical elements through this Gutenberg guide. 

Gutenberg vs. Popular Alternatives

FeatureGutenbergClassic ElementorDivi
1Core FunctionalityBlock-based editor with visual designSimple word-processor-like interfaceDrag-and-drop builder with live editingVisual builder with inline editing
2CostFree (built into WordPress core)FreeFree version; Pro: $59–$399/year$89/year or $249 lifetime
3Average Page Load Time1.5s1.2s2.8s3.2s
4Time To First Byte0.9s0.7s1.8s2.1s
5PageSpeed Score93/10095/10081/10078/100
6HTML Markup Efficiency188 lines of code154 lines of code794 lines of code912 lines of code
7Pre-built TemplatesLimited (patterns only)None300+ (most require Pro)500+ layouts
8Custom LayoutsBasic multi-column and group blocksLimited (HTML/shortcodes)Advanced with pixel-perfect controlsAdvanced with comprehensive options
9Animation EffectsBasicNoneExtensiveExtensive
10Learning CurveModerateLowModerate to HighHigh
11Visual EditingPartial (in editor)NoYes (true frontend editing)Yes (inline editing)
12Block/Widget Count102 core blocksN/A100+ (40+ in free version)100+ modules
13SEO Score92/10094/10085/10078/100
14Core Web VitalsHighHighestMediumLow
15WooCommerce Integration26+ dedicated blocksBasic20+ widgets (Pro only)Extensive
16Theme BuilderBasic (FSE in progress)NoYes (Pro only)Yes
17Dynamic ContentYes (with core blocks)NoYes (Pro only)Yes
18Code OutputCleanCleanestHeavierHeaviest
19Custom CSS AccessYesLimitedExtensiveExtensive
20Third-party CompatibilityExcellentGoodVery GoodGood

Everything You Need to Know About the New WordPress Editor

The Gutenberg WordPress uses blocks that can be combined to make rich content without coding. It’s not just for editing pages and posts. Getting started with Gutenberg gives you the freedom to customize the whole site, including headers, footers, templates, and layouts. 

Anyone working with modern WordPress websites should understand the Block Editor’s interface, settings, buttons, and block system.

Interface

The Block Editor is designed for ease of use, with a simple layout that makes content creation easy and powerful. 

It has several parts that work together, making editing smooth.

Gutenberg Editor anatomy explained.

In the Block Adding Area, you can add and edit blocks.. This space shows exactly how the content will format, offering a What-You-See-Is-What-You-Get experience.

The Block Inserter is the main tool for adding content. It’s located in the top-left corner and can be opened with the blue “+” button.

In the panel, you will see all available blocks by category and name. 

Blocks panel in the Gutenberg Editor

Users can browse or search for text, media, design, and widget blocks.

There’s also a Patterns tab that offers pre-designed block combinations (If you have any) for quick page sections.

Patterns panel in the Gutenberg Editor

One of the best features of Gutenberg is the Document Preview secretion that lets you see all the added blocks in a list format. There are two options, one is List View- here, you can see all the paragraphs, headings, and images of a post. 

This helps manage content more effortlessly, giving a clear overview of all blocks on the page. 

Block used List view panel in the Gutenberg Editor

Second one is Outline. In this section you can check the total Characters, Words, and Time to Read this post.

Outline panel in the Gutenberg Editor
You can Grab, Move, and Drop blocks in the Document Preview as well. 

Another useful feature is the Undo/Redo button, that lets you undo the most recent action.

Gutenberg editor undo and redo buttons

Quick shortcut for a simple mistake! 

Settings

The Block Editor’s Settings system has two levels: Document Settings and Block Settings. 

Both are accessible through the Settings panel on the right side, which appears when you click the Button.

Post settings panel in the Gutenberg editor.

Clicking on the Block will give you access to some additional settings for added blocks. 

Empty Block settings area in Gutenberg editor.

Well, the Block Setting is different for every type of Block available or installed on your WordPress site. 

The Post Settings control the main properties of the page or post. This includes the title, permalink, featured image, excerpt, and discussion settings. You can also find advanced options like custom fields, page attributes (for hierarchical content), and scheduling options.

However, Block Settings let you control individual block and their appearance. When you select a block, it switches between options specific to that block, like – 

Block settings area in Gutenberg editor.
CategoryDetails
1Styling OptionsColors, typography, spacing, and alignment
2Content SettingsLink destinations, image alt text, and media options
3Layout ControlsMargins, padding, and responsiveness
4Advanced SettingsCSS classes, HTML anchors, and custom attributes

Lastly, block locking options are available to prevent accidental changes or deletions of important content. 

The Lock option of Gutenberg WordPress block editor.

This is especially useful for sites with multiple editors or when you need to protect key layout elements.

Buttons

The Button system in the Block Editor includes both interface navigation buttons and the Buttons block used to create elements in content.

Interface buttons are key to the editor’s navigation and functionality. The main Block Inserter button (blue “+”) opens all available blocks and patterns. 

Block Adding button in the top bar of Gutenberg Editor

In the editing area, contextual buttons appear depending on the selected content. 

Block-specific toolbars show above selected blocks with formatting and configuration options. 

Top bar in Gutenberg WordPress editor for blocks.

Text blocks offer controls for bold, italic, links, and alignment. Image blocks allow for replacement, cropping, and caption editing.

The Block Toolbar is an important part of the button system. It appears above selected blocks and usually includes:

  • A block-type selector to change the block type.
  • A drag handle to move blocks.
  • Up/down arrows to adjust block placement.
  • Alignment controls for the block.
  • Formatting options for the content.
  • A more options menu (three dots) for extra actions like duplication, grouping, and block conversion.

Every button on Gutenberg is a powerful tool for adding styles and adding additional customization options. 

Blocks

Blocks are the basic units in the Gutenberg. They change how you create content, moving from a simple text format to a more modular and multimedia approach. 

Each block has a specific purpose and offers its own settings and styling options. They belong in specific Types, including: 

Text Blocks

Showcase of Text blocks in Gutenberg editor

Text blocks are the core for writing content. They include Paragraph blocks for text, Heading blocks for structure and SEO, and List blocks for bullet or numbered lists. 

Media Blocks

Showcase of Media blocks in Gutenberg editor

Media blocks help you add multimedia. The Image block lets you add responsive images with captions, alt text, and links. Gallery blocks create image collections with different layouts. 

Design Blocks

Showcase of Design blocks in Gutenberg editor

Design blocks help with layout and structure. The Columns block creates responsive columns. Group and Stack blocks help organize content. Spacer blocks add white space, and Separator blocks divide sections of content visually.

Widget Blocks

Showcase of Widgets blocks in Gutenberg editor

Widget blocks bring the classic WordPress widgets into the block system. These include blocks like Recent Posts, Categories, Tag Cloud, Search, and Social Icons.

Add More Blocks

The flexibility of the Gutenberg WordPress editor allows you to use additional advanced blocks plugins created by third-party developers. These additional Gutenberg blocks enhance the functionality of Gutenberg and offer you more options to create visually appealing websites.

Homepage of WPMozo Blocks and Addons plugin at WordPress.org.

For instance, you can use the WPMozo Blocks and Addons plugin that offers more than 10 free Gutenberg blocks.

This single plugin adds various blocks to meet different design requirements, enabling you to make the most of your Gutenberg editor. You can design headings with multiple colors or font types; add an image flip box with content and a button. Furthermore, expect more blocks in the library when the plugin gets updates.

Thus, you are fully benefited when you choose the Gutenberg editor as your primary WordPress page builder.

WordPress Classic Editor vs Gutenberg: Why it is 10 Times Better and Performs Well

After reviewing its performance and usage, it’s clear that the WordPress Classic Editor still offers many benefits. But those requiring additional tasks will definitely admire Gutenberg of WordPress. 

Gutenberg keeps on adding new features. Its easy-to-use interface is perfect for those who want an efficient editing experience. 

The Classic Editor is still a powerful tool that works well for millions of users. While Gutenberg offers more design flexibility, the Classic Editor lacks in speed, reliability, and ease of use.

Posted By:
Adrita
Adrita Chakraborty is a professional WordPress, Tech and Marketing writer. She has more than 8 years of writing experience under her belt. Apart from professional life, she loves to travel the world, reads books, cooks tempting meals.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

25 Best WordPress Gutenberg Blocks for 2025 (Free and Paid)

25 Best WordPress Gutenberg Blocks for 2025 (Free and Paid)

The Gutenberg editor is the future of FSE for WordPress, and with the best Gutenberg blocks, you can make that future brighter. If you’re looking for essential and best blocks for WordPress editors, in this post, you can immerse yourself in them. From free to paid, we...

How to Add X (Twitter)Share and Follow Button in Elementor Website

How to Add X (Twitter)Share and Follow Button in Elementor Website

Adding Twitter Share Button and Follow Button to your Elementor website can help you increase your site visibility.  You can use the WPMozo X(formerly Twitter) Share Button and Follow Button widget without any coding.  Let’s see how to add them in just a few...

Upgrade Your Gutenberg Editor with Advanced Blocks Plugin by WPMozo

Upgrade Your Gutenberg Editor with Advanced Blocks Plugin by WPMozo

If you have selected WordPress as your CMS, you'll get to hear a lot about the Gutenberg editor. You can take it as the topic of the hour as long as you're going to stay with WordPress.  And not only the Gutenberg editor, but its patterns, ease of use, and...

Explore, Learn, Grow: Join Now!