Block toolbar: account for scrollable blocks that affect the position…

… of the block toolbar (WordPress#66188)

The rect bounds of blocvk child elements, specifically the x and y values, change when the element is scrolled. This change attempts to correct the overflow so the scrollable children do not influence the x,y values of the block toolbar popover.

Co-authored-by: ramonjd <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: kevin940726 <[email protected]>

packages/block-editor/src/utils/dom.js

@@ -118,6 +118,22 @@ function isElementVisible( element ) {
 	return true;
 }
 
+/**
+ * Checks if the element is scrollable.
+ *
+ * @param {Element} element Element.
+ * @return {boolean} True if the element is scrollable.
+ */
+function isScrollable( element ) {
+	const style = window.getComputedStyle( element );
+	return (
+		style.overflowX === 'auto' ||
+		style.overflowX === 'scroll' ||
+		style.overflowY === 'auto' ||
+		style.overflowY === 'scroll'
+	);
+}
+
 /**
  * Returns the rect of the element including all visible nested elements.
  *
@@ -136,19 +152,23 @@ function isElementVisible( element ) {
  */
 export function getVisibleElementBounds( element ) {
 	const viewport = element.ownerDocument.defaultView;
+
 	if ( ! viewport ) {
 		return new window.DOMRectReadOnly();
 	}
 
 	let bounds = element.getBoundingClientRect();
-
 	const stack = [ element ];
 	let currentElement;
 
 	while ( ( currentElement = stack.pop() ) ) {
 		for ( const child of currentElement.children ) {
 			if ( isElementVisible( child ) ) {
-				const childBounds = child.getBoundingClientRect();
+				let childBounds = child.getBoundingClientRect();
+				// If the parent is scrollable, use parent's scrollable bounds.
+				if ( isScrollable( currentElement ) ) {
+					childBounds = currentElement.getBoundingClientRect();
+				}
 				bounds = rectUnion( bounds, childBounds );
 				stack.push( child );
 			}