How To Change the Content Width of the Gutenberg Editor

The new Block Editor (Gutenberg) gives us a more visual editing experience, but out-of-the-box it doesn’t (yet) give us full parity with the frontend.

We can do a few things to reduce this gap though and one of them is having the Block Editor’s content width match our theme content width.

For example, I’m working on a site right now where the content width is 720px and my “wide” content is 1280px. I’d like this to be the same in the editor so that when I’m creating content it better matches what I’m going to see on the frontend. Left to its defaults, the editor gives us 580px and 1080px.

The good news, it’s easy to change.

Here’s how…

We’re going to do 2 things:

  • Create a new CSS file
  • Add a snippet of code in our theme’s functions.php file to enqueue this new CSS file

The WordPress developer docs over on WordPress.org give good direction for what we’re doing now.

Let’s create the CSS file and call it style-editor.css and add it to the top level folder of our theme. To set our custom content widths we’re going to work with a couple of the available editor classes. The CSS we’re adding to style-editor.css looks like:

/* 
 * Main column width
 * This changes it from the default 580px to 720px
 */
.wp-block {
    max-width: 720px;
}

/* 
 * Width of "wide" blocks
 * This changes it from the default 1080px to 1280px
 */
.wp-block[data-align="wide"] {
    max-width: 1280px;
}

These changes now reflect the relevant widths of our theme on the frontend.

Now we need to make WordPress load this new stylesheet in the backend when the Block Editor is going.

To do this, add this to your theme’s functions.php file

function mytheme_add_editor_styles() {
    add_editor_style( 'style-editor.css' );
}
add_action( 'admin_init', 'mytheme_add_editor_styles' );

You’ll swap out mytheme with your own theme’s prefix.

Too easy hey!

I hope this helps you out. Any questions or comments, throw em in the comments below.

Happy block building.

New Kid on the Block?

Subscribe, stay connected, and keep up to date with the latest.

  • This field is for validation purposes and should be left unchanged.

Leave a Reply

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