Styles: add Editor Styles support (#9008)

* Styles: auto-wrap theme provided styles to avoid specifity in the theme stylesheets

* Change the post-css plugin used (use a smarter one)

* Add support for the editor styles

* Refactor default Gutenberg editor styles to apply on the editor-block-list__block className

This make those styles easily extendable in editor styles

* Fix linting errors

* Fix e2e tests

* Use CSS AST instead of PostCSS

* Fork css dependency to make it browser friendly

* Adding documentation about how the editor styles work

* Make the editor styles support opt-in

* Use the editor styles to apply the default Gutenberg styles

* Fix typo

* Exclude built files from unit tests

* Inherit color on headings placed in wp-block-heading.

Allows using `.wp-block-heading { color: blue; }`.

* Add the editor width smart transform

* Use `.wp-block` instead of `html` to define the width

* Fix unit tests

docs/extensibility/theme-support.md

@@ -177,7 +177,20 @@ This flag will make sure users are only able to choose colors from the `editor-c
 
 ## Editor styles
 
-A theme can provide a stylesheet that will change the editor's appearance. You can use this to change colors, fonts, and any other visual aspect of the editor.
+Gutenberg supports the theme's [editor styles](https://codex.wordpress.org/Editor_Style). This support is opt-in because these styles are applied differently from the classic editor.
+
+ - In the classic editor, the stylesheet is applied as is in the iframe of the post content editor.
+ - Since Gutenberg doesn't make use of iFrames, this is not possible. Instead Gutenberg wrap all the provided styles with `.editor-block-list__block` to avoid leaking styles outside the editor's content area.
+
+This technique should allow the editor styles to work properly in both editors in most cases.
+
+Enabling editor styles support is done using:
+
+```php
+add_theme_support( 'editor-styles' );
+```
+
+Alternatively, a theme can provide a stylesheet that will change the editor's appearance entirely. You can use this to change colors, fonts, and any other visual aspect of the editor.
 
 ### Add the stylesheet
 

docs/manifest.json

@@ -443,6 +443,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/postcss-themes/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/postcss-url",
+		"slug": "packages-postcss-url",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/postcss-url/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/redux-routine",
 		"slug": "packages-redux-routine",

docs/reference/faq.md

@@ -151,7 +151,7 @@ Other features, like the new _wide_ and _full-wide_ alignment options, will simp
 
 ## How will editor styles work?
 
-Themes can provide editor styles for blocks by using the following hook:
+Regular editor styles are opt-in and will work as is in most cases. Themes can also load extra stylesheets by using the following hook:
 
 ```php
 function gutenbergtheme_editor_styles() {
@@ -160,6 +160,8 @@ function gutenbergtheme_editor_styles() {
 add_action( 'enqueue_block_editor_assets', 'gutenbergtheme_editor_styles' );
 ```
 
+*Details:* [Editor Styles](../../docs/extensibility/theme-support.md#editor-styles)
+
 ## Should I be concerned that Gutenberg will make my plugin obsolete?
 
 The goal of Gutenberg is not to put anyone out of business. It's to evolve WordPress so there's more business to be had in the future, for everyone.

edit-post/components/visual-editor/style.scss

@@ -2,32 +2,6 @@
 	position: relative;
 	padding: 50px 0;
 
-	&,
-	& p {
-		font-family: $editor-font;
-		font-size: $editor-font-size;
-		line-height: $editor-line-height;
-	}
-
-	&,
-	& p {
-		color: $dark-gray-700;
-	}
-
-	& ul,
-	& ol {
-		margin: 0;
-		padding: 0;
-	}
-
-	& ul:not(.wp-block-gallery) {
-		list-style-type: disc;
-	}
-
-	& ol {
-		list-style-type: decimal;
-	}
-
 	& .components-button {
 		font-family: $default-font;
 	}

lib/client-assets.php

@@ -1400,6 +1400,31 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		$max_upload_size = 0;
 	}
 
+	// Editor Styles.
+	global $editor_styles;
+	$styles = array(
+		array(
+			'css' => file_get_contents(
+				gutenberg_dir_path() . 'build/editor/editor-styles.css'
+			),
+		),
+	);
+	if ( $editor_styles && current_theme_supports( 'editor-styles' ) ) {
+		foreach ( $editor_styles as $style ) {
+			if ( filter_var( $style, FILTER_VALIDATE_URL ) ) {
+				$styles[] = array(
+					'css' => file_get_contents( $style ),
+				);
+			} else {
+				$file     = get_theme_file_path( $style );
+				$styles[] = array(
+					'css'     => file_get_contents( get_theme_file_path( $style ) ),
+					'baseURL' => get_theme_file_uri( $style ),
+				);
+			}
+		}
+	}
+
 	$editor_settings = array(
 		'alignWide'           => $align_wide || ! empty( $gutenberg_theme_support[0]['wide-images'] ), // Backcompat. Use `align-wide` outside of `gutenberg` array.
 		'availableTemplates'  => $available_templates,
@@ -1412,6 +1437,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		'autosaveInterval'    => 10,
 		'maxUploadFileSize'   => $max_upload_size,
 		'allowedMimeTypes'    => get_allowed_mime_types(),
+		'styles'              => $styles,
 	);
 
 	$post_autosave = get_autosave_newer_than_post_save( $post );

packages/block-library/src/heading/editor.scss

@@ -5,6 +5,7 @@
 	h4,
 	h5,
 	h6 {
+		color: inherit;
 		margin: 0;
 	}
 

packages/editor/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## 3.0.0 (Unreleased)
 
+### New Features
+
+- Add editor styles support.
+
 ### Breaking Changes
 
 - The `wideAlign` block supports hook has been removed. Use `alignWide` instead.

packages/editor/package.json

@@ -46,6 +46,7 @@
 		"classnames": "^2.2.5",
 		"dom-scroll-into-view": "^1.2.1",
 		"element-closest": "^2.0.2",
+		"inherits": "^2.0.3",
 		"lodash": "^4.17.10",
 		"memize": "^1.0.5",
 		"react-autosize-textarea": "^3.0.2",
@@ -55,6 +56,7 @@
 		"rememo": "^3.0.0",
 		"tinycolor2": "^1.4.1",
 		"tinymce": "^4.7.2",
+		"traverse": "^0.6.6",
 		"uuid": "^3.1.0"
 	},
 	"devDependencies": {

packages/editor/src/components/provider/index.js

@@ -1,18 +1,20 @@
 /**
  * External dependencies
  */
-import { flow } from 'lodash';
+import { flow, map } from 'lodash';
 
 /**
  * WordPress Dependencies
  */
+import { compose } from '@wordpress/compose';
 import { createElement, Component } from '@wordpress/element';
 import { DropZoneProvider, SlotFillProvider } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { traverse, wrap, urlRewrite, editorWidth } from '../../editor-styles';
 import RichTextProvider from '../rich-text/provider';
 
 class EditorProvider extends Component {
@@ -26,6 +28,28 @@ class EditorProvider extends Component {
 		}
 	}
 
+	componentDidMount() {
+		if ( ! this.props.settings.styles ) {
+			return;
+		}
+
+		map( this.props.settings.styles, ( { css, baseURL } ) => {
+			const transforms = [
+				editorWidth,
+				wrap( '.editor-block-list__block', [ '.wp-block' ] ),
+			];
+			if ( baseURL ) {
+				transforms.push( urlRewrite( baseURL ) );
+			}
+			const updatedCSS = traverse( css, compose( transforms ) );
+			if ( updatedCSS ) {
+				const node = document.createElement( 'style' );
+				node.innerHTML = updatedCSS;
+				document.body.appendChild( node );
+			}
+		} );
+	}
+
 	componentDidUpdate( prevProps ) {
 		if ( this.props.settings !== prevProps.settings ) {
 			this.props.updateEditorSettings( this.props.settings );

packages/editor/src/editor-styles.scss

@@ -0,0 +1,29 @@
+.wp-block {
+	width: 610px;
+}
+
+body {
+	font-family: $editor-font;
+	line-height: $editor-line-height;
+	color: $dark-gray-700;
+	font-size: $editor-font-size;
+}
+
+p {
+	font-size: $editor-font-size;
+}
+
+
+ul,
+ol {
+	margin: 0;
+	padding: 0;
+}
+
+ul:not(.wp-block-gallery) {
+	list-style-type: disc;
+}
+
+ol {
+	list-style-type: decimal;
+}

packages/editor/src/editor-styles/ast/index.js

@@ -0,0 +1,5 @@
+// Adapted from https://github.com/reworkcss/css
+// because we needed to remove source map support.
+
+export { default as parse } from './parse';
+export { default as stringify } from './stringify';