If you start using the Gutenberg editor in WordPress and get used to it, there is no way to go back to the standard WordPress editor.
We create WordPress websites for our clients. In this article we convey our experiences using the Gutenberg editor and using Page Builders. We present the pros and cons of each solution.
With Gutenberg’s functionality and some add-ons that extend its capabilities, you can even replace page builders such as Elementor, Beaver builder and Divi.
Among other things, the advantage of such a move is that your WordPress pages will load faster and have a better Google Core Web Vitals score.
The Gutenberg Block editor first appeared with WordPress 5.0
WordPress version 5.0 came for the first time with a new editor application that aspired to replace the classic editor. And the name of the editor was Gutenberg, after Johannes Gutenberg the inventor of movable type (blocks) printing in the 15th century. Johannes Gutenberg’s invention changed the planet. Now the dissemination of ideas and knowledge became easier and more accessible around the world. It led to a world of innovation.
The Gutenberg editor of WordPress also uses mobile elements (blocks). Paragraphs are block. Headers are block. Lists are block. Images are block.
WordPress’ Gutenberg editor hopes to revolutionize the way content is created in the same way as WordPress.
The truth is that WordPress users hated the Gutenberg editor
However, the reception of the Gutenberg editor has not been very nice from people using WordPress! The reactions were close to true hatred as the negative reviews it received reveal.
The classic editor and its ease of use was one of the reasons that made WordPress so successful. The interface looks like a Word editor. And WordPress users weren’t ready to leave all that behind for the new editor that seemed too complicated and required investing time to learn how something new worked.
As a result, plugins such as the Classic Editor plugin were created that disable Gutenberg and restore the Classic editor. The Classic Editor plugin has millions of installations.
My relationship with the Gutenberg editor. From the classic editor and page builders to Gutenberg
In the beginning and for a few years, I had joined the millions of WordPress users who were reluctant to use Gutenberg.
One of the first moves in new WordPress installations I made was to install the Classic Editor plugin to disable Gutenberg.
I used page builders like Elementor and Divi to shape the design of my pages.
And I was happy with that.
The turning point was Google Core Web Vitals
But then something happened that changed my perspective.
And this event was the introduction of the Google Core Web Vitals and the need to optimize load time, minimize page shifting and generally give users a better experience, especially on mobile devices.
WordPress sites that use page builders are ranked low or very low in the Core Web Vitals metrics. That’s because these plugins, as useful and convenient as they are, introduce a lot of extra code in the form of Javascript, PHP and CSS into a WordPress site.
Then, I decided to do an experiment, a test if you like. To convert a website that was using Elementor to just Gutenberg. That is, to remove Elementor page builder and in its place use only Gutenberg and achieve almost the same result in terms of appearance, but with a much faster loading speed and a very high score in Google Core Web Vitals.
It took me 2 weeks to make the transition. During that time, I learned a lot about the Gutenberg editor and the things you can do with it. I began to appreciate this hidden gem within WordPress.
I managed to recreate the original look of the WordPress site using only Gutenberg.
And guess what! The site using only Gutenberg ranks almost perfect in the Google Core Web Vitals!
That was my turning point!
Gutenberg is now my favorite editor for WordPress.
I have to admit that Automattic , has a vision for Gutenberg and WordPress that few of us were able to understand at first. And I wasn’t one of them.
Extending Gutenberg. Themes, Plugins and CSS
To get the most out of Gutenberg, in my opinion, you need to combine it with the right theme and install some add-ons that add more features.
Themes (Themes)
My themes of choice for Gutenberg are Astra and Astra Pro.
Both themes complement the Gutenberg editor, load quickly and give you a simple interface.
Free plugins for Gutenberg
I’m going to recommend two free add-ons that will make your experience with Gutenberg much easier.
Gutenberg Block Editor Toolkit – EditorsKit by Jeffrey Carandang
The EditorsKit plugin provides a number of additional options for page building blocks and a toolkit for the new WordPress editor, Gutenberg. Now you can have better control, text formats, styles and workflow by simply using the tools provided by the EditorsKit plugin.
Gutenberg Blocks – Ultimate Addons for Gutenberg by Brainstorm Force
This plugin comes from the creators of the Astra theme.
Enhances the Gutenberg editor with advanced and powerful blocks that help you create websites in no time! This first Gutenberg add-on is here to make building websites a pleasant journey.
If there is a reason to install this plugin, it is the “Advanced Columns” block.
The Advanced columns block is a huge leap for Gutenberg!
This add-on adds the following blocks to your arsenal:
Forms: The Forms block allows you to easily create an interactive contact form, newsletter, suggestions, etc. You can add various fields like name, email, message box, phone number, check boxes to your form and get more potential customers.
Tabs: The tab block offers an easy way to display tabbed content and allows you to add large content in a smaller place to improve the user experience.
Lottie: Add attractive animations to your page design. Gain an ultimate control with advanced options like motion speed, animation activation etc., You can reverse the animation, manage the size and do much more.
Review Schema: Add a review of a book, movie, course, software application or product with star ratings. Enable review schema support with just one click to get higher ratings for the page/post in search results.
Taxonomy List: With this block, you can easily display categories for posts/pages or custom post types. Moreover, you can design it with grid, list or drop-down layout and set color, typography.
How-to Schema: This block allows you to design attractive pages or instructional articles that can describe the step-by-step process to achieve specific goals. The best part is that this block will automatically add the Instruction Schema to your page which can increase the ranking in search results.
FAQ Schema: This block helps you answer common user questions in an easy and attractive way. You also get a one-click option to implement FAQ on the page. This helps to display content in a rich snippet that can attract more traffic to your site.
WP – Search: Search bars quickly bring up information that users are looking for and provide a great user experience. You can display the WordPress search box anywhere on your page easily with the WP – Search block.
Inline Notice: Sometimes when writing a procedure or steps to achieve certain end results, users may need to pay attention to some important notes. The Inline Notice block provides a nice ready-to-use framework where you can quickly add text to highlight it.
Advanced Heading: The Advanced Heading block allows you to add a combination of a header and subheader with a separator between them. You can select the header label for the header and manage other settings and customizations.
Advanced Columns: This Advanced Columns block provides you with advanced options to insert a number of columns in a single row. You get various customization options to manage the look and feel of the entire block and individual columns on the page with advanced shape separators, variable widths, etc.
Blockquote: This Blockquote block allows you to display tweetable text in a modern and designer format with many customization options.
Call to Action: The call to action block helps you to create attractive call to action with a modern title, description and an attractive button that increases conversions on your website.
Contact Form 7 Styler: Contact Form 7 Styler is an easy-to-use Gutenberg block that allows full customization and styling of existing Contact Form 7 forms on your website.
Content Timeline: The Timeline block allows you to create beautiful timelines on your website. This could be useful for showing company history or progress, to record your personal achievements, roadmap or product release cycle, etc.
Google Maps: The Google Maps block allows you to display locations with zoom options you’d like to try.
Gravity Forms Styler: Customize your default Gravity form with the Gravity Form Styler to display more attractive forms that convert.
Icon List : The icon list block allows you to place an image or icon in a list format. You can select your favorite icon or image that matches a list to act as a dot for each list item.
Info Box: Infobox, allows you to place an image or icon along with a header and description in a single block. You can select the image or icon and customize the content within the block.
Marketing Button: The Marketing Button block allows you to create modern CTAs aimed at attracting audiences with conversion-oriented text and a stunning button with lots of customization.
Multi Button: This Gutenberg block allows you to add multiple buttons to a single block You can add up to 1 button with a multi button block. In addition, it provides you with additional settings for each button and allows you to manage dimensions and response settings as well.
Post Carousel: Want to create a post slider in which your blog posts appear on a carousel? The Post Carousel block allows you to display posts in a carousel and manage their settings and the content you want to display within them.
Post Grid : The Post Grid block takes the blog posts you may have on your site and displays them in a grid layout. You can customize the order of your posts and manage settings such as the selected image, content, etc.
Post Masonry: The Post Masonry block retrieves blog posts on your site and displays them in a masonry layout. You can customize how your posts are displayed and manage settings from your posts, such as the selected image, the content you want to display, etc.
Post Timeline: The Post Timeline block helps you to display blog posts on your website in a list based on the dates on which they were published. You can customize the content displayed for each blog post and manage the date, selected image, etc.
Price list: This block allows you to design a beautiful, easy to manage, Price List for your website.
Section: This is an external enclosure that allows you to add other blocks to it. You can manage the layout of this section and customize it using options such as spacing, background, border and advanced settings.
Social Share: the social sharing block allows you to allow users to share your content on various social networking sites.
Table of Contents: Table of Contents allows you to display an index or list of headings included in a large post or page. This gives users an overview of the content and links to specific sections of the page or post.
Team: The Team block allows you to display your team. Add their picture, their name, what they do and links to their social profiles.
Testimonial: Testimonial block helps you display amazing customer reviews on your website in a carousel layout.
Custom CSS and Gutenberg
The fact is that if you want to create custom designs using Gutenberg, you need to know CSS.
The reason is that you need to add custom CSS classes to your Gutenberg blocks to control their appearance and position accurately.
And then declare these CSS classes in the style.css file in the child theme of the theme you are using.
Gutenberg vs. page creators. Is there a place for Page Builders in WordPress after the adoption of Gutenberg?
Of course there is!
Page creators such as Elementor, Divi and Beaver have nothing to fear from Gutenberg.
Here you may say, “What are you talking about after such an introduction!”
A few lines ago you told us that you replaced a page builder with Gutenberg and now you tell us that these page builders have nothing to fear from Gutenberg. This is a contradiction. Isn’t it?
The fact is that we don’t build WordPress websites just for us, but for clients.
And customers are happy with the ease of use of the classic editor along with page builders like Elementor, Divi and Beaver builder.
For a person with less experience who wants to focus on promoting their business and not becoming a WordPress or CSS pro respectively, the classic editor and a page builder may be the best choice.
Especially if they run an established business that wants to have a good online presence and does not rely on SERPs (Search Engine Results Pages).
Page builders add a lot of functionality to WordPress. Sometimes, unique features that the Gutenberg block editor can’t offer at the moment.
WYSIWYG – The advantage of page builders
The advantage that the page builders for WordPress have and still can’t compete with Gutenberg, is that they provide the possibility of WYSIWYG (What you see is what you get).
With page creators, what you see is what you get.
With Gutenberg, this is not the case when using it in expert mode.
In advanced design with Gutenberg, you may see one block behind another, but when you view the page, that block will overlap the one above. This is because of the CSS classes you declared.
So yes! There is a great future for page creators and WordPress!
Especially for those who love WYSIWYG.
Conclusion
The Gutenberg block editor is the future of WordPress.
He’s here to stay.
When you realize the possibilities it offers in page design and the advantages for SEO, then you will change the way you interact with it.
You should try it.
In my opinion, to get the most out of Gutenberg and be able to easily replicate what you can achieve with a page builder, you need to have advanced knowledge of WordPress, and CSS.
If this is not the case, then page builders and the classic editor are the best choice for you and your customers.
