In a couple months or so, Gutenberg will revolutionize WordPress publishing as we know it. It’ll finally bring a much-needed standardized content creation experience to WordPress. There’s just one small caveat. Innovation can’t happen without WordPress theme developers committing to the Gutenberg experience.
If Gutenberg will become the de facto editing experience for the average WordPress user, why not make it the best experience possible?
So after an inspiring trip to Nashville for WCUS, I decided to jump on the Gutenberg ship myself and start styling the upcoming editor within my latest WordPress theme, Tabor.
Edit: Since posting this article, many of the details of applying editor styling to WordPress themes has changed quite significantly. The good news is, I’ve re-written this guide with up-to-date code examples from a my Gutenberg-optimized WordPress themes like Wabi. Enjoy!
Adding editor style support
If your WordPress theme is not properly optimized for WordPress 5.0, it’ll assuredly become hopelessly obsolete in this post-Gutenberg era of WordPress. Even worse, your theme could end up causing a whole slew of styling issues within the new editor, and even on the front-end.
Adding WordPress theme styles to Gutenberg is not as “plug-and-play” as one would think. To start, you’ll want to use the add_theme_support() function to declare support for editor styles.
Here’s an example of how I declared support for editor styling in my popular WordPress theme, Tabor:
Next, you’ll want to enqueue your editor stylesheet with the add_editor_style() function. While the above simply declares support for editor styling, this bit will load the actual styles you’ve established into the editor to bring it on par with the front end styling.
Here’s what we have now:
Apart from registering the Gutenberg-specific stylesheet, theme developers will absolutely need to fine-tune elements within the new editor to ensure that each displays with relative parity to the actual front-end output. Otherwise, the editor won’t actually look like the front-end at all…
Fine-tuning theme styles within Gutenberg
The biggest issue with applying editor styling, is that block elements have margin and padding that simply do not exist within the theme’s front-end styling. Getting the editor styled “just right” will likely take a number of tweaks and probably a few wacky hacks here and there.
One of the newish features of Gutenberg is that you don’t need to add an obscene amount of prefixes anymore, as the editor will automatically add relevant prefixes to the styles behind the scenes. If you’re using SASS (which you absolutely should) then applying styles to the editor is not so bad. You can set a lot of variables and reference those in both the front-end stylesheet and editor stylesheet. For reference, here is the editor stylesheet (SASS) from my York Lite theme. It’ll help if you open that up in another window and follow along.
Styling individual blocks
You can use the .wp-block selector to style every block, or to be more specific, use .wp-block-{name}. For example, to apply a custom editor style to the Author block in my CoBlocks plugin, you’d use .wp-block-coblocks-author.
Styling default, full and wide editor widths
Expanding off of the .wp-block selector, we can target the align data attribute, to set the full and wide alignment values to use within the editor. Again, if you’re using SASS, simply throw in your variables for each the wide and full alignments. Check out the following example:
Changing the editor’s typography
You’ll need to first load your fonts within the editor, if you’re using something like Google fonts on the front-end of the theme. If you’re using a function to spin up the selected font URL from Google Fonts (which you probably should be doing), you can simply plug that into the add_editor_style() function, and append it right below where your actual editor stylesheet is added.
Here’s a full working example from York Lite, with the corresponding font url function – which you can check out right here.
Now that the fonts are loaded, to match the editor’s typography with the theme, you’ll want to target the body and p selectors primarily. Don’t forget to style headings as well, H1 through H6, and ensure they are properly colored and are the correct font sizes.
Styling the page/post title
Adding Gutenberg editor styles doesn’t stop with the main content. We can also target the editor’s title to style it like the page or post title on the front-end; again leveraging SASS so we’re not doubling our efforts. Here’s how:
Potential pitfalls
If your WordPress theme registers its entire front-end stylesheet for the Gutenberg editor, you’ll end up with a complete mess:
There’s quite a bit of work to be done for these WordPress themes. And from my experience reviewing WordPress themes at Envato — theme developers are notoriously lazy. Sure, proper editor styles are required for themes uploaded to the WordPress repository, but outside of WordPress.org, it’s the wild west. So if your theme is doing it wrong — fix it now!
Closing
With the release of Gutenberg into the wild, users will come to expect a true one-to-one content creation experience. If a WordPress theme’s editor styling isn’t up to par, the user’s experience is instantly disrupted. Then you’re missing the point of Gutenberg right off the bat: to capitalize on improving the user experience of WordPress editing.
Adding theme styles to Gutenberg is not difficult by any means. But it does take a bit of effort and consideration, to build a beautiful content editing experience on top of Gutenberg. Just take a look at this video, which shows how proper editor styles dramatically improve the content creating experience in WordPress 5.0+.
Unfortunately, without fine-tuning the theme styles within Gutenberg, you end up with a what-you-see-is-probably-close-enough-to-what-you-get experience. Not the promising editing experience we’re all shooting for. I encourage all theme developers to experiment with adding WordPress theme styles to Gutenberg. Let me know when you do, as I’m curating a collection of “actually” Gutenberg-ready WordPress themes — and I’d love to see yours!
Leave a Reply