Sage 10: Add stylesheet to Gutenberg editor (ACF + Tailwind)

sage
, , ,
1

Hi guys
I found a trick to include the front style in Gutenberg editor :

  1. Copy the style from your app.css file to the editor.css file (with a simple configuration, an @import should be enough). In my case I use tailwind, I copy/paste the whole file with all imports.
  2. Add the postcss-prefixwrap plugin. Use either postcss.config.js (tested) or bud.config.js (not tested). Set .editor-styles-wrapper as prefix.
  3. Make sure that the plugin is only executed on the editor.css file : from postcss.config.js, just check if the name of the processed file contains editor.css.
    Ex:
module.exports = (api) => {
  return {
    ident: 'postcss',
    plugins: getPlugins(api.file.includes('/editor.css')),
  };
};
  1. Disable the default editor’s styles
add_action('after_setup_theme', function () {
  remove_editor_styles();
}, 999);

And it’s done !

2 Likes
2

Nice.

For me, I use the following and it seems to work:

app.css

@import './main.css';
@import '../../../../../wp/wp-includes/css/dist/block-library/style.css';

/* app-only styles */

editor.css

@import './main.css';

/* editor-only styles */

main.css

@import './fonts/your-font-here.css';
@import 'tailwindcss/base';
@import './base/base.css' layer(base);
@import 'tailwindcss/components';
@import './components/components.css' layer(components);
@import './components/forms.css' layer(components);
@import 'tailwindcss/utilities';
@import './utils/utils.css' layer(utilities);

@import './components/blocks.css';

Most of my styles are in blocks.css

IIRC I needed the postcss-import plugin in postcss.config.cjs