Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update theme extensibility documentation to include editor widths #6531

Merged
merged 3 commits into from
May 2, 2018
Merged

Update theme extensibility documentation to include editor widths #6531

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8dec983
Update theme extensibility documentation to include editor widths
May 2, 2018
c899c2a
Simplify syntax a bit.
May 2, 2018
7f60a5b
Trim whitespace
May 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions docs/extensibility/theme-support.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comma usage here confused me, I think the first one is a semicolon really. How about:

A theme can provide a stylesheet that will style the editor. You can use this to change colors, fonts, and any other visual aspect of the editor.


### Add the stylesheet

First thing you need to do is to enqueue the new editor style. Like this:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is missing an article and the next sentence is a fragment. It might read better as:

The first thing to do is enqueue the new editor style:

```
/**
 * 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' );
```


```
/**
* 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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Now" is a strange word here, this might read better without:

Create a new stylesheet, `style-editor.css`, 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:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick but the style-editor.css section has the space inside the backtick when it should come after.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also the second sentence could be more direct:

 Here's how to change the background color and the font color to blue:


```
body.gutenberg-editor-page {
background-color: #d3ebf3;
color: #00005d;
}
```

This will make your editor use blue shades.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be removed as it adds nothing for anyone who knows CSS already, especially if the above changes were made that reference the colour first.


### 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:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"If you'd like " just clutters up the sentence here so it could be removed; trimming this down to:

To change the main column width of the editor, add the following CSS to `style-editor.css`:


```
/* 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/).