diff --git a/docs/extensibility/theme-support.md b/docs/extensibility/theme-support.md index 07d8423c9569f4..97aeb74932b600 100644 --- a/docs/extensibility/theme-support.md +++ b/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/). \ No newline at end of file