Quantcast
Channel: Web Design and WordPress Guides – Web Design by 418Design
Viewing all articles
Browse latest Browse all 13

Increasing the width of the Gutenberg Editor

$
0
0

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

Gutenberg Width Editor

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!

 

The post Increasing the width of the Gutenberg Editor appeared first on Web Design by 418Design.


Viewing all articles
Browse latest Browse all 13

Latest Images

Trending Articles



Latest Images