0,00 $

No products in the cart.

Home » WordPress and Blogging » WordPress Tutorials » WordPress Posts and Pages » WordPress Block Editor » How to Change the Width of the Gutenberg Block Editor in WordPress
0,00 $

No products in the cart.

How to Change the Width of the Gutenberg Block Editor in WordPress

Is your block editor too narrow? Here are a few ways to change the maximum width of your post editor in WordPress.

& You May Like:

Currently Reading

Nine Nasty Words

4
(1)

You’ve changed your theme, suddenly your block editor is 580px wide. To you, that’s way too narrow and you’d like a wider Gutenberg block editor interface. Here’s how to change the WordPress block editor width in a couple of ways.

The block editor at 580px wide

Use a Plugin to Change the WordPress Block Editor Width

The block editor after installing Editor Full Width Gutenberg

The Editor Full Width Gutenberg plugin will change your block editor to 100%. It does exactly what it says is it supposed to do. Only trouble? It’s a plugin-and-go plugin. It has no configuration options and you might find that right out of the “box” it is truly full width and you’ll find list numbers and such pushed outside the margins.

Add a Snippet to Functions.php

The block editor after adding the above snippet to functions.php

I added this into the functions.php for my child theme:

/*Wider Gutenberg Blocks*/
add_action('admin_head', 'wp_blocks_fullwidth');

function wp_blocks_fullwidth() {
    echo '<style>
        .wp-block {
            max-width: 80% !important;
         }
    </style>';
}

This worked perfectly and I can change the percentage width to whatever I want. I only had one issue with this solution: I had to use !important to overcome the desire of my theme to cram my blocks into 580px of width, and I know that some will object.

Try This Solution

This solution by Block Lab uses a css snippet and a functions.php snippet to change the width of the block editor. You can find it here.

Here's how to make your WordPress block editor wider. Click to Tweet

How many hot cups of coffee does this post or page deserve?

Click on an icon to rate it. If this is a review post, you might find a widget to rate the item itself at the beginning of the post. If this is a product, please leave your product rating under the review tab.

Average rating: 4 / 5. Vote count: 1

No votes so far! Be the first to rate it.

As you found this post useful...

Why not share it?

We are sorry that you found this post to be like a weak cup of decaf.

Let us improve this post!

Tell us how we can improve this post?

Get Notifications by Email

Sign up for our email newsletter and keep up to date on new additions to our website.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Share this
0
Hi there. While you're here, care to comment?x
()
x
Send this to a friend