0,00 USD

No products in the cart.

Wednesday, May 5, 2021
0,00 USD

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

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’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;

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.

Average rating: 4 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

As you found this post useful...

Care to share?

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?

Cheryl is a former Occupational Therapist and WordPress enthusiast who became a writer in some parallel universe and occasionally, but infrequently, publishes things in this one. She writes two blogs (or is it three) which she won't quit because she knows that blogs, in her case, are like a hydra and if she cuts one off two more will take its place. When she's not doing that, she enjoys hiking, cycling, kayaking (formerly fast, now ebike), messing around with Adobe illustrator, making assorted things, meditating (though she wouldn't call that "like," and reading. She normally doesn't speak about herself in the third person, but she sometimes uses "we" in the royal sense while writing this blog. She lives in Poulsbo, WA with her spouse, her youngest adult daughter, a very old mutt, and a Siamese cat.
Notify of
Inline Feedbacks
View all comments

You might also like:

Sloth Maintains His Website

Zip looks at his website and sees that it is urging him to update his WordPress version. Let's look at WordPress maintenance, including WordPress version updates as well as theme and plugin updates, both automatic and manual.

Sloth Installs an SEO Plugin (Why You Should Use an SEO Plugin and How to Configure Yoast SEO)

Zip has completed basic design work on his blog. Next, he's going to move on to Search Engine Optimization. In this post, we briefly look at some of the plugins available to help with SEO, and install and configure the Yoast SEO plugin.
Get Email Updates

Sign up for our email list and get updates of new posts. By default, you'll get a weekly digest of new posts and occasional newsletters. However, you can sign up here instead to customize your preferences.

Share this
Send this to a friend