How To Add Custom Editor Styles to Gutenberg

Adding Custom Gutenberg editor styles in WordPress is a nice touch to any theme, as it allows authors to get a basic preview of their content before it gets published. It seems like a complicated task, but it’s actually pretty simple, once you get started.

Before

After

The PHP

It begins with registering and enqueueing a CSS file in your theme.

	<?php
	/**
	* Enqueue the Gutenberg editor stylesheet.
	*
	* Put this in your functions.php.
	*
	* @action enqueue_block_editor_assets
	*/
	function jr3_enqueue_gutenberg() {
	// Make sure you link this to your actual file.
	wp_register_style( 'jr3-gutenberg', get_stylesheet_directory_uri() . '/css/editor.css' );
	wp_enqueue_style( 'jr3-gutenberg' );
	// This font is enqueued for the demo only. You probably won't need this.
	wp_register_style( 'jr3-webfonts', 'https://fonts.googleapis.com/css?family=Montserrat&#39; );
	wp_enqueue_style( 'jr3-webfonts' );
	}
	add_action( 'enqueue_block_editor_assets', 'jr3_enqueue_gutenberg' );

view raw gutenberg-custom-editor-styles.php hosted with ❤ by GitHub

The CSS

The CSS is a bit trickier because there are so many blocks and elements to cover. Here is an example that I’ve put together for this demo that can be a starting place for you.

	/* Custom Editor Styles */
	/*
	* With some edits, this can be used as a base for your Custom Editor Styles.
	* Note that this is for demonstration purposes only, and some elements may not
	* be covered here.
	*/
	/* Approximate the theme width, except for full-width images. */
	.wp-block:not( '.editor-block-list__block["data=full"]' ) {
	width: 95%;
	max-width: 1000px;
	}
	/* Fonts */
	/* Note that Montserrat is enqueued in the PHP function that enqueues this file */
	.editor-writing-flow .wp-block textarea,
	.editor-writing-flow .wp-block .wp-block-freeform,
	.editor-rich-text p,
	.editor-post-title__input,
	.wp-block-quote__citation {
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	}
	/* TinyMCE Editor */
	.editor-styles-wrapper p,
	.editor-rich-text p,
	.editor-styles-wrapper blockquote {
	font-size: 16px;
	line-height: 22px !important;
	}
	.editor-writing-flow .wp-block a {
	color: #00a2ad !important;
	}
	/* Headings */
	.editor-writing-flow .wp-block h1,
	.editor-writing-flow .wp-block h3,
	.editor-writing-flow .wp-block h3{
	font-weight: bold;
	}
	.editor-writing-flow .wp-block h1 {
	font-size: 36px;
	line-height: 1.5em;
	}
	.editor-writing-flow .wp-block h2 {
	font-size: 25px;
	line-height: 1.5em;
	}
	.editor-writing-flow .wp-block h3 {
	font-size: 16px;
	line-height: 1.5em;
	}
	/* The Post Title */
	.editor-post-title__block .editor-post-title__input {
	color: #00a2ad;
	text-align: center;
	}
	/* Blockquote styles */
	.wp-block blockquote {
	font-style: italic;
	color: #aaa;
	margin-left: 20px;
	border-left: 0;
	padding-left: 0;
	}
	.wp-block blockquote .editor-rich-text {
	padding-left: 3rem;
	}
	.wp-block blockquote:before {
	color: #ccc;
	content: '\201C' !important;
	font-size: 4em;
	position: absolute;
	top: 10px;
	}
	.wp-block-quote:not(.is-large):not(.is-style-large) {
	border-left: 0;
	margin-left: 0;
	padding-left: 0;
	}

view raw gutenberg-custom-editor-styles.css hosted with ❤ by GitHub

How to Add Full Width Images in Gutenberg

Full width images are a sweet new feature that Gutenberg offers to WordPress theme developers. In order to enable these in your theme, it takes just a few lines of code.

Problem #1

By default, the Gutenberg Image Block only has the three classic alignment options: left-aligned, centered, and right-aligned.

Gutenberg Default Image Alignment Options

Enabling Wide Images in the Gutenberg Editor

First, a bit of PHP.  Add this to your theme’s functions.php, or wherever else you are adding your add_theme_support() functions.

	<?php
	/**
	* Add Theme Support for wide and full-width images.
	*
	* Add this to your theme's functions.php, or wherever else
	* you are adding your add_theme_support() functions.
	*
	* @action after_setup_theme
	*/
	function jr3_theme_setup() {
	add_theme_support( 'align-wide' );
	}
	add_action( 'after_setup_theme', 'jr3_theme_setup' );

view raw
full-width-image-theme-support.php
hosted with ❤ by GitHub

Now, you can find two new icons on your Image Gutenberg Block, wide-align, and full-width.

When one of these options is selected, it will display correctly in the editor.  If you select wide-align, the image gets wider, and if you select full-width, the image fills the editor horizontally.

Wide Image Previews in the Gutenberg Editor

A wide image in the Gutenberg Editor

A full-width image in the Gutenberg Editor

Problem #2

There’s just one issue: Although WordPress adds special classes to the image markup, this doesn’t affect your actual theme styles.

An unstyled full-width image in the Theme.

The Solution

To solve this, add your own CSS.  Here’s a snippet I came up with:

	.alignwide {
	/* Set these margins to work with your own theme. */
	margin-left: -80px;
	margin-right: -80px;
	max-width: 100vw;
	}
	.alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
	}
	.alignfull img {
	width: 100vw;
	}

view raw
full-width-image-theme-support.css
hosted with ❤ by GitHub

A few notes about the CSS:

• calc() tells the browser to calculate a value (usually) based on the screen size.
• vw refers to “viewport width,” or screen width.

The Result

After the styles are applied:

A wide-aligned image in the theme after adding the CSS.

A full-width image in the theme after adding the CSS.

So, with less than 20 lines of code, you can add this powerful and attractive feature to your themes.

Further Reading

• WP.org developer docs, “wide-alignment”