Set the Gutenberg editor width in the WP Admin Dashboard to full width

WordPress enables the Gutenberg editor by default in newer versions. However, when writing posts in the backend, the Gutenberg editor's width is fixed and quite narrow, which is not very convenient. Therefore, we can use CSS code to make the Gutenberg editor display in full width (adjusting according to the browser window size).

By default, if the Gutenberg editor width is not set, the editing window in the backend when writing posts is only as narrow as shown in the image below, which is very obstructive.

After modifying it with CSS code and setting it to adapt its width based on the browser window size, the view becomes much more open. As shown in the image below:

Implementation Method

We can directly insert the following code intoTheme's functions file:

/**
 * 设置古腾堡编辑器显示宽度为全宽
 */
add_action('admin_head', 'editor_full_width_gutenberg');

function editor_full_width_gutenberg() {
  echo '';
}

If you don't know how to add it, you can use:

• Safe method to add code to the functions.php file: Code Snippets

You can also install the pluginEditor Full Width Gutenbergto achieve this (the code above is copied from this plugin).