Skip to content

Commit

Permalink
Update theme extensibility documentation to include editor widths
Browse files Browse the repository at this point in the history
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
  • Loading branch information
Joen Asmussen committed May 2, 2018
1 parent f3f59d2 commit 8dec983
Showing 1 changed file with 65 additions and 0 deletions.
65 changes: 65 additions & 0 deletions docs/extensibility/theme-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,3 +91,68 @@ 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 .edit-post-visual-editor .editor-post-title,
body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block {
max-width: 720px;
}
/* Width of "wide" blocks */
body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block[data-align="wide"] {
max-width: 1080px;
}
/* Width of "full-wide" blocks */
body.gutenberg-editor-page .edit-post-visual-editor .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/).

0 comments on commit 8dec983

Please sign in to comment.