How to make Gutenberg wider

Block editor unpleasant feature: page mock is narrow, but there is too much empty space around.

How to make Gutenberg wider


Editing a page in the block editor has an unpleasant feature – strip with the page mock is too narrow – 610px only, and this cause inconvenience with big number of columns. Page mock is narrow, but there is too much empty space around.

Looks awful, right?

All that you should do – just to add one rule to the admin styles. For this, add the following code to the `functions.php` file of your theme:

/**
 * Enqueue admin scripts.
 */
function my_admin_enqueue_scripts() {
	wp_enqueue_style(
		'admin',
		get_stylesheet_directory_uri() . '/css/admin.css',
		[],
		'1.0'
	);
}

add_action( 'admin_enqueue_scripts', 'my_admin_enqueue_scripts' );

Then, in the css subfolder of your theme create a file named admin.css with the following content:

.wp-admin .wp-block {
	 max-width: 100%;
}
Much better, huh?
Pin It

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.