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.