One of the glaring deficits in the Gutenberg Editor is the lack of styling options for many of its blocks. Specifically our tests of websites using only the 41Core Gutenberg blocks  had the fewest styling options of all the page editors by a wide margin.This is  especially telling in comparison to the amount of easy to use CSS styling options available in all of the top WordPress PageBuilders.

In fact for this developer, my workflow has changed substantially over the past 3 years. Before I did a CSS Styling step near the completions of a post using a styling editor like Site Origin CSS  or CSS Hero pouring over all the page sections and widgets making a text, margin, padding, shadowing and/or animation styling improvements. But now the PageBuilder CSS styling tools are so easy to use with the ability to copy CSS styles from one widget to another using either Divi or Elementor for example. So now great CSS style editors likeCSS Hero, Yellow Pencil and Microthemer are used to solve the difficult styling problems that sometimes arise with a confluence of theme, Pagebuilder and other advanced plugin interactions.

Rescue for Gutenberg Styling

In a series of  tests for a review of 18 Gutenberg addon blocks, the lack of styling options for most of the  Gutenberg plugins became painfully obvious. So a search for a CSS Styling plugin for Gutenberg turned up Stylist. And here is Stylist in action:
Stylist is available in WordPress top bar. Click Style this Page and powerful styling is available to you. Click on an element you want to style and the sidebar offers an expanding list of styling options. Save using the blue Save button in the top right corner. Exit from Stylist using the ‘…’ icon also on the top right. Now don’t be alarmed when you return to the Gutenberg editor and all the Stylist CSS edits are gone. This is because Stylist creates and appends a CSS file that is only applied when the page is displayed.

This workflow is similar to how CSS Hero, Site Origin CSS and Yellow Pencil operate. Microthemer has an option to change the CSS in the underlying page’s CSS file. As it so happens all of the CSS Styling Editor plugins work with Gutenberg pages. So here is a fast summary of their CSS Styling Editor features.

Stylist is free and has many basic CSS styling options but not advanced CSS3 and animation features.
CSS Editor from Site Origin – is also free and has unique workflow relying on the user to know much of the CSS details. The OpenSourcery has done the original review of CSS Editor. 

CSSHero  is a premium plugin costing $19US/year/website. There is a joint review of CSSHero and SiteOrigin CSS here on the OpenSourcery.

Microthemer is a premium CSS Style Editor costing $21US/year for 3 sites. The following video shows many of its features.

Yellow Pencil – is also a freemium CSS Styling plugin costing $26US/website for the pro version. Like Microthemer and CSHero it has advanced CSS styling features. The free Lite  version allows users to tryout Yellow Pencill and still do lots of useful work on Gutenberg pages.

Summary

Gutenberg editor because of a dearth of styling options in its blocks has brought about increased interest in WordPress CSS Style Editors. And these tools are so accomplished and easy to use  even the free versions will handle many of the Gutenberg styling problems. But these CSS Styling Editors are very productive on any WordPress websites. The top end CSS Style Editors have saved this developer’s bacon so often I have lifetime licenses for two of them.