Update the editor styles wrapper to avoid specificity issues

docs/extensibility/theme-support.md

@@ -194,7 +194,7 @@ 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). 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.
+ - Since Gutenberg doesn't make use of iFrames, this is not possible. Instead Gutenberg wrap all the provided styles with `.editor-styles-wrapper` 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.
 
@@ -204,25 +204,6 @@ Enabling editor styles support is done using:
 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
-
-The first thing to do is to create a new stylesheet file in your theme directory. We'll assume the file is named `style-editor.css`.
-
-Next, load your newly-created editor stylesheet in your theme:
-
-```php
-/**
- * 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' );
-```
-
 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
@@ -238,7 +219,7 @@ You can style the editor like any other webpage. Here's how to change the backgr
 
 ```css
 /* Add this to your `style-editor.css` file */
-body.block-editor-page {
+body {
 	background-color: #d3ebf3;
 	color: #00005d;
 }
@@ -250,19 +231,17 @@ To change the main column width of the editor, add the following CSS to `style-e
 
 ```css
 /* Main column width */
-body.block-editor-page .editor-post-title__block,
-body.block-editor-page .editor-default-block-appender,
-body.block-editor-page .editor-block-list__block {
+.wp-block {
 	max-width: 720px;
 }
 
 /* Width of "wide" blocks */
-body.block-editor-page .editor-block-list__block[data-align="wide"] {
+.wp-block[data-align="wide"] {
 	max-width: 1080px;
 }
 
 /* Width of "full-wide" blocks */
-body.block-editor-page .editor-block-list__block[data-align="full"] {
+.wp-block[data-align="full"] {
 	max-width: none;
 }
 ```

packages/edit-post/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## 1.0.5 (Unreleased)
 
+### Polish
+
+- Add the editor styles support's wrapper className.
+
 ### Bug Fixes
 
 - Hide pinned plugins and block traversal tool from header on mobile.

packages/edit-post/src/components/visual-editor/index.js

@@ -22,7 +22,7 @@ import PluginBlockSettingsMenuGroup from '../block-settings-menu/plugin-block-se
 
 function VisualEditor() {
 	return (
-		<BlockSelectionClearer className="edit-post-visual-editor">
+		<BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper">
 			<EditorGlobalKeyboardShortcuts />
 			<CopyHandler />
 			<MultiSelectScrollIntoView />

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

@@ -11,7 +11,6 @@
 	// Collapse to minimum height of 50px, to fully occupy editor bottom pad.
 	height: 50px;
 	width: 100%;
-	max-width: $content-width;
 	// Offset for: Visual editor padding, block (default appender) margin.
 	margin: #{ -1 * $block-spacing } auto -50px;
 }
@@ -20,7 +19,6 @@
 .edit-post-visual-editor .editor-block-list__block {
 	margin-left: auto;
 	margin-right: auto;
-	max-width: $content-width;
 
 	@include break-small() {
 		// Compensate for side UI width.
@@ -53,14 +51,6 @@
 			}
 		}
 	}
-
-	&[data-align="wide"] {
-		max-width: 1100px;
-	}
-
-	&[data-align="full"] {
-		max-width: none;
-	}
 }
 
 // The base width of the title should match that of blocks even if it isn't a block
@@ -73,7 +63,6 @@
 .edit-post-visual-editor .editor-post-title__block {
 	margin-left: auto;
 	margin-right: auto;
-	max-width: $content-width;
 
 	// Space title similarly to other blocks.
 	// This uses negative margins so as to not affect the default block margins.
@@ -97,7 +86,6 @@
 .edit-post-visual-editor {
 	.editor-default-block-appender {
 		// Default to centered and content-width, like blocks
-		max-width: $content-width;
 		margin-left: auto;
 		margin-right: auto;
 		position: relative;

packages/edit-post/src/style.scss

@@ -288,3 +288,16 @@ body.block-editor-page {
 		}
 	}
 }
+
+// These are default editor styles in case the theme don't provide them
+.wp-block {
+	max-width: $content-width;
+
+	&[data-align="wide"] {
+		max-width: 1100px;
+	}
+
+	&[data-align="full"] {
+		max-width: none;
+	}
+}

packages/editor/CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Polish
 
 - Add animated logo to preview interstitial screen.
+- Tweak the editor styles support.
 
 ## 5.0.1 (2018-10-22)
 

packages/editor/src/components/block-list/block.js

@@ -409,8 +409,9 @@ export class BlockListBlock extends Component {
 		const shouldShowInsertionPoint = ( isPartOfMultiSelection && isFirst ) || ! isPartOfMultiSelection;
 		const canShowInBetweenInserter = ! isEmptyDefaultBlock && ! isPreviousBlockADefaultEmptyBlock;
 
+		// The wp-block className is important for editor styles.
 		// Generate the wrapper class names handling the different states of the block.
-		const wrapperClassName = classnames( 'editor-block-list__block', {
+		const wrapperClassName = classnames( 'wp-block editor-block-list__block', {
 			'has-warning': ! isValid || !! error || isUnregisteredBlock,
 			'is-selected': shouldAppearSelected,
 			'is-multi-selected': isPartOfMultiSelection,

packages/editor/src/components/block-preview/index.js

@@ -34,7 +34,7 @@ function BlockPreview( props ) {
 export function BlockPreviewContent( { name, attributes } ) {
 	const block = createBlock( name, attributes );
 	return (
-		<Disabled className="editor-block-preview__content" aria-hidden>
+		<Disabled className="editor-block-preview__content editor-styles-wrapper" aria-hidden>
 			<BlockEdit
 				name={ name }
 				focus={ false }

packages/editor/src/components/default-block-appender/index.js

@@ -47,8 +47,10 @@ export function DefaultBlockAppender( {
 	//
 	// See: https://gist.github.com/cvrebert/68659d0333a578d75372
 
+	// The wp-block className is important for editor styles.
+
 	return (
-		<div data-root-client-id={ rootClientId || '' } className="editor-default-block-appender">
+		<div data-root-client-id={ rootClientId || '' } className="wp-block editor-default-block-appender">
 			<BlockDropZone rootClientId={ rootClientId } layout={ layout } />
 			<input
 				role="button"

packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -2,7 +2,7 @@
 
 exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
 <div
-  className="editor-default-block-appender"
+  className="wp-block editor-default-block-appender"
   data-root-client-id=""
 >
   <WithDispatch(WithSelect(BlockDropZone)) />
@@ -31,7 +31,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
 
 exports[`DefaultBlockAppender should match snapshot 1`] = `
 <div
-  className="editor-default-block-appender"
+  className="wp-block editor-default-block-appender"
   data-root-client-id=""
 >
   <WithDispatch(WithSelect(BlockDropZone)) />
@@ -53,7 +53,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
 
 exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
 <div
-  className="editor-default-block-appender"
+  className="wp-block editor-default-block-appender"
   data-root-client-id=""
 >
   <WithDispatch(WithSelect(BlockDropZone)) />

packages/editor/src/components/post-title/index.js

@@ -98,7 +98,9 @@ class PostTitle extends Component {
 			title,
 		} = this.props;
 		const { isSelected } = this.state;
-		const className = classnames( 'editor-post-title__block', {
+
+		// The wp-block className is important for editor styles.
+		const className = classnames( 'wp-block editor-post-title__block', {
 			'is-selected': isSelected,
 			'is-focus-mode': isFocusMode,
 			'has-fixed-toolbar': hasFixedToolbar,

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

@@ -14,7 +14,7 @@ import { withDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { traverse, wrap, urlRewrite, editorWidth } from '../../editor-styles';
+import { traverse, wrap, urlRewrite } from '../../editor-styles';
 
 class EditorProvider extends Component {
 	constructor( props ) {
@@ -35,8 +35,7 @@ class EditorProvider extends Component {
 
 		map( this.props.settings.styles, ( { css, baseURL } ) => {
 			const transforms = [
-				editorWidth,
-				wrap( '.editor-block-list__block', [ '.wp-block' ] ),
+				wrap( '.editor-styles-wrapper' ),
 			];
 			if ( baseURL ) {
 				transforms.push( urlRewrite( baseURL ) );

packages/editor/src/components/writing-flow/index.js

@@ -334,7 +334,7 @@ class WritingFlow extends Component {
 					aria-hidden
 					tabIndex={ -1 }
 					onClick={ this.focusLastTextField }
-					className="editor-writing-flow__click-redirect"
+					className="wp-block editor-writing-flow__click-redirect"
 				/>
 			</div>
 		);

packages/editor/src/editor-styles.scss

@@ -1,14 +1,3 @@
-.wp-block {
-	width: $content-width;
-}
-
-body {
-	font-family: $editor-font;
-	line-height: $editor-line-height;
-	color: $dark-gray-900;
-	font-size: $editor-font-size;
-}
-
 p {
 	font-size: $editor-font-size;
 }

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

@@ -1,4 +1,3 @@
 export { default as traverse } from './traverse';
 export { default as urlRewrite } from './transforms/url-rewrite';
 export { default as wrap } from './transforms/wrap';
-export { default as editorWidth } from './transforms/editor-width';

test/e2e/specs/block-deletion.test.js

@@ -80,7 +80,7 @@ describe( 'block deletion -', () => {
 			await page.click( '.editor-post-title' );
 
 			// Click on the third (image) block so that its wrapper is selected and backspace to delete it.
-			await page.click( '.editor-block-list__block:nth-child(3)' );
+			await page.click( '.editor-block-list__block:nth-child(3) .components-placeholder__label' );
 			await page.keyboard.press( 'Backspace' );
 
 			expect( await getEditedPostContent() ).toMatchSnapshot();