Changing the width of the Gutenberg editor

 — 

Looking to change the width of the Gutenberg editor in WordPress? A quick workaround is to define some extra CSS in your theme’s functions file.

Custom width in the Gutenberg editor

In order to define a new width for your Gutenberg editor, you must first enqueue a new stylesheet in your functions.php file, using the example below.

function custom_gutenberg_editor_stylesheet() {
     wp_enqueue_style( 'custom-gutenberg-stylesheet', get_template_directory_uri() . '/custom-gutenberg-styles.css', array(), wp_get_theme()->get( 'Version' ), 'all' );
}
add_action( 'enqueue_block_editor_assets', 'custom_gutenberg_editor_stylesheet' );

Note, be sure to replace the custom-gutenberg-styles.css above accordingly.

Secondly, finish by adding the relevant CSS style inside the enqueued stylesheet, as per the example below.

.wp-block {
     max-width: 950px;
}

 

Different Gutenberg editor widths for different post-types

Using the same method as the above answer, you can define different editor widths, based on your different post types using the example below:

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