Update the editor styles wrapper to avoid specificity issues (#10956)

* Update the editor styles wrapper to avoid specificity issues

* Rework wide alignments editor styles

docs/extensibility/theme-support.md

@@ -191,37 +191,17 @@ This flag will make sure users are only able to choose colors from the `editor-c
 
 ## Editor styles
 
-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.
+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 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.
+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 technique should allow the editor styles to work properly in both editors in most cases.
-
-Enabling editor styles support is done using:
+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:
 
 ```php
-add_theme_support( 'editor-styles' );
+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' );
-```
+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.
 
 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:
 
@@ -238,7 +218,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 +230,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

@@ -9,6 +9,10 @@
 - `getMetaBoxes` selector (`core/edit-post`) has been removed. Use `getActiveMetaBoxLocations` selector (`core/edit-post`) instead.
 - `getMetaBox` selector (`core/edit-post`) has been removed. Use `isMetaBoxLocationActive` selector (`core/edit-post`) instead.
 
+### 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 doesn'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

@@ -15,6 +15,7 @@
 ### Polish
 
 - Add animated logo to preview interstitial screen.
+- Tweak the editor styles support.
 
 ### Bug Fixes
 

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();