How to Change the Width of the Gutenberg Editor

Last updated on 7th January 2021 by Rob Carter

Disclaimer: This post may contain affiliate links. if you purchase something through one of those links you won’t pay a penny more, but we’ll get a small commission.

Need more space in your WordPress editor?

The Gutenberg block editor polarises opinion like no other WordPress feature, but there’s one aspect of it that almost everyone agrees on: the default editor screen is far too narrow.

The default width of the editor is 610px – a strange design choice, given that Gutenberg is fast becoming as much a pagebuilder like Elementor and Divi as it is a content editing one. The narrow container makes it difficult to create complex layouts with rows and columns, and block alignment can quickly become extremely cumbersome.

The screenshot below perfectly illustrates how difficult it is to manage multi-column layouts using the default width Gutenberg editor. A simple four-column page results in squashed and distorted content in the dashboard – can you imagine what six columns would look like?

Narrow Gutenberg editor
Narrow Gutenberg editor

The following screenshot shows the same page layout but with a full-width Gutenberg block editor. As you can see, it’s much easier to see what you’re editing.

Full-width Gutenberg editor
Full-width Gutenberg editor

So how do you change the width of the Gutenberg editor?

There’s no option to increase the default width of the block editor in the WordPress dashboard, which essentially leaves you with two options: add a custom CSS stylesheet via your theme’s functions.php file (the official recommended way to change the width of the Gutenberg editor, as outlined in the Block Editor Handbook), or use a plugin. I’ll cover both methods in this article.

Changing the width of the editor using the functions file

Custom editor width for all post types

The first thing you need to do is create a custom CSS stylesheet and upload it to your theme folder. Open your favourite text editor (I currently use Sublime), copy and paste the following CSS rules and save the file to your desktop as “style-editor.css“.

/* Main column width */
.wp-block {
    max-width: 100%;
}

/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
    max-width: 100%;
}

/* Width of "full-width" blocks */
.wp-block[data-align="full"] {
    max-width: none;
}

The code above will make your Gutenberg blocks take up the full width of the screen. If you want your blocks to be wider than the default width, but don’t want them to stretch the full width of your screen, you can add the following code instead. Simply change the “max-width” values to suit your needs.

/* Main column width */
.wp-block {
    max-width: 720px;
}

/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
    max-width: 1080px;
}

/* Width of "full-width" blocks */
.wp-block[data-align="full"] {
    max-width: none;
}

Different editor widths for different post types

But what if you want a narrow Gutenberg editor for blog posts, and a wider one for pages? Just add the following code snippet to your functions file in place of the previous examples, adjusting the “max-width” and “width” values to suit your requirements.

/* Main column width - pages */
.post-type-page .wp-block {
    max-width: 1170px;
    width: 90%;
}

/* Main column width - posts */
.post-type-post .wp-block {
    max-width: 800px;
    width: 60%;
}

If your WordPress website makes use of custom post types, you can easily set different editor widths for different post types. To do that, simply add the following code snippet to your custom CSS stylesheet. Remember to change the “post-type-post” class to match your custom post type.

/* Custom post type block width */
.post-type-post .wp-block {
     max-width: 750px;
}

Upload your CSS file

Once you’ve created the style-editor.css file, the next thing you need to do is upload it to the folder where your WordPress theme files are located.

1. Open your FTP client (I use FileZilla) and enter your FTP host, username, password and port number.

FileZilla login form
FileZilla login form

2. Once you’ve entered your FTP account details, click “Quick Connect” to connect to your web hosting account.

FileZilla quick connect button
FileZilla quick connect button

3. Next, use your FTP client to navigate to the folder where your theme’s files are located. This is usually “public_html/wp-content/themes/[your-theme]/”.

WordPress theme folder
WordPress theme folder

4. Finally, right-click the style-editor.css file you saved to your desktop and then click “Upload” to upload it to your WordPress theme folder.

Upload style-editor.css
Upload the style-editor.css file

Load the custom CSS

Once you’ve uploaded your custom CSS file, you’ll need to include it in your WordPress admin control panel by adding a code snippet to your functions.php file.

Stop!

Before proceeding any further, do yourself a favour and make a backup of your site. It’s much better to have a cramped Gutenberg editor than a broken WordPress website.

1. Using your FTP client, download your theme’s functions file and open it in your text editor.

Download functions file
Download the functions file

2. Copy and paste the following code into your functions file.

// Load Gutenberg Editor Styles
function megademic_gutenberg_editor_styles() {
    wp_enqueue_style(
        'admin-styles',
        get_stylesheet_directory_uri().'/style-editor.css'
    );
}
add_action(
    'admin_enqueue_scripts',
    'megademic_gutenberg_editor_styles'
);

3. Upload functions.php to your theme directory, overwriting the existing file. This will call in the CSS stylesheet you previously uploaded and apply your editor block styles.

Upload functions file
Upload the functions file

Alternative method

If you don’t want to add an extra CSS file to your theme, you can inject the editor block styles directly into your WP admin dashboard by adding the following code to your functions file instead.

// Gutenberg Editor Styles
function megademic_gutenberg_editor_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-width" blocks */
            .wp-block[data-align="full"] {
                max-width: none;
            }	
        </style>
    ';
}
add_action(
    'admin_head',
    'megademic_gutenberg_editor_styles'
);

It’s not the recommended way to load custom CSS for the Gutenberg editor, but it’s probably the quickest.

The Editor Full-Width Gutenberg plugin

The Editor Full-Width Gutenberg plugin automatically adds custom CSS to change the default width of the Gutenberg editor, without you having to modify your theme’s functions file.

It’s a good idea to avoid installing a plugin when a few simple code edits will achieve the same effect, but for people who don’t feel comfortable editing files – or don’t have FTP access – it may be the only option.

The Editor Full-Width Gutenberg plugin is installed the same way as any other plugin in the official WordPress repository:

1. Log into your WordPress dashboard and go to Plugins > Add New.

Add New Plugins page
‘Add New Plugins’ page

2. Then in the search box, enter “Editor Full Width Gutenberg”.

Plugin search page
Plugin search page

3. Once you’ve found the plugin, click “Install Now”. The plugin will then be downloaded to your WordPress plugins folder.

Install Editor Full Width Gutenberg
Install Editor Full Width Gutenberg

4. Finally, click the “Activate” button to enable the plugin and make the Gutenberg editor full width.

Activate Editor Full Width Gutenberg
Activate Editor Full Width Gutenberg

A full-width Gutenberg editor for easier editing

Increasing the width of the Gutenberg block editor can significantly improve the blog post editing experience and make creating complex layouts much more straightforward. The default column block becomes easier to use, as does many other types of content blocks – and all you need to do is upload a CSS file and add a code snippet to your functions file!

What’s more, the additional CSS rules described above will only be loaded in the admin control panel so they won’t impact the front end speed of your website.

For more awesome WordPress hacks, don’t forget to check out “Useful Tricks for Your WordPress Functions File“. And if you have any other useful tips and tricks for improving the default editor, please let us know in the comments below.

Take the next step

Subscribe to our newsletter, where we share actionable advice and useful tips for building your brand and growing your online business.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on reddit
Reddit

You may also like:

Leave a Reply

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