Gutenbergby

The block editor was introduced in core WordPress with version 5.0. This beta plugin allows you to test bleeding-edge features around editing and cust …

Overall Rating
WordPress Rating

With the release of WordPress 5.0, a new WordPress default block editor was introduced named Gutenberg. It was named after the famous mechanical printer inventor Johannes Gutenberg. Today we are here with this ultimate Gutenberg review to give you a true insight that will help you make a choice.

The goal of the Gutenberg editor is to make adding rich content to WordPress easier and enjoyable. It allows you to handle the website elements with customizable chunks or blocks.

Gutenberg has crossed the 200k+ active installation mark with 16M downloads after it’s release in November 2019.

That is why it doesn’t matter if you have updated to WordPress 5.0 or not, you should have the basic knowledge about Gutenberg. And a good place to start learning about new products is by reading a detailed review.

So, sit back and relax. Let’s explore everything about Gutenberg.

Gutenberg Block Editor: How Is It Here

Before going into the detailed Gutenberg review, you should know the origin story of this WordPress editor.

The Gutenberg block editor was first introduced by Matt Mullenweg at WordCamp Europe 2017. It was officially released in December 2018. Initially, it was a plugin. However, with the release of WordPress 5.0, it became the default editor for WordPress.

Gutenberg was introduced with the sole purpose of replacing the Classic Editor. With this new block editor users can,

  • Add media files
  • Create complex content layouts
  • Rearrange and reorder content at ease
  • Use widgets and blocks to add more diversity to the content page.

Which was not possible with the old editor. That’s how Gutenberg came to life.

Basic Features & Functionalities Of Gutenberg

Plugin Review_ Gutenberg

Just like any other plugin, you can download and install Gutenberg on your WordPress site. So, no need to waste your time going over the process. Instead, we are going to talk about what you can expect and the main features of Gutenberg in this section of the article.

1. Blocks To Easily Build and Write

Gutenberg is all about Blocks. They are an integral part of the WordPress ecosystem. And the name is justified as they are literally the building blocks you use to create content. Every individual content in Gutenberg is its own block. That means you can add text paragraphs, images, embedded files, headers, and so on as block in any post or page.

Select the + icon on top of the page and you will see all available blocks. The team did a great job of providing a distraction-free writing space as you can insert any block within a second while typing.

COMMON BLOCKSFORMATTING BLOCKSLAYOUT BLOCKSWIDGETS
ParagraphPull QuoteSeparatorLatest Posts
ImageTableMoreCategories
GalleryPreformattedButtonShortcode
HeadingCodeText Columns
QuoteCustom HTML
ListCustom Test
Cover ImageVerse
Video
Audio

Embeds

TwitterAnimotoMeetup.comSmugMug
YouTubeCloudupMixcloudSpeaker
FacebookCollegeHumorPhotobucketTED
InstagramDailymotionPolldaddy Tumblr
WordPressFunny or DieReddit VideoPress
SoundCloudHuluReverbNation Vine
SpotifyImgur Screencast WordPress.tv
Flickr Issuu Scribd
Vimeo Kickstarter Slideshare

This makes it much easier to edit every block of content individually, enabling you to set block-specific settings and formatting. Also, it is simple to reorganize and re-order your content within your posts.

blocks

2. Move & Align Blocks

Aligning the content as you desire is important and was difficult with the previous editor. However, you can easily move and align blocks withing the page with Gutenberg.

To align the blocks left, right, center hover your mouse over the block and you will find an icon shown in the below screenshot. You can easily align your text with this option. However, it doesn’t work as well as creating your own HTML and CSS.

aliginig blocks

Also, you can see up and down arrows are placed to the left of each block when mousing over them. You can use them to move your blocks up and down.

reordring blocks

3. Block Navigation

Just like the table of contents, Gutenberg creates block navigation that tells you the whole structure of your content. You can easily see what blocks you have used in an orderly fashion in your content.

And you can jump in that particular block by simply clicking on it.

block navigation

4. Table Of Contents & Document Outline

Gutenberg has made navigation easy for its users. It automatically detects HTML blocks h1, h2, h3….h6 within the article, and creates its own table of content. And, most importantly if you click on any heading it will scroll down to that.

So, it is better for smaller screens, especially for mobile users where you need immense scrolling.

table of content

Also, above the navigation, you will be to view the full outline of your document. You can see the number of words, headings, paragraphs, blocks.

document outline

5. Visual Editor And Code Editor

You have the option to choose between the visual editor and text editor. The visual editor is used for normal text-based editing for your content. While if you want to customize any of the code tor add no-follow links you can switch to the Code editor. It will also reveal the coding style used to create the effects.

visual and code editor

6. Additional CSS

You can add an extra CSS style sheet to the most blocks of Gutenberg. This enables you to stylize the classes that are characterized in your theme’s stylesheet.css  file. You can easily improvise on any default styling of any of the blocks.

That way you can add a personal touch to your content design.

addiotional css

7. Writing Modes

As we said earlier, The Gutenberg team has done an awesome job of creating a distraction free writing space. They have created three writing modes for your writing preferences.

  • Top Toolbar
  • Spotlight Mode
  • Fullscreen Mode

Top Toolbar: This display option allows you to access all blocks and documents in a single place Spot.

Gutenberg WordPress Gutenberg review

Spotlight: If you want to focus on one block at a time then this mode is perfect for you. This mode blurs the other blocks so they don’t distract you while you can focus on the block in hand.

Gutenberg editor Spotlight mode, Gutenberg review

Fullscreen: This mode removes all the distractions and allows you to work with full focus. It will diminish all the unnecessary menu items from the page. So that you can get a fullscreen editor to build your content.

Gutenberg WordPress-fullscreen mode

8. Gallery Block

Personally, it is one of my favorite parts of this Gutenberg review article. One of the many blocks of Gutenberg includes the gallery block. You can easily add a group of images that will act as a responsive gallery. Then you can use that around your blocks.

Depending on how many images you upload, the block will set the column size according to that. Also, the images will be automatically adjusted to the column size. An odd number of columns makes the last few images larger than the rest, giving them prominence.

gutenberg gallery block

Helpful Post: Gutenberg new Updates.

9. Buttons

Buttons are prominent to CTAs (Call To Action). That is why it is important to use a button to attract users to guide users on what to do next. With Gutenberg, you can add one to many buttons in a single block.

You can add links to other pages with texts, label it with Italic, Bold or Strikethrough. Also, you can place the buttons right, left, center.

buttons

You can add solid or gradient colors to the buttons. You can use a color picker that also has text entry for HEX, RGB, or HSL codes.

button colors

10. Copy & Paste Process Is Well Designed

One thing Gutenberg has done successfully is creating a simple process on copying and pasting the content. On one side you can easily copy the whole content from the editor with one click. Just click the ellipses icon at the top right to see more tools and options menu. There you will find an option “Copy All Content” at the bottom of the menu. Click this option to copy all the content on your page.

copy all content

On the other hand, you can copy paste content from anywhere without breaking the structure. Whether it’s Google docs or Microsoft Word.

11. Compatible With Different Devices

From the previous features you can understand that Gutenberg has added features that will be helpful to make the content compatible with different devices.The layout of the Gutenberg editor is responsive and makes navigation through different devices easy to learn and use.

The editor has been designed to work on different devices such as computers, mobile phones, and tablets. The editor also works on different screen sizes.

compatible

So, these are the important features of Gutenberg. But you will find more features when you use it yourself.

Advantages Of Using Gutenberg Editor

So, in the previous section, we have gone over the important features of Gutenberg. However, you will realize the significance of those features once you know how it benefits you every day.

Therefore, in this next part of our Gutenberg review, we will be discussing the Pros of the editor. Like,

  • You can imagine your content as blocks, so it will be easier to edit and rearrange
  • Drag and drop images, that means you can drag and drop images into your content from outside
Gutenberg Editor Drag and Drop feature
  • Slash autocomplete, you can use slash (/) to add blocks more quickly to your content
slash autocomplete
  • Gutenberg makes building complex layouts easy, even if you have little knowledge
  • Clean and simple design, your content will look fresh and stylish
  • Easy to embed from a number of websites
  • Provides a less distracting writing space, with a quite clean interface
  • Works great with mobiles, has a great navigation system
  • Theme and plugin developers can create their own custom blocks
  • Makes the content writing process quite easy
  • Beginners can learn quite easily.

Gutenberg is the new default editor for WordPress now. So, it is better to get used to this editor rather than avoiding it. And these advantages will sure to put your mind at ease on using the editor.

Some Issues or Cons Of Gutenberg

Well, not everything is perfect with the Gutenberg editor. There are still some flaws that make the editor fall short from the perfect score. So, as well as the advantages we are going to talk about the disadvantages of it as well.

  • It might be easy for beginners but some may find it difficult to use
  • The switch from classic editor to Gutenberg may hamper writing quality
  • With so many blocks available, some may find it hard to locate their desired block
  • It’s frustrating to select a parent block in a nested block scenario
  • Still not sure about the backward compatibility
  • It has got a lot of one-star ratings from users.

However, the team is working to fix these issues and create better solution. We can hope for the best.

WordPress Gutenberg vs WordPress Classic Editor

WordPress Gutenberg Releases on 18 November

Before Gutenberg, people were using the Classic Editor. It was loved by the users for its simplicity. However, this simplicity had a downside. Without editing the HTML code, it was impossible to make pages with a custom layout. Yes, and the work with HTML itself required more time and more in-depth knowledge of HTML.

That’s one of the fundamental reasons for introducing the Gutenberg block editor. It made the process of editing complex layouts easy and also it offered a modernized writing process with each element worked as a block. Here is a short comparison of the two editors.

Interface

Gutenberg has a drag and drop editor. That means you can select a block and drop it anywhere in your content. Also, this interface makes it easy for rearranging and reordering the whole content.

The Classic Editor has a clean and simple interface compare to Gutenberg.While it is an ideal environment for writing , it makes creating complex layouts difficult. You will need the help of custom HTML and CSS.

Content

Gutenberg’s framework is like a roller coaster ride. It’s eventful. With so many functions available, sometimes you may get confused. But, it is like a refurbished version of the Classic Editor.You can create complex contents with this editor.

Classic Editor‘s framework is more like still water. It provides a beautiful canvas for writing without any distractions. However, the problems appear when you try to create complex contents.

Execution

Talking about adding media, creating complex elements, and embedding contents, Gutenberg is, undoubtedly, much better than the classic editor. It comes with an abundance of new functionalities that can be easily executed.

While we said over and over again, if you are not looking to publish post everyday or writing for fun, then you should use Classic Editor.Otherwise, you will end up wasting a lot of time stylizing your content with this editor.

>> Compare Gutenberg With Classic Editor <<

Gutenberg Vs Page Builders

When Gutenberg was released with WordPress 5.0, the question was being asked if it was a replacement for page builders. Like how does it compare to page builders like Elementor or Divi?

However, Gutenberg block editor does bring more visual design and drag-and-drop editing, it’s not exactly a replacement for page builder plugins quite yet. It is a good substitute for basic contents or layouts. But if you want to pinpoint your style or add more diversity to your site then you will be happier with page builders.

Hers is short comparison between Gutenberg and Page builders.

ComparisonGutenbergPage Builders
Drag & DropGutenberg is a not drag and drop page builder. You can add blocks and move your content up and down.Page builders allow you to drag and drop widgets, create columns, provide section nesting
EditorGutenberg is a backend editor, that means you will not get a proper idea how your page will look like after publishing.With Page Builders you will get a live preview. That means you can see exactly how your page will turn out.
Widgets & BlocksGutenberg comes with a decent number of blocks covering all the basic elements.Page Builders provide more blocks and widgets that is more than enough to create a professional website.
PossibilityThe purpose of adding Gutenberg to WordPress is to offer a modern writing experience to users.Page builder plugins provide a visual drag and drop interface to design entire pages.
LayoutYou have limited freedom to create content layouts with Gutenberg blocks.Page Builders give you all the flexibility.
Styling OptionsThe blocks in Gutenberg come with their own styling and formatting options. However, these options are limitedPage Builders, on the other hand, offer a lot more styling options. You can change background colors of blocks, use gradients, use font-icons, select fonts, more
Gutenberg vs Page builders

Performance Test Of The Gutenberg Block Editor with WPHive

As you already know we have launched WP Hive, a better WordPress repository. You can easily search plugins more efficiently, compare plugins side by side and also get the performance test of any plugin.

So, this Gutenberg review article will not be finished without conducting a proper performance test of the editor. That is why we are going to test the Gutenberg editor through WP Hive and see what result it gives us.

Initial Test

If we look at the initial test done by WP Hive of the editor, you will be able to see Gutenberg is the latest PHP compatible, latest WordPress compatible, also there are no activation errors.

initial test gutenberg review

Performance

Gutenberg uses less memory than 99% plugins while it is faster than 99% plugins. That is actually impressive.

gutenberg performance

Statistics

You can view the download statistics, user ratings, last update status from the tests.

gutenberg stats

What’s Next For Gutenberg

Gutenberg recently released it’s version 8.3. In this new version, they have added some new features to the editor including,

  • Reorganizing set of block categories
  • Parent block sector
  • Spacing control
  • Link color options
  • Ability to filter the latest posts.

However, the team is working in bringing in some new features in near future like,

  • Full site editing(FSE)
  • Navigation screen
  • Widget screen and more

So, keep an eye out for these updates as it will change your writing experience.

Gutenberg is The Future, No Way to Ignore It

So, we have come to the end of this Gutenberg review blog. We have tried to give you as many details as we can about the Gutenberg block editor.

If you want to write with more flexibility and create a smart content structure then you must get used to using this Gutenberg block editor. The editor comes with the aim to make WordPress easier to use.

WordPress also gives emphasis on Gutenberg and planning everything with Gutenberg in the upcoming days. So, you can’t ignore this WordPress block editor anymore!

Don’t make a mistake and don’t even wait. Start exploring the editor from today and keep you updated!

All right sparky!

The plugin scored great on our tests. Everything looks good!

Tests done by WP Hive test script Results
  • Minimal impact on memory usage The memory usage of this plugin is less than the average memory usage of other plugins on WordPress.org + 200KB. Check FAQ for more.
    Download Icon
  • Minimal impact on pagespeed The impact of this plugin on PageSpeed is less than the average impact of other plugins on WordPress.org + 1000 milliseconds
    Download Icon
  • No PHP errors, warning, notices WP Hive automated test found no PHP error while activating this plugin on our server
    Download Icon
  • No Javascript issues WP Hive automated test found no JavaScrip error while activating this plugin on our server
    Download Iocn
  • Latest PHP 7.4.8 compatible WP Hive automated test found the plugin fully compatible with the latest version of PHP
    Download Icon
  • Latest WordPress 5.6 compatible WP Hive automated test found the plugin fully compatible with the latest version of WordPress
    Download Icon
  • Optimized database footprint The plugin creates less than 50 database tables
    Download Icon
  • No activation errors WP Hive automated test found no activation error while activating this plugin on our server
    Download Icon
  • No resource errors WP Hive automated test found no resource error/s while trying this plugin on our server
    Download Icon
  • Frequently updated The plugin was updated at least once in the last 90 days
    Download Icon
  • No problems were detected during tests.
  • All the plugins are tested on the same server with exactly same configuration via test script that automatically activates and logs the data WP Hive shows.

    • All the scripts run on a VPS with 8 CPU cores and 8 GB of RAM.
    • The test sites are hosted on Google Cloud VM instances, one site/plugin per instance. The machine type is n1-standard-1. The server is a 8 core CPU with 8GB of RAM.
    • The test sites are hosted on Apache/2 server and they are tested on PHP 7.4.8 & WordPress 5.6.
    • The database server is MySQL 8.0.15 and the default PHP memory limit is 256MB.
    Download Iocn

    41M

    Total Downloads

    Installation Iocn

    300K

    Active Installation

    Calendar Iocn

    7 years

    On WordPress

    Growth Iocn

    0.0%

    Growth Rate

    Support Iocn

    21

    Support Thread

    Rating Iocn

    3738

    Ratings on WordPress

    Download Iocn

    00

    Downloads This Week

    Update Iocn

    00

    Ago Last Updated

    Wordpress Icon

    Disclosure: When you buy through affiliate links on this site, WP Hive may earn a commission which
    
we use to keep the site running. Learn more →

    About Gutenberg

    Description

    The block editor was introduced in core WordPress with version 5.0 but the Gutenberg project will ultimately impact the entire publishing experience including customization (the next focus area). This beta plugin allows you to test bleeding-edge features around editing and customization projects before they land in future WordPress releases. Discover more about the project. Editing focus The editor will create....

    Read More >>

    Explore all plugins from

    Performance

    Memory Usage

    • Download Icon Average memory usage is98.51 KB
    • Download Icon This is more than74%plugins

    Page Speed

    • Download Icon Average page loading time is increased by 0.13 s
    • Download Iocn This is faster than99%plugins

    Speed Test Benchmark Learn more how we collect the data

    • Before plugin activation
    • After plugin activation

    Pages

    Benchmark

    Change

    Average Change
    + 0.13s
    /(front page)
    - 0.05s
    /wp-admin/edit-comments.php
    - 0s
    /wp-admin/edit-tags.php?taxonomy=category
    + 0.15s
    /wp-admin/edit.php
    + 0.04s
    /wp-admin/index.php
    + 0.39s
    /wp-admin/media-new.php
    - 0.02s
    /wp-admin/options-discussion.php
    - 0.03s
    /wp-admin/options-writing.php
    - 0.04s
    /wp-admin/post-new.php
    + 0.89s
    /wp-admin/post-new.php?post_type=page
    + 0.34s
    /wp-admin/upload.php
    - 0.24s
    MoreLess

    Memory Usage Memory Usage Benchmark Learn more how we collect the data

    • Before plugin activation
    • After plugin activation

    Pages

    Benchmark

    Change

    Average Change
    + 98.51KB
    / (front page)
    + 43.69KB
    /wp-admin/edit-comments.php
    + 53.95KB
    /wp-admin/edit-tags.php?taxonomy=category
    + 62.08KB
    /wp-admin/edit.php
    + 61.21KB
    /wp-admin/index.php
    + 54.58KB
    /wp-admin/media-new.php
    + 61.97KB
    /wp-admin/options-discussion.php
    + 62KB
    /wp-admin/options-writing.php
    + 57.94KB
    /wp-admin/post-new.php
    + 282.92KB
    /wp-admin/post-new.php?post_type=page
    + 281.36KB
    /wp-admin/upload.php
    + 61.95KB
    MoreLess

    Stats Stats

    Download Statistics

    Plugin Version Usage

    Stats More

    Database Tables

    The plugin has added 0 additional options to your WordPress.

    WP-Options

    The plugin has added 1 additional options to your WordPress website.

    Show Off Your Plugin

    Download Icon

    PHP 7.4.8

    Powered by WP Hive

    Download Icon

    WP 5.6

    Powered by WP Hive

    Download Icon

    Logo

    PHP 7.4.8 WP 5.6

    Icon

    Love using this plugin?

    Why don’t you compare the plugin side by side
    with another plugin

    Are you an author of this plugin?

    Want to skyrocket the popularity of your plugin and reach millions of eager users? Look no further than WP Hive. Gain credibility through in-depth reviews, drive conversions with targeted email marketing, and boost visibility with strategic social promotion and exposure

    Supercharge My Plugin
    Author Illustration Icon

    Be Part of the Conversation with WordPress Enthusiasts

    Changelog

    Please Allow Us A
    Moment Before You Go

    Subscribe to our weekly newsletter to get exclusive WordPress toturials, updates and pillar content directly in your inbox.

    WP Hive extension for Chrome is now available

    Install Hive Logo