Gutenberg: How do I change the width of the editor in guttenberg?

[VinceGledhill]

If you have a question you have a few places that you can ask this:

• Support Forums: https://wordpress.org/support/plugin/gutenberg
• Handbook: https://wordpress.org/gutenberg/handbook
• https://chat.wordpress.org #core-editor

Please can someone point me to an answer. Surely this has been fixed by now? Everything I have searched through is a year out of date. Here is a picture of my screen. Mostly whitespace.

[swissspidy]

That‘s explained in the handbook: https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/

[designsimply]

@VinceGledhill there is currently not a way to change the width of the editor via the user interface itself, however, the editor width can be changed in the theme and that's what @swissspidy has linked to above.

[Kevinlearynet]

Specifically, it's explained here:

https://developer.wordpress.org/block-editor/developers/themes/theme-support/#changing-the-width-of-the-editor

/* 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;
}

[eabquina]

Is there a separate set of functions for the "Code Editor" width?

I understand this works for the "Visual Editor".

[stratboy]

add_action( 'enqueue_block_editor_assets', 'custom_gutenberg_editor_stylesheet' );
function custom_gutenberg_editor_stylesheet() {
  wp_enqueue_style( 'custom-gutenberg-stylesheet', [your css path] . '/gutenberg-styles.css', array(), wp_get_theme()->get( 'Version' ), 'all' );
}