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.

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');

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 Reply