Changing the width of the WordPress Gutenberg editor

Gutenberg editor width

There are many things which irritate me about working with WordPress, but one of my biggest annoyances is the default width of the Gutenberg editor. The default width is 610px, which I personally find to be far too narrow for desktop use. It seems a strange design choice, but I’m sure WordPress have their reasons.

Luckily, there is an easy fix. We’re going to inject some admin styles to override the width.

Navigate to a functions.php file in either your theme or custom plugin (WordPress plugin skeleton). Here we are going to add the following function:

function gb_gutenberg_admin_styles() {
    echo '
            /* Main column width */
            .wp-block {
                max-width: 720px;
            /* Width of "wide" blocks */
            .wp-block[data-align="wide"] {
                max-width: 1080px;
            /* Width of "full-wide" blocks */
            .wp-block[data-align="full"] {
                max-width: none;

The idea is that we want to call this function when the admin head is loaded so that the enclosed style tags are echoed into the head. To do this we can add an action to call the code in the admin head.

add_action('admin_head', 'gb_gutenberg_admin_styles');

Play with the max-width numbers until you find the perfect width for you. Happy blogging!

For those of you as lazy as I am, I’ve added a simple plugin to GitHub for you.

  1. Esa Mäkelä says:

    wouldnt this be better ? cheerz

    .block-editor-block-list__layout .wp-block {

    .wp-block {

    1. Gav says:

      Sure, if you want a standard wp-block layout to span 100% of the available width with no margin to seperate the blocks.

  2. Inez Aponte says:

    Hi Gav,

    I just downloaded your plugin but the block editor is still narrow. Is there something else I need to do?


    1. Gav says:


      Don’t use the default values from the post, adjust them to suit your needs. Try changing the values to ‘none’ instead 🙂

  3. Brittney says:

    Where does the “add_action” go?

    1. Osman says:

      It goes in the same function.php.

  4. Caco Martin says:

    Thanks for share!

Join the discussion!

You might like: