• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

We’re currently booked and will be ready for new projects in late April 2023.

Questions? Call 254.340.0086 or send an email to [email protected].

Elodin Design

WordPress Design & Development

  • About
    • About Jon
    • Why ‘Elodin Design’
  • Websites
  • Services
  • Process
  • Blog
  • Repos
  • Contact

How to add contextual styling in the Gutenberg editor

March 26, 2020 by Jon Schroeder Leave a Comment

It’s actually pretty typical for sites to use different styles for headings on blog posts than on, say, display pages that use sections. For example, the headings used in something like this would be completely inappropriate on the blog (the h2s are just huge):

Blogs also have unique needs, in particular for headings. They might need default spacing above them to visually separate them from other content, or different default colors, or whatever.

All of that means that we need a reliable way to inject context-specific styles into the Gutenberg editor. Styles that, for example, need to show up on both the frontend and backend of the site, but only when you’re editing a blog post.

And I couldn’t find a tutorial to show me how to do this, so I thought I’d put together a few notes.

The way that I go about styling the Gutenberg editor in general is something like this:

The above gist shows how to add backend-specific styles. These will all get the .editor-styles-wrapper prefix added to them, which is great – it means that you’ll be less likely to break the backend of your site with a style that applies to stuff it shouldn’t. This is how you should mostly go about setting your defaults for Gutenberg, since most of the time you don’t need to target the editor in a specific context (like when you’re editing a specific content type).

NOTE: please don’t embed your entire theme stylesheet like this. You should only be styling the bits that need to preview properly, so you don’t need, for example, header/footer styles or contextual styles.

So, that gets us a big chunk of the way there, but what happens if you want to add styles that only apply if you’re on a blog post? If you were to add a style for body.single-post h3, for example, that would get prefixed to .editor-styles-wrapper body.single-post h3. That’s not going to target anything.

So here’s how you do it:

With this approach, you can use some styles along these lines to accomplish your goal. Be very careful – this approach gives you more power, so don’t abuse that power and accidentally target things you don’t want to. Here’s some sample scss I used on a recent site to change how the headings look on the backend (corresponding styles are used on the frontend of the site as well, but that’s a separate file):

You’ll note that these styles are carefully tuned to not affect anything that we’re not comfortable affecting, while still targeting only headings that are on the single post editor.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About the blog

I’ve always been exceptionally bad at actually sitting down and writing blog entries, so do me a favor – please feel free to comment or drop me a line if you have something you’d like me to write about (or just to say hello).

Browse by category

  • Advanced Custom Fields
  • Gutenberg
  • Perspective
  • Tutorials & how-to guides
  • Updates

Centered and full-justified text on the internet

User interface is really important

How to connect Gravity Forms with Salesforce web-to-lead using Gravity Forms’ Webhooks addon

Reviewing SpinupWP and why I closed my account

VEEHAUS scam: a new scam targeting designers

Ready to get started?

There’s no pressure. If you’re interested in building a site, please feel free to reach out – and I’ll talk through your project with you and give you some pointers even if we don’t end up working together.

Reach out

Elodin Design, Inc. (formerly Red Blue Concepts)
Website design & development · Custom WordPress theme and plugin development
3305 Fox Hollow Circle, Waco, TX 76708 · (254) 340-0086
Copyright © 2023 · All rights reserved.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT