Is there any classes or way of targeting CSS so custom Gutenberg styles doesn't take over the whole admin?

For example i want p tag to reflect the front of site font-family and a links etc, but then it adds that font to all text in the admin and makes for example the add image text button bold and other changes.

There seems to be endless classes within the editor, i only want custom styles to appear within the content, not the button text for adding a link or image etc.

Is this possible?

  • 1
    How are you adding the styles to the editor? You should use add_editor_style(), which converts body {} to .editor-styles-wrapper {} so styles should only apply to the expected elements. See developer.wordpress.org/block-editor/developers/themes/… for more. Feb 24, 2021 at 11:44
  • Thank you that's helped a bit but a few others still sneaking through :s
    – user4630
    Feb 24, 2021 at 14:13
  • Frankly, that's a hazard of working with Gutenberg. Unlike TinyMCE, the content is not in an iframe, so it shares styles with everything else. You probably won't be able to get away with just loading your original styles in the editor. They'll need some tweaking and extra specificity to fit in properly. Feb 24, 2021 at 14:20


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.