Block popover: fix scrolling over (WordPress#68075)

Co-authored-by: ellatrix <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: Mamaduka <[email protected]>
carstingaxion · Jan 30, 2025 · 80348e7 · 80348e7
1 parent 22bbc80
commit 80348e7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/block-popover/use-popover-scroll.js b/packages/block-editor/src/components/block-popover/use-popover-scroll.js
@@ -2,24 +2,29 @@
  * WordPress dependencies
  */
 import { useRefEffect } from '@wordpress/compose';
+import { getScrollContainer } from '@wordpress/dom';
+
+const scrollContainerCache = new WeakMap();
 
 /**
  * Allow scrolling "through" popovers over the canvas. This is only called for
  * as long as the pointer is over a popover. Do not use React events because it
  * will bubble through portals.
  *
- * @param {Object} scrollableRef
+ * @param {Object} contentRef
  */
-function usePopoverScroll( scrollableRef ) {
+function usePopoverScroll( contentRef ) {
 	return useRefEffect(
 		( node ) => {
-			if ( ! scrollableRef ) {
-				return;
-			}
-
 			function onWheel( event ) {
 				const { deltaX, deltaY } = event;
-				scrollableRef.current.scrollBy( deltaX, deltaY );
+				const contentEl = contentRef.current;
+				let scrollContainer = scrollContainerCache.get( contentEl );
+				if ( ! scrollContainer ) {
+					scrollContainer = getScrollContainer( contentEl );
+					scrollContainerCache.set( contentEl, scrollContainer );
+				}
+				scrollContainer.scrollBy( deltaX, deltaY );
 			}
 			// Tell the browser that we do not call event.preventDefault
 			// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
@@ -29,7 +34,7 @@ function usePopoverScroll( scrollableRef ) {
 				node.removeEventListener( 'wheel', onWheel, options );
 			};
 		},
-		[ scrollableRef ]
+		[ contentRef ]
 	);
 }
 

diff --git a/packages/block-editor/src/components/block-tools/block-toolbar-popover.js b/packages/block-editor/src/components/block-tools/block-toolbar-popover.js
@@ -11,7 +11,7 @@ import { useShortcut } from '@wordpress/keyboard-shortcuts';
 /**
  * Internal dependencies
  */
-import BlockPopover from '../block-popover';
+import { PrivateBlockPopover } from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import useSelectedBlockToolProps from './use-selected-block-tool-props';
 import { store as blockEditorStore } from '../../store';
@@ -58,14 +58,15 @@ export default function BlockToolbarPopover( {
 
 	return (
 		! isTyping && (
-			<BlockPopover
+			<PrivateBlockPopover
 				clientId={ clientIdToPositionOver }
 				bottomClientId={ lastClientId }
 				className={ clsx( 'block-editor-block-list__block-popover', {
 					'is-insertion-point-visible': isInsertionPointVisible,
 				} ) }
 				resize={ false }
 				{ ...popoverProps }
+				__unstableContentRef={ __unstableContentRef }
 			>
 				<PrivateBlockToolbar
 					// If the toolbar is being shown because of being forced
@@ -79,7 +80,7 @@ export default function BlockToolbarPopover( {
 					} }
 					variant="toolbar"
 				/>
-			</BlockPopover>
+			</PrivateBlockPopover>
 		)
 	);
 }