Login
Cart
Table of Contents
Gutenberg is a WordPress page editor plugin. WordPress users use it to design pages, posts, and products. It’s an update to WordPress classic editor, loaded with block navigation. Blocks comprise buttons, images, text, heading, paragraph, media, etc. Gutenberg was released on 5 December 2018.
If you have any experience of working with WordPress, it’s obvious you are familiar with third-party page builders like Divi and Elementor. With Gutenberg, WordPress tried to compose the maximum features of a page builder, and so it proved to be a wonderful page builder.
Gutenberg brings a great experience for blog writers with wider text space and editing blogs. It came along with WordPress 5.0 and is still in the initial phase. In this article we will discuss everything about it, it’s pros and cons, and it’s comparison with page builders.
What is WP Gutenberg in-depth?
Gutenberg is a new page and post editor for WordPress. Amazingly it is named after a printing press inventor Johannes Gutenberg, who has been passed 500 years ago. Gutenberg came with more flexibility for bloggers. It saves from adding up lots of plugins, fits on all screen sizes, and is a great tool to create modern multimedia layouts. You can compass text and image in the same line.
The classic editor needed to input loads of shortcodes and custom HTML where Gutenberg has a great variety of blocks, enough for creating a modern page or post. Gutenberg is still in the developing phase and sure it will come with more advanced options and layouts.
How to Install the Gutenberg WordPress Editor?
As Gutenberg is a plugin, you can download it from either wordpress.org or direct through the dashboard of your website by clicking on ‘Add New’ under ‘Plugins’. Gutenberg has 300,000 downloads and 20,000 active downloads. As it’s still a new cake in the bakery, chances are huge that it’s popularity will boost on.
Also Read: How to Setup a WordPress Website
WordPress version 4.8 is necessary to install Gutenberg.
Diving into Gutenberg
After installing and activating, hover to the Posts and click on All Posts. You will see Gutenberg with Edit and View links under every post. Click on it and you are now seeing Gutenberg WordPress Editor. Create a new post using features of Gutenberg; we will describe them below.
Note: Gutenberg is now the default editor for WordPress but you can still use the previous one by downloading it through the admin area.
Short Comparison between Gutenberg and Previous Editor
If you observer bothe the editors you will find out Gutenberg is more writer-friendly. It has more space across the devices and fits best on smaller screens.
The old editor has a toolbox menu like MS Word, a big sidebar on the right side and little space for writing the content. Though some people still love the old editor, it is because they don’t properly understand the Gutenberg. We are going to guide you all.
Writing the text in two-column format is simple, you need to write a piece of text, right-click on it and select Align Left or Align Right. It could be the images or text and image too.
Secondly, there’s a beautiful color picker in the right sidebar. There’s a choice for background color as well as for text color.
Embedding in Gutenberg
Gutenberg offers to embed it from 34 websites. Only paste the link of the media and Gutenberg will do the rest. Facebook, Twitter, Youtube, Spotify, Soundcloud, Reddit are one of them.
It also gives an option to hide some features form users. The previous editor had no buttons for embedding, one rather needed to use ‘shortcode’ for availing it.
A Detailed Review of Gutenberg’s Features
What are the Blocks?
For adding a block, there’s a + icon click on it and you will see all the available blocks. They consist of a paragraph, heading, embedding, image, video, and many more. There’s also an insert button at the top, it has options for all available embeds.
Gutenberg team did a great job of providing free of distractions workflow with building the menus and giving so much ease. As the most used blocks are there when you are typing and you can insert them within a second.
- RECENT: click the + icon or insert button, 8 mostly used blocks appear these are the blocks that you mostly embed while creating content, so they are there.
- Common blocks: contain headings, paragraph, image, audio, video, etc
- Formatting blocks: comprise on preformatted text, code, tables
- Layout: line breakers, separators, buttons, etc
- Widgets: archive posts, latest posts, categories, shortcodes
Also Read: Top WordPress Rich Snippets
Aligning Blocks
Aligning the content as per your desire is a hell lot of important, it realizes when you are trying to put a picture at a specific place wrapping in the text but whenever you drop the image to that place it gets back to where it was dragged from. I have been using classic editor and it was very irritating to get failed of creating a beautiful blog post rather I used to end up with a one-column text and images. Anyhow, Gutenberg has eliminated this annoying thing and came with a pleasuring blogging experience, now design a wonderful blog post.
Select the block tab to move the block left, right, and center. In the below screenshot, you can see the interface.
Table of Contents
Gutenberg creates a table of content on its own, it detects the HTML blocks h1, h2, ….. H6 in the article and creates a list. Click on any heading, it will scroll down to that. It’s better for smaller screens like mobile phones where immense scrolling is difficult, people can jump to the part fo the article they need to.
Also Read: What is Angular? What are its Features?
Anchor Tags in Gutenberg
Anchor tags are similar to the table of content but you are creating a list of headings this time, assign an anchor to each heading, so, the Gutenberg will let the users move to their desired section of the post. It’s like assigning an ID to the HTML element, linking it to the URL.
Additional CSS in Gutenberg
Most blocks have an alternative to add an extra CSS style to the square. This enables you to dole out classes that are characterized in your theme’s stylesheet.css file.
Utilizing this you can supersede or improve any default styling of Gutenbergs blocks, for example, buttons, where the options to change text style shading, is absent in this editor.
Also Read: Best Ways to Speed up WordPress Website
Gallery
Now time for my favorite part, you can comfortably include the block of pictures as a responsive gallery in your articles and spot them around different blocks. Including a Gallery block, supplies you options to transfer pictures or select pictures from the WordPress Media Library.
The choices for this block let you set what number of columns to show, contingent upon what number of pictures you added to the gallery. The pictures consequently resize as you change the section check.
There is moreover a ‘crop pictures’ switch in the block options for Gallery that attempts to make each picture thumbnail a similar size. What you find in the Gutenberg visual editor is not exactly what you get in an actual post, so you’ll need to compose pictures of similar sizes before uploading them.
Hero Section in Gutenberg
The hero section is most discussed in page builders such as Elementor and Divi, let us analyze what functionalities of hero section Gutenberg came with. Hero section some of the time called cover image are big headers, generally with content overlapped on them.
Gutenberg adds cover images with a text box centered horizontally and vertically, simplifying an otherwise difficult task. The block options enable you to diminish the hero section text milder to read, and furthermore to compel the hero section as fixed, which means when a client look over the page, the picture doesn’t move.
Also Read: WordPress Automation Tools
Similarly, as with the gallery, the picture you get in a post shows somewhat distinctively to what you find in the editorial manager. This is because of the responsive idea of the blocks – they sometimes have some different widths in the manager and a live page.
There is sometimes a difference in widths of hero/cover image on the editor and the webpage when it goes live. That’s why analyze the responsiveness carefully.
Custom HTML in Gutenberg
In WordPress, every theme has functionality for adding custom HTML, you can either write it in a text editor or a widget of a page builder.
Once the HTML is written and saved it becomes a block like Gutenberg’s usual blocks. it could be placed anywhere.
This custom HTML block also has a preview tab that executes any changes you make without ought to submit the article or click the WordPress preview button.
Gutenberg vs Page Builders
Now time for a big debate. Does WordPress try to make Gutenberg a competitor to third-party page builders?
Gutenberg may be a contender in the future because it can help to reduce overhead costs of buying page builders. Gutenberg is free while Divi and Elementor cost 100s of bucks. Gutenberg and Elementor target two different groups. Even Gutenberg seems to pretend to be a competitor to Elementor.
While Elementor is targeting people who want to have control over the whole website without (being able) to code (like professional designers or users without the necessary small change for a developer/agency), Gutenberg is more a content builder within constraints of an existing theme. Not everybody wants to create a whole WordPress website themselves even it’s quite easy with Elementor.
Secondly, Gutenberg is a great approach to provide the non-professional WordPress users some design control over the content. Some professional developers don’t like page builders because they make websites slow and add a ton of unnecessary HTML markup, which is a pain in the ass to debug. Gutenberg is great as it (hopefully) provides a well-documented API and is developed in a sustainable way orientated on global WordPress standards and philosophy.
In a broader context, we would say Gutenberg and WP page builders don’t compete against each other through both can be used for post decoration. Still, page builders create a whole website while Gutenberg is limited to page and post creation.
Also Read: WordPress Rest API: An Ultimate Guide
WordPress Gutenberg Performance Testing
Desktop Computer
When the editor is used normally, it is very concise and responsive. It is observed that whenever the addition or typing of new blocks is done, there is no delay. It was the same case for complex systems like adding a gallery of images without delay. While adding blocks some blocks will ask you to set a number of columns you want to display. When you do this, it will be reflected in the work area in no time.
It has been noticed that the new editor does not have the proper word processing style flow, but despite this deficiency, you can still copy and paste the text and Gutenberg has the ability to detect where the content should split. Both the default editor and Gutenberg were tested bypassing the Microsoft Word document file 2016. It was observed that both detected the same section and also similarly applied the formatting. While during the past there were few differences that were observed. Which are given below:
- In Guttenberg, the Color of the font was applied correctly in both heading and paragraph while the default editor did not pick it at all.
- In both the editors, ‘Heading 1’ was considered as a Paragraph, but the ‘heading 2’ was marked as a Heading 2 block.
- Line breaks were added in the default editor, but these breaks were not present in the original document while Gutenberg did not do so.
- In the file one section was marked as an ‘Intense blockquote’ and it was converted into a paragraph block by both the editors. It was changed to ‘Quote’ but still, it was not converted to ‘Blockquote’.
The reverse process was also applied as the file was copied from the WordPress and pasted in Word, the response was very poor. Highlighting one bar results in the highlighting of the top bar also, though it was not pasted into Word. Delay was observed while scrolling the page and clicking option and page becomes less responsive as well. When switching of block types was done, duplicate blocks were created at the same place, and I have to remove one of them.
Also Read: React JS Top Features
Mobiles
Performance and usability were also tested on android mobile phones. Developers did not work to make Gutenberg mobile focused, but still, it works brilliantly. While mobile testing it was observed that every button responds instantly and performance was also up to the mark.
A lengthy demo file of almost 880 words along with various images, embeds, and blocks were selected. The content was loaded instantly without any delay. While it was not the case in default editor. It was freezing when the edit post screen was loaded. No delay was observed while scrolling up and down also passing the YouTube embeds and Tweets on the way.
As in Mobiles, the display is small, the sidebar is hidden automatically. This will allow you the full-screen experience for editing. As the bars are also based on content, they will appear only when a block is selected and this will make proofreading of lengthy posts easy.
If you want to move the blocks up and down the document, simply tap on the block, go-to toolbar extra options button and this will bring up and down arrows. So you can move the blocks in no time. While in the default editor, it is a lengthy process. First, you need to highlight the content, cut it and scroll it to the other place then tap it until the cursor is where you want it and then you will paste it.
When you switch the block option menu for a paragraph, you will be able to change both font and background color instantly. There will be no preview for this as the whole screen will be covered by the options menu. If you want to experiment with colors and highlighting this is a slow process as compared to the default editor.
When the slider was used for changing the size of fonts, there was a delay and also the results were not accurate. Again, as the issue was with colors, here you cannot preview the change in size to see whether the selection was appropriate or not until the menu bar is closed. Block was removed instantly as were moved up and down. And this change does not make any changes to the layout.
Also Read: Secure WordPress Website
Pros and Cons of Guttenberg
Advantages of Gutenberg Editor
- Content can be visualized as blocks
- You can build complex layouts, even if you have only a little knowledge
- Makes the writing process very simple and easy
- You have the option of clean design and this will show only relevant tools you can easily use them when needed
- Quick embedding can be done from the number of websites.
Drawbacks of Gutenberg Editor
- It has some poor reviews by users
- Bugs were found consistently
- Beta software or testing was not ready for live websites.
Conclusion
Gutenberg is an interesting addition to WordPress’s visual editing. First to adopt what type of content you will be writing and where most of the work will be done? If the project is rich in content then you must need to check where embeds will be added and where to create galleries within the posts. The default editor will confuse you where the heading ends and paragraph begins and this forces you to switch to Text-based editor which will fix the placement of HTML tags. This will set the heading in one block and paragraph in the other so the confusion will be removed.
If you like to use web-based site builders then you will enjoy using Gutenberg instead of the default editor. If you are working mostly on the mobile phone or tablets, then I will recommend you to use Gutenberg. The issues mentioned above will be removed by the developers as they are working on it to fix those issues. When these issues will be removed this project will work even better than before.
We, at Acowebs, leverage the power of React in our WordPress and WooCommerce plugins so as to attain a top-notch performance. All our plugins are designed for giving equally seamless performance experience to these. Our plugins, WooCommerce dynamic pricing which is for applying bulk discounts quickly and WooCommerce checkout field editor which helps the website admins to customize the checkout form fields and WooCommerce product options which is basically to help the website admins to add extra product options or custom fields in the WooCommerce product detail page (The free version of this plugin WooCommerce product addons is available in WordPress plugin directory).
