Gutenberg editor error on Tablet & Mobile view - CSS and JS not loading

sage
, ,
1

Hi everyone!

We are using Sage with ACF pro to generate block themes and are encountering an issue when using the Gutenberg editor and switching view, from desktop to Tablet or Mobile:

Screenshot 2024-07-04 at 12.15.59
Screenshot 2024-07-04 at 12.15.59732×494 16.3 KB

When switching to tablet or mobile view, all custom css and js is unloaded and even the font family (loaded with Tailwind and automatically added to the theme JSON) is switched to ‘Times’.

I just wanted to check if anyone has encountered this before.

"devDependencies": {
    "@roots/bud": "6.16.1",
    "@roots/bud-sass": "6.16.1",
    "@roots/bud-tailwindcss": "6.16.1",
    "@roots/sage": "6.16.1"
  },

Thanks,
Alex

1 Like
2

This is strongly related to the topic I just posted here..

In the Gutenberg block editor, the tablet and mobile view are rendered as iframes which blocks your editor CSS from being inherited. The desktop view is an inline div so your editor css works in that view. In order to get WordPress to properly inject the styles into desktop, tablet, and mobile views you need to use the add_editor_style function described here.

So you will be able to fix all your editor views with the function I mentioned above, but next you’re going to run into the build process issues I mentioned here..

1 Like