Changing the width of the WordPress Gutenberg editor

There are many things which irritate me about working with WordPress, but one of my biggest annoyances is the default width of the Gutenberg editor. The default width is 610px, which I personally find to be far too narrow for desktop use. It seems a strange design choice, but I’m sure WordPress have their reasons.

Luckily, there is an easy fix. We’re going to inject some admin styles to override the width.

Navigate to a functions.php file in either your theme or custom plugin (WordPress plugin skeleton). Here we are going to add the following function:

function gb_gutenberg_admin_styles() {
    echo '
        <style>
            /* Main column width */
            .wp-block {
                max-width: 720px;
            }
 
            /* Width of "wide" blocks */
            .wp-block[data-align="wide"] {
                max-width: 1080px;
            }
 
            /* Width of "full-wide" blocks */
            .wp-block[data-align="full"] {
                max-width: none;
            }	
        </style>
    ';
}

The idea is that we want to call this function when the admin head is loaded so that the enclosed style tags are echoed into the head. To do this we can add an action to call the code in the admin head.

add_action('admin_head', 'gb_gutenberg_admin_styles');

Play with the max-width numbers until you find the perfect width for you. Happy blogging!

For those of you as lazy as I am, I’ve added a simple plugin to GitHub for you.