Block: move align wrapper out of Block element (#23089)

* Block: move align wrapper out of Block element * Code formatting
WordPress · Jun 11, 2020 · 44f4054 · 44f4054
1 parent 2e639e4
commit 44f4054
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js
@@ -65,7 +65,6 @@ 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-
@@ -191,7 +190,7 @@ const BlockComponent = forwardRef(
 			mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
 		const blockElementId = `block-${ clientId }${ htmlSuffix }`;
 
-		const blockWrapper = (
+		return (
 			<TagName
 				// Overrideable props.
 				aria-label={ blockLabel }
@@ -203,8 +202,7 @@ const BlockComponent = forwardRef(
 				className={ classnames(
 					className,
 					props.className,
-					wrapperProps && wrapperProps.className,
-					! isAligned && 'wp-block'
+					wrapperProps && wrapperProps.className
 				) }
 				data-block={ clientId }
 				data-type={ name }
@@ -222,21 +220,6 @@ const BlockComponent = forwardRef(
 				{ children }
 			</TagName>
 		);
-
-		// For aligned blocks, provide a wrapper element so the block can be
-		// positioned relative to the block column.
-		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,6 +107,7 @@ function BlockListBlock( {
 			? getBlockDefaultClassName( name )
 			: null;
 	const customClassName = lightBlockWrapper ? attributes.className : null;
+	const isAligned = wrapperProps && !! wrapperProps[ 'data-align' ];
 
 	// The wp-block className is important for editor styles.
 	// Generate the wrapper class names handling the different states of the
@@ -116,6 +117,7 @@ function BlockListBlock( {
 		customClassName,
 		'block-editor-block-list__block',
 		{
+			'wp-block': ! isAligned,
 			'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
 			'is-selected': isSelected,
 			'is-highlighted': isHighlighted,
@@ -152,6 +154,19 @@ function BlockListBlock( {
 		/>
 	);
 
+	// For aligned blocks, provide a wrapper element so the block can be
+	// positioned relative to the block column.
+	if ( isAligned ) {
+		const alignmentWrapperProps = {
+			'data-align': wrapperProps[ 'data-align' ],
+		};
+		blockEdit = (
+			<div className="wp-block" { ...alignmentWrapperProps }>
+				{ blockEdit }
+			</div>
+		);
+	}
+
 	if ( mode !== 'visual' ) {
 		blockEdit = <div style={ { display: 'none' } }>{ blockEdit }</div>;
 	}