Change the WordPress Gutenberg Editor’s  Width

To change the width of the WordPress Gutenberg editor you need to load custom CSS rules for it. Here’s an overview of how to quickly change the width, including loading the stylesheet and adding the specific rules that will increase the width of the Gutenberg editors content area.

Load Custom CSS for Gutenberg Editor

Inside of your theme’s functions.php add the following function and hook. This will load a CSS file called editor.css in the root of your theme directory. You can load the file from another location if you prefer, just adjust the location where you see editor.css mentioned accordingly.

/**
 * Gutenberg Editor Styles
 */
function kl_block_editor_styles() {
    $version = filemtime( get_stylesheet_directory() . '/editor.css' );

    wp_enqueue_style(
        'editor-css',
        get_stylesheet_directory_uri() . '/editor.css',
        [],
        $version
    );
}
add_action( 'enqueue_block_editor_assets', 'kl_block_editor_styles' );

CSS Rules to Change Width

Once you’ve added the enqueue rules for block editor assets, open up your editor.css file add the following rules to change the content width for the Gutenberg editor.

/* Main column width */
.wp-block {
    max-width: 100%;
}

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

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

This is outlined in the Block Editor Handbook under Theme Support, and is the official recommended way to change the width of the Gutenberg editor.