Ensure the position visualizer does not interfere with the ability to…

… select inner blocks
WordPress · Apr 21, 2023 · 27dc262 · 27dc262
1 parent 6584e37
commit 27dc262
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -41,6 +41,10 @@ $z-layers: (
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
 	".wp-block-template-part__placeholder-preview-filter-input": 1,
 
+	// Sticky position visualizer:
+	// Note that the sticky position block support has a default z-index value of 10.
+	".block-editor__sticky-position-visualizer-popover": 10, // Ensure visualizer sits beneath the block toolbar.
+
 	// Fixed position appender:
 	".block-editor-block-list__block .block-list-appender": 2,
 

diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
@@ -263,6 +263,7 @@ export function PositionVisualizer( { clientId, attributes, forceShow } ) {
 
 	return (
 		<BlockPopover
+			className="block-editor__sticky-position-visualizer-popover"
 			clientId={ clientId }
 			__unstableCoverTarget
 			__unstableRefreshSize={ positionType }

diff --git a/packages/block-editor/src/hooks/position.scss b/packages/block-editor/src/hooks/position.scss
@@ -17,6 +17,18 @@
 	}
 }
 
+// Prevent position visualizer popover from preventing inner block selection.
+.components-popover.block-editor-block-popover.block-editor__sticky-position-visualizer-popover {
+	z-index: z-index(".block-editor__sticky-position-visualizer-popover");
+	// Additional specificity is required to overcome default block popover
+	// pointer events only for the intended wrappers. This ensures that the
+	// visualizer popover never interferes with inner block selection.
+	.components-popover__content > div,
+	.block-editor__sticky-position-visualizer {
+		pointer-events: none;
+	}
+}
+
 .block-editor__sticky-position-visualizer {
 	position: absolute;
 	top: 0;