Block: remove inner div wrapper (#19593)

WordPress · Jan 15, 2020 · 17e5c2d · 17e5c2d
1 parent 3ccc77f
commit 17e5c2d
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 92 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js
@@ -119,14 +119,15 @@ function BlockPopover( {
 			animate={ false }
 			position={ popoverPosition }
 			focusOnMount={ false }
-			anchorRef={ node.lastChild }
+			anchorRef={ node }
 			className="block-editor-block-list__block-popover"
 			__unstableSticky={ showEmptyBlockSideInserter ? false : popoverIsSticky }
 			__unstableSlotName="block-toolbar"
 			// Allow subpixel positioning for the block movement animation.
 			__unstableAllowVerticalSubpixelPosition={ moverDirection !== 'horizontal' && node }
 			__unstableAllowHorizontalSubpixelPosition={ moverDirection === 'horizontal' && node }
 			onBlur={ () => setIsToolbarForced( false ) }
+			shouldAnchorIncludePadding
 		>
 			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
 				<div

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -126,9 +126,6 @@ function BlockListBlock( {
 		}
 	}, [ isSelected, isFirstMultiSelected ] );
 
-	// Reference to the block edit node
-	const blockNodeRef = useRef();
-
 	// Handling the error state
 	const [ hasError, setErrorState ] = useState( false );
 	const onBlockError = () => setErrorState( true );
@@ -308,6 +305,7 @@ function BlockListBlock( {
 			id={ blockElementId }
 			ref={ wrapper }
 			className={ wrapperClassName }
+			data-block={ clientId }
 			data-type={ name }
 			// Only allow shortcuts when a blocks is selected and not locked.
 			onKeyDown={ isSelected && ! isLocked ? onKeyDown : undefined }
@@ -326,24 +324,22 @@ function BlockListBlock( {
 					animationStyle
 			}
 		>
-			<div ref={ blockNodeRef } data-block={ clientId }>
-				<BlockCrashBoundary onError={ onBlockError }>
-					{ isValid && blockEdit }
-					{ isValid && mode === 'html' && (
-						<BlockHtml clientId={ clientId } />
-					) }
-					{ ! isValid && [
-						<BlockInvalidWarning
-							key="invalid-warning"
-							clientId={ clientId }
-						/>,
-						<div key="invalid-preview">
-							{ getSaveElement( blockType, attributes ) }
-						</div>,
-					] }
-				</BlockCrashBoundary>
-				{ !! hasError && <BlockCrashWarning /> }
-			</div>
+			<BlockCrashBoundary onError={ onBlockError }>
+				{ isValid && blockEdit }
+				{ isValid && mode === 'html' && (
+					<BlockHtml clientId={ clientId } />
+				) }
+				{ ! isValid && [
+					<BlockInvalidWarning
+						key="invalid-warning"
+						clientId={ clientId }
+					/>,
+					<div key="invalid-preview">
+						{ getSaveElement( blockType, attributes ) }
+					</div>,
+				] }
+			</BlockCrashBoundary>
+			{ !! hasError && <BlockCrashWarning /> }
 		</animated.div>
 	);
 }

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -57,10 +57,6 @@
 	// Break long strings of text without spaces so they don't overflow the block.
 	overflow-wrap: break-word;
 
-	[data-block] {
-		position: relative;
-	}
-
 	/**
 	 * Notices
 	 */
@@ -169,17 +165,15 @@
 	// When selecting multiple blocks, we provide an additional selection indicator.
 	.block-editor-block-list__block.is-multi-selected {
 		// Show selection borders around every non-nested block's actual footprint.
-		> [data-block] {
-			box-shadow: 0 0 0 2px $blue-medium-focus;
-			border-radius: 1px;
+		box-shadow: 0 0 0 2px $blue-medium-focus;
+		border-radius: 1px;
 
-			// Windows High Contrast mode will show this outline.
-			outline: 2px solid transparent;
+		// Windows High Contrast mode will show this outline.
+		outline: 2px solid transparent;
 
-			// Show a lighter blue for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 2px $blue-medium-focus-dark;
-			}
+		// Show a lighter blue for dark themes.
+		.is-dark-theme & {
+			box-shadow: 0 0 0 2px $blue-medium-focus-dark;
 		}
 
 		// Provide exceptions for placeholders.
@@ -202,7 +196,7 @@
 	}
 
 	// Warnings
-	&.has-warning [data-block] {
+	&.has-warning {
 		// When a block has a warning, you shouldn't be able to manipulate the contents.
 		> * {
 			pointer-events: none;
@@ -289,10 +283,6 @@
 	&[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.
-		height: 0;
 
 		&::before {
 			content: none;
@@ -302,23 +292,19 @@
 	// Left.
 	&[data-align="left"] {
 		// This is in the editor only; the image should be floated on the frontend.
-		> [data-block] {
-			/*!rtl:begin:ignore*/
-			float: left;
-			margin-right: 2em;
-			/*!rtl:end:ignore*/
-		}
+		/*!rtl:begin:ignore*/
+		float: left;
+		margin-right: 2em;
+		/*!rtl:end:ignore*/
 	}
 
 	// Right.
 	&[data-align="right"] {
 		// Right: This is in the editor only; the image should be floated on the frontend.
-		> [data-block] {
-			/*!rtl:begin:ignore*/
-			float: right;
-			margin-left: 2em;
-			/*!rtl:end:ignore*/
-		}
+		/*!rtl:begin:ignore*/
+		float: right;
+		margin-left: 2em;
+		/*!rtl:end:ignore*/
 	}
 
 	// Wide and full-wide.

diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
@@ -39,10 +39,6 @@
 		padding: 0;
 	}
 
-	[data-block] {
-		margin: 0;
-	}
-
 	> div section {
 		height: auto;
 	}

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
@@ -1,10 +1,8 @@
 .block-editor-block-list__block[data-type="core/button"] {
 	&[data-align="center"] {
 		text-align: center;
-		div[data-block] {
-			margin-left: auto;
-			margin-right: auto;
-		}
+		margin-left: auto;
+		margin-right: auto;
 	}
 
 	&[data-align="right"] {
@@ -76,6 +74,6 @@
 }
 
 // Display "table" is used because the button container should only wrap the content and not takes the full width.
-div[data-type="core/button"] div[data-block] {
+div[data-type="core/button"] {
 	display: table;
 }
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
@@ -4,10 +4,6 @@
 }
 
 .wp-block-buttons {
-	div[data-type="core/button"] div[data-block] {
-		display: block;
-	}
-
 	&[data-align="center"] .block-editor-block-list__layout {
 		display: flex;
 		align-items: center;

diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
@@ -30,7 +30,6 @@
 		}
 		// Set full heights on Columns to enable vertical alignment preview
 		> [data-type="core/column"],
-		> [data-type="core/column"] > div[data-block],
 		> [data-type="core/column"] .block-core-columns {
 			display: flex;
 			flex-direction: column;
@@ -53,6 +52,10 @@
 			margin-left: -$block-padding;
 			margin-right: -$block-padding;
 
+			// Zero out margins.
+			margin-top: 0;
+			margin-bottom: 0;
+
 			// Prevent the columns from growing wider than their distributed sizes.
 			min-width: 0;
 
@@ -93,16 +96,10 @@
 				right: 0;
 			}
 
-			// Zero out margins.
-			> [data-block] {
-				margin-top: 0;
-				margin-bottom: 0;
-			}
-
 			// The Columns block is a flex-container, therefore it nullifies margin collapsing.
 			// Therefore, blocks inside this will appear to create a double margin.
 			// We compensate for this using negative margins.
-			> div > .block-core-columns > .block-editor-inner-blocks {
+			> .block-core-columns > .block-editor-inner-blocks {
 				margin-top: -$default-block-margin;
 				margin-bottom: -$default-block-margin;
 			}

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
@@ -53,7 +53,7 @@
 
 // Provide every block with a default base margin. This margin provides a consistent spacing
 // between blocks in the editor.
-.editor-styles-wrapper [data-block] {
+.editor-styles-wrapper .block-editor-block-list__block {
 	margin-top: $default-block-margin;
 	margin-bottom: $default-block-margin;
 }
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"] > [data-block],
-.block-editor-block-list__block[data-type="core/embed"][data-align="right"] > [data-block],
+.block-editor-block-list__block[data-type="core/embed"][data-align="left"],
+.block-editor-block-list__block[data-type="core/embed"][data-align="right"],
 .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/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -70,10 +70,8 @@
 [data-type="core/image"][data-align="center"],
 [data-type="core/image"][data-align="left"],
 [data-type="core/image"][data-align="right"] {
-	[data-block] {
-		figure {
-			margin: 0;
-		}
+	figure {
+		margin: 0;
 	}
 }
 

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -32,13 +32,8 @@
 		padding-right: 0;
 		margin-left: 0;
 		margin-right: 0;
-		margin-bottom: 1em; // Useful for when items wrap.
-	}
-
-	// 3. Remove vertical margins on subsequent block container.
-	.wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout .wp-block > [data-block] {
 		margin-top: 0;
-		margin-bottom: 0;
+		margin-bottom: 1em; // Useful for when items wrap.
 	}
 
 	.wp-block-navigation .block-editor-block-list__block::before {

diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
@@ -28,6 +28,8 @@
 		padding-right: 0;
 		margin-left: 0;
 		margin-right: 0;
+		margin-top: 0;
+		margin-bottom: 0;
 	}
 
 	// 3. Minimize the block outlines.
@@ -48,12 +50,6 @@
 		border-color: transparent !important; // !important used to keep the selector from growing any more complex.
 	}
 
-	// 5. Remove vertical margins on subsequent block container.
-	.wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > [data-block] {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-
 	// Hide the mover.
 	// Hide the sibling inserter.
 	.wp-block-social-links .block-editor-block-list__insertion-point { // Needs specificity.