No theme styles in Guttenberg Editor

Hi,

I’m am trying to get my theme styles to show when I am editing a page with the Guttenberg Editor but nothing seems to be coming through. I have tried installing a fresh copy of Sage and still the same issue.

Although all the blocks are viisble there is no styling whatsoever on them so It is near impossible to see if a button is the correct colour for example. Is there any way to activate this in sage as I was under the impression this was automatic with sage 10.1

Nothing is getting wrapped and no styles are coming through to the editor at all.

The frontend styles can be added to the (Gutenberg) editor using add_editor_style.
The styles are automatically wrapped by the editor on the frontend side.

In Sage 10, I had to add tailwind @imports to the editor.css file for some of my styles to come through. Others I had to add explicitly.

Thanks for that I tried the other solution add_editor_style but seems a pointless post if nothing is in the editor.css file in the first place. Your solution works so thank you.

My approach was to manually add each stylesheet from the editor bundle in setup.php like so

/**
 * Register the theme assets with the block editor.
 *
 * @return void
 */
add_action( 'enqueue_block_editor_assets', function () {
    bundle('editor')
        ->enqueueJs()
        ->css(function ($handle, $src) {
            add_editor_style($src);
        });
  },
  100
);

/**
 * Register the initial theme setup.
 *
 * @return void
 */
add_action('after_setup_theme', function () {
    add_theme_support('editor-styles');
    ...
});

Currently my only issue is getting fonts loading since the url is relative when using

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('~@fonts/roboto-v29-latin-regular.eot');
  src: ...
}