Changing the width of the WordPress Gutenberg editor

The Gutenberg editor makes managing your content easy, but what can you do if you need to change the width of the Gutenberg editor or sidebar?

One of the things that many people find annoying about the WordPress Gutenberg editor is the layout of the admin page and the inability to change the width of the Gutenberg editing panes.

WordPress has announced that they are ending support for the WordPress classic editor in December 2021. Whilst this does not mean that the classic editor will not work on older sites, it does mean that if you are building a new WordPress site, you should really use the Gutenberg Editor moving forward.

Download the plugin here

Different ways to change the width of the Gutenberg editor in WordPress.

Use some CSS
Use some Javascript
Use a lightweight WordPress plugin

Using CSS to change the width of the Gutenberg editor or sidebar


.interface-interface-skeleton__sidebar .interface-complementary-area{width:100%;}
.is-sidebar-opened .interface-interface-skeleton__sidebar{width:900px;}

This is a quick and easy fix but does have some disadvantages.

Firstly, the fix is a permanent change and just sets the width of the editor and sidebar to a predetermined fixed width.

This is fine if you are changing the widths to suit your own monitor size, but does not allow it to be easily changed if someone is editing a site on an iPad for example.

Using Javascript to change the width of the editor or sidebar for Gutenberg

Javascript provides another option for changing the width of the editing panes in Gutenberg, but this can sometimes be too technical for all users to implement.

If you are using an off-the-shelf theme, you may need to create a child theme in order to edit the functions.php file or have to another plugin to the site in order to be able to use a Javascript solution.


<?php function toast_enqueue_jquery_ui(){
	wp_enqueue_script( 'jquery-ui-resizable');
}
add_action('admin_enqueue_scripts', 'toast_enqueue_jquery_ui');

function toast_resizable_sidebar(){ ?>
	<style>
		.interface-interface-skeleton__sidebar .interface-complementary-area{width:100%;}
		.edit-post-layout:not(.is-sidebar-opened) .interface-interface-skeleton__sidebar{display:none;}
		.is-sidebar-opened .interface-interface-skeleton__sidebar{width:350px;}

		/*UI Styles*/
		.ui-dialog .ui-resizable-n {
			height: 2px;
			top: 0;
		}
		.ui-dialog .ui-resizable-e {
			width: 2px;
			right: 0;
		}
		.ui-dialog .ui-resizable-s {
			height: 2px;
			bottom: 0;
		}
		.ui-dialog .ui-resizable-w {
			width: 2px;
			left: 0;
		}
		.ui-dialog .ui-resizable-se,
		.ui-dialog .ui-resizable-sw,
		.ui-dialog .ui-resizable-ne,
		.ui-dialog .ui-resizable-nw {
			width: 7px;
			height: 7px;
		}
		.ui-dialog .ui-resizable-se {
			right: 0;
			bottom: 0;
		}
		.ui-dialog .ui-resizable-sw {
			left: 0;
			bottom: 0;
		}
		.ui-dialog .ui-resizable-ne {
			right: 0;
			top: 0;
		}
		.ui-dialog .ui-resizable-nw {
			left: 0;
			top: 0;
		}
		.ui-draggable .ui-dialog-titlebar {
			cursor: move;
		}
		.ui-draggable-handle {
			-ms-touch-action: none;
			touch-action: none;
		}
		.ui-resizable {
			position: relative;
		}
		.ui-resizable-handle {
			position: absolute;
			font-size: 0.1px;
			display: block;
			-ms-touch-action: none;
			touch-action: none;
		}
		.ui-resizable-disabled .ui-resizable-handle,
		.ui-resizable-autohide .ui-resizable-handle {
			display: none;
		}
		.ui-resizable-n {
			cursor: n-resize;
			height: 7px;
			width: 100%;
			top: -5px;
			left: 0;
		}
		.ui-resizable-s {
			cursor: s-resize;
			height: 7px;
			width: 100%;
			bottom: -5px;
			left: 0;
		}
		.ui-resizable-e {
			cursor: e-resize;
			width: 7px;
			right: -5px;
			top: 0;
			height: 100%;
		}
		.ui-resizable-w {
			cursor: w-resize;
			width: 7px;
			left: -5px;
			top: 0;
			height: 100%;
		}
		.ui-resizable-se {
			cursor: se-resize;
			width: 12px;
			height: 12px;
			right: 1px;
			bottom: 1px;
		}
		.ui-resizable-sw {
			cursor: sw-resize;
			width: 9px;
			height: 9px;
			left: -5px;
			bottom: -5px;
		}
		.ui-resizable-nw {
			cursor: nw-resize;
			width: 9px;
			height: 9px;
			left: -5px;
			top: -5px;
		}
		.ui-resizable-ne {
			cursor: ne-resize;
			width: 9px;
			height: 9px;
			right: -5px;
			top: -5px;
		}
	</style>

	<script>
		jQuery(window).ready(function(){
    		setTimeout(function(){
        		jQuery('.interface-interface-skeleton__sidebar').width(localStorage.getItem('toast_sidebar_width'))
        		jQuery('.interface-interface-skeleton__sidebar').resizable({
            		handles: 'w',
            		resize: function(event, ui) {
                		jQuery(this).css({'left': 0});
                		localStorage.setItem('toast_sidebar_width', jQuery(this).width());
           				}
        		});
    		}, 500)
		});
	</script>
<?php }
add_action('admin_head', 'toast_resizable_sidebar');

})

Using our plugin to be able to change the width of the Gutenberg editor simply by dragging the width.

As you can see, the plugin simply allows you to drag the width of the editor to whatever you want when you are editing content using the Gutenberg editor.

This makes editing content in WYSIWYG blocks very simple and the settings are stored locally, meaning that different site users can set the width of the editor to a size that suits them instead of predefined widths.

Our plugin is available for free download on the WordPress repository.

Download the plugin here

Other plugins you might like

At Toast Plugins, we design and build simple, easy to use plugins that extend WordPress and make adding complex functionality to your site easy!