Gulp Editor Styles

Wrap your styles with .editor-styles-wrapper to work inside the Gutenberg Block Editor

This is a gulp wrapper for PostCSS Editor Styles by Marty Helmick

Usage

Add Gulp Editor Styles to your project:

npm install gulp-editor-styles --save-dev

Use Gulp Editor Styles to process your CSS:

// gulpfile.js
 
const { src, dest, parallel } = require('gulp');
const editorStyles = require('gulp-editor-styles');
 
function css() {
  return src(YOUR_CSS)
    .pipe(editorStyles(OPTIONS))
    .pipe(minifyCSS())
    .pipe(dest('build/css'))
}
exports.css = css;

Options

These are the options from PostCSS Editor Styles

defaults:

const defaults = {
    scopeTo: '.editor-styles-wrapper', // The selector we're working within.
    repeat: 1, // Increase specificity by repeating the selector.
    remove: ['html'],
    replace: ['body'],
    ignore: [':root'],
    tags: ['a', 'button', 'input', 'label', 'select', 'textarea', 'form'],
    tagSuffix: ':not([class^="components-"]):not([class^="editor-"]):not([class^="block-"]):not([aria-owns])'
};