0,00 USD

No products in the cart.

Friday, March 5, 2021
0,00 USD

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.

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
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.

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
Cherylhttps://www.caffeinejournal.com
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.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You may also be interested in:

Adding Google Analytics to WordPress

Zip has installed an SEO plugin. So he probably wants to be able to find out how many visitors are actually coming to his website and what pages they are viewing. In this post, he'll install Google Analytics using a plugin so he can start viewing analytics data for his new website.

How to Use Yoast to Configure Your Post for SEO

Zip's added the Yoast SEO plugin to his blog. Let's look at how he can optimize a post (or page) for search engine optimization using the Yoast plugin as well as some things to keep in mind when using this helpful plugin.

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.
Share via
Get Caffeinated!
Coffee Image for Email Subscribe

OK, we can't send you caffeine--or even coffee-- but we can send you new content. Subscribe to our email list and get new posts delivered to your inbox. If you don't specify preferences, you'll be signed up for a weekly digest of new posts in all categories, as well as occasional promotional emails and surveys. However, if you would like to customize the frequency and type of content you receive, you can sign up here.

Liked it? Follow us on social media!
Thanks for sharing!
If you found this post worth sharing, consider following us on social media (if you don't already).
And if you have something you would like to share, consider submitting a post. Find out more here.
Send this to a friend