Gutenberg Editor too thin? If you have made the jump to Gutenberg on your website (I only just have!) then one of the things that might be bugging you is the width that blocks appear. For some reason they seem to be fixed at just over 500 pixels which doesn’t make much sense to me! Some quick Googling and the scripts below will change all that allowing you to set the blocks at any width you like.

This same script can also be used to add custom styles to Gutenberg’s Editor making them appear like the front end. I will let you figure that but out for now…

First off open your theme’s functions.php and paste the following code.

function guten_setup() {
// Add support for editor styles.
add_theme_support( 'editor-styles' );

// Enqueue editor styles.
add_editor_style( 'css/style-editor.css' );
}
add_action( 'after_setup_theme', 'guten_setup' );

Next you need to create a new css file in your template folder. Put it in a folder within your theme directory called css

Once the file is saved, add

.wp-block {max-width:100%!important;}

Changing the width accordingly to your needs.

That’s it! Done. Refresh your page editor and enjoy some proper screen real estate for editing!