Add borders/padding to direct children + parents only.

WordPress · May 16, 2019 · 783708f · 783708f
1 parent a3e9dbd
commit 783708f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 }