– Gutenberg suffers a poor launch and startup while Elementor & other PageBuilders shine.
– Gutenberg 3rd party add-ons as vital Gutenberg Editor enhancement.
– >Kadence is a pioneering Gutenberg add-on.
– >Qubely adds styling and innovative block features.
– >Editor Plus and Abs add catch-up styling to Core and 3rd Party Blocks
– >Stackable vies with Gutentor for the most useful blocks
– >Toolset provides full CPT, Custom Field, & Custom taxonomy support
– >Spectra along with Kadence has been pioneer creator of blocks, templates, styling
– Four Gutenberg Enhancements
– Go Pagebuilder when you can
– CSS Style Editors
– >SiteOrigin CSS free editor
– >CSSHero Style Editor
– >Yellow Pencil Visual Style Editor
– >Microthemer CSS Style Editor
– CSSEditors Summary
– Gutenberg Speed Questions
– Gutenberg Current Status
So it is significant that the Gutenberg plugin as of April 30, 2022 had a 2.08/5.0 WordPress Plugins Rating 3 years and 4 months after Gutenberg was introduced in December 2018 with the launch of WordPress 5.0.
What makes this date significant is the fact that the Elementor PageBuilder, which started development in 2016 a year after Gutenberg, managed to reach 2 million active users just 2 months after the launch of the Gutenberg editor. However, the persistence of the low WP plugins rating reflects a daunting timeline of many changes and shortcomings:
- The new Gutenberg Block editor has a markedly different UI with a more complex workflow in comparison to the Classic Visual Editor or even popular PageBuilders. However, early bugs, glitches and sparse documentation made for an awkward intro for Gutenberg;
- Despite the many shortcomings of the new Gutenberg Editor, the Classic Editor was demoted and given a 2021 expiry date. It did not help that documentation for the Gutenberg editor was lacking and subject to constant name and workflow changes;
- But for many users the Classic Editor, with the help of Advanced TinyMCE and ShortCodes Ultimate plugins, is more than adequate for their WordPress editing tasks. Today the Classic Editor is the 4th most popular WordPress plugin with 5 million active installs; including this developer using the Classic Editor for this summary review.
- Finally, Gutenberg did not attempt to match the feature set of the existing PageBuilders like Divi, Elementor, Site Origin, Visual Composer, etc. PageBuilders with their WYSIWYG drag & drop edits plus very rich and responsive styling options and savvy component features have set a styling standard that Gutenberg has yet to match. Yet rich styling and layout options are vital to WordPress websites seeing frequent change and often using prebuilt template pages and components also needing design customizations. As a result, the inevitable conclusion is that Gutenberg Editor still does not match the top PageBuilders in component/widget features plus vital design and styling options. Aalso many Gutenberg blocks are freemium – users have to pay to get full block functionality.
However, this low rating does not at all apply to the many 3rd party Gutenberg blocks and add-ons that have emerged from the Word Press developer community. Rather these add-ons help to fill the widget features gap plus add improved styling options needed by Gutenberg. So the 6 top-ranked Gutenberg add-ons listed below are one part of the solution – these Gutenberg add-ons are a key part of the necessary enhancements to the Gutenberg Block Editor.
Add-ons Improve Gutenberg Functionality
Now Gutenberg is not the only WordPress UI to have 3rd party add-ons to supplement their engines’ features. Divi, and Visual Composer were two early PageBuilder developers with robust 3rd party add-ons. But Elementor, back at its startup in 2016 initiated development with a 3rd party API and extensive developer tutorials. By 2022 that effort amounted to over 800 add-on plugins in the WordPress directory.
Fortunately, the Gutenberg team using its Open Source roots, TRAC workflow and GitHub tools has a strong 3rd party community. As a result there are over 500 Gutenberg Block plugins available as free and premium add-ons. The following are the top 6 Gutenberg add-ons from our tests and the BobWoodward list of best Gutenberg add-ons.
Kadence Blocks have been the pioneers in 3rdParty Gutenberg Block add-ons.
Qubely adds helpful and improved page layout and styling aids:
Qubely has the most free and Pro blocks of the top Gutenberg add-ons. Also its styling options apply to many of currently active blocks.
Editor Plus may be the real steal among top Gutenberg add-ons – close behind is ABS Block for its devoted stylings toolkit.Both add-ons’ styling options work with all of the Core Gutenberg blocks plus many 3rd party add-on blocks. Editor Plus and Abs blocks are instrumental in improving Gutenberg’s stylings. The Abs block dramatically improves the Gutenberg Core Blocks styling capabilities but does not add any blocks or templates as Editor Plus does. The Abs and Editor Plus stylings combined are on par with the Beaver Builder styling settings seen below.
However Divi & Elementor styling options are a distinct step above all the Gutenberg Core Blocks.
Editor Plus draws on its own as well 3rd party templates to enhance UI layout tasks.The full range of stylings including animations can be used on the Editor Plus templates. In general, Editor Plus and Abs blocks are vital styling and layout tools. However, neither tool can address the top end styling short comings, lack of WYSWYG support and cluttered interface that is the Block Editor. So this review will feature some other Gutenberg Editor work-arounds cited below.
Stackable is an add-on that works like Qubely with edit aids but also adds key stylings too. Stackable allows drag and drop of image and multiple column block sizing while at the same time providing style options for its own and Core Blocks.
Toolset is block system that a)does not have a free version, b)only supports Gutenberg c)has no Classic Editor support and d)does provide full-fledge support for Custom Post, Custom Field and Custom Taxonomy frameworks that form the backbone of dynamic content management workflow.
Toolset is an advanced custom fields vendor that has gone exclusively with Gutenberg Editor. Currently Toolset supports 120K active website users. The free Toolset Types plugin was removed from the WordPress Plugin repository in 2019 when Toolset abandoned the freemium model. Toolset costs $69US/year/website.
As the table below shows Toolset supports all of the key Custom Processing methods and tools:
This is the first of a series of design ideas implemented in Toolset video tips.
Toolset is constantly promoting the motto “No Coding Required” as a key selling point:
Spectra is the new name for the Ultimate add-ons for Gutenberg. This add-on has been a Gutenberg pioneer like Kadence in creative blocks, templates, and styling. The major appeal of Spectra is its strong Elementor as well as Gutenberg add-ons. The second factor is that Spectra is working to bring Flexbox layouts to Gutenberg matching Elementor, Bricks Builder and Oxygen Builder. Flexbox not only eases design and layout tasks but also will deliver performance improvements as well. Expect Spectra 2 this summer
Gutenberg Add-on Summary
So each of these Gutenberg add-ons improve the Gutenberg editor with more block features but more importantly start to fill the large gap in styling capabilities between Gutenberg Editor and the top PageBuilders. Now Gutenberg advocates are saying wait for the upcoming Style features plus all the default, sitewide style setting features to arrive with FSE-Full Site Editing, Block Themes and Block Patterns.
However, the current FSE Styles are again no match for the top ThemeBuilders and their sitewide plus dedicated styling capabilities. But it is still premature to address the many issues associated with the Gutenberg ThemeBuilder as final capabilities are still in flux. But it appears that 1)the Gutenberg ThemeBuilder will be late like the Gutenberg Block Editor and 2)there are many pending issues and fundamental changes to WordPress development workflow that have yet to be resolved.
So the thrust of this review will be how use of 3rd Party Gutenberg addons, reliance on top PageBuilders as styling leaders, and CSS Style Editors stand to provide much better alternatives to the Gutenberg Block Editor experience. But first let us understand the Gutenberg shortcomings requiring attention.
Six Gutenberg Editor Flaws
As of May 2022 there are 6 flaws that have hampered and continue to curtail the effectiveness of the Gutenberg Block Editor. These flaws are as much missteps in the Gutenberg development roadmap as continuing development problems:
1 -> In 2016 the MVP-Minimum Viable product target for Gutenberg was primarily to best the Classic Visual Editor with its TinyMCE plugin. Critically missing from the MVP targets were to also match the component, WYSIWYG layout, and styling features of PageBuilders. In effect, the Gutenberg MVP Design Goals were set too low;
2 -> At the same time the rise of mobile devices was being lead by Enterprise developers determined to deliver LCAD-Low Code Application Development to compete in the DIY “No Coding Required” WordPress market place. LCAD brought innovations like dedicated multi-device display, page response differentiated by user type, location and past history of usage. Some of these methods were late in arriving to the Gutenberg agenda
3 -> Gutenberg Editor has the reputation of being a continual beta awaiting key feature releases or changes – all to keep up with tough competition and changing requirements of “No Coding Required”, WordPress Visual Development. But this is also the market for the top PageBuilder tools too. For example, Elementor has seen over a year of beta versions with its move to Flexbox layout, etc. Likewise, there has been a long time between updates for Beaver Builder while Thrive ThemeBuilder has undergone many revisions just to cite major ongoing changes among popular PageBuilders So keeping up with the features of developer tools is an endemic endeavour.
However, there are three areas where Gutenberg Editor lags significantly behind the top PageBuilders.
4 -> First the 41 Core Blocks that come with latest WordPress download have a pittance of styling options in comparison to what is available with every PageBuilder component. Even with the FSE Style dropdown and 3rd party add-ons like Editor Plus with their extra styling features, Gutenberg Editor still does not compete with what is available in the top Pagebuilders. For example, the Elementor Edit Screen uses the Navigator dropdown to select the component to be styled and then each Elementor component has two design dropdowns – Style and Advanced packed with multiple styling options shown in expected property layouts.
The screenshot above demos a typical styling window. Note that the exact look of the edit window is what you will get in the display and preview windows. Elementor, like other PageBuilders, deliver responsive auto-adjustments for mobile and tablet views which can be immediately point & click customized as required. Most useful is the range of Style and Advanced settings available for every Elementor component. Shown in this tutorial is the same styling capabilities for other top PageBuilders.
In contrast, here is the setup of a Gutenberg page for customizing and styling:
First, the styling is cluttered and spread over 5 points in the edit window. Yes, such Gutenberg Add-ons as Abs, Kadence, Stackable, or Editor Plus manage to add styling to their own plus 3rd Party and Gutenberg Core Blocks. But not the same range of styling options available in most popular PageBilders. This is a significant gap that the meetup’s enhancements will address.
5 -> The second problem is that WYSIWYG layout goes awry in the Gutenberg editor as block edits are not always seen in the context of overall page layouts. So what you see on the Design Edit page and what you get at page preview are not the same. As a result getting the design or layout right may require many iterations as shown in the examples below:
The loss of WYSIWYG styling is particularly frustrating when doing customization of templates. The time gained in using templates is lost in getting a design styled exactly as a client wants. Sometimes Gutenberg styling goes badly awry.
Also Gutenberg blocks “wiggle” as many blocks are “fitted together” on publishing. Point and click adjustments on columns , margins, padding, image sizing are just emerging in the Gutenberg editor while PageBuilders already feature these capabilities. Finally, use of point and click Flexbox design options such as component position switching or line-up adjustment, already available in Bricks Builder and Oxygen Builder, are now coming to Elementor and the Spectra add-on.
6 ->Finally, as a Designer I know I can go to one PageBuilder tool, be it Beaver Builder, Divi, or Elementor, for nearly all my design and styling needs for a project. And for dynamic layout, site wide style settings, plus advanced templating the PageBuilders have made the transition to ThemeBuilding well ahead of the Gutenberg FSE-Full Site Editing. So with these conditions in mind, we present a series of recommended enhancements when using the Gutenberg Editor.
The Gutenberg Editor Enhancements
The enhancements come in four categories:
1 -> Don’t await the full release of WordPress 6.0 and FSE. If the styling needs are simple or there are a group of blocks well matched to the website needs, then use third party add-ons and themes to fill in styling needs as described above.
2 – >When styling and design options on a page are important, consider using a PageBuilder immeditely in the Block Editor to replace the bulk if not all of the Gutenberg edits.All of the top PageBuilders work well with chunks of Gutenberg Code with the PageBuilder code above and/or below. Here is Elementor adding directly to a Gutenberg edit:Note the Elementor sections are is placed below Gutentor’s About template block. However it would be easy to add Elementor sections above the Gutenberg code. This also works with the Beaver Builder, Divi, Themify, etc section inserts too. The drawback is that the Gutenberg code is changed to HTML block code – in effect re-editing the blocks code in native Gutenberg becomes nontrivial. However, Elementor has a free Elementor for Gutenberg Blocks plugin that allows Gutenberg and Elementor code to be freely mixed. The key is to convert your Elementor code into SinglePost templates as in this sample:
The bottom line is that if your client has a favorite PageBuilder and the task requires extensive styling, then using the PageBuilder within the Gutenberg editor to do the bulk of the edits is a big time worry saver. Or just go with a favorite PageBuilder straight away as they deliver top styling and design features.
3 ->There is a world of free HTML+CSS+JS editors available that are very good for broad web projects as long as you are CSS and JS code capable. If you want WYSIWYG HTML+CSS+JS editing your choices are either very expensive or slim. But from time to time you need a CSS Style Editor that can solve your design problems, particularly the HTML+CSS only ones.. Here are 4 robust CSS Style Editors to take on the dirty styling work:
SiteOrigin CSS Editor is the pioneer with a free plugin that handles point and click CSS Styling:
In this case we used a combo of Beaver Builder within Gutenberg styling and then to complete the design for some tough items we used SiteOrigin CSS. Note that SiteOrigin allows user to point and click on the portion of the page needing edit. The Editor immediately shows the required CSS selector code. Now if you know CSS coding just add the CSS scripts. Alternatively, you use the SiteOrigin Text and Decoration hints (click the eye icon)that are point and click easy to filli n the required CSS.
Use the contract icon to return to the CSS Editor start up page where you will see the selected CSS code:
Be sure to click the Save CSS button if you want to save the styling work done. Consider the CSS Editor Backend as a general CSS embed tool. All you need to know is the selector for the WordPress code to be styled using the browser’s Inspect command to determine the right CSS selector. The next CSS Style Editor, CSSHero helps user to navigate and point and click to determine the right CSS selectors.
CSSHero was one of the first WordPress CSS Style Editors to bring point and click selection of both the component to be styled and then the CSS properties to be added or changed to create a desired layout effect or design. The tool costs $29US/year for 1 website . Here is how CSS Hero tutorial describes its latest version 5.0:
Yellow Pencil is a freemium plugin that costs $29US/website with unlimited upgrades for the Pro version. Yellow Pencil calls itself the Visual CSS Style Editor and even in the free Lite version ii’s packed with features:
Yellow Pencil has a left sidebar packed with tools for styling a page/post. The current active tool is the code editor which can be closed by re-clicking on its icon. Just above is 3 layers icon which triggers the Navigator which looks like a spitting image of the Elementor navigator allowing for fast navigation among the hierarchy of CSS styling class levels. And just below is the responsive mode viewer. This is followed by the Measures tools, Wireframe viewing, Animation Tool[weakest link in the tools], and the undo and redo styling tools. In sum Designers have a wide selection of styling tools at their disposal.
In the right sidebar are all the styling properties [Text, Border, Background, Spacing etc}. Click on any portion of the page and Yellow Pencil outlines the associated CSS section plus activates the right sidebar properties list:
As seen in the screenshot above, Yellow Pencil has all the tools including Navigator tool, bottom breadcrumbs of active CSS sections, and mouse point & click on the active page – they all add up to make design styling easier. It is like having the browser Inspect command but without all the clutter and limited editing capabilities. Among the 4 CSS Style Editors, Yellow Pencil is the easiest to use.
Microthemer is the most general of the CSS Style Editors with a Pro version costing $99US/year for 3 websites. Like CSSHero, Microthemer has a large learning curve but has some of the best online written and video documentation as seen here [and found here]:
This documentation carries over with a long list of keyboard shortcuts that make transitions among the Microthemer tools a lot easier. In general, Microthemer has worked to speed up editing workflow and carrying this forward to runtime performance with lazyloading of code snippets and conditional logic applied to CSS saved code. These specialized features are described in the Microthemer roadmap video where user can see how plans to refine its CSS Grid, Flexbox, LESS and SCSS support are described in detail.
But perhaps the most interesting feature of Microthemer is its integration with popular PageBuilder tools like Beaver Builder, Elementor and Oxygen Builder. In integrated mode users can have both Microthemer and a selected PageBuilder editing the same post or page with switching between the two UIs just a CTRL+B away.
Summary of Visual CSS Style Editors
First, the complex HTML+CSS stylings becomes fragile with higher likelihood of conflicts among different block/plugin stylings. Second, there is greater need for performance optimizations like combining, in-lining, minification, and lazy loading. In sum, there is a need of another layer of optimization routines that are HTML+CSS aware and adjusting for minifications, lazyloading, conditional dynamics, etc.
So how do the Gutenberg Add-ons, top page PageBuilders and the CSS Style Editors address these issues? The Gutenberg Add-ons lag farthest behind because styling in the react.js context is the hardest to do. PageBuilders vary as well in effectiveness but the move to Flexbox layouts, and targeted minimizations are another approach still in beta. The CSS Style Editors with CSSHero and Microthemer are most clearly taking on the role of targeted code optimizations .
So CSS Style Editors go beyond helping to fill the Gutenberg Editor styling gap.. CSS Style Editors add value in 3 additional ways:
1 -they help tame the complexity of CSS+HTML Web Design code as they target page and website changes;
2 – they help speed-up styling edit operations where Gutenberg blocks and add-ons leave off;
3 – they make changes in style less intimidating because their point+click editing can work across the full page or website as needed.
Styling speed has two major components – how long it takes to edit and style a page and how fast the styled page runs. How easy is it to learn how to style a Gutenberg page? Not so easy because Gutenberg has many styling omissions, errors and changes over the past 5 years. This user stopped trying to use Gutenberg Editor until a year ago. With poor WYSIWYG support, still cluttered UI, and poor set of styling options – Gutenberg even with help from the Add-ons runs a distant second to the top PageBuilders for ease of use.
As for runtime speed there are two factors to consider. First, Gutenberg and the PageBuilders are a moving optimization target. For example, both PageBuilders and Gutenberg are adapting beta changes like Flexbox and other CSS deployment options that change the speed test scores. Second and more serious, Gutenberg advocates put out a series of tests purporting to show that Gutenberg stomped popular PageBuilders in performance tests.But with a notable discrepancy – “All Cache stuff is disabled on all sites and there is absolutely no optimization done whatsoever to these sites.”
So it should not be a surprise that our tests which included standard optimizations including caching and other rules, produced different results as our tests showed the opposite – PageBuilders on par with or besting Gutenberg edits. January 22 2022 tests with detailed server specs showed PageBuilders with better response time and Core Vitals but higher requests and page load size. Our Spetember 24, 2021 tests used full optimizations for 3 PageBuilders and Gutenberg derived from the same Brainstorm Force template. These tests used the same server, 2 different Optimizers [WPRocket and the LightSpeed] and a combination of Pingdom and GTMetrix for the test measures. The results are below:
|Beaver Builder||WPRocket||1.15 sec||1.0 mb||17||0.74 sec||0.59 sec||0.02|
|Beaver Builder||LightSpeed||1.23 sec||1.2 mb||23||0.71 sec||0,46 sec||0|
|Elementor||WPRocket||0.86 sec||4.0 mb||21||0.74 sec||0.66 sec||0.04|
|Elementor||LightSpeed||1.23 sec||4.3 mb||27||0.77 sec||0.61 sec||0|
|Brizy||WPRocket||3.21 sec||0,27 mb||16||0.47 sec||0.25 sec||0|
|Brizy||Lightspeed||2.63 sec||1.7 mb||42||0.79 sec||0.46 sec||0|
|Gutenberg||WPRocket||2.02 sec||0.66 mb||15||0.80 sec||0.60 sec||0|
|Gutenberg||LightSpeed||1.06 sec||0.79 mb||19||0.72 sec||0.51 sec||0|
Except for Brizy’s poor full load time scores and Elementor’s poor page size, Gutenberg and the PageBuilders had very similar ratings: within the 2 sec response time target but only average Web Core Vitals.
The bottom line is that Page Performance scores are remarkably similar but also subject to change with the current development of all the tools.
Gutenberg Current Status
Based on the review here it is hard to avoid the conclusion that the Gutenberg Editor falls short of the top PageBuilders for its styling and ease of use assessment. If we expand the appraisal out to the ThemeBuilders versus Gutenberg FSE, clearly Gutenberg FSE is playing catchup to the top ThemeBuilders for features. But the performance comparison is still up in the air.
However, let WPTavern, a top Gutenberg Info blog have the final say – WPTavern’s headline:
WordPress Community Attributes Declining Market Share to Performance Issues, Increased Complexity, and the Lagging Full-Site Editing Project