Roots Discourse

Sage 10 + ACF Composer - Gutenberg Blocks

Hi, i created my firt gutenberg block with acf composer in sage 10.
I don’t know if I did it right, so I have some questions about best practices.

  1. I use only tailwind classes so i add taiwlind files to editor.scss, its ok?
  2. I use custom classes and created component ( example button.scss) I import this to app.scss and editor.scss, its ok?
  3. I have a problem with size of elements (@media) in gutenberg editor. The elements adapt to the screen resolution, which makes them too big in gutenberg.
  4. How to add styles to gutenberg preview in blocks menu? image

Ah yes, media queries are indeed problematic (including those used by <img sizes.
You can override the frontend theme styles with editor-specific ones in order to compensate the narrower viewport of the editor.
I read that CSS Container Queries become supported now, so this should fix all the issues :slight_smile:.
Well, and I also hope for a responsive image format that makes <img sizes obsolete.

1 Like