Unify how editor alignments are applied across blocks (#21822)

Co-authored-by: Ella van Durpe <ella@vandurpe.com>
WordPress · Apr 24, 2020 · c87c9b0 · c87c9b0
1 parent 5c43b55
commit c87c9b0
Show file tree

Hide file tree

Showing 23 changed files with 299 additions and 357 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -46,8 +46,8 @@ $z-layers: (
 	".components-drop-zone": 40,
 	".components-drop-zone__content": 50,
 
-	// The block mover for floats should overlap the controls of adjacent blocks.
-	".block-editor-block-list__block {core/image aligned left or right}": 21,
+	// The floated blocks should be above the other blocks to allow selection.
+	"{core/image aligned left or right} .wp-block": 21,
 
 	// Small screen inner blocks overlay must be displayed above drop zone,
 	// settings menu, and movers.

diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js
@@ -69,7 +69,7 @@ const BlockComponent = forwardRef(
 			'core/block-editor'
 		);
 		const fallbackRef = useRef();
-
+		const isAligned = wrapperProps && !! wrapperProps[ 'data-align' ];
 		wrapper = wrapper || fallbackRef;
 
 		// Provide the selected node, or the first and last nodes of a multi-
@@ -196,19 +196,20 @@ const BlockComponent = forwardRef(
 		const blockElementId = `block-${ clientId }${ htmlSuffix }`;
 		const Animated = animated[ tagName ];
 
-		return (
+		const blockWrapper = (
 			<Animated
 				// Overrideable props.
 				aria-label={ blockLabel }
 				role="group"
-				{ ...wrapperProps }
+				{ ...omit( wrapperProps, [ 'data-align' ] ) }
 				{ ...props }
 				id={ blockElementId }
 				ref={ wrapper }
 				className={ classnames(
 					className,
 					props.className,
-					wrapperProps && wrapperProps.className
+					wrapperProps && wrapperProps.className,
+					! isAligned && 'wp-block'
 				) }
 				data-block={ clientId }
 				data-type={ name }
@@ -227,6 +228,22 @@ const BlockComponent = forwardRef(
 				{ children }
 			</Animated>
 		);
+
+		// For aligned blocks, provide a wrapper element so the block can be
+		// positioned relative to the block column. This is enabled with the
+		// .is-block-content className.
+		if ( isAligned ) {
+			const alignmentWrapperProps = {
+				'data-align': wrapperProps[ 'data-align' ],
+			};
+			return (
+				<div className="wp-block" { ...alignmentWrapperProps }>
+					{ blockWrapper }
+				</div>
+			);
+		}
+
+		return blockWrapper;
 	}
 );
 

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -107,7 +107,7 @@ function BlockListBlock( {
 	const wrapperClassName = classnames(
 		generatedClassName,
 		customClassName,
-		'wp-block block-editor-block-list__block',
+		'block-editor-block-list__block',
 		{
 			'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
 			'is-selected': isSelected,
@@ -144,13 +144,6 @@ function BlockListBlock( {
 		/>
 	);
 
-	// For aligned blocks, provide a wrapper element so the block can be
-	// positioned relative to the block column. This is enabled with the
-	// .is-block-content className.
-	if ( ! lightBlockWrapper && isAligned ) {
-		blockEdit = <div className="is-block-content">{ blockEdit }</div>;
-	}
-
 	if ( mode !== 'visual' ) {
 		blockEdit = <div style={ { display: 'none' } }>{ blockEdit }</div>;
 	}

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -1,8 +1,3 @@
-.block-editor-block-list__block {
-	margin-left: auto;
-	margin-right: auto;
-}
-
 .block-editor-block-list__layout .block-editor-block-list__block { // Needs specificity to override inherited styles.
 	// While block is being dragged, dim the slot dragged from, and hide some UI.
 	&.is-dragging {
@@ -143,7 +138,6 @@
 			right: $border-width;
 		}
 
-		.is-block-content, // Floats.
 		&::after { // Everything else.
 			// 2px outside.
 			box-shadow: 0 0 0 $border-width-focus $blue-medium-focus;
@@ -248,17 +242,28 @@
 		cursor: default;
 	}
 
-	.alignleft,
-	.alignright {
-		// Without z-index, won't be clickable as "above" adjacent content.
-		z-index: z-index(".block-editor-block-list__block {core/image aligned left or right}");
+	// Clear floats.
+	&[data-clear="true"] {
+		float: none;
+	}
+
+	// This essentially duplicates the mobile styles for the appender component.
+	// It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec
+	.block-editor-block-list__layout {
+		.block-editor-default-block-appender .block-editor-inserter {
+			left: auto;
+			right: $grid-unit-10;
+		}
 	}
+}
+
+.wp-block {
+	margin-left: auto;
+	margin-right: auto;
 
 	// Alignments.
 	&[data-align="left"],
 	&[data-align="right"] {
-		// Without z-index, won't be clickable as "above" adjacent content.
-		z-index: z-index(".block-editor-block-list__block {core/image aligned left or right}");
 		width: 100%;
 
 		// When images are floated, the block itself should collapse to zero height.
@@ -269,8 +274,14 @@
 		}
 	}
 
+	&[data-align="left"] > *,
+	&[data-align="right"] > * {
+		// Without z-index, won't be clickable as "above" adjacent content.
+		z-index: z-index("{core/image aligned left or right} .wp-block");
+	}
+
 	// Left.
-	&[data-align="left"] > .is-block-content {
+	&[data-align="left"] > * {
 		// This is in the editor only; the image should be floated on the frontend.
 		/*!rtl:begin:ignore*/
 		float: left;
@@ -279,7 +290,7 @@
 	}
 
 	// Right.
-	&[data-align="right"] > .is-block-content {
+	&[data-align="right"] > * {
 		// Right: This is in the editor only; the image should be floated on the frontend.
 		/*!rtl:begin:ignore*/
 		float: right;
@@ -289,25 +300,9 @@
 
 	// Wide and full-wide.
 	&[data-align="full"],
-	&[data-align="wide"],
-	&.alignfull,
-	&.alignwide {
+	&[data-align="wide"] {
 		clear: both;
 	}
-
-	// Clear floats.
-	&[data-clear="true"] {
-		float: none;
-	}
-
-	// This essentially duplicates the mobile styles for the appender component.
-	// It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec
-	.block-editor-block-list__layout {
-		.block-editor-default-block-appender .block-editor-inserter {
-			left: auto;
-			right: $grid-unit-10;
-		}
-	}
 }
 
 /**
@@ -624,12 +619,8 @@
 		padding-right: $block-side-ui-width;
 	}
 
-	// Full-wide. (to account for the padddings added above)
-	// The first two rules account for the alignment wrapper div for the image block.
-	> div:not(.block-editor-block-list__block) > .block-editor-block-list__block[data-align="full"],
-	> div:not(.block-editor-block-list__block) > .block-editor-block-list__block.alignfull,
-	> .block-editor-block-list__block[data-align="full"],
-	> .block-editor-block-list__block.alignfull {
+	// Full-wide. (to account for the paddings added above)
+	> .wp-block[data-align="full"] {
 		margin-left: -$block-padding;
 		margin-right: -$block-padding;
 

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
@@ -44,10 +44,7 @@
 		padding-left: 0;
 		padding-right: 0;
 
-		> div:not(.block-editor-block-list__block) > .block-editor-block-list__block[data-align="full"],
-		> div:not(.block-editor-block-list__block) > .block-editor-block-list__block.alignfull,
-		> .block-editor-block-list__block[data-align="full"],
-		> .block-editor-block-list__block.alignfull {
+		> .wp-block[data-align="full"] {
 			margin-left: 0;
 			margin-right: 0;
 		}

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
@@ -1,14 +1,12 @@
-.block-editor-block-list__block[data-type="core/button"] {
-	&[data-align="center"] {
-		text-align: center;
-		margin-left: auto;
-		margin-right: auto;
-	}
+.wp-block[data-align="center"] .wp-block-button {
+	text-align: center;
+	margin-left: auto;
+	margin-right: auto;
+}
 
-	&[data-align="right"] {
-		/*!rtl:ignore*/
-		text-align: right;
-	}
+.wp-block[data-align="right"] .wp-block-button {
+	/*!rtl:ignore*/
+	text-align: right;
 }
 
 .wp-block-button {

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
@@ -11,7 +11,6 @@ $blocks-button__height: 56px;
 	cursor: pointer;
 	display: inline-block;
 	font-size: $big-font-size;
-	margin: 0;
 	padding: 12px 24px;
 	text-align: center;
 	text-decoration: none;

diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
@@ -4,6 +4,7 @@
 import {
 	__experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider,
 	InnerBlocks,
+	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
 
 /**
@@ -19,17 +20,17 @@ const alignmentHooksSetting = {
 	isEmbedButton: true,
 };
 
-function ButtonsEdit( { className } ) {
+function ButtonsEdit() {
 	return (
-		<div className={ className }>
+		<Block.div>
 			<AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
 				<InnerBlocks
 					allowedBlocks={ ALLOWED_BLOCKS }
 					template={ BUTTONS_TEMPLATE }
 					__experimentalMoverDirection="horizontal"
 				/>
 			</AlignmentHookSettingsProvider>
-		</div>
+		</Block.div>
 	);
 }
 

diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
@@ -3,20 +3,18 @@
 	width: auto;
 }
 
-.wp-block-buttons {
-	&[data-align="center"] .block-editor-block-list__layout {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		justify-content: center;
-	}
+.wp-block[data-align="center"] > .wp-block-buttons {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	justify-content: center;
+}
 
-	&[data-align="right"] .block-editor-block-list__layout {
-		display: flex;
-		justify-content: flex-end;
-	}
+.wp-block[data-align="right"] > .wp-block-buttons {
+	display: flex;
+	justify-content: flex-end;
+}
 
-	.block-editor-block-list__layout > div:last-child {
-		display: inline-block;
-	}
+.wp-block-buttons .block-list-appender {
+	display: inline-block;
 }
diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js
@@ -26,6 +26,7 @@ export const settings = {
 	supports: {
 		align: true,
 		alignWide: false,
+		lightBlockWrapper: true,
 	},
 	transforms,
 	edit,

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
@@ -1,6 +1,5 @@
 .wp-block-cover-image,
 .wp-block-cover {
-
 	&.components-placeholder h2 {
 		color: inherit;
 	}
@@ -23,13 +22,14 @@
 	.wp-block-cover__placeholder-background-options {
 		width: 100%;
 	}
+}
 
-	// Apply max-width to floated items that have no intrinsic width.
-	[data-align="left"] &,
-	[data-align="right"] & {
-		max-width: $content-width / 2;
-		width: 100%;
-	}
+[data-align="left"] > .wp-block-cover,
+[data-align="right"] > .wp-block-cover,
+[data-align="left"] > .wp-block-cover-image,
+[data-align="right"] > .wp-block-cover-image {
+	max-width: $content-width / 2;
+	width: 100%;
 }
 
 .block-library-cover__reset-button {

diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss
@@ -1,6 +1,6 @@
 // Apply max-width to floated items that have no intrinsic width
-.block-editor-block-list__block[data-type*="core-embed"][data-align="left"] .is-block-content,
-.block-editor-block-list__block[data-type*="core-embed"][data-align="right"] .is-block-content,
+.wp-block[data-align="left"] > .wp-block-embed,
+.wp-block[data-align="right"] > .wp-block-embed,
 .wp-block-embed.alignleft,
 .wp-block-embed.alignright {
 	// Instagram widgets have a min-width of 326px, so go a bit beyond that.

diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
@@ -48,7 +48,7 @@
 /**
  * Group: Full Width Alignment
  */
-.wp-block[data-type="core/group"][data-align="full"] {
+.wp-block[data-align="full"] .wp-block-group {
 
 	// First tier of InnerBlocks must act like the container of the standard canvas
 	> div > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks {