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.

8 comments

  1. Some Themes (E.g. twentyseventeen) come along with built-in editor-styles.
    Pick the line .wp-block in your-theme-folder/assets/css/editor-blocks.css and change the width.
    Set also “editor-style.css” body max-width: to your appropriate value.
    This did id form me.

  2. I was going under a difficult time in shifting to the the new editor and removing the classic editor πŸ™
    The new editor is really quite difficult to understand and need to find the tools and boxes.
    Thanks for this great trick which helped me to increase the editor size πŸ™‚

  3. Tanks for these instructions! Easy and works. I wonder why this Gutenberg editor works that way in the first place? I see many people have this problem and many are giving up on Gutenberg because it feels kind of really immature. In a perfect world we would have a button in editor like we have in theme customization. We could switch easily between wide desktop and narrow mobile.

  4. Sadly this is not working, tryed several sites with different themes and the original block styles are not overriden…it’s impossible to use columns in Gutenberg with a 580px width.

    function add_editor_styles() {
    add_theme_support(‘editor-styles’);
    add_editor_style( ‘style-editor.css’ );
    }
    add_action( ‘admin_init’, ‘add_editor_styles’ );

  5. Wow, Thank you!! I have spent days trying to find a tutorial like this one. Before this i had to preview my posts i thousand times to check how is going.Thank you again!

Leave a Reply

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