Rework wide alignments editor styles

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/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/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/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-styles-wrapper', [ '.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';