One of Gutenberg’s best features is that it allows you to keep the block’s visuals on the Editor, offering consistency between the backend and the frontend and a much more intuitive editing experience.

To begin creating your Editor styles, you just need to add the respective support and enqueue your CSS using add_editor_style(), like so:

add_theme_support( 'editor-styles' );
add_editor_style( '/your-theme-path/editor-styles.css' );

Most of the time, implementing the frontend’s CSS to the Editor is as easy as simply copying the block’s styles to your editor-styles.css (btw, the filename could be anything you want).

What might discourage you, though, when you do it for the first time, is that because of some editor-specific styles, things don’t look too close to the original. In fact, unless your frontend design doesn’t have a very narrow width, chances are that your block’s editor isn’t even user-friendly. As an example, here’s how a random custom block that I’m working on looks like on the frontend:

And here’s how it looks like if I copy and paste its styles in my editor-styles.css.

There are two problems here: The first one is that Gutenberg, by default, gives a very narrow max-width to its blocks, so if your block is meant for a wider display, it will not look good.

The second problem is that the styles of the title do not seem to get applied. If you investigate the code, though, you will discover that as the title is editable, its markup is different than the frontends on that it contains an extra textarea. So, while on the frontend we have something like <h2>Some text</h2> on the backend it becomes something like <h2><textarea ...>Some text</textarea></h2>. The <textarea> element has its own styles, which override our own.

To deal with those two issues, all we need is those two lines of CSS:

.block-editor-block-list__layout .wp-block { max-width: none; }
.block-editor-block-list__layout textarea { all: inherit; }

The first one removes the max-width from the blocks and the second tells the <textarea> element to inherit all the styles of its parent, whatever those might be. With just those two lines of CSS, our block’s appearance looks much closer to the frontend’s:

Given that I try to replicate the frontend design on the backend as much as possible, copying those two lines is the first thing I put in editor-styles.scss on every custom WordPress project.

If you happen to have similar quick tips of your own, I’d be happy to read about them in the comments.

Leave a Reply

Your email address will not be published. Required fields are marked *