From 80348e701d96ca9f6a3b89010dfb0ee6f16d03fb Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Thu, 30 Jan 2025 04:59:08 +0100
Subject: [PATCH] Block popover: fix scrolling over (#68075)

Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 .../block-popover/use-popover-scroll.js       | 21 ++++++++++++-------
 .../block-tools/block-toolbar-popover.js      |  7 ++++---
 2 files changed, 17 insertions(+), 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
index 8aeb768e302f6..97bc4c5b29937 100644
--- 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
index c6378130b7da4..0724928cfeacb 100644
--- 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,7 +58,7 @@ export default function BlockToolbarPopover( {
 
 	return (
 		! isTyping && (
-			<BlockPopover
+			<PrivateBlockPopover
 				clientId={ clientIdToPositionOver }
 				bottomClientId={ lastClientId }
 				className={ clsx( 'block-editor-block-list__block-popover', {
@@ -66,6 +66,7 @@ export default function BlockToolbarPopover( {
 				} ) }
 				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>
 		)
 	);
 }