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' );
	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

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.

John Regan

From the Front Lines of WordPress Development

How To Add Custom Editor Styles to Gutenberg