Gutenberg: How can I define the width of the editor?

[davidperezgar]

Hello, Gutenberg tend to show how it will be in public.
Actually, we work with 1280px grid, and the editor Gutenberg has 610px width, so we should adapt Gutenberg as it will be in public.

How can we change the width of the editor? So, it will show very similar like public?

[weavertheme]

As part of the theme editor CSS, add:

@media screen and ( min-width: 768px ) {
    .edit-post-visual-editor .editor-post-title,
    .edit-post-visual-editor .editor-block-list__block {
    max-width:  1100px;
    }
}

where you use whatever value you need to match your theme width.
Probably don't need the @media, but I put all my display dependent rules in an @media for consistency.

[davidperezgar]

Nice @weavertheme ! thanks! that helped me!

[weavertheme]

Just figured out you also need one to make the editor's default alignwide width work properly when you extend the width. My opinion is that theme max-width + 200px works pretty well:

.edit-post-visual-editor .editor-block-list__block[data-align="wide"] {
    max-width: 1300px;
}

[raquelmsmith]

This is assuming that every template on a website has the same width. However, one of our templates doesn't show the sidebar, so the content width is wider.

From what I can tell, the editor doesn't add any classes to the body (or otherwise) for the post/page template that is selected. Or am I missing something? Any suggestions for what to do here?

[drdogbot7]

As of 11/20/18, the code below seems to do the trick, and it's a lot easier to remember. This increases the width of the regular content in the editor, without messing with the 'wide' and 'full' blocks.

.wp-block {
  max-width: YOUR-CHOSEN-WIDTH;
}

[manake]

I have the same question as @raquelmsmith

[kgroveshok]

Do I get this right then? The post editing sets the area to the size it would appear so it is easier to gauge the final view. That is nice and helpful. However, if I'm editing large amounts of text I don't want to be looking at it through a letter box on a large screen. Is there any switch to wide view irrespective of the finial view? Or am I missing something?

[kgroveshok]

OK never mind I will switch to the Classic Editor

[designsimply]

For the question about multiple editor widths, I posted an explanation of the current situation and a workaround code example at https://github.com/WordPress/gutenberg/issues/12874#issuecomment-452929053. Please have a look!

[rogerlos]

This seems to sort-of work. But it also seems a bit fragile (SASS shown):

/* From elsewhere in my stylesheets */
$editor_wide: 1300px; 

.wp-block {
  max-width: $editor_wide;
  &[data-align="full"] {
    max-width: none;
  }
  &[data-align="wide"] {
    max-width: calc( #{$editor_wide} + 200px );
  }
}

[rogerlos]

I wrote a script which watches the template selector, and adds a class to your chosen gutenberg wrapper. Here's a gist with the script, plus sample PHP code to add it and a very simple example of how to use it to target specific templates with CSS:

https://gist.github.com/rogerlos/9c156a580e2a3cfaf862b837cc01e015

[rahulkhosla]

@davidperezgar Here's an answer I found for custom editor widths (https://wpza.net/changing-the-width-of-the-gutenberg-editor/).

[IvanPr]

Simply use:
function custom_admin_css() {
echo '';
}
add_action('admin_head', 'custom_admin_css');

[Jeremy-Bolella]

I found this works even better then some of the other answers. Leaves a slight gutter to the left for the gutenberg block dragger buttons

.wp-block {
  max-width: 1200px;
}

.block-editor-writing-flow {
  padding-left: 3rem;
}