With the release of Gutenberg into the wild, users will come to expect a true one-to-one content creation experience. Sure, proper editor styles are required for themes uploaded to the WordPress repository, but outside of, it’s the wild west. So if your theme is doing it wrong - fix it now! Closing And from my experience reviewing WordPress themes at Envato - theme developers are notoriously lazy. There’s quite a bit of work to be done for these WordPress themes. If your WordPress theme registers its entire front-end stylesheet for the Gutenberg editor, you’ll end up with a complete mess: What happens if themes don’t include styles correctly View this gist on GitHub Potential pitfalls
#Wordpress gutenberg full#
Again, if you’re using SASS, simply throw in your variables for each the wide and full alignments. wp-block selector, we can target the align data attribute, to set the full and wide alignment values to use within the editor. Styling default, full and wide editor widthsĮxpanding off of the. For example, to apply a custom editor style to the Author block in my CoBlocks plugin, you’d use. wp-block selector to style every block, or to be more specific, use. It’ll help if you open that up in another window and follow along. For reference, here is the editor stylesheet (SASS) from my York Lite theme. You can set a lot of variables and reference those in both the front-end stylesheet and editor stylesheet. If you’re using SASS (which you absolutely should) then applying styles to the editor is not so bad. 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.
Getting the editor styled “ just right” will likely take a number of tweaks and probably a few wacky hacks here and there. 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.
Otherwise, the editor won’t actually look like the front-end at all… Fine-tuning theme styles within Gutenberg Here’s an example of how I declared support for editor styling in my popular WordPress theme, Tabor:Īpart 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. To start, you’ll want to use the add_theme_support() function to declare support for editor styles. Even worse, your theme could end up causing a whole slew of styling issues within the new editor, and even on the front-end.Īdding WordPress theme styles to Gutenberg is not as “plug-and-play” as one would think. 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.
#Wordpress gutenberg code#
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. 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.Įdit: Since posting this article, many of the details of applying editor styling to WordPress themes has changed quite significantly. If Gutenberg will become the de facto editing experience for the average WordPress user, why not make it the best experience possible? Innovation can’t happen without WordPress theme developers committing to the Gutenberg experience. It’ll finally bring a much-needed standardized content creation experience to WordPress. There’s just one small caveat. In a couple months or so, Gutenberg will revolutionize WordPress publishing as we know it.
0 kommentar(er)
