From d3f88579416646f2c5f3376b6890fc92d964386c Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 12 Apr 2019 12:01:37 -0400
Subject: [PATCH 01/34] Add extra padding and borders to child blocks

(When their parents are selected.)
---
 .../block-editor/src/components/block-list/style.scss    | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 8ee3558ddf639..be241a9bd97e3 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -146,6 +146,15 @@
 				}
 			}
 		}
+
+		// Add extra padding and border when there are child blocks.
+		.block-editor-inner-blocks {
+			padding: $block-padding;
+
+			.block-editor-block-list__layout .block-editor-block-list__block > .block-editor-block-list__block-edit::before {
+				border: $border-width dashed $dark-opacity-light-800;
+			}
+		}
 	}
 
 	// Hover style.

From 8165e5afa187b910edc84ac50effc66536913a60 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 12 Apr 2019 12:13:05 -0400
Subject: [PATCH 02/34] Small tweaks margin/padding of selected
 Media+Text/Group blocks.

---
 packages/block-library/src/group/editor.scss      | 6 ++++++
 packages/block-library/src/media-text/editor.scss | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index d3b83213bff0a..bdb9fbf48b0bf 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -85,3 +85,9 @@
 		width: calc(100% + 60px);
 	}
 }
+
+// Adjust margins in the selected state when there are child blocks.
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].is-selected .wp-block-group:not(.has-background) .block-editor-inner-blocks .block-editor-block-list__layout {
+	margin-top: -$block-padding * 2;
+	margin-bottom: -$block-padding * 2;
+}
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index 3d0ad0361bd94..e0bfd192d9e45 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -31,6 +31,10 @@
 	word-break: break-word;
 	grid-area: media-text-content;
 	text-align: initial;
+}
+
+.wp-block-media-text .block-editor-inner-blocks,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].is-selected .block-editor-inner-blocks {
 	padding: 0 8% 0 8%;
 }
 

From e5d35b1453e6d8692851251f0e99a1a386b39fcd Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 16 Apr 2019 09:09:26 -0400
Subject: [PATCH 03/34] Add has-child-selected class to parent blocks.

Props @gziolo
---
 packages/block-editor/src/components/block-list/block.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 82a237625e6a7..97091d05784d0 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -395,6 +395,7 @@ function BlockListBlock( {
 						'is-typing': isTypingWithinBlock,
 						'is-focused':
 							isFocusMode && ( isSelected || isParentOfSelectedBlock ),
+						'has-child-selected': isParentOfSelectedBlock,
 						'is-focus-mode': isFocusMode,
 					},
 					className

From 67a7180dd9d81fbf83aa32c0e806d67f7f818957 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 16 Apr 2019 09:36:29 -0400
Subject: [PATCH 04/34] Adjust border/padding to also apply when child blocks
 are selected.

---
 .../src/components/block-list/style.scss      | 28 +++++++++++++------
 packages/block-library/src/group/editor.scss  |  3 +-
 .../block-library/src/media-text/editor.scss  |  3 +-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index be241a9bd97e3..a9f3bf5c63719 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -146,15 +146,6 @@
 				}
 			}
 		}
-
-		// Add extra padding and border when there are child blocks.
-		.block-editor-inner-blocks {
-			padding: $block-padding;
-
-			.block-editor-block-list__layout .block-editor-block-list__block > .block-editor-block-list__block-edit::before {
-				border: $border-width dashed $dark-opacity-light-800;
-			}
-		}
 	}
 
 	// Hover style.
@@ -177,6 +168,25 @@
 			opacity: 1;
 		}
 	}
+
+	// Add extra padding and border to nested blocks.
+	&.is-selected,
+	&.has-child-selected {
+
+		.block-editor-inner-blocks {
+			padding: $block-padding;
+
+			.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;
+			}
+		}
+	}
+
+	&.has-child-selected {
+		> .block-editor-block-list__block-edit::before {
+			border: $border-width dashed $dark-opacity-light-800;
+		}
+	}
 }
 
 
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index bdb9fbf48b0bf..e28936b4fa62d 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -87,7 +87,8 @@
 }
 
 // Adjust margins in the selected state when there are child blocks.
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].is-selected .wp-block-group:not(.has-background) .block-editor-inner-blocks .block-editor-block-list__layout {
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].is-selected .wp-block-group:not(.has-background) .block-editor-inner-blocks .block-editor-block-list__layout,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].has-child-selected .wp-block-group:not(.has-background) .block-editor-inner-blocks .block-editor-block-list__layout {
 	margin-top: -$block-padding * 2;
 	margin-bottom: -$block-padding * 2;
 }
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index e0bfd192d9e45..068079e8b8b91 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -34,7 +34,8 @@
 }
 
 .wp-block-media-text .block-editor-inner-blocks,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].is-selected .block-editor-inner-blocks {
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].is-selected .block-editor-inner-blocks,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].has-child-selected .block-editor-inner-blocks {
 	padding: 0 8% 0 8%;
 }
 

From 09bc3a42f152bc4a148c045b9cb2c5e572f30b33 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 16 Apr 2019 15:45:59 -0400
Subject: [PATCH 05/34] Try an animation when nested blocks are selected.

---
 .../src/components/block-list/style.scss      | 56 +++++++------------
 1 file changed, 20 insertions(+), 36 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index a9f3bf5c63719..3f1c26a504bb9 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -109,9 +109,8 @@
 			border: $border-width solid transparent;
 			border-left: none;
 			box-shadow: none;
-			pointer-events: none;
 			transition: border-color 0.1s linear, box-shadow 0.1s linear;
-			@include reduce-motion("transition");
+			pointer-events: none;
 
 			// Include a transparent outline for Windows High Contrast mode.
 			outline: $border-width solid transparent;
@@ -161,7 +160,6 @@
 	&.is-focus-mode:not(.is-multi-selected) {
 		opacity: 0.5;
 		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
 
 		&:not(.is-focused) .block-editor-block-list__block,
 		&.is-focused {
@@ -293,11 +291,13 @@
 	}
 
 	// Appender
+	&.is-typing .block-editor-block-list__empty-block-inserter,
 	&.is-typing .block-editor-block-list__side-inserter {
 		opacity: 0;
 		animation: none;
 	}
 
+	.block-editor-block-list__empty-block-inserter,
 	.block-editor-block-list__side-inserter {
 		@include edit-post__fade-in-animation;
 	}
@@ -322,20 +322,6 @@
 		}
 	}
 
-	// Reusable Blocks clickthrough overlays
-	&.is-reusable > .block-editor-block-list__block-edit .block-editor-inner-blocks.has-overlay {
-		// Remove only the top click overlay.
-		&::after {
-			display: none;
-		}
-
-		// Restore it for subsequent.
-		.block-editor-inner-blocks.has-overlay::after {
-			display: block;
-		}
-	}
-
-
 	// Alignments
 	&[data-align="left"],
 	&[data-align="right"] {
@@ -439,34 +425,36 @@
 		z-index: z-index(".block-editor-block-list__block {core/image aligned wide or fullwide}");
 
 		// Mover and settings above
-		&.is-multi-selected > .block-editor-block-mover,
-		> .block-editor-block-list__block-edit > .block-editor-block-mover {
+		> .block-editor-block-mover {
 			// This moves the menu up by the height of the button + border + padding.
 			top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
 			bottom: auto;
 			min-height: 0;
 			height: auto;
 			width: auto;
+			z-index: inherit;
 
 			&::before {
 				content: none;
 			}
 		}
 
-		&.is-multi-selected > .block-editor-block-mover .block-editor-block-mover__control,
-		> .block-editor-block-list__block-edit > .block-editor-block-mover .block-editor-block-mover__control {
+		> .block-editor-block-mover .block-editor-block-mover__control {
 			float: left;
 		}
 
+		// Position hover label on the right
+		> .block-editor-block-list__breadcrumb {
+			right: -$border-width;
+		}
+
 		// Hide mover until wide breakpoints, or it might be covered by toolbar
-		&.is-multi-selected > .block-editor-block-mover,
-		> .block-editor-block-list__block-edit > .block-editor-block-mover {
+		> .block-editor-block-mover {
 			display: none;
 		}
 
 		@include break-wide() {
-			&.is-multi-selected > .block-editor-block-mover,
-			> .block-editor-block-list__block-edit > .block-editor-block-mover {
+			> .block-editor-block-mover {
 				display: block;
 			}
 		}
@@ -478,18 +466,12 @@
 				display: inline-flex;
 			}
 		}
-
-		// If the block movers are visible, push the breadcrumb down to make room for them.
-		.block-editor-block-mover.is-visible + .block-editor-block-list__breadcrumb {
-			top: (-$block-padding - $block-left-border-width - ($grid-size-small / 2));
-		}
 	}
 
 	// Wide
 	&[data-align="wide"] {
 		// Position mover
-		&.is-multi-selected > .block-editor-block-mover,
-		> .block-editor-block-list__block-edit > .block-editor-block-mover {
+		> .block-editor-block-mover {
 			left: -$block-padding + $border-width;
 		}
 	}
@@ -531,8 +513,7 @@
 		}
 
 		// Position mover
-		&.is-multi-selected > .block-editor-block-mover,
-		> .block-editor-block-list__block-edit > .block-editor-block-mover {
+		> .block-editor-block-mover {
 			left: $border-width;
 		}
 	}
@@ -785,7 +766,6 @@
 	// Hide both the button until hovered.
 	opacity: 0;
 	transition: opacity 0.1s linear;
-	@include reduce-motion("transition");
 
 	&:hover,
 	&.is-visible {
@@ -849,7 +829,6 @@
 	font-size: $text-editor-font-size;
 	line-height: 150%;
 	transition: padding 0.2s linear;
-	@include reduce-motion("transition");
 
 	&:focus {
 		box-shadow: none;
@@ -944,6 +923,10 @@
 	}
 }
 
+.block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) > .block-editor-block-contextual-toolbar {
+	margin-left: -$block-side-ui-width;
+}
+
 // Enable toolbar footprint collapsing
 .block-editor-block-contextual-toolbar {
 	// Position the contextual toolbar above the block.
@@ -1018,6 +1001,7 @@
 	top: (($block-padding * -2) - $block-left-border-width);
 
 	.components-toolbar {
+		padding: 0;
 		border: none;
 		line-height: 1;
 		font-family: $default-font;

From 879f02527b609558e5c0b72287e5a557548139e3 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 17 Apr 2019 07:40:39 -0400
Subject: [PATCH 06/34] Hide the "Column" block.

---
 packages/block-library/src/columns/editor.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index f8780b91ebab5..4fe608b432b1e 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -174,3 +174,15 @@ div.block-core-columns.is-vertically-aligned-bottom {
 	left: 0;
 	right: 0;
 }
+
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/columns"].is-selected,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/columns"].has-child-selected {
+
+	.block-editor-block-list__block[data-type="core/column"]:not(.is-selected) > .block-editor-block-list__block-edit::before {
+		border: none;
+	}
+
+	.block-core-columns > .block-editor-inner-blocks {
+		padding: 0;
+	}
+}

From 66e535d329fc938697d48bbb99f7237ffcbb93a8 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Thu, 18 Apr 2019 14:39:57 -0400
Subject: [PATCH 07/34] Try using a scale animation for child blocks.

---
 .../src/components/block-list/style.scss             | 12 ++++++++++++
 packages/block-library/src/cover/editor.scss         |  7 +++++++
 packages/block-library/src/media-text/editor.scss    |  6 ++++++
 3 files changed, 25 insertions(+)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 3f1c26a504bb9..2ced839700956 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -174,6 +174,10 @@
 		.block-editor-inner-blocks {
 			padding: $block-padding;
 
+			// Animate the transition.
+			animation: block-editor-inner-blocks__padding-animation 0.1s ease-out;
+			animation-fill-mode: forwards;
+
 			.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;
 			}
@@ -187,6 +191,14 @@
 	}
 }
 
+@keyframes block-editor-inner-blocks__padding-animation {
+	from {
+		transform: scale(1.05);
+	}
+	to {
+		transform: scale(1);
+	}
+}
 
 /**
  * Cross-block selection
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index b368b3ee24c05..09ec66bd86118 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -45,3 +45,10 @@
 		width: 100%;
 	}
 }
+
+// Remove unnecessary child block padding and animation.
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/cover"].is-selected .block-editor-inner-blocks,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/cover"].has-child-selected .block-editor-inner-blocks {
+	padding: 0;
+	animation: none;
+}
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index 068079e8b8b91..c08867419049a 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -39,6 +39,12 @@
 	padding: 0 8% 0 8%;
 }
 
+// Disable padding animation for this block, since no extra padding is added.
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].is-selected .block-editor-inner-blocks,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].has-child-selected .block-editor-inner-blocks {
+	animation: none;
+}
+
 .wp-block-media-text > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block {
 	max-width: unset;
 }

From 77dedc1e929523916327cdf0630a6e4b9c3ff5a3 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Thu, 18 Apr 2019 16:05:42 -0400
Subject: [PATCH 08/34] Reduce scale animation to be really tiny.

---
 packages/block-editor/src/components/block-list/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 2ced839700956..dad76c21f0ade 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -193,7 +193,7 @@
 
 @keyframes block-editor-inner-blocks__padding-animation {
 	from {
-		transform: scale(1.05);
+		transform: scale(1.01);
 	}
 	to {
 		transform: scale(1);

From a50aa4667c21c06f45c1a63549f665e6cf8d89f4 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Thu, 9 May 2019 12:22:22 -0400
Subject: [PATCH 09/34] Re-add has-child-selected class.

---
 packages/block-editor/src/components/block-list/block.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 97091d05784d0..24065f036bf3e 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -397,6 +397,7 @@ function BlockListBlock( {
 							isFocusMode && ( isSelected || isParentOfSelectedBlock ),
 						'has-child-selected': isParentOfSelectedBlock,
 						'is-focus-mode': isFocusMode,
+						'has-child-selected': isParentOfSelectedBlock,
 					},
 					className
 				);

From 66ca27b14c576437b5fde5e43bfd21794e1a61ee Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Thu, 9 May 2019 11:52:22 +0200
Subject: [PATCH 10/34] 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.
---
 packages/block-editor/src/components/inner-blocks/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 75a6731f42db5..2629e1837c54c 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -129,6 +129,7 @@ class InnerBlocks extends Component {
 
 InnerBlocks = compose( [
 	withBlockEditContext( ( context ) => pick( context, [ 'clientId' ] ) ),
+	withViewportMatch( { isSmallScreen: '< medium' } ),
 	withSelect( ( select, ownProps ) => {
 		const {
 			isBlockSelected,

From cd153fcc402033489cd46d3734672b00e53cd469 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Tue, 14 May 2019 09:10:18 +0200
Subject: [PATCH 11/34] Add some visual debugging for nested overlays

---
 packages/block-editor/src/components/inner-blocks/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 2629e1837c54c..75a6731f42db5 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -129,7 +129,6 @@ class InnerBlocks extends Component {
 
 InnerBlocks = compose( [
 	withBlockEditContext( ( context ) => pick( context, [ 'clientId' ] ) ),
-	withViewportMatch( { isSmallScreen: '< medium' } ),
 	withSelect( ( select, ownProps ) => {
 		const {
 			isBlockSelected,

From 762ab1d920d50e54bb6739b98ce194cf5735a209 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Thu, 16 May 2019 13:29:20 +0200
Subject: [PATCH 12/34] Add hasChildSelected prop

---
 packages/block-editor/src/components/block-list/block.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 24065f036bf3e..e0b45874d1d26 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -63,6 +63,7 @@ const preventDrag = ( event ) => {
 
 function BlockListBlock( {
 	blockRef,
+	hasChildSelected,
 	mode,
 	isFocusMode,
 	hasFixedToolbar,
@@ -386,6 +387,7 @@ function BlockListBlock( {
 				const wrapperClassName = classnames(
 					'wp-block editor-block-list__block block-editor-block-list__block',
 					{
+						'has-child-selected': hasChildSelected,
 						'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
 						'is-selected': shouldAppearSelected,
 						'is-multi-selected': isPartOfMultiSelection,
@@ -397,7 +399,6 @@ function BlockListBlock( {
 							isFocusMode && ( isSelected || isParentOfSelectedBlock ),
 						'has-child-selected': isParentOfSelectedBlock,
 						'is-focus-mode': isFocusMode,
-						'has-child-selected': isParentOfSelectedBlock,
 					},
 					className
 				);
@@ -604,6 +605,7 @@ const applyWithSelect = withSelect(
 		const { name, attributes, isValid } = block || {};
 
 		return {
+			hasChildSelected: hasSelectedInnerBlock( clientId ),
 			isPartOfMultiSelection:
 				isBlockMultiSelected( clientId ) || isAncestorMultiSelected( clientId ),
 			isFirstMultiSelected: isFirstMultiSelectedBlock( clientId ),

From 869acc7b7aad932b7d09b142c12f212b09e4c2e1 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Thu, 16 May 2019 09:20:21 -0400
Subject: [PATCH 13/34] Add borders/padding to direct children + parents only.

---
 .../src/components/block-list/style.scss      | 28 ++++++++-----------
 packages/block-library/src/cover/editor.scss  |  7 -----
 packages/block-library/src/group/editor.scss  |  4 +--
 .../block-library/src/media-text/editor.scss  |  8 +-----
 4 files changed, 15 insertions(+), 32 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index dad76c21f0ade..9815c5fedd7a0 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -167,27 +167,23 @@
 		}
 	}
 
-	// Add extra padding and border to nested blocks.
-	&.is-selected,
-	&.has-child-selected {
+	// Add extra padding and border to nested block's direct children.
+	&.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
+	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
+	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks {
+		padding: $block-padding;
 
-		.block-editor-inner-blocks {
-			padding: $block-padding;
+		// Animate the transition.
+		animation: block-editor-inner-blocks__padding-animation 0.1s ease-out;
+		animation-fill-mode: forwards;
 
-			// Animate the transition.
-			animation: block-editor-inner-blocks__padding-animation 0.1s ease-out;
-			animation-fill-mode: forwards;
-
-			.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;
-			}
+		> .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;
 		}
 	}
 
-	&.has-child-selected {
-		> .block-editor-block-list__block-edit::before {
-			border: $border-width dashed $dark-opacity-light-800;
-		}
+	&.has-child-selected > .block-editor-block-list__block-edit::before {
+		border: $border-width dashed $dark-opacity-light-800;
 	}
 }
 
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 09ec66bd86118..b368b3ee24c05 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -45,10 +45,3 @@
 		width: 100%;
 	}
 }
-
-// Remove unnecessary child block padding and animation.
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/cover"].is-selected .block-editor-inner-blocks,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/cover"].has-child-selected .block-editor-inner-blocks {
-	padding: 0;
-	animation: none;
-}
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index e28936b4fa62d..186b63eadef14 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -87,8 +87,8 @@
 }
 
 // Adjust margins in the selected state when there are child blocks.
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].is-selected .wp-block-group:not(.has-background) .block-editor-inner-blocks .block-editor-block-list__layout,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].has-child-selected .wp-block-group:not(.has-background) .block-editor-inner-blocks .block-editor-block-list__layout {
+.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:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout,
+.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:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout {
 	margin-top: -$block-padding * 2;
 	margin-bottom: -$block-padding * 2;
 }
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index c08867419049a..62020987fba87 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -34,14 +34,8 @@
 }
 
 .wp-block-media-text .block-editor-inner-blocks,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].is-selected .block-editor-inner-blocks,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].has-child-selected .block-editor-inner-blocks {
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks {
 	padding: 0 8% 0 8%;
-}
-
-// Disable padding animation for this block, since no extra padding is added.
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].is-selected .block-editor-inner-blocks,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].has-child-selected .block-editor-inner-blocks {
 	animation: none;
 }
 

From 60c849f3f7a57289e1834b42076e2d636a398f61 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Fri, 17 May 2019 08:03:11 -0400
Subject: [PATCH 14/34] Revert "Merge branch 'try/clickthrough' into
 try/additional-borders-padding-for-child-blocks"

This reverts commit 9a9297b0b735d05e6b66d1decccba3e465b0a1d9, reversing
changes made to 783708f96847ebec42101c99e372f1651ae2782c.
---
 packages/block-library/src/columns/editor.scss | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 4fe608b432b1e..fc4c9324ef5a6 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -164,7 +164,19 @@ div.block-core-columns.is-vertically-aligned-bottom {
  */
 [data-type="core/column"] > .editor-block-list__block-edit > .editor-block-list__breadcrumb {
 	right: 0;
-	left: auto;
+}
+
+// The empty state of a columns block has the default appenders.
+// Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders.
+// Because the column shouldn't be hovered as part of this temporary passthrough, we unset the hover style.
+.wp-block-columns [data-type="core/column"].is-hovered {
+	> .block-editor-block-list__block-edit::before {
+		content: none;
+	}
+
+	.block-editor-block-list__breadcrumb {
+		display: none;
+	}
 }
 
 /**

From 324d293e95fe77571cef1a2dbc721ebbbb947d1c Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 21 May 2019 09:04:02 -0400
Subject: [PATCH 15/34] Revert "Add borders/padding to direct children +
 parents only."

This reverts commit 783708f96847ebec42101c99e372f1651ae2782c.
---
 .../src/components/block-list/style.scss      | 28 +++++++++++--------
 packages/block-library/src/cover/editor.scss  |  7 +++++
 packages/block-library/src/group/editor.scss  |  4 +--
 .../block-library/src/media-text/editor.scss  |  8 +++++-
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 9815c5fedd7a0..dad76c21f0ade 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -167,23 +167,27 @@
 		}
 	}
 
-	// Add extra padding and border to nested block's direct children.
-	&.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
-	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
-	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks {
-		padding: $block-padding;
+	// Add extra padding and border to nested blocks.
+	&.is-selected,
+	&.has-child-selected {
 
-		// Animate the transition.
-		animation: block-editor-inner-blocks__padding-animation 0.1s ease-out;
-		animation-fill-mode: forwards;
+		.block-editor-inner-blocks {
+			padding: $block-padding;
 
-		> .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;
+			// Animate the transition.
+			animation: block-editor-inner-blocks__padding-animation 0.1s ease-out;
+			animation-fill-mode: forwards;
+
+			.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;
+			}
 		}
 	}
 
-	&.has-child-selected > .block-editor-block-list__block-edit::before {
-		border: $border-width dashed $dark-opacity-light-800;
+	&.has-child-selected {
+		> .block-editor-block-list__block-edit::before {
+			border: $border-width dashed $dark-opacity-light-800;
+		}
 	}
 }
 
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index b368b3ee24c05..09ec66bd86118 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -45,3 +45,10 @@
 		width: 100%;
 	}
 }
+
+// Remove unnecessary child block padding and animation.
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/cover"].is-selected .block-editor-inner-blocks,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/cover"].has-child-selected .block-editor-inner-blocks {
+	padding: 0;
+	animation: none;
+}
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 186b63eadef14..e28936b4fa62d 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -87,8 +87,8 @@
 }
 
 // Adjust margins in the selected state when there are child blocks.
-.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:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout,
-.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:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout {
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].is-selected .wp-block-group:not(.has-background) .block-editor-inner-blocks .block-editor-block-list__layout,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].has-child-selected .wp-block-group:not(.has-background) .block-editor-inner-blocks .block-editor-block-list__layout {
 	margin-top: -$block-padding * 2;
 	margin-bottom: -$block-padding * 2;
 }
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index 62020987fba87..c08867419049a 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -34,8 +34,14 @@
 }
 
 .wp-block-media-text .block-editor-inner-blocks,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].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/media-text"].is-selected .block-editor-inner-blocks,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].has-child-selected .block-editor-inner-blocks {
 	padding: 0 8% 0 8%;
+}
+
+// Disable padding animation for this block, since no extra padding is added.
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].is-selected .block-editor-inner-blocks,
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].has-child-selected .block-editor-inner-blocks {
 	animation: none;
 }
 

From 4f54fd7302684f4497064daca9a12d752ea5bcba Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 21 May 2019 09:04:05 -0400
Subject: [PATCH 16/34] Revert "Add hasChildSelected prop"

This reverts commit a3e9dbd8352c3bc76e9c9a53897fafa27073e581.
---
 packages/block-editor/src/components/block-list/block.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index e0b45874d1d26..24065f036bf3e 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -63,7 +63,6 @@ const preventDrag = ( event ) => {
 
 function BlockListBlock( {
 	blockRef,
-	hasChildSelected,
 	mode,
 	isFocusMode,
 	hasFixedToolbar,
@@ -387,7 +386,6 @@ function BlockListBlock( {
 				const wrapperClassName = classnames(
 					'wp-block editor-block-list__block block-editor-block-list__block',
 					{
-						'has-child-selected': hasChildSelected,
 						'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
 						'is-selected': shouldAppearSelected,
 						'is-multi-selected': isPartOfMultiSelection,
@@ -399,6 +397,7 @@ function BlockListBlock( {
 							isFocusMode && ( isSelected || isParentOfSelectedBlock ),
 						'has-child-selected': isParentOfSelectedBlock,
 						'is-focus-mode': isFocusMode,
+						'has-child-selected': isParentOfSelectedBlock,
 					},
 					className
 				);
@@ -605,7 +604,6 @@ const applyWithSelect = withSelect(
 		const { name, attributes, isValid } = block || {};
 
 		return {
-			hasChildSelected: hasSelectedInnerBlock( clientId ),
 			isPartOfMultiSelection:
 				isBlockMultiSelected( clientId ) || isAncestorMultiSelected( clientId ),
 			isFirstMultiSelected: isFirstMultiSelectedBlock( clientId ),

From e717cfcd305693a2d20bfb40a0452ec65b5369c5 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 21 May 2019 09:22:36 -0400
Subject: [PATCH 17/34] Remove animation, adjust specificity.

... so that only direct children get borders/padding, whereas all parents do too.
---
 .../src/components/block-list/style.scss      | 32 ++++++++-----------
 packages/block-library/src/cover/editor.scss  |  6 ++--
 packages/block-library/src/group/editor.scss  |  6 ++--
 .../block-library/src/media-text/editor.scss  |  7 ++++
 4 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index dad76c21f0ade..6ab5c18ba3f35 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -167,39 +167,33 @@
 		}
 	}
 
-	// Add extra padding and border to nested blocks.
-	&.is-selected,
+	// Add extra padding and border to parent blocks when their children are selected.
 	&.has-child-selected {
 
-		.block-editor-inner-blocks {
-			padding: $block-padding;
+		> .block-editor-block-list__block-edit::before {
+			border: $border-width dashed $dark-opacity-light-800;
+		}
 
-			// Animate the transition.
-			animation: block-editor-inner-blocks__padding-animation 0.1s ease-out;
-			animation-fill-mode: forwards;
+		> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks {
+			padding: $block-padding;
 
-			.block-editor-block-list__layout .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
+			> .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;
 			}
 		}
 	}
 
-	&.has-child-selected {
-		> .block-editor-block-list__block-edit::before {
+	// Add extra padding and border to child blocks when they are selected.
+	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
+	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks {
+		padding: $block-padding;
+
+		> .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;
 		}
 	}
 }
 
-@keyframes block-editor-inner-blocks__padding-animation {
-	from {
-		transform: scale(1.01);
-	}
-	to {
-		transform: scale(1);
-	}
-}
-
 /**
  * Cross-block selection
  */
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 09ec66bd86118..a4e0fc7a97393 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -46,9 +46,7 @@
 	}
 }
 
-// Remove unnecessary child block padding and animation.
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/cover"].is-selected .block-editor-inner-blocks,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/cover"].has-child-selected .block-editor-inner-blocks {
+// Disable nested block padding for this block.
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/cover"] > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks {
 	padding: 0;
-	animation: none;
 }
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index e28936b4fa62d..008535a00f40b 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -86,9 +86,9 @@
 	}
 }
 
-// Adjust margins in the selected state when there are child blocks.
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].is-selected .wp-block-group:not(.has-background) .block-editor-inner-blocks .block-editor-block-list__layout,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].has-child-selected .wp-block-group:not(.has-background) .block-editor-inner-blocks .block-editor-block-list__layout {
+// Adjust selected state margins for better visual compatibility with the additional borders and padding for nested blocks.
+.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:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout,
+.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:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout {
 	margin-top: -$block-padding * 2;
 	margin-bottom: -$block-padding * 2;
 }
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index c08867419049a..85fe56c30ee58 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -78,3 +78,10 @@ figure.block-library-media-text__media-container {
 		}
 	}
 }
+
+
+// Disable nested block padding for this block.
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"] > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks {
+	padding: 0 8% 0 8%;
+	animation: none;
+}

From e4612ead6cd78a6bb1b08502325c9ef6c71d311f Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 21 May 2019 09:23:38 -0400
Subject: [PATCH 18/34] Columns block adjustments.

Ensures better compatibility with the borders/padding.
---
 packages/block-library/src/columns/editor.scss | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index fc4c9324ef5a6..53e33b111930f 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -158,7 +158,6 @@ div.block-core-columns.is-vertically-aligned-bottom {
 	justify-content: flex-end;
 }
 
-
 /**
  * Fixes single Column breadcrumb to RHS of Block boundary
  */
@@ -166,19 +165,6 @@ div.block-core-columns.is-vertically-aligned-bottom {
 	right: 0;
 }
 
-// The empty state of a columns block has the default appenders.
-// Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders.
-// Because the column shouldn't be hovered as part of this temporary passthrough, we unset the hover style.
-.wp-block-columns [data-type="core/column"].is-hovered {
-	> .block-editor-block-list__block-edit::before {
-		content: none;
-	}
-
-	.block-editor-block-list__breadcrumb {
-		display: none;
-	}
-}
-
 /**
  * Make single Column overlay not extend past boundaries of parent
  */

From 8d27002242bc313cddbd8c186059a70ed6778c39 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 21 May 2019 09:43:36 -0400
Subject: [PATCH 19/34] Clean up media-text block CSS.

---
 .../block-library/src/media-text/editor.scss    | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index 85fe56c30ee58..fac0e0da9c581 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -33,18 +33,12 @@
 	text-align: initial;
 }
 
+// Add default padding to the innerblocks, and disable nested block padding for this block.
 .wp-block-media-text .block-editor-inner-blocks,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].is-selected .block-editor-inner-blocks,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].has-child-selected .block-editor-inner-blocks {
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"] > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks {
 	padding: 0 8% 0 8%;
 }
 
-// Disable padding animation for this block, since no extra padding is added.
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].is-selected .block-editor-inner-blocks,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"].has-child-selected .block-editor-inner-blocks {
-	animation: none;
-}
-
 .wp-block-media-text > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block {
 	max-width: unset;
 }
@@ -78,10 +72,3 @@ figure.block-library-media-text__media-container {
 		}
 	}
 }
-
-
-// Disable nested block padding for this block.
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"] > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks {
-	padding: 0 8% 0 8%;
-	animation: none;
-}

From 84824a0a6d79659a25c846d8eb61a54d5963a253 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 22 May 2019 13:43:54 -0400
Subject: [PATCH 20/34] Correct block breadcrumb position for the column block.

---
 packages/block-library/src/columns/editor.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 53e33b111930f..17a039315a069 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -159,10 +159,10 @@ div.block-core-columns.is-vertically-aligned-bottom {
 }
 
 /**
- * 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: -$block-left-border-width;
 }
 
 /**

From 0a4903edbebec90355a96311e9271959932e63f6 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 22 May 2019 13:55:01 -0400
Subject: [PATCH 21/34] Move all block movers up above contextual toolbars.

---
 assets/stylesheets/_z-index.scss                           | 2 +-
 packages/block-editor/src/components/block-list/style.scss | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
index 12f9b16de2003..949a0101b1f52 100644
--- a/assets/stylesheets/_z-index.scss
+++ b/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,
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 6ab5c18ba3f35..cdcfe2d95b3a1 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -1028,11 +1028,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;

From 272fe4aec38ead567c50d445840e311262d1562a Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 22 May 2019 14:35:27 -0400
Subject: [PATCH 22/34] Clean up block list appender margins.

---
 packages/block-library/src/group/editor.scss | 25 ++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 008535a00f40b..dffff08df13fd 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -87,8 +87,25 @@
 }
 
 // Adjust selected state margins for better visual compatibility with the additional borders and padding for nested blocks.
-.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:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout,
-.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:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout {
-	margin-top: -$block-padding * 2;
-	margin-bottom: -$block-padding * 2;
+.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 {
+
+	&:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout {
+		margin-top: -$block-padding * 2;
+		margin-bottom: -$block-padding * 2;
+
+		// Place block list appender exactly where content will appear.
+		.block-list-appender {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+
+	&.has-background > .block-editor-inner-blocks > .block-editor-block-list__layout {
+
+		// Place block list appender exactly where content will appear.
+		.block-list-appender {
+			margin: ($block-padding + $grid-size-small) 0;
+		}
+	}
 }

From a3e32ceb680101c5e0e1d7bacc7e77a055812b0d Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 22 May 2019 14:55:25 -0400
Subject: [PATCH 23/34] Clean up block list appender margins for the columns
 block.

---
 packages/block-library/src/columns/editor.scss | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 17a039315a069..fc8e6a4c258ec 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/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;
+	}
 }
 
 /**

From c6462d987037d470bfcbbaac1844c7fc06d811a0 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Wed, 22 May 2019 15:03:30 -0400
Subject: [PATCH 24/34] Reduce specificity for the group block appender
 overrides.

---
 packages/block-library/src/group/editor.scss | 29 +++++++++-----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index dffff08df13fd..f4eeaeec47eac 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -87,25 +87,22 @@
 }
 
 // Adjust selected state margins for better visual compatibility with the additional borders and padding for nested blocks.
-.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 {
+.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:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout,
+.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:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	margin-top: -$block-padding * 2;
+	margin-bottom: -$block-padding * 2;
+}
 
-	&:not(.has-background) > .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 {
 
-		// Place block list appender exactly where content will appear.
-		.block-list-appender {
-			margin-left: 0;
-			margin-right: 0;
-		}
+	.block-list-appender {
+		margin-left: 0;
+		margin-right: 0;
 	}
 
-	&.has-background > .block-editor-inner-blocks > .block-editor-block-list__layout {
-
-		// Place block list appender exactly where content will appear.
-		.block-list-appender {
-			margin: ($block-padding + $grid-size-small) 0;
-		}
+	.has-background .block-list-appender {
+		margin-top: $block-padding + $grid-size-small;
+		margin-bottom: $block-padding + $grid-size-small;
 	}
 }

From 9228859fdcad1c92a0b5c3aa44689445ce1e7371 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Thu, 6 Jun 2019 13:50:15 +0200
Subject: [PATCH 25/34] Resolve merge inconsitencies after rebasing this branch

---
 .../src/components/block-list/block.js        |  1 -
 .../src/components/block-list/style.scss      | 56 ++++++++++++-------
 .../block-library/src/columns/editor.scss     | 12 ----
 3 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 24065f036bf3e..48cd1e8c71212 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -395,7 +395,6 @@ function BlockListBlock( {
 						'is-typing': isTypingWithinBlock,
 						'is-focused':
 							isFocusMode && ( isSelected || isParentOfSelectedBlock ),
-						'has-child-selected': isParentOfSelectedBlock,
 						'is-focus-mode': isFocusMode,
 						'has-child-selected': isParentOfSelectedBlock,
 					},
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index cdcfe2d95b3a1..97a2db17da9ae 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -109,8 +109,9 @@
 			border: $border-width solid transparent;
 			border-left: none;
 			box-shadow: none;
-			transition: border-color 0.1s linear, box-shadow 0.1s linear;
 			pointer-events: none;
+			transition: border-color 0.1s linear, box-shadow 0.1s linear;
+			@include reduce-motion("transition");
 
 			// Include a transparent outline for Windows High Contrast mode.
 			outline: $border-width solid transparent;
@@ -160,6 +161,7 @@
 	&.is-focus-mode:not(.is-multi-selected) {
 		opacity: 0.5;
 		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
 
 		&:not(.is-focused) .block-editor-block-list__block,
 		&.is-focused {
@@ -297,13 +299,11 @@
 	}
 
 	// Appender
-	&.is-typing .block-editor-block-list__empty-block-inserter,
 	&.is-typing .block-editor-block-list__side-inserter {
 		opacity: 0;
 		animation: none;
 	}
 
-	.block-editor-block-list__empty-block-inserter,
 	.block-editor-block-list__side-inserter {
 		@include edit-post__fade-in-animation;
 	}
@@ -328,6 +328,20 @@
 		}
 	}
 
+	// Reusable Blocks clickthrough overlays
+	&.is-reusable > .block-editor-block-list__block-edit .block-editor-inner-blocks.has-overlay {
+		// Remove only the top click overlay.
+		&::after {
+			display: none;
+		}
+
+		// Restore it for subsequent.
+		.block-editor-inner-blocks.has-overlay::after {
+			display: block;
+		}
+	}
+
+
 	// Alignments
 	&[data-align="left"],
 	&[data-align="right"] {
@@ -431,36 +445,34 @@
 		z-index: z-index(".block-editor-block-list__block {core/image aligned wide or fullwide}");
 
 		// Mover and settings above
-		> .block-editor-block-mover {
+		&.is-multi-selected > .block-editor-block-mover,
+		> .block-editor-block-list__block-edit > .block-editor-block-mover {
 			// This moves the menu up by the height of the button + border + padding.
 			top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
 			bottom: auto;
 			min-height: 0;
 			height: auto;
 			width: auto;
-			z-index: inherit;
 
 			&::before {
 				content: none;
 			}
 		}
 
-		> .block-editor-block-mover .block-editor-block-mover__control {
+		&.is-multi-selected > .block-editor-block-mover .block-editor-block-mover__control,
+		> .block-editor-block-list__block-edit > .block-editor-block-mover .block-editor-block-mover__control {
 			float: left;
 		}
 
-		// Position hover label on the right
-		> .block-editor-block-list__breadcrumb {
-			right: -$border-width;
-		}
-
 		// Hide mover until wide breakpoints, or it might be covered by toolbar
-		> .block-editor-block-mover {
+		&.is-multi-selected > .block-editor-block-mover,
+		> .block-editor-block-list__block-edit > .block-editor-block-mover {
 			display: none;
 		}
 
 		@include break-wide() {
-			> .block-editor-block-mover {
+			&.is-multi-selected > .block-editor-block-mover,
+			> .block-editor-block-list__block-edit > .block-editor-block-mover {
 				display: block;
 			}
 		}
@@ -472,12 +484,18 @@
 				display: inline-flex;
 			}
 		}
+
+		// If the block movers are visible, push the breadcrumb down to make room for them.
+		.block-editor-block-mover.is-visible + .block-editor-block-list__breadcrumb {
+			top: (-$block-padding - $block-left-border-width - ($grid-size-small / 2));
+		}
 	}
 
 	// Wide
 	&[data-align="wide"] {
 		// Position mover
-		> .block-editor-block-mover {
+		&.is-multi-selected > .block-editor-block-mover,
+		> .block-editor-block-list__block-edit > .block-editor-block-mover {
 			left: -$block-padding + $border-width;
 		}
 	}
@@ -519,7 +537,8 @@
 		}
 
 		// Position mover
-		> .block-editor-block-mover {
+		&.is-multi-selected > .block-editor-block-mover,
+		> .block-editor-block-list__block-edit > .block-editor-block-mover {
 			left: $border-width;
 		}
 	}
@@ -772,6 +791,7 @@
 	// Hide both the button until hovered.
 	opacity: 0;
 	transition: opacity 0.1s linear;
+	@include reduce-motion("transition");
 
 	&:hover,
 	&.is-visible {
@@ -835,6 +855,7 @@
 	font-size: $text-editor-font-size;
 	line-height: 150%;
 	transition: padding 0.2s linear;
+	@include reduce-motion("transition");
 
 	&:focus {
 		box-shadow: none;
@@ -929,10 +950,6 @@
 	}
 }
 
-.block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) > .block-editor-block-contextual-toolbar {
-	margin-left: -$block-side-ui-width;
-}
-
 // Enable toolbar footprint collapsing
 .block-editor-block-contextual-toolbar {
 	// Position the contextual toolbar above the block.
@@ -1007,7 +1024,6 @@
 	top: (($block-padding * -2) - $block-left-border-width);
 
 	.components-toolbar {
-		padding: 0;
 		border: none;
 		line-height: 1;
 		font-family: $default-font;
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index fc8e6a4c258ec..2314b5fe24da7 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -181,15 +181,3 @@ div.block-core-columns.is-vertically-aligned-bottom {
 	left: 0;
 	right: 0;
 }
-
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/columns"].is-selected,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/columns"].has-child-selected {
-
-	.block-editor-block-list__block[data-type="core/column"]:not(.is-selected) > .block-editor-block-list__block-edit::before {
-		border: none;
-	}
-
-	.block-core-columns > .block-editor-inner-blocks {
-		padding: 0;
-	}
-}

From ce2759ae1691d2c6cf69a56a8fd00389a43115cc Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Mon, 17 Jun 2019 14:28:09 -0400
Subject: [PATCH 26/34] Improve compaibiilty with custom inner containers.

Like those used for the Group + Cover blocks.
---
 packages/block-editor/src/components/block-list/style.scss | 7 +++++--
 packages/block-library/src/group/editor.scss               | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 97a2db17da9ae..841ebe64b984e 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -176,7 +176,9 @@
 			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__block-edit > [data-block] > div > .block-editor-inner-blocks,
+		> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks,
+		> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks {
 			padding: $block-padding;
 
 			> .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
@@ -187,7 +189,8 @@
 
 	// Add extra padding and border to child blocks when they are selected.
 	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
-	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks {
+	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks,
+	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks {
 		padding: $block-padding;
 
 		> .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index c4e375d6cd4c3..b106552f69c43 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -87,8 +87,8 @@
 }
 
 // Adjust selected state margins for better visual compatibility with the additional borders and padding for nested blocks.
-.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:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout,
-.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:not(.has-background) > .block-editor-inner-blocks > .block-editor-block-list__layout {
+.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:not(.has-background) > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout,
+.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: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;
 }

From f46d3383f6cfe8cebd82bdcc0858a4577768603e Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 18 Jun 2019 10:54:41 -0400
Subject: [PATCH 27/34] Move extra padding to just the columns and group
 blocks.

---
 .../src/components/block-list/style.scss      | 28 +++++++------------
 .../block-library/src/columns/editor.scss     | 10 +++++++
 packages/block-library/src/cover/editor.scss  |  5 ----
 packages/block-library/src/group/editor.scss  | 17 +++++++----
 .../block-library/src/media-text/editor.scss  |  5 ----
 5 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 841ebe64b984e..f69896e1cb9ce 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -169,33 +169,25 @@
 		}
 	}
 
-	// Add extra padding and border to parent blocks when their children are selected.
+	// 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__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks,
-		> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks {
-			padding: $block-padding;
-
-			> .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;
-			}
+		> .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 padding and border to child blocks when they are selected.
-	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
-	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks,
-	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks {
-		padding: $block-padding;
-
-		> .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;
 	}
 }
 
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 78243284844c9..813c5cb7ba627 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -181,3 +181,13 @@ 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;
+}
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index a4e0fc7a97393..b368b3ee24c05 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -45,8 +45,3 @@
 		width: 100%;
 	}
 }
-
-// Disable nested block padding for this block.
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/cover"] > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks {
-	padding: 0;
-}
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index b106552f69c43..166d3992c6daf 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -86,11 +86,18 @@
 	}
 }
 
-// Adjust selected state margins for better visual compatibility with the additional borders and padding for nested blocks.
-.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:not(.has-background) > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout,
-.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: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;
+// 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.
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index fac0e0da9c581..3d0ad0361bd94 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -31,11 +31,6 @@
 	word-break: break-word;
 	grid-area: media-text-content;
 	text-align: initial;
-}
-
-// Add default padding to the innerblocks, and disable nested block padding for this block.
-.wp-block-media-text .block-editor-inner-blocks,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/media-text"] > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks {
 	padding: 0 8% 0 8%;
 }
 

From 47f6f44e0f6ade1294b16bd2e6a7df15a734a2a4 Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Tue, 25 Jun 2019 17:53:36 +0200
Subject: [PATCH 28/34] Try fixing e2e test

---
 packages/e2e-tests/specs/writing-flow.test.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js
index 5bcf9869c8646..8ed017e644df5 100644
--- a/packages/e2e-tests/specs/writing-flow.test.js
+++ b/packages/e2e-tests/specs/writing-flow.test.js
@@ -59,6 +59,7 @@ describe( 'adding blocks', () => {
 		// Arrow up in inner blocks should navigate through (1) column wrapper,
 		// (2) text fields.
 		await page.keyboard.press( 'ArrowUp' );
+		await page.waitForSelector( '.is-selected[data-type="core/column"]:focus' );
 		await page.keyboard.press( 'ArrowUp' );
 		activeElementText = await page.evaluate( () => document.activeElement.textContent );
 		expect( activeElementText ).toBe( 'First col' );

From 2ff9a80153918450d169ae91dd89df872bc84ee1 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Mon, 1 Jul 2019 08:44:35 -0400
Subject: [PATCH 29/34] Clean up columns block placeholder padding.

---
 packages/block-library/src/columns/editor.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 813c5cb7ba627..1dc626a9e84e0 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -190,4 +190,10 @@ div.block-core-columns.is-vertically-aligned-bottom {
 .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});
+	}
 }

From 82dfc34c407060c4562dcedf1a3b50f79e6dbd47 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 9 Jul 2019 10:17:44 -0400
Subject: [PATCH 30/34] Modify writing-flow test to pass.

Shortens the text inside the column block so that it doesn't wrap into 2 lines.
---
 packages/e2e-tests/specs/writing-flow.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js
index 0c0f7d4afd1ba..a1f155cd127f5 100644
--- a/packages/e2e-tests/specs/writing-flow.test.js
+++ b/packages/e2e-tests/specs/writing-flow.test.js
@@ -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' );
 
 		// Arrow down from last of layouts exits nested context to default
 		// appender of root level.
@@ -63,7 +63,7 @@ describe( 'adding blocks', () => {
 		await page.waitForSelector( '.is-selected[data-type="core/column"]:focus' );
 		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.

From 45b7bbb9e24c71f98b1218535686bcccd6eaa745 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 9 Jul 2019 10:31:07 -0400
Subject: [PATCH 31/34] Followup to 82dfc34

Modifies writing-flow test to include shorter copy in the columns block.
---
 packages/e2e-tests/specs/writing-flow.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js
index a1f155cd127f5..fcf737345faab 100644
--- a/packages/e2e-tests/specs/writing-flow.test.js
+++ b/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' );
 
 		// TODO: ArrowDown should traverse into the second column. In slower
 		// CPUs, it can sometimes remain in the first column paragraph. This
@@ -55,7 +55,7 @@ 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.

From f67dccff91031d63a7cdab7eeb21698c83800c81 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 9 Jul 2019 10:44:58 -0400
Subject: [PATCH 32/34] Update snapshots for writing-flow test.

---
 .../e2e-tests/specs/__snapshots__/writing-flow.test.js.snap   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap
index e693daea38401..e4c3263d149e5 100644
--- a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap
+++ b/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 -->

From 1b9d6bba6f384fe1b34a308b40ba0657a4b63ff9 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell.reigstad@automattic.com>
Date: Mon, 22 Jul 2019 07:35:15 -0400
Subject: [PATCH 33/34] Add inline comments about the test adjustment.

---
 packages/e2e-tests/specs/writing-flow.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js
index fcf737345faab..0091f2e9b6f1d 100644
--- a/packages/e2e-tests/specs/writing-flow.test.js
+++ b/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( '1st 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( '2nd 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.

From 7a0a2013d66aafb0d1efd10f824e9cc907e05b90 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell.reigstad@automattic.com>
Date: Mon, 22 Jul 2019 07:39:29 -0400
Subject: [PATCH 34/34] Remove previous attempt to fix failing tests.

---
 packages/e2e-tests/specs/writing-flow.test.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js
index 0091f2e9b6f1d..d3cf5231b6452 100644
--- a/packages/e2e-tests/specs/writing-flow.test.js
+++ b/packages/e2e-tests/specs/writing-flow.test.js
@@ -60,7 +60,6 @@ describe( 'adding blocks', () => {
 		// Arrow up in inner blocks should navigate through (1) column wrapper,
 		// (2) text fields.
 		await page.keyboard.press( 'ArrowUp' );
-		await page.waitForSelector( '.is-selected[data-type="core/column"]:focus' );
 		await page.keyboard.press( 'ArrowUp' );
 		activeElementText = await page.evaluate( () => document.activeElement.textContent );
 		expect( activeElementText ).toBe( '1st col' );