Gutenberg Responsive CSS using Microthemer

Note: this feature is currently in beta (7.3). Download it from your dashboard.

Learn how to style Gutenberg blocks responsively, ensuring consistent styling between the block editor and site frontend. Microthemer now has deep integration with Gutenberg, so you can style blocks at exactly the same time as creating or editing them in the block editor

Important: If you have updated a version of Microthemer prior to 7.3, you may need to manually set the “Support admin area style loading” preference to “Yes“. This option is enabled by default since version 7.3, but was disabled by default prior to that. Go to Settings > General > Preferences.

Get Microthemer

0:00 Introduction
0:07 What is Microthemer?
0:015 What is deep integration with Gutenberg?
1:13 Make use of WordPress CSS variables
2:13 Microthemer vs Gutenberg CSS options
2:20 Benefit 1: Responsive styling for tablet and mobile
5:15 Benefit 2: Style multiple blocks in one go
5:29 Dock the block options to the top
5:48 Disable Microthemer targeting using a switch
7:02 Benefit 3: Style block sub elements
8:03 Move styles between responsive tabs
8:48 Benefit 4: Lots of CSS properties supported
11:33 Benefit 5: Switch between code and visual styling
12:28 Benefit 6: Hover styling for any element
13:51 Benefit 7: Asynchronous CSS loading
15:47 Microthemer vs a desktop code editor
16:11 Benefit 1: Consistent frontend/backend styling
16:58 Benefit 2: Automatic asset loading optimisation
18:08 Benefit 3: Live CSS / Sass editing
19:07 Benefit 4: Unique classes address front/back HTML disparity
22:00 Benefit 5: Additional class field auto-scrolled into view
22:45 Optionally add a unique class to all blocks
23:49 IMPORTANT: Set "Support admin area style loading" to "Yes"
24:16 Working with the (Full) Site Editor
24:25 Only available with modern block themes
24:44 Site Editor - Navigation
25:52 Global vs page-specific folders
26:45 Site Editor - Styles
27:27 Site Editor - Pages
28:02 Site Editor - Templates
32:53 Site Editor - Patterns
36:51 Conclusion
36:51 Recap of Microthemer benefits
39:03 Recap of site editor terminology
40:55 Uninstall Microthemer but keep its style changes
Close