Fix issue preventing inner block selection

WordPress · Mar 10, 2023 · fd03f5a · fd03f5a
1 parent 1c80b18
commit fd03f5a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 28 deletions.
diff --git a/packages/block-editor/src/components/resizable-box-popover/index.js b/packages/block-editor/src/components/resizable-box-popover/index.js
@@ -8,20 +8,20 @@ import { ResizableBox } from '@wordpress/components';
  */
 import BlockPopover from '../block-popover';
 
-export default function ResizableCoverPopover( {
+export default function ResizableBoxPopover( {
 	clientId,
-	__unstableRefreshSize,
+	resizableBoxProps,
 	...props
 } ) {
 	return (
 		<BlockPopover
 			clientId={ clientId }
 			__unstableCoverTarget
-			__unstableRefreshSize={ __unstableRefreshSize }
 			__unstablePopoverSlot="block-toolbar"
 			shift={ false }
+			{ ...props }
 		>
-			<ResizableBox { ...props } />
+			<ResizableBox { ...resizableBoxProps } />
 		</BlockPopover>
 	);
 }
diff --git a/packages/block-library/src/cover/edit/resizable-cover-popover.js b/packages/block-library/src/cover/edit/resizable-cover-popover.js
@@ -36,33 +36,36 @@ export default function ResizableCoverPopover( {
 		[ minHeight, height, width ]
 	);
 
+	const resizableBoxProps = {
+		className: classnames( className, { 'is-resizing': isResizing } ),
+		enable: RESIZABLE_BOX_ENABLE_OPTION,
+		onResizeStart: ( _event, _direction, elt ) => {
+			onResizeStart( elt.clientHeight );
+			onResize( elt.clientHeight );
+		},
+		onResize: ( _event, _direction, elt ) => {
+			onResize( elt.clientHeight );
+			if ( ! isResizing ) {
+				setIsResizing( true );
+			}
+		},
+		onResizeStop: ( _event, _direction, elt ) => {
+			onResizeStop( elt.clientHeight );
+			setIsResizing( false );
+		},
+		__experimentalShowTooltip: true,
+		__experimentalTooltipProps: {
+			axis: 'y',
+			position: 'bottom',
+			isVisible: isResizing,
+		},
+	};
+
 	return (
 		<ResizableBoxPopover
+			className="block-library-cover__resizable-box-popover"
 			__unstableRefreshSize={ dimensions }
-			className={ classnames( className, {
-				'is-resizing': isResizing,
-			} ) }
-			enable={ RESIZABLE_BOX_ENABLE_OPTION }
-			onResizeStart={ ( _event, _direction, elt ) => {
-				onResizeStart( elt.clientHeight );
-				onResize( elt.clientHeight );
-			} }
-			onResize={ ( _event, _direction, elt ) => {
-				onResize( elt.clientHeight );
-				if ( ! isResizing ) {
-					setIsResizing( true );
-				}
-			} }
-			onResizeStop={ ( _event, _direction, elt ) => {
-				onResizeStop( elt.clientHeight );
-				setIsResizing( false );
-			} }
-			__experimentalShowTooltip
-			__experimentalTooltipProps={ {
-				axis: 'y',
-				position: 'bottom',
-				isVisible: isResizing,
-			} }
+			resizableBoxProps={ resizableBoxProps }
 			{ ...props }
 		/>
 	);

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
@@ -87,6 +87,19 @@
 	min-height: 50px;
 }
 
+// Prevent resizable box popover form preventing inner block selection.
+.components-popover.block-editor-block-popover.block-library-cover__resizable-box-popover {
+	// Additional specificity is required to overcome default block popover
+	// pointer events only for the intended wrappers. The default pointer events
+	// are still needed for the inner resize handles of the resizable box.
+	.components-popover__content > div,
+	.block-library-cover__resize-container {
+		// The inner drag handle will still have `pointer-events: all` allowing
+		// it to continue to be interacted with.
+		pointer-events: none;
+	}
+}
+
 // When uploading background images, show a transparent overlay.
 .wp-block-cover > .components-drop-zone .components-drop-zone__content {
 	opacity: 0.8 !important;