Skip to content

Commit

Permalink
Polish editor style documentation (#12381)
Browse files Browse the repository at this point in the history
* Polish editor style documentation

This includes a section on how to actually enqueue your stylesheet, because this has changed a number of times over the year and hasn't been updated.

* Address feedback.
  • Loading branch information
jasmussen authored Nov 28, 2018
1 parent 3b5ab7b commit e4fd51c
Showing 1 changed file with 15 additions and 1 deletion.
16 changes: 15 additions & 1 deletion docs/designers-developers/developers/themes/theme-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,9 @@ This flag will make sure users are only able to choose colors from the `editor-c

Gutenberg supports the theme's [editor styles](https://codex.wordpress.org/Editor_Style), however it works a little differently than in the classic editor.

In the classic editor, the editor stylesheet is loaded directly into the iframe of the WYSIWYG editor, with no changes. Gutenberg, however, doesn't use iframes. To make sure your styles are applied only to the content of the editor, we automatically transform your editor styles by selectively rewriting or adjusting certain CSS selectors.
In the classic editor, the editor stylesheet is loaded directly into the iframe of the WYSIWYG editor, with no changes. Gutenberg, however, doesn't use iframes. To make sure your styles are applied only to the content of the editor, we automatically transform your editor styles by selectively rewriting or adjusting certain CSS selectors. This also allows Gutenberg to leverage your editor style in block variation previews.

For example, if you write `body { ... }` in your editor style, this is rewritten to `.editor-styles-wrapper { ... }`. This also means that you should _not_ target any of the editor class names directly.

Because it works a little differently, you need to opt-in to this by adding an extra snippet to your theme, in addition to the add_editor_style function:

Expand All @@ -212,6 +214,8 @@ add_theme_support('editor-styles');

You shouldn't need to change your editor styles too much; most themes can add the snippet above and get similar results in the classic editor and inside Gutenberg.

### Dark backgrounds

If your editor style relies on a dark background, you can add the following to adjust the color of the UI to work on dark backgrounds:

```php
Expand All @@ -221,6 +225,16 @@ add_theme_support( 'dark-editor-style' );

Note you don't need to add `add_theme_support( 'editor-styles' );` twice, but that rule does need to be present for the `dark-editor-style` rule to work.

### Enqueuing the editor style

To make sure your editor style is loaded and parsed correctly, enqueue it using the following method:

This comment has been minimized.

Copy link
@joyously

joyously Apr 10, 2019

This is actually incorrect.


```php
add_editor_style( 'style-editor.css' );

This comment has been minimized.

Copy link
@joyously

joyously Apr 10, 2019

This function is for loading styles into the old editor, not the new one!

This comment has been minimized.

Copy link
@mkaz

mkaz Apr 10, 2019

Member

It is used for both, which might be a different problem.

```

It is enough to paste that in your `functions.php` file, for the style to be loaded and parsed.

This comment has been minimized.

Copy link
@joyously

joyously Apr 10, 2019

This is incorrect.


### Basic colors

You can style the editor like any other webpage. Here's how to change the background color and the font color to blue:
Expand Down

0 comments on commit e4fd51c

Please sign in to comment.