Microthemer 7.3 released

Microthemer 7.3 includes deep integration with Gutenberg. This means you can style Gutenberg blocks with Microthemer by loading the block editor directly inside Microthemer. Care has been taken to ensure that your styles work consistently in both the editor and frontend context. To achieve this, Microthemer applies unique classes to blocks when you select them for styling. This creates a stable reference point for CSS selectors to tap into, without requiring you to add tons of custom classes to blocks manually.

Microthemer vs Gutenberg CSS options

But why would you use Microthemer to style blocks instead of the CSS options that come with Gutenberg? Watch the tutorial on using Microthemer with Gutenberg for a detailed walk-through. Or read on for a quick overview.

Benefit 1: Responsive Gutenberg styling

Gutenberg doesn’t include options for applying screen size specific (responsive) styling. For that, we need to add custom CSS using media queries. Microthemer has long been used as a tool for applying responsive styling on the frontend. However, the downside to only applying styles on the frontend is that blocks will not be responsive in the block editor. This doesn’t produce the best editing experience, especially with the Full Site Editor (FSE) that should render the page in very much the same way as the frontend. With this update, you can style blocks (responsively or not) by loading the block editor inside Microthemer and styling blocks at the same time as editing content.

Benefit 2: Style multiple blocks in one go

Gutenberg’s CSS options only allow you to apply styling to one block at a time. With Microthemer, you can target multiple elements on the page by selecting one element and then choosing from the available options for targeting additional related elements (e.g. all h2’s on the page or inside a container block). You can also hold down the shift key to select an arbitrary set of elements.

You can also add the same custom class to multiple blocks and then target them using said class with Microthemer. Microthemer will prioritise user defined classes when suggesting CSS selectors to target blocks.

Benefit 3: Style block sub-elements

Microthemer can apply any styling to any element on the page, or across multiple pages. By contrast, Gutenberg’s CSS options are limited; you can only apply certain styles to certain parts of the block. Blocks often have sub-elements, like block quote citations, image captions, button icons etc. There is often no option for styling these sub-components. But with Microthemer, if you can see it you can style it.

Benefit 4: More CSS properties

Microthemer supports over 150 CSS properties, from basic properties like font, spacing, and colors to more advanced properties like CSS grid, animation, shapes, and masks. You can apply these to any element you select, unlike Gutenberg, which only has a handful of styling options.

Furthermore, Microthemer picks up the global variables used by the block editor, so you can maintain consistent typography and spacing etc.

Benefit 5: Switch between code and the UI

If you know CSS, you might prefer to write your border style in code, but then fine tune the colour using the color picker. With Microthemer, the CSS code and UI is completely synced. So you can dip in and out of the UI as and when you need it. Or simply use the code editor as a way of understanding how Microthemer changes the appearance of your site using CSS code, even if you never write the code yourself.

Benefit 6: Hover styling

Just as you can select any element on the page with Microthemer, you can also target any element “state”, such as the hover state. Again, Gutenberg only has limited support for styling elements in the hover state. And no support for other states like focus (for form elements).

Benefit 7: Asynchronous CSS loading

Microthemer delivers a nice performance optimisation for CSS styles that target “below the fold” content. This is content that doesn’t display until the user scrolls the page. It doesn’t need to be styled when the page first loads. It can be styled half a second after that without the user noticing any difference. Microthemer will automatically split styles for “below the fold” content into a separate folder, and load such folders “asynchronously”. This basically means that they won’t block the loading of the essential HTML, JavaScript, and CSS needed for the browser to display something on screen. In doing so, it speeds up your page loading.

Microthemer vs a desktop code editor

This new integration delivers a separate set of benefits over adding custom CSS to Gutenberg using a CSS stylesheet edited with a desktop code editor.

Benefit 1: Consistent frontend/backend styling

Although you can enqueue your custom CSS stylesheet in the block editor using the enqueue_block_assets WordPress hook, there’s a downside. It’s not currently possible to get your stylesheet to load in the block editor iframe (with the blocks) without it also loading in the main block editor (with the toolbars). At least not with PHP alone. Microthemer solves this on the client side by disabling the stylesheet in the editor window. If it didn’t, your styles could accidentally affect elements in the WordPress admin area.

Benefit 2: Automatic asset loading optimisation

In addition to loading styles for content that appears below the fold, Microthemer automatically organises your styles into page specific folders. Or global folders if you use the Global | Page switch at the bottom left of the interface. This is achieved by assigning some conditional logic to folders, which means the folder loads if the logic returns a “true” result. Microthemer handles this logic for you, but these conditions are completely customisable. So you have complete control on which page, or set of pages, your styles should load on.

Benefit 3: Live CSS / Sass editing

Microthemer is a live CSS editor with support for Sass editing, including a special Sass compilation technique that compiles Sass to CSS extremely quickly. This means you have the benefit of seeing your style changes render of screen immediately even when using Sass, which normally requires a node.js environment.

Benefit 4: Unique classes address front/back HTML disparity

The HTML structure for blocks inside the block editor differs from the structure used on the site frontend. This means that without a great deal of care, your CSS selectors in one context (e.g. frontend) won’t necessarily work in the other context (e.g. block editor). It’s not impossible. You could add lots of custom classes to blocks (e.g. my-custom-class) and then style elements using only that class for the block or block sub-elements (e.g. .my-custom-class citation) but it’s definitely fiddly. Microthemer solves this by adding unique classes to blocks (e.g. mctr-e8f72d) automatically, whenever you select them for editing with Microthemer. It then prioritises these classes, as well as your own (e.g. .my-custom-class), when creating CSS selectors for elements. This solution provides a stable and convenient system for adding custom CSS to Gutenberg blocks that are valid in the editor as well as the frontend.

Benefit 5: Additional class field auto-scrolled into view

Microthemer will save you time clicking around the Gutenberg UI to drill down to the “Additional class(es)” field. It automatically scrolls this field into view if you have the Block panel open. That can be very handy if you like to work with utility class frameworks like Tailwind CSS.

Conclusion

If you like the simplicity of Gutenberg, but wish you had a bit more flexibility when it comes to CSS styling, you may find Microthemer to be a valuable companion to the block editor. Most notably perhaps, because you can easily apply responsive styling to Gutenberg blocks. Check out the live demo below, which already has the Gutenberg editor loaded inside Microthemer.

Try the online demo

Launch demo

Get Microthemer

View price plans