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?
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.
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.
See also: Useful Code Snippets for Your WordPress Functions File
Changing the editor width 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 Text), 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 style-editor.css 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.
2. Once you've entered your FTP account details, click "Quick Connect" to connect to your web hosting account.
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]/.
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.
Load style-editor.css with the functions file
Once you've uploaded your custom style-editor.css file, you'll need to include it in your WordPress admin control panel by adding a code snippet to your functions.php file.
1. Using your FTP client, download your theme's functions file and open it in your text editor.
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 replace the CSS stylesheet you previously uploaded and apply your editor block styles.
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.
Loading the custom CSS with WPCodeBox
If you're going to be adding code snippets to your WordPress website on a regular basis (and there's every chance that you will), I highly recommend purchasing WPCodeBox. It's one of my favourite WordPress plugins and goes on every website I build (including this one).
Code snippets are added to the WPCodeBox editor the same way as they are to the functions.php file, but WPCodeBox offers a huge array of powerful features that make it an essential purchase, in my opinion.
WPCodeBox features conditional loading, an intuitive code editor (which includes suggestions for WordPress actions, hooks and functions), a built-in error checker, a growing library of ready-made code snippets and the ability to organise your snippets into folders.
Best of all, you can save your code snippets to the cloud and deploy them on any WordPress website in seconds. If you use the same snippets on multiple sites, having them available at the click of a button is a huge time saver and is worth the price of the plugin alone.
WPCodeBox is amazing. It's the best code snippet manager on the market and I wouldn't build a WordPress website without it.
Changing the width of the editor with a plugin
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.
However, the two plugins I'm aware of that increase the width of the Gutenberg editor - Editor Full-Width Gutenberg and Page Editor Full-Width Option - both appear to have been abandoned, so I can't recommend installing either of them.
Outdated plugins are a major cause of WordPress security issues, and any plugin that appears to be abandoned should be treated with extreme caution. Editor Full-Width Gutenberg is currently active on over 7,000 WordPress websites but hasn't been updated for over two years! A sobering thought indeed.
My advice is to learn how to use the functions.php file. It's basically an extremely powerful plugin that can change how your WordPress website works, and it's definitely worth getting familiar with.
Of course, if you do know of a properly maintained plugin that increases the width of the Gutenberg editor, please let me know in the comments section below and I'll be happy to add it to the post.
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 my blog post "Useful Code Snippets 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.
