Update theme extensibility documentation to include editor widths (#6531

)

* Update theme extensibility documentation to include editor widths

This updates the extensibility document, and adds a section around loading editor styles. It gives examples for how to change the colors of the editor (which will look good once #6406 gets merged), as well as how to change the width of the editor. The last part fixes #1483.

CC: @maddisondesigns

* Simplify syntax a bit.

* Trim whitespace

docs/extensibility/theme-support.md

@@ -91,3 +91,63 @@ add_theme_support( 'disable-custom-colors' );
 ```
 
 This flag will make sure users are only able to choose colors from the `editor-color-palette` the theme provided or from the editor default colors if the theme did not provide one.
+
+## Editor styles
+
+A theme can provide a stylesheet to the editor itself, to change colors, fonts, and any aspect of the editor.
+
+### Add the stylesheet
+
+First thing you need to do is to enqueue the new editor style. Like this:
+
+```
+/**
+ * Enqueue block editor style
+ */
+function mytheme_block_editor_styles() {
+	 wp_enqueue_style( 'mytheme-block-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' );
+}
+add_action( 'enqueue_block_editor_assets', 'mytheme_block_editor_styles' );
+```
+
+Now create a new stylesheet, `style-editor.css` and save it in your theme directory.
+
+### Basic colors
+
+You can style the editor like any other webpage. Here's an example for how to change the background color and the font color. Paste this in your `style-editor.css `file:
+
+```
+body.gutenberg-editor-page {
+	background-color: #d3ebf3;
+	color: #00005d;
+}
+```
+
+This will make your editor use blue shades.
+
+### Changing the width of the editor
+
+If you'd like to change the main column width of the editor, you can add the following to your `style-editor.css` file:
+
+```
+/* Main column width */
+body.gutenberg-editor-page .editor-post-title,
+body.gutenberg-editor-page .editor-default-block-appender,
+body.gutenberg-editor-page .editor-block-list__block {
+	max-width: 720px;
+}
+
+/* Width of "wide" blocks */
+body.gutenberg-editor-page .editor-block-list__block[data-align="wide"] {
+	max-width: 1080px;
+}
+
+/* Width of "full-wide" blocks */
+body.gutenberg-editor-page .editor-block-list__block[data-align="full"] {
+	max-width: none;
+}
+```
+
+You can use those editor widths to match those in your theme. You can use any CSS width unit, including `%` or `px`.
+
+See also, [Applying Styles with Stylesheets](https://wordpress.org/gutenberg/handbook/blocks/applying-styles-with-stylesheets/).