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.

0
(0)

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

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

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

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

[easy-tweet tweet=”Here’s how to make your WordPress block editor wider.” user=”lovecoffeewp” hashtags=”wordpress,wp,blogging,Gutenberg,blockeditor” template=”modern”]

How much love or how many cups of hot coffee does this post deserve?

Click to rate it!

Average rating: 0 / 5. Vote count: 0

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

As you gave this post a good rating:

Follow us on social media!

We're sorry you didn't like this post.

Help us improve!

Tell us how we can improve this post.

Cheryl Dimof
Cheryl Dimofhttps://www.lovecoffeewordpress.com
Cheryl is a "retired" Occupational Therapist who loves writing and is a WordPress enthusiast. She used to be like Rapid Rabbit, but these days, her spirit animal is Zip the Sloth. She's looking forward to getting more active again, though, and likes cycling, kayaking, meditation, reading and writes/blogs a lot. In fact, she crazily writes several blogs: Pacific Northwest and Beyond, Caffeine Journal, and as she actually worked in geriatrics and is actually getting older herself, is writing a blog about that: Ancient & Awesome.

More from author

Subscribe to Comment Notifications
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related posts

Write Something!

If you have a WordPress or blogging tip to share, consider writing a short post here.

Latest posts

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.

Keep Up on Our Latest Tips

Subscribe to our email newsletter, and you'll receive a weekly digest of new posts, and occasional newsletters or special offers. You can change your preferences or unsubscribe at any time you'd like.

0
Psst! Hey you! Yeah, you. Want to leave a comment?x
()
x