Additional borders and padding for nested blocks (#14961)

* Add extra padding and borders to child blocks

(When their parents are selected.)

* Small tweaks margin/padding of selected Media+Text/Group blocks.

* Add has-child-selected class to parent blocks.

Props @gziolo

* Adjust border/padding to also apply when child blocks are selected.

* Try an animation when nested blocks are selected.

* Hide the "Column" block.

* Try using a scale animation for child blocks.

* Reduce scale animation to be really tiny.

* Re-add has-child-selected class.

* Selecting parents: Try clickthrough.

Clickthrough has you select the parent before you can select the child. This is already in place on the mobile breakpoints, this just expands it to desktop as well.

It is a work in progress, right now it is not working as intended: once you have "unlocked" the deepest level, it becomes immediately locked and you have to click through the layers again to unlock it again. The deepest layer should always be unlocked until you deselect all blocks again.

* Add some visual debugging for nested overlays

* Add hasChildSelected prop

* Add borders/padding to direct children + parents only.

* Revert "Merge branch 'try/clickthrough' into try/additional-borders-padding-for-child-blocks"

This reverts commit 9a9297b, reversing
changes made to 783708f.

* Revert "Add borders/padding to direct children + parents only."

This reverts commit 783708f.

* Revert "Add hasChildSelected prop"

This reverts commit a3e9dbd.

* Remove animation, adjust specificity.

... so that only direct children get borders/padding, whereas all parents do too.

* Columns block adjustments.

Ensures better compatibility with the borders/padding.

* Clean up media-text block CSS.

* Correct block breadcrumb position for the column block.

* Move all block movers up above contextual toolbars.

* Clean up block list appender margins.

* Clean up block list appender margins for the columns block.

* Reduce specificity for the group block appender overrides.

* Resolve merge inconsitencies after rebasing this branch

* Improve compaibiilty with custom inner containers.

Like those used for the Group + Cover blocks.

* Move extra padding to just the columns and group blocks.

* Try fixing e2e test

* Clean up columns block placeholder padding.

* Modify writing-flow test to pass.

Shortens the text inside the column block so that it doesn't wrap into 2 lines.

* Followup to 82dfc34

Modifies writing-flow test to include shorter copy in the columns block.

* Update snapshots for writing-flow test.

* Add inline comments about the test adjustment.

* Remove previous attempt to fix failing tests.

assets/stylesheets/_z-index.scss

@@ -8,7 +8,7 @@ $z-layers: (
 	".block-editor-block-list__block {core/image aligned wide or fullwide}": 20,
 	".block-library-classic__toolbar": 10,
 	".block-editor-block-list__layout .reusable-block-indicator": 1,
-	".block-editor-block-list__breadcrumb": 2,
+	".block-editor-block-list__breadcrumb": 22,
 	".components-form-toggle__input": 1,
 	".components-panel__header.edit-post-sidebar__panel-tabs": -1,
 	".edit-post-sidebar .components-panel": -2,

packages/block-editor/src/components/block-list/block.js

@@ -406,6 +406,7 @@ function BlockListBlock( {
 			'is-typing': isTypingWithinBlock,
 			'is-focused': isFocusMode && ( isSelected || isParentOfSelectedBlock ),
 			'is-focus-mode': isFocusMode,
+			'has-child-selected': isParentOfSelectedBlock,
 		},
 		className
 	);

packages/block-editor/src/components/block-list/style.scss

@@ -168,8 +168,28 @@
 			opacity: 1;
 		}
 	}
-}
 
+	// Add extra border to parent blocks when their children are selected.
+	&.has-child-selected {
+
+		> .block-editor-block-list__block-edit::before {
+			border: $border-width dashed $dark-opacity-light-800;
+		}
+
+		> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
+		> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
+		> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
+			border: $border-width dashed $dark-opacity-light-800;
+		}
+	}
+
+	// Add extra border to child blocks when they are selected.
+	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
+	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
+	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
+		border: $border-width dashed $dark-opacity-light-800;
+	}
+}
 
 /**
  * Cross-block selection
@@ -1055,11 +1075,6 @@
 		}
 	}
 
-	// Position this above the toolbar of parent blocks.
-	.editor-inner-blocks & {
-		z-index: z-index(".editor-inner-blocks .block-editor-block-list__breadcrumb");
-	}
-
 	// Remove negative left breadcrumb position for left aligned blocks.
 	[data-align="left"] & {
 		left: 0;

packages/block-library/src/columns/editor.scss

@@ -132,9 +132,18 @@
  * vertical to ensure there is equal visual spacing around the inserter. Note there
  * is no formal API for a "passthrough" Block so this is an edge case overide
  */
-[data-type="core/columns"] .block-list-appender {
-	margin-top: $block-padding*2;
-	margin-bottom: $block-padding*2;
+[data-type="core/columns"] {
+
+	.block-list-appender {
+		margin-top: $block-padding*2;
+		margin-bottom: $block-padding*2;
+	}
+
+	// When the individual column block is selected, the nested padding overrules
+	// some of this margin. We need to adjust the appender spacing again as a result.
+	[data-type="core/column"].is-selected .block-list-appender {
+		margin: $block-padding 0;
+	}
 }
 
 /**
@@ -158,13 +167,11 @@ div.block-core-columns.is-vertically-aligned-bottom {
 	justify-content: flex-end;
 }
 
-
 /**
- * Fixes single Column breadcrumb to RHS of Block boundary
+ * Fixes single Column breadcrumb position.
  */
 [data-type="core/column"] > .editor-block-list__block-edit > .editor-block-list__breadcrumb {
-	right: 0;
-	left: auto;
+	left: -$block-left-border-width;
 }
 
 /**
@@ -174,3 +181,19 @@ div.block-core-columns.is-vertically-aligned-bottom {
 	left: 0;
 	right: 0;
 }
+
+/**
+ * Add extra padding when the parent block is selected, for easier interaction.
+ */
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/columns"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/columns"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/column"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/column"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks {
+	padding: $block-padding;
+
+	// Negate this padding for the placeholder.
+	> .components-placeholder {
+		margin: -$block-padding;
+		width: calc(100% + #{$block-padding * 2});
+	}
+}

packages/block-library/src/group/editor.scss

@@ -85,3 +85,31 @@
 		width: calc(100% + 60px);
 	}
 }
+
+// Add padding when the block is selected, for easier interaction.
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > .wp-block-group,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].is-selected > .block-editor-block-list__block-edit > [data-block] > .wp-block-group {
+
+	> .wp-block-group__inner-container > .block-editor-inner-blocks {
+		padding: $block-padding;
+	}
+
+	&:not(.has-background) > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {
+		margin-top: -$block-padding * 2;
+		margin-bottom: -$block-padding * 2;
+	}
+}
+
+// Place block list appender in the same place content will appear.
+[data-type="core/group"].is-selected {
+
+	.block-list-appender {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	.has-background .block-list-appender {
+		margin-top: $block-padding + $grid-size-small;
+		margin-bottom: $block-padding + $grid-size-small;
+	}
+}

packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap

@@ -8,13 +8,13 @@ exports[`adding blocks Should navigate inner blocks with arrow keys 1`] = `
 <!-- wp:columns -->
 <div class=\\"wp-block-columns\\"><!-- wp:column -->
 <div class=\\"wp-block-column\\"><!-- wp:paragraph -->
-<p>First col</p>
+<p>1st col</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
 <div class=\\"wp-block-column\\"><!-- wp:paragraph -->
-<p>Second col</p>
+<p>2nd col</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->

packages/e2e-tests/specs/writing-flow.test.js

@@ -34,7 +34,7 @@ describe( 'adding blocks', () => {
 		await page.keyboard.type( 'Paragraph' );
 		await pressKeyTimes( 'Tab', 3 ); // Tab to paragraph result.
 		await page.keyboard.press( 'Enter' ); // Insert paragraph.
-		await page.keyboard.type( 'First col' );
+		await page.keyboard.type( '1st col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "1st" instead of "First" here.
 
 		// TODO: ArrowDown should traverse into the second column. In slower
 		// CPUs, it can sometimes remain in the first column paragraph. This
@@ -45,7 +45,7 @@ describe( 'adding blocks', () => {
 		await page.keyboard.type( 'Paragraph' );
 		await pressKeyTimes( 'Tab', 3 ); // Tab to paragraph result.
 		await page.keyboard.press( 'Enter' ); // Insert paragraph.
-		await page.keyboard.type( 'Second col' );
+		await page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here.
 
 		// Arrow down from last of layouts exits nested context to default
 		// appender of root level.
@@ -55,14 +55,14 @@ describe( 'adding blocks', () => {
 		// Arrow up into nested context focuses last text input
 		await page.keyboard.press( 'ArrowUp' );
 		activeElementText = await page.evaluate( () => document.activeElement.textContent );
-		expect( activeElementText ).toBe( 'Second col' );
+		expect( activeElementText ).toBe( '2nd col' );
 
 		// Arrow up in inner blocks should navigate through (1) column wrapper,
 		// (2) text fields.
 		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.press( 'ArrowUp' );
 		activeElementText = await page.evaluate( () => document.activeElement.textContent );
-		expect( activeElementText ).toBe( 'First col' );
+		expect( activeElementText ).toBe( '1st col' );
 
 		// Arrow up from first text field in nested context focuses column and
 		// columns wrappers before escaping out.