How to Widen Gutenberg Editor

Dec 14, 2018 wordpress

The default width of Gutenberg is quite narrow. Not sure the logic behind this.

Here is a quick way to make it a standard monitor width.

In your function.php drop this code:

//Gutenberg
add_theme_support('editor-styles');
function custom_gutenberg_styles() {
    wp_enqueue_style('custom-gutenberg', get_theme_file_uri( '/css/gutenberg.css' ), false, '1.0', 'all');
}
add_action('enqueue_block_editor_assets', 'custom_gutenberg_styles');

Then create a folder called css in your theme directory then create gutenberg.css

.wp-block {
   max-width:1377px !important;
}

That’s it now a width that isn’t so small!

And doing it this way you will be able to apply any custom css styles to it moving forward, just edit gutenberg.css file you created.