Changing the width of the editor

How do you control the width of the block editor?

  1. Define an editor styles file.
  2. Edit the CSS to set the max-width for the different block widths you allow.

We’ll show the CSS first.

Edit the CSS

Here we set the width of the block editor to the same values as defined for the front-end.

/* Main column width */
.wp-block {
    max-width: 1040px;
}

/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
    max-width: 1340px;
}

/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
    max-width: none;
}

When using Gutenberg some magic happens to convert the CSS you write into the CSS the block editor needs. But first, the editor needs to be told to use editor styles and where to find the file.

Define an editor styles file

You need a couple of lines of code in your theme’s `functions.php` to enable editor styles and to name the file to load.

// Add support for editor styles
add_theme_support( 'editor-styles' );
// Name the CSS file that contains the styles.
add_editor_style( 'style-editor.css' );

See the Block Editor Handbook > Theme Support > Changing the width of the editor.

, ,
,