Gutenberg style broken on 6.4 update

bonlando · November 25, 2023, 5:17pm

I have updated most of my sites to 6.4, which were built on sage 9. As soon as that happened, you’ll get the styles in the editor for all the pages to appear like the attached:

Switching to a different theme, everything looks ok.

The console errror i’m getting is this:

/dist/styles/main.css?wp-mce-49110-20201110 net::ERR_ABORTED 404 (Not Found)

any ideas on how to fix?

strarsis · November 25, 2023, 7:07pm

How are you adding the editor styles?
In latest Sage 9.x the following is used:

github.com

roots/sage/blob/7e6d0671d3421acadb6e9b3d0bad2a9f54d62c67/app/setup.php#L76


      
              /**
               * Enable selective refresh for widgets in customizer
               * @link https://developer.wordpress.org/themes/advanced-topics/customizer-api/#theme-support-in-sidebars
               */
              add_theme_support('customize-selective-refresh-widgets');
          
              /**
               * Use main stylesheet for visual editor
               * @see resources/assets/styles/layouts/_tinymce.scss
               */
              add_editor_style(asset_path('styles/main.css'));
          }, 20);
          
          /**
           * Register sidebars
           */
          add_action('widgets_init', function () {
              $config = [
                  'before_widget' => '<section class="widget %1$s %2$s">',
                  'after_widget'  => '</section>',
                  'before_title'  => '<h3>',

ben · November 29, 2023, 6:26pm

This could be a conflict with Soil’s relative URLs feature

If you’ve got that enabled, try disabling it

bonlando · December 1, 2023, 5:20pm

Hey @ben and @strarsis thank you for your reply. Unfortunately disabling Soil did not change anything - as well, the code in my setup file looks exactly how you posted it.

I should mention that this only happens for Gutenberg pages, I have a few plugins that still utilize the tinymce editor, and those match my themes styles fine.

I have 5-10 websites that are all doing this.

Thanks!

adrianenriquez · December 4, 2023, 2:27am

Hi @bonlando

I also encountered this problem and here’s my solution. I added this to my setup.php

/**
 * Register the theme assets with the block editor.
 *
 * @return void
 */
add_action('enqueue_block_editor_assets', function () {

  wp_enqueue_style('sage/editor.css', asset_path('styles/editor.css'), false, null);
}, 100);

bonlando · December 4, 2023, 2:49am

Thanks, but this actually didn’t work for me. It seems there should be an editor.css stylesheet to reference, but there isn’t one in my dist file at all…

Muya_Dev · December 15, 2023, 1:01pm

A workaround, just remove theme.json in your plugin root (sage)

ben · December 15, 2023, 6:38pm

See https://github.com/roots/sage/issues/3160#issuecomment-1854181662 for a solution

josialoos · April 19, 2024, 10:23am

had the same problem and this perfectly fixed it for me. thanks @ben!