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.
2 answers
1
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;
}
— Support WizardAnswer 1
0
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;
}
— Support WizardAnswer 2