How to change the default width of Gutenberg editor in WordPress

One of the biggest disadvantages of the Gutenberg editor is that the width of the editor is not as full-width as the classic editor. In many themes, the background editing interface is very narrow compared to the actual article page, resulting in different front and back layouts, which affects the article.

In this article, We’ll cover how to modify the default width of the Gutenberg editor.

Code to adjust the width of the editor

Add the following code to the 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');

Use a plug-in to make the Gutenberg editor full width

If you want to use the full-width mode like a classic editor, you can install a plugin called Page Editor Full Width Option. This is a plugin that specifically sets the Gutenberg full-width mode. There is no option and it will take effect after installation.

Was this post helpful?

Leave a Comment