Sage and Editor Styles

strarsis · December 7, 2022, 5:31pm

My two cents here (of course, everyone should use what fits best): I would register the frontend styles as editor styles and let the Gutenberg Editor post-process those styles and wrap the selectors with .editor-styles-wrapper, see this example in the Sage 10 Full Site Editing (FSE) sample theme:

github.com

strarsis/sage10-fse/blob/a808dc0e9dfb1a0c683e2cccaf5651489444eddc/app/setup.php#L30-L40


      
          /*
           * Add frontend styles as editor styles.
           * Must be added by relative path (not remote URI)
           * (@see https://core.trac.wordpress.org/ticket/55728#ticket).
           * 
           * @return void
           */
          add_action('after_setup_theme', function () {
              $relAppCssPath = asset('app.css')->relativePath(get_theme_file_path());
              add_editor_style($relAppCssPath);
          });