Try: Improve columns block (#11620)

* Try: Improve columns block

This PR aims to improve the column block usability, as well as fix a few issues:

1. It makes the individual columns unclickable by using pointer events. Since these are not actionable yet, being able to select them is not really helpful.

2. It improves the UI around reusable blocks, by fixing an issue where even though contents should be disabled when in a reusable block, it was still selectable if there were nested blocks.

3. It further improves the reusable block UI by fixing a regression where the reusable block editing bar did not push down content sufficiently.

4. It refactors how margins in the columns block work, to be simpler and more predictable, and makes it behave similar to every other block in that regard.

* Improve the margins of an empty colums block.

assets/stylesheets/_z-index.scss

@@ -37,6 +37,9 @@ $z-layers: (
 	// Active pill button
 	".components-button.is-button {:focus or .is-primary}": 1,
 
+	// Reusable blocks UI, needs to be above sibling inserter.
+	".editor-block-list__layout .reusable-block-edit-panel": 7,
+
 	// The draggable element should show up above the entire UI
 	".components-draggable__clone": 1000000000,
 

packages/block-library/src/block/edit-panel/style.scss

@@ -8,8 +8,10 @@
 	font-size: $default-font-size;
 	position: relative;
 	top: -$block-padding;
-	margin: 0 (-$block-padding) (-$block-padding) (-$block-padding);
+	margin: 0 (-$block-padding);
 	padding: $grid-size $block-padding;
+	position: relative;
+	z-index: z-index(".editor-block-list__layout .reusable-block-edit-panel");
 
 	// Show a smaller padding when nested.
 	.editor-block-list__layout & {

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

@@ -25,15 +25,6 @@
 	}
 }
 
-// This block has flex container children. Flex container margins do not collapse: https://www.w3.org/TR/css-flexbox-1/#flex-containers.
-// Therefore, let's at least not add any additional margins here.
-// The goal is for the editor to look more like the front-end.
-.editor-block-list__layout .editor-block-list__block[data-type="core/columns"] > .editor-block-list__block-edit,
-.editor-block-list__layout .editor-block-list__block[data-type="core/column"] > .editor-block-list__block-edit {
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
 .wp-block-columns {
 	display: block;
 
@@ -55,8 +46,13 @@
 			// The Column block is a child of the Columns block and is mostly a passthrough container.
 			// Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins.
 			// @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way.
-			margin-top: -$block-padding;
-			margin-bottom: -$block-padding;
+			margin-top: -$block-padding - $block-padding;
+			margin-bottom: -$block-padding - $block-padding;
+
+			> .editor-block-list__block-edit {
+				margin-top: 0;
+				margin-bottom: 0;
+			}
 
 			// On mobile, only a single column is shown, so match adjacent block paddings.
 			padding-left: 0;
@@ -130,3 +126,13 @@
 		}
 	}
 }
+
+// In absence of making the individual columns resizable, we prevent them from being clickable.
+// This makes them less fiddly. This will be revisited as the interface is refined.
+.wp-block-columns [data-type="core/column"] {
+	pointer-events: none;
+}
+
+:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit > .editor-inner-blocks {
+	pointer-events: all;
+}

packages/components/src/disabled/style.scss

@@ -10,4 +10,9 @@
 		bottom: 0;
 		left: 0;
 	}
+
+	// Also make nested blocks unselectable.
+	* {
+		pointer-events: none;
+	}
 }

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

@@ -57,14 +57,9 @@
 		margin-right: -$block-padding;
 	}
 
-	// Adjust the spacing of the appender to match text blocks.
-	.editor-default-block-appender > .editor-default-block-appender__content {
-		margin-top: $block-padding * 2 + $block-spacing;
-	}
-
 	// Space every block, and the default appender, using margins.
 	// This allows margins to collapse, which gives a better representation of how it looks on the frontend.
-	> .editor-default-block-appender__content,
+	.editor-default-block-appender > .editor-default-block-appender__content,
 	> .editor-block-list__block > .editor-block-list__block-edit,
 	> .editor-block-list__layout > .editor-block-list__block > .editor-block-list__block-edit {
 		margin-top: $block-padding * 2 + $block-spacing;