You’re in the right article if you have the same opinion as us; that is comfortable for writing is different from the layout that is comfortable for reading. Let’s say you’re a blogger using WordPress to make blog posts, a wider layout may be more comfortable for users reading your content; it helps reduce eye strain by making it easier to follow lines of text without having to scroll horizontally. On the other hand, when writing content, a narrower layout is preferred; it helps you to focus on you’re making content.
This article will show how to set the width of the WordPress block editor/Gutenberg on the back-end. This means the changes will only impact your back-end editor interface, not the website’s appearance (front-end).
How to Set WordPress Gutenberg’s Width
Setting the Gutenberg’s width is very easy; you have two options to do that, as below:
- Using the built-in theme setting
- Add the code snippet to the functions.php File
Method 1: Using the Built-in Theme Setting
First, we would like to inform you that not every WordPress theme has a feature to set the width of the back-end editor interface and the website’s appearance (front-end). Some WordPress themes, such as Divi, Kadence, GeneratePress, OceanWP, etc., offer the feature to set the width.
Go to the Theme Customizer and then find the width setting. If you’re using a block theme, click here to learn how to enable a theme customizer on your WordPress.
Note: Until this article was published, only Divi had a feature to set width that only impacted the back-end editor interface.
Method 2: Add the Code Snippet to the functions.php File
As we mentioned earlier, not every WordPress theme has a feature to set Gutenberg’s width, and not every theme has a feature to set width that only impacts the back-end editor interface, so this method is more recommended than the previous one.; no matter the WordPress theme you use now, you can still set Gutenberg’s width only by adding the simple PHP snippet.
On your WordPress dashboard, go to Appearance -> Theme File Editor. You can find Theme File Editor under the Tools menu if you’re using a block theme.
Once enter the Theme File Editor page, select the functions.php file. Afterward, paste the PHP snippet below at the end of the functions file content. Next, update the theme file by clicking the Update File button.
function wpb_gutenberg_editor_styles() {
echo '
<style>
/* Main column width */
.wp-block { max-width: 720px; }
/* Width of "wide" blocks */
.wp-block[data-align="wide"] { max-width: 1080px; }
/* Width of "full-width" blocks */
.wp-block[data-align="full"] { max-width: none; }
</style>
';
}
add_action( 'admin_head', 'wpb_gutenberg_editor_styles' );
Note: If you are afraid of breaking your site after adding the new function to the functions.php file, you can create a child theme or custom plugin. Read here to learn more.
In this example, we set Gutenberg’s width at 720px; you can replace “720px” with the desired width for the Gutenberg interface.
Once you’ve added the code to your functions.php file, the editor width will be set to the specified value.
The Bottom Line
Many WordPress themes may have a fixed width; it means the site’s width (back-end and front-end) is set and can’t be changed. This article shows how easily you can set Gutenberg’s width using two methods. The first method will suit you if the WordPress theme you use now is more flexible and allow you to adjust the width through the theme setting. However, the second method is superior because it can work on every WordPress theme you use.
