Meetup Summary – Fixing Gutenberg Editor’s Styling Missteps

Over the past 7 years Gutenberg has gone through several name changes – The  Gutenberg Editor, Block Editor, Gutenberg Block tool,  and now the Block Builder with FSE-Full Site Editing features. In sum, Gutenberg with its JavaScript driven blocks is being advanced as the primary UI engine for the evolving  WordPress Core System.

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.

Kadence has a strong suite of Gutenberg website enhancements including Kadence Theme, Kadence Library Kit and top notch row and layout blocks.  For $69US/year for unlimited websites add 12 blocks, more templates in the the Kadence Library, and improved styling options.

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:

However, the reality is that the WordPress Core System is undergoing major changes. First, PHP and jQuery are being replaced largely by React.js and other JavaScript frameworks. Second, the use of HTML, CSS and even JavaScript is starting to crack the “No Coding Required” mantra as seen in Block Patterns, template decidability and visibility rules, CSS and Javascript code embeds, etc. WordPress is no longer in Kansas so developer coding and Custom Post savvy will be a key success factor beyond knowing WordPress Fundamentals.

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:

Here is a tutorial describing how SiteOrigin CSS and CSSHero can be used to jointly style WordPress website pages. Also CSSHero is packed with extra features like a JavaScript Editor to go with the Page Inspector and there is a  CSSHero CSS Snippet library which you copy from or add your own CSS snippets for reuse.  Or track Global changes with the Sitewide Preview feature. In sum CSSHero provides a robust WordPress styling editor with high end styling tools like LESS support in its Inspector Tool.

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.
With this integration with PageBuilders and the very concrete futures roadmap, Microthemer is pushing itself to become not just the CSS Style Editor of  choice but also the JavaScript, HTML+CSS code embedding tool of choice as more customizing tasks come under Microthemer  control.

Summary of Visual CSS Style Editors

CSS+HTML are the core tools behind “No Coding Required”, Point & Click Page Layout and Design ease of use as brought to you by both the Gutenberg Editor+ Add-ons and the top Pagebuilders. But there is a trade-off here – the resulting code is ever more complex especially with dynamic JavaScript effects added to the design mix. Also there 2 other effects.

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.

Gutenberg Speed Questions

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:

Builder	Optimizer	LoadTime	PageSize	Requests	LCP	TTI	CLS
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