Styles: add Editor Styles support

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://github.com/raw/WordPress/gutenberg/master/packages/postcss-themes/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/postcss-url",
+		"slug": "packages-postcss-url",
+		"markdown_source": "https://github.com/raw/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';