Change width of Gutenberg Editor

[andyvnguyen97]

Hello.

How can we change the width of the Gutenberg editor?

I’ve read a bunch of guides on the Gutenberg site and they’ve basically said you just have to add some code to X Theme’s styling.css sheet.

The one from the actual Gutenberg handbook is:

/* 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;
}

But it didn’t seem to do anything. Any ideas?

Thanks!

[paul.r]

Hi,

You can try adding this in your child theme’s functions.php file.

function custom_admin_css() {
echo '<style type="text/css">
/* 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;
}
</style>';
}
add_action('admin_head', 'custom_admin_css');

Another option is installing this third party plugin.

Editor Full Width Gutenberg

Hope this helps

[andyvnguyen97]

As always, problem solved.

Thanks a bunch! I’m sure lots of people could benefit from this solution haha.

[ruenel]

You’re welcome!
We’re glad we were able to help you out.