Editor styling for the Gutenberg editor: how to match your site’s layout

In the eighties, when I started in IT, a word processor was a piece of software in which you could type your text and style it with button combinations. How your text came out of the printer was a different story. Think programs like WordPerfect and WordStar. Editor styling was not a thing yet, and proper WYSIWYG (What You See Is What You Get) editors were hardly there before Microsoft Word started its hegemony.

Later on, as an avid Word user, I got used to seeing the end result (or something very close to it) right in the editor. When I first started working with content management systems – first Joomla!, later WordPress – it ticked me off that these systems had no proper WYSIWYG editor built in. You had to work in a standard-sized editor with the system’s chosen font, which had no resemblance to the styles I had on my website.

With some deep web searching, I found out how you could style your editor using a CSS file. Not the most elegant way, but it worked.

For each site I made, I created a custom editor styles file mimicking the site’s setup. The font type and size were the same, hyperlinks were the same color, headings were the same size, and so on. Especially for clients, I want them to use the editor without too much hassle, so it was worth it going the extra mile.

But now there is a new editor in town.

Resources and tools for styling Gutenberg

Gutenberg is the new editor for WordPress, and will be included in the core code as of version 5.0. When Gutenberg first came out, I hoped the editor styling problems were over. But sadly, no.

Apart from a starting point, WordPress doesn’t give you – as a designer or website admin –  much to work with. The official Gutenberg documentation isn’t keeping up with the developments, at least at the time of this writing.

The only guidance the handbook gives you on editor styling, right now at least, is how you can let your site know there is a styles file for the editor it can use, and how to specify the editor’s width and the width of some special-sized blocks. Hopefully this will change soon.

Since I I wanted to have my editor screen resemble what I see on my site – to achieve a more of a WYSIWYG experience – I had to find stuff out on my own. Luckily, there are some resources and tools you can use to style the editor.

Check the default editor styling file for Gutenberg

A resource that helps you get a grasp of the various styles used, is Gutenberg’s own editor styling CSS file. I recommend you download it from your server.

For as long as the Gutenberg editor remains a plugin, you should be able to find its default editor styling file in the /wp-content/plugins/gutenberg/build/editor/ folder on your server.

Make sure you download the style.css file and not the editor-styles.css file, which you might expect. Of course, when you use a RTL language on your site, you download the styles-rtl.css file.

When the Gutenberg editor gets incorporated in the WordPress software, and becomes “the editor”, the editor styling file will most likely get buried somewhere in the /wp-admin/ folder’s inner dungeons.

The style.css file is in minified format, making it hard finding specific lines of code in it. However, when you use a code beautifier to unravel the code, you can make it readable for normal human eyes.

Some of the styling is not incorporated in the style.css file. You need a more hands-on approach to find these styling rules.

Use the Code Inspector tool of your browser

Your most important tool when designing a website, and – in this case – assembling a editor styling file, is your browser’s code inspector tool. It is invaluable when you want to pinpoint specific rules to specific elements.

I mostly use the Google Chrome browser, in which you can check the code used in the selected area of your page by:

• right-clicking on the area you want to check and selecting Inspect, or
• clicking on the area and using the Ctrl Shift I keyboard combination

Make sure the Elements tab is selected, so it shows you all the coding goodness.

All modern browsers have this capability, like:

• Mozilla’s Firefox lets you right-click and select Inspect Element
• the Opera browser offers the same shortcut as Firefox does
• Microsoft’s Edge does not provide the capability out of the box, but offers an plugin named Microsoft Edge DevTools

The Code Inspector tool helped me do more that just adjusting the width of my editing screen. It allowed me to find the correct elements I needed for adjusting just about everything in the editor to my needs.

How to create personalized editor styling for Gutenberg

I will take you through all the steps necessary to build the editor stylesheet I use on this website. This stylesheet is a basic one, that can be easily adapted to your own needs.

Create a new stylesheet

To kick things off:

• use your favorite text editor (I recommend Notepad ++) to create a blank CSS file
• save the file as style-editor.css to your desktop
• upload that file to your theme’s folder (/wp-content/themes/your-themes-name/) on the server

Yes, the file is blank, but you have something out there, and now you can start working with it.

Tell your site to use the new stylesheet

For Gutenberg to use your new editor stylesheet, you need to let your site know what you have a special CSS file for that purpose:

• download your theme’s functions.php from your theme’s folder (the same folder you uploaded your new CSS file to)
• copy the file on your desktop to functions.backup or something similar. The reason for this is that you can go back to that file if you made a typo and brought your site down)
• open the file in Notepad ++ or another text editor, and these lines to the end of the file:

//* Loading editor styles for the block editor (Gutenberg)
function site_block_editor_styles() {
    wp_enqueue_style( 'site-block-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'site_block_editor_styles' );

• save the file and upload it back to the server, overriding the file that’s there
• WordPress now knows that the editor CSS file is there

Perfect. You’re off to a great start!

Adding styles to the stylesheet

Make sure you have the style-editor.css file open in your text editor. Let’s begin adding our site’s content styling to the stylesheet.

Tip: at certain points in the process, you will need access to certain values you use on your site. Keep your site’s Customizer open in a separate tab, so you can copy certain settings over.

Importing any external fonts

The first thing that needs to be done is adding any custom fonts you use on your site to the stylesheet. Insert these to the top of your file, before anything else in the file.

This site you are on now uses a simple, minimalist layout with only one font-family: Open Sans. But this is a Google font, so I need to import it.

Luckily, when you select the font the Google Fonts site, the site gives you the correct line of code to add your font to your stylesheet, in this case:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Setting the width of the editor

Next I change width of the editor’s workspace. For this, I use the code the Gutenberg handbook provides.

The default width of the editor is 610px, which is quite a narrow column to work in. This site mostly uses no sidebars, so I set the width to a full-width page. This will do for most of the editing work.

In the Customizer, I set the width of the content area to 1100px.

The tricky part is, the editor adds 14px margins to the left and the right of the editor area. I found that out out using the Code Inspector, where – after prodding around in the code – I located this rule:

.editor-block-list__layout .editor-block-list__block .editor-block-drop-zone {
    bottom: -3px;
    margin: 0 14px;
    top: -4px;
}

Should I set the editor width to 1100px, this rule takes off 2 x 14px for the margins, making the working area only 1072px wide. That’s better than the original 610px, but it doesn’t mimic the site’s layout. When editing, this is most notable when line-breaks happen at a different point than on the site.

So the width I set the working area to is 1100px + (2 x 14px =) 28px = 1128px:

/* Width of the editor column */
body.gutenberg-editor-page .edit-post-visual-editor,
body.gutenberg-editor-page .editor-post-title__block,
body.gutenberg-editor-page .editor-default-block-appender,
body.gutenberg-editor-page .editor-block-list__block {
    margin-left: auto;
    margin-right: auto;
    max-width: 1128px !important; /* width of page (1100px) plus 2 x 14px margin */
}

/* Set left margin for post text editor only to 20px, no right margin */
body.gutenberg-editor-page .edit-post-text-editor {
    margin-left: 20px;
    margin-right: 0;
}

The original code from the handbook doesn’t specify the !important command, but one of the plugin’s beta versions broke the code, so it’s a necessary addition now.

Making the Code Editor behave

The code editor (click the top right-hand menu “dots” and select Code Editor) by default shows a very narrow editor area, making it difficult to read and edit the code. To ensure the editor column is the same width as the regular visual editor, I made the following adjustments:

• The centering of the editor area interferes with the width of the code editor. To ensure the visual editor stays centered I added the two margin specifications to the first block.
• The second block targets edit-post-text-editor directly. Since I couldn’t for the life of me figure out how to get the code editor to center without shrinking the editor area width, I added a margin-left of 20px so the editor does not directly touch the left menu area.

Now you have the best of both worlds: the visual editor (the only editor most people see anyway) is centered as it should, and the code editor is wide enough to allow for a decent editing experience.

Setting the widths of “wide” and “full-width” alignments

The new editor adds a number of new functionalities, including wide blocks and full-width alignments for certain block types. When added to a block, the wide alignment will stretch the block beyond the normal content container. Full-width alignment stretches the block from edge to edge on a screen. These options will mostly be used on image blocks.

To mimic these alignment options in the editor, I set the width of the blocks in the stylesheet:

/* Width of "wide" blocks */
body.gutenberg-editor-page .editor-block-list__block[data-align="wide"] {
    max-width: 1400px;
}

/* Width of "full-width" blocks */
body.gutenberg-editor-page .editor-block-list__block[data-align="full"] {
    max-width: none;
}

Selecting and styling the overall content font

Gutenberg uses a standard system font named Noto Serif, which is workable but misses your site’s look. You can find your site’s font-family, the color you selected, and its size in the Customizer (see how keeping a tab open with the Customizer selected is a great idea?). This site uses:

/* Style overall content */
.editor-block-list__layout .editor-block-list__block,
.editor-block-list__layout .editor-block-list__block p {
	color: #3a3a3a;
        font-family: "Open Sans", sans-serif;
	font-size: 18px;
}

Setting the correct font already changes your editing experience considerably. Next is styling the links you use in your editor.

Styling links

The link color you use on your site is mostly a reflection of your overall color scheme. On this site, however, I use a simple blue color with a lighter blue when hovering over the link.

The links on this site are underlined, but so are the links in the editor by default, so that doesn’t need specifying in the editor styling file.

My code for styling links is:

/* Style links */
.editor-block-list__layout a {
	color: #1e73be;
}

.editor-block-list__layout a:hover {
	color: #639dd3;
}

Setting the post title font

Somehow the post title does not change to the overall font-family I set previously, so that needs to be specified separately:

.editor-post-title__block .editor-post-title__input {
        font-family: "Open Sans", sans-serif; /* font family of the post title */
}

Styling the different headings

As you can do in the Customizer, you can set properties for all headings in the editor styling file.

The post title is a h1 heading, so these need to be styled the same. The other headings all have different colors and font-sizes assigned to them:

.editor-post-title__block .editor-post-title__input,
.editor-block-list__layout .editor-block-list__block h1 {
	color: #3a3a3a;
	font-size: 34px;
	font-weight: 300;
}

.editor-block-list__layout .editor-block-list__block h2 {
	color: #555555;
	font-size: 28px;
	font-weight: 300;
}

.editor-block-list__layout .editor-block-list__block h3 {
	color: #666666;
	font-size: 24px;
	font-weight: 300;
}

.editor-block-list__layout .editor-block-list__block h4 {
	color: #888888;
	font-size: 22px;
	font-weight: 300;
}

This concludes all the basic styling for the editor. For most websites, this are enough styling rules to work with.

But what if you need more specific styling?

Adding any special styling rules

Depending on your needs, you may need styling for other HTML tags in your editor styling file.

Styling <code> and code block font

On this site, I use pieces of code inline and in code blocks. I like to have code the same font size as the surrounding text, so I set the font-size. For the code block, I set the line-height to be the same as the standard setting for code blocks.

/* Style code and code blocks font size and line height */
.wp-block-code .editor-plain-text {
	font-size: 18px;
	line-height: 1.4;
}

Styling <kbd> keyboard strokes

Just a gimmick, but when I describe a procedure and tell the reader to use a certain key combination on their keyboard, I want the keystrokes to resemble keyboard keys (like Ctr Alt Del). I added these rules to the site and also to the editor styling.

/* Style keyboard strokes to resemble keyboard keys */
.editor-block-list__layout kbd {
	background: #eaeaea;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 0 .1em;
	padding: .25em;
}

Styling quote box and quote citation

Finally, I styled the quote block and the quote citation text on the site and in the editor styling.

/* Style block quote block */
.wp-block-quote:not(.is-large):not(.is-style-large) {
	background-color: rgba(0,0,0,0.03);
	border-left: 5px solid rgba(0,0,0,0.1);
	font-style: italic;
	padding: 20px;
}

/* Style block quote citation text */
.wp-block-quote__citation {
	color: #777777;
	display: block;
	font-size: 14px;
	font-style: italic;
}

The complete style-editor.css file I use on this site

Now I’m not going to make you copy bits and pieces into a file, of course. Below you can find the complete style.editor.css file I use on this site at the time I am writing this. Just copy, edit, and use it on your site!

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/********************************************************************/
/***** WordPress Gutenberg editor stylesheet by Robin Roelofsen *****/
/********************************************************************/

/***** Styling working area *****/

/* Width of the editor column */
body.gutenberg-editor-page .edit-post-visual-editor,
body.gutenberg-editor-page .editor-post-title__block,
body.gutenberg-editor-page .editor-default-block-appender,
body.gutenberg-editor-page .editor-block-list__block {
    margin-left: auto;
    margin-right: auto;
    max-width: 1128px !important; /* width of page (1100px) plus 2 x 14px margin */
}

/* Set left margin for post text editor only to 20px, no right margin */
body.gutenberg-editor-page .edit-post-text-editor {
    margin-left: 20px;
    margin-right: 0;
}

/* Width of "wide" blocks */
body.gutenberg-editor-page .editor-block-list__block[data-align="wide"] {
    max-width: 1400px;
}

/* Width of "full-width" blocks */
body.gutenberg-editor-page .editor-block-list__block[data-align="full"] {
    max-width: none;
}



/***** Styling content *****/

/* Style overall content */
.editor-block-list__layout .editor-block-list__block,
.editor-block-list__layout .editor-block-list__block p {
	color: #3a3a3a;
        font-family: "Open Sans", sans-serif;
	font-size: 18px;
}

/* Style links */
.editor-block-list__layout a {
	color: #1e73be;
}

.editor-block-list__layout a:hover {
	color: #639dd3;
}

/* Style headings */

.editor-post-title__block .editor-post-title__input {
    font-family: "Open Sans", sans-serif; /* font family of the post title */
}

.editor-post-title__block .editor-post-title__input,
.editor-block-list__layout .editor-block-list__block h1 {
	color: #3a3a3a;
	font-size: 34px;
	font-weight: 300;
}

.editor-block-list__layout .editor-block-list__block h2 {
	color: #555555;
	font-size: 28px;
	font-weight: 300;
}

.editor-block-list__layout .editor-block-list__block h3 {
	color: #666666;
	font-size: 24px;
	font-weight: 300;
}

.editor-block-list__layout .editor-block-list__block h4 {
	color: #888888;
	font-size: 22px;
	font-weight: 300;
}



/***** Special styling *****/

/* Style code and code blocks font size and line height */
.wp-block-code .editor-plain-text {
	font-size: 18px;
	line-height: 1.4;
}

/* Style keyboard strokes to resemble keyboard keys */
.editor-block-list__layout kbd {
	background: #eaeaea;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 0 .1em;
	padding: .25em;
}

/* Style block quote block */
.wp-block-quote:not(.is-large):not(.is-style-large) {
	background-color: rgba(0,0,0,0.03);
	border-left: 5px solid rgba(0,0,0,0.1);
	font-style: italic;
	padding: 20px;
}

/* Style block quote citation text */
.wp-block-quote__citation {
	color: #777777;
	display: block;
	font-size: 14px;
	font-style: italic;
}

My web designer’s dream

It is my web designer’s dream that, in the near future, the editor in WordPress – whether it’s still named Gutenberg or not – will use the site’s Customizer settings.

It shouldn’t be too hard: the settings are in the database. “All” that needs to be done is programmatically read these settings and assign them to the various elements in the editor.

Sure, it will take some time to get this implemented, but imagine how much easier it will be for the default user when all styles they select in the Customizer are reflected in the editor. That’s gotta be worth something.

How do you use the Gutenberg editor? Do you assign editor styling to it, like I do, or do you have a better way of tackling this issue? Let me know in the comments!

Update November 6, 2018

Just tested the latest beta version of GeneratePress, this site’s theme and my theme of choice. The theme is made Gutenberg-ready, and the editor automatically inherits the site’s CSS rules, including editor with, font family, and all. Looks like dreams come true after all.

Resources

• Gutenberg Handbook (WordPress.org)
• Theme Support – Editor Styles (WordPress.org)
• CSS Formatter