Sage11 + Gutenberg, default styles conflicts in the block editor

sage
1

Hello all,

Looking for some insight. I’ve built a few sites in the past with Sage 10, Tailwind & ACF Blocks. With Sage 10, the Gutenberg editor was pretty much a blank slate with all default styles basically removed from wrappers and elements (margins, padding, etc). I was able to import my app.css into editor.css and have the block editor look nearly identical to the front end.

With Sage 11, although Tailwind classes and styling are being applied in the block editor - I seem to be getting some conflicts due to default editor styles… unwanted margins on headings, padding on unordered lists, etc.

Some of these conflicts appear to be coming from ‘reset.css’ and inline styles such as ‘:where(.editor-styles-wrapper)…’

Anyways, I’m really just trying get my block editor styles to match the front end. Maybe I’m just missing something or doing something wrong. Has anyone else noticed this?

2

This sounds like you’re not using the iframed editor, which happens when you have any blocks that are using API version 2

3

Hi Ben, thanks for the info. That does seem to be the case. ACF mentions this work around… Though, I’ve been using acf-composer and not block.json

ACF | ACF Blocks and WordPress Blocks v3.

4

But what if I cannot use the iframed editor? Plugins used on the site may add v2 blocks which revert the editor. In that case, editor styles generated by Gutenberg take precedence over theme styles included in editor.css that are wrapped in @layer directives. Example:

Added by Gutenberg:

:where(.editor-styles-wrapper) h1 {
   font-family: revert;
}

overrules what is added by add_editor_style():

@layer base {
    :where(.editor-styles-wrapper) h1 {
       font-family: sans-serif;
    }
}

The use of css layers seems to mean that the non-iframed editor is not supported.

5

Though, I’ve been using acf-composer and not block.json

ACF Composer can support v3 but I need to push an update to allow it to be set globally. Also, make sure you’re using acorn acf:cache and caching your blocks to block.json, it’s much faster in the editor.

The use of css layers seems to mean that the non-iframed editor is not supported.

Tailwind v4 makes heavy use of cascade layers with no way to really disable it. one thing you could try is importing/configuring Tailwind in your app.css file:

@import 'tailwindcss';

@theme static {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

and then in your editor.css (assuming it is only loaded in the editor), force all the selectors to be important with Tailwind’s new import stuff:

@import './app.css' important;

you’d still probably face some specificity issues and need to make use of Tailwind’s important modifier on certain styles like text-sm! but it might ease the pain a little bit. :grimacing:

1 Like
6

@Log1x thanks for the explanation. That explains why even though I wasn’t forcing Block API v3 when working in Sage 10/Tailwind v3, I still wasn’t getting nearly as many conflicts as with Sage 11/Tailwind v4.

Anways, forcing v3 on all of my ACF blocks as well as removing some plugins (that added v2 blocks) solved the issue for me.

1 Like