From 783708f96847ebec42101c99e372f1651ae2782c Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Thu, 16 May 2019 09:20:21 -0400
Subject: [PATCH] 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 6a78d76fe957c..fbbf5bac9988c 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;
 }