From 7b8728c6bee4e5486f51a5d1c652b1488d43da55 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Mon, 17 Jun 2024 16:15:35 +1000 Subject: [PATCH 01/10] Position BlockToolbar below all of the selected block's descendants --- .../src/components/block-popover/index.js | 35 ++----- .../block-tools/block-toolbar-popover.js | 2 +- .../use-block-toolbar-popover-props.js | 3 +- packages/block-editor/src/utils/dom.js | 98 +++++++++++++++++++ 4 files changed, 108 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index 2413601a590e2e..fba35e63184f16 100644 --- a/packages/block-editor/src/components/block-popover/index.js +++ b/packages/block-editor/src/components/block-popover/index.js @@ -20,6 +20,7 @@ import { */ import { useBlockElement } from '../block-list/use-block-props/use-block-refs'; import usePopoverScroll from './use-popover-scroll'; +import { rectUnion, getVisibleBoundingRect } from '../../utils/dom'; const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER; @@ -87,34 +88,12 @@ function BlockPopover( return { getBoundingClientRect() { - const selectedBCR = selectedElement.getBoundingClientRect(); - const lastSelectedBCR = - lastSelectedElement?.getBoundingClientRect(); - - // Get the biggest rectangle that encompasses completely the currently - // selected element and the last selected element: - // - for top/left coordinates, use the smaller numbers - // - for the bottom/right coordinates, use the largest numbers - const left = Math.min( - selectedBCR.left, - lastSelectedBCR?.left ?? Infinity - ); - const top = Math.min( - selectedBCR.top, - lastSelectedBCR?.top ?? Infinity - ); - const right = Math.max( - selectedBCR.right, - lastSelectedBCR.right ?? -Infinity - ); - const bottom = Math.max( - selectedBCR.bottom, - lastSelectedBCR.bottom ?? -Infinity - ); - const width = right - left; - const height = bottom - top; - - return new window.DOMRect( left, top, width, height ); + return lastSelectedElement + ? rectUnion( + getVisibleBoundingRect( selectedElement ), + getVisibleBoundingRect( lastSelectedElement ) + ) + : getVisibleBoundingRect( selectedElement ); }, contextElement: selectedElement, }; 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 8428222268408a..cc3bcf6e45d5b7 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 @@ -49,7 +49,7 @@ export default function BlockToolbarPopover( { const popoverProps = useBlockToolbarPopoverProps( { contentElement: __unstableContentRef?.current, - clientId, + clientId: capturingClientId || clientId, } ); return ( diff --git a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js index 0ca0f6e5a43dda..1fe13235b9fcdd 100644 --- a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js +++ b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js @@ -17,6 +17,7 @@ import { import { store as blockEditorStore } from '../../store'; import { useBlockElement } from '../block-list/use-block-props/use-block-refs'; import { hasStickyOrFixedPositionValue } from '../../hooks/position'; +import { getVisibleBoundingRect } from '../../utils/dom'; const COMMON_PROPS = { placement: 'top-start', @@ -67,7 +68,7 @@ function getProps( // Get how far the content area has been scrolled. const scrollTop = scrollContainer?.scrollTop || 0; - const blockRect = selectedBlockElement.getBoundingClientRect(); + const blockRect = getVisibleBoundingRect( selectedBlockElement ); const contentRect = contentElement.getBoundingClientRect(); // Get the vertical position of top of the visible content area. diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index 6af35aff730155..df6ab797c98130 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -57,3 +57,101 @@ export function getBlockClientId( node ) { return blockNode.id.slice( 'block-'.length ); } + +/** + * Returns the union of two DOMRect objects. + * + * @param {DOMRect} rect1 First rectangle. + * @param {DOMRect} rect2 Second rectangle. + * @return {DOMRect} Union of the two rectangles. + */ +export function rectUnion( rect1, rect2 ) { + const left = Math.min( rect1.left, rect2.left ); + const top = Math.min( rect1.top, rect2.top ); + const right = Math.max( rect1.right, rect2.right ); + const bottom = Math.max( rect1.bottom, rect2.bottom ); + return new window.DOMRect( left, top, right - left, bottom - top ); +} + +/** + * Returns the intersection of two DOMRect objects. + * + * @param {DOMRect} rect1 First rectangle. + * @param {DOMRect} rect2 Second rectangle. + * @return {DOMRect} Intersection of the two rectangles. + */ +function rectIntersect( rect1, rect2 ) { + const left = Math.max( rect1.left, rect2.left ); + const top = Math.max( rect1.top, rect2.top ); + const right = Math.min( rect1.right, rect2.right ); + const bottom = Math.min( rect1.bottom, rect2.bottom ); + return new window.DOMRect( left, top, right - left, bottom - top ); +} + +/** + * Returns whether an element is visible. + * + * @param {Element} element Element. + * @return {boolean} Whether the element is visible. + */ +function isElementVisible( element ) { + const style = window.getComputedStyle( element ); + if ( + style.display === 'none' || + style.visibility === 'hidden' || + style.opacity === '0' + ) { + return false; + } + + const bounds = element.getBoundingClientRect(); + return ( + bounds.width > 0 && + bounds.height > 0 && + bounds.right >= 0 && + bounds.bottom >= 0 && + bounds.left <= window.innerWidth && + bounds.top <= window.innerHeight + ); +} + +/** + * Returns the rect of the element that is visible in the viewport. + * + * Visible nested elements, including elements that overflow the parent, are + * taken into account. The returned rect is clipped to the viewport. + * + * This function is useful for calculating the visible area of a block that + * contains nested elements that overflow the block, e.g. the Navigation block, + * which can contain overflowing Submenu blocks. + * + * The returned rect is suitable for passing to the Popover component to + * position the popover relative to the visible area of the block. + * + * @param {Element} element Element. + * @return {DOMRect} Bounding client rect. + */ +export function getVisibleBoundingRect( element ) { + 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(); + bounds = rectUnion( bounds, childBounds ); + stack.push( child ); + } + } + } + + const viewportRect = new window.DOMRect( + 0, + 0, + window.innerWidth, + window.innerHeight + ); + return rectIntersect( bounds, viewportRect ); +} From 1c0cc4ea55ac02b27442f0490eb974dafada8ffb Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 21 Jun 2024 16:42:41 +1000 Subject: [PATCH 02/10] Fix scrolling --- packages/block-editor/src/utils/dom.js | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index df6ab797c98130..fbc0c122f9d628 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -105,14 +105,22 @@ function isElementVisible( element ) { } const bounds = element.getBoundingClientRect(); - return ( - bounds.width > 0 && - bounds.height > 0 && - bounds.right >= 0 && - bounds.bottom >= 0 && - bounds.left <= window.innerWidth && - bounds.top <= window.innerHeight - ); + + if ( bounds.width === 0 || bounds.height === 0 ) { + return false; + } + + // wp-components visually hides elements by setting their width and + // height to 1px and positioning them off-screen. + if ( + bounds.width === 1 && + bounds.height === 1 && + ( bounds.left < 0 || bounds.top < 0 ) + ) { + return false; + } + + return true; } /** From f014ef23657519ec14aca95b31c9b26cdf3ceebc Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 21 Jun 2024 16:46:21 +1000 Subject: [PATCH 03/10] Don't use window global --- packages/block-editor/src/utils/dom.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index fbc0c122f9d628..97b040bf555012 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -95,7 +95,12 @@ function rectIntersect( rect1, rect2 ) { * @return {boolean} Whether the element is visible. */ function isElementVisible( element ) { - const style = window.getComputedStyle( element ); + const viewport = element.ownerDocument.defaultView; + if ( ! viewport ) { + return false; + } + + const style = viewport.getComputedStyle( element ); if ( style.display === 'none' || style.visibility === 'hidden' || @@ -140,6 +145,11 @@ function isElementVisible( element ) { * @return {DOMRect} Bounding client rect. */ export function getVisibleBoundingRect( element ) { + const viewport = element.ownerDocument.defaultView; + if ( ! viewport ) { + return new window.DOMRect(); + } + let bounds = element.getBoundingClientRect(); const stack = [ element ]; @@ -158,8 +168,8 @@ export function getVisibleBoundingRect( element ) { const viewportRect = new window.DOMRect( 0, 0, - window.innerWidth, - window.innerHeight + viewport.innerWidth, + viewport.innerHeight ); return rectIntersect( bounds, viewportRect ); } From 70fe5b10bec5532591d7f8d55023afbd2f71a321 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 21 Jun 2024 16:50:20 +1000 Subject: [PATCH 04/10] Explain what capturingClientId is --- .../src/components/block-tools/block-toolbar-popover.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 cc3bcf6e45d5b7..c6378130b7da42 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 @@ -47,15 +47,19 @@ export default function BlockToolbarPopover( { isToolbarForcedRef.current = false; } ); + // If the block has a parent with __experimentalCaptureToolbars enabled, + // the toolbar should be positioned over the topmost capturing parent. + const clientIdToPositionOver = capturingClientId || clientId; + const popoverProps = useBlockToolbarPopoverProps( { contentElement: __unstableContentRef?.current, - clientId: capturingClientId || clientId, + clientId: clientIdToPositionOver, } ); return ( ! isTyping && ( Date: Mon, 19 Aug 2024 14:21:29 +1000 Subject: [PATCH 05/10] No need to clip bounds to viewport --- .../src/components/block-popover/index.js | 8 ++--- .../use-block-toolbar-popover-props.js | 4 +-- packages/block-editor/src/utils/dom.js | 35 ++++--------------- 3 files changed, 13 insertions(+), 34 deletions(-) diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index fba35e63184f16..47022e336e4869 100644 --- a/packages/block-editor/src/components/block-popover/index.js +++ b/packages/block-editor/src/components/block-popover/index.js @@ -20,7 +20,7 @@ import { */ import { useBlockElement } from '../block-list/use-block-props/use-block-refs'; import usePopoverScroll from './use-popover-scroll'; -import { rectUnion, getVisibleBoundingRect } from '../../utils/dom'; +import { rectUnion, getVisibleElementBounds } from '../../utils/dom'; const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER; @@ -90,10 +90,10 @@ function BlockPopover( getBoundingClientRect() { return lastSelectedElement ? rectUnion( - getVisibleBoundingRect( selectedElement ), - getVisibleBoundingRect( lastSelectedElement ) + getVisibleElementBounds( selectedElement ), + getVisibleElementBounds( lastSelectedElement ) ) - : getVisibleBoundingRect( selectedElement ); + : getVisibleElementBounds( selectedElement ); }, contextElement: selectedElement, }; diff --git a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js index 1fe13235b9fcdd..6d64f5a5882cb8 100644 --- a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js +++ b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js @@ -17,7 +17,7 @@ import { import { store as blockEditorStore } from '../../store'; import { useBlockElement } from '../block-list/use-block-props/use-block-refs'; import { hasStickyOrFixedPositionValue } from '../../hooks/position'; -import { getVisibleBoundingRect } from '../../utils/dom'; +import { getVisibleElementBounds } from '../../utils/dom'; const COMMON_PROPS = { placement: 'top-start', @@ -68,7 +68,7 @@ function getProps( // Get how far the content area has been scrolled. const scrollTop = scrollContainer?.scrollTop || 0; - const blockRect = getVisibleBoundingRect( selectedBlockElement ); + const blockRect = getVisibleElementBounds( selectedBlockElement ); const contentRect = contentElement.getBoundingClientRect(); // Get the vertical position of top of the visible content area. diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index 97b040bf555012..280d13aee6310d 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -73,21 +73,6 @@ export function rectUnion( rect1, rect2 ) { return new window.DOMRect( left, top, right - left, bottom - top ); } -/** - * Returns the intersection of two DOMRect objects. - * - * @param {DOMRect} rect1 First rectangle. - * @param {DOMRect} rect2 Second rectangle. - * @return {DOMRect} Intersection of the two rectangles. - */ -function rectIntersect( rect1, rect2 ) { - const left = Math.max( rect1.left, rect2.left ); - const top = Math.max( rect1.top, rect2.top ); - const right = Math.min( rect1.right, rect2.right ); - const bottom = Math.min( rect1.bottom, rect2.bottom ); - return new window.DOMRect( left, top, right - left, bottom - top ); -} - /** * Returns whether an element is visible. * @@ -129,22 +114,22 @@ function isElementVisible( element ) { } /** - * Returns the rect of the element that is visible in the viewport. + * Returns the rect of the element including all visible nested elements. * * Visible nested elements, including elements that overflow the parent, are - * taken into account. The returned rect is clipped to the viewport. + * taken into account. * * This function is useful for calculating the visible area of a block that * contains nested elements that overflow the block, e.g. the Navigation block, * which can contain overflowing Submenu blocks. * - * The returned rect is suitable for passing to the Popover component to - * position the popover relative to the visible area of the block. + * The returned rect represents the full extent of the element and its visible + * children, which may extend beyond the viewport. * * @param {Element} element Element. - * @return {DOMRect} Bounding client rect. + * @return {DOMRect} Bounding client rect of the element and its visible children. */ -export function getVisibleBoundingRect( element ) { +export function getVisibleElementBounds( element ) { const viewport = element.ownerDocument.defaultView; if ( ! viewport ) { return new window.DOMRect(); @@ -165,11 +150,5 @@ export function getVisibleBoundingRect( element ) { } } - const viewportRect = new window.DOMRect( - 0, - 0, - viewport.innerWidth, - viewport.innerHeight - ); - return rectIntersect( bounds, viewportRect ); + return bounds; } From 3ecc1c99fcde481f6e81b558dde787a2d6ffe2ba Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Tue, 20 Aug 2024 15:25:09 +1000 Subject: [PATCH 06/10] Use explicit check for VisuallyHidden --- packages/block-editor/src/utils/dom.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index 280d13aee6310d..eef322959a5c6d 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -85,27 +85,21 @@ function isElementVisible( element ) { return false; } - const style = viewport.getComputedStyle( element ); - if ( - style.display === 'none' || - style.visibility === 'hidden' || - style.opacity === '0' - ) { + // Check for component. + if ( element.classList.contains( 'components-visually-hidden' ) ) { return false; } const bounds = element.getBoundingClientRect(); - if ( bounds.width === 0 || bounds.height === 0 ) { return false; } - // wp-components visually hides elements by setting their width and - // height to 1px and positioning them off-screen. + const style = viewport.getComputedStyle( element ); if ( - bounds.width === 1 && - bounds.height === 1 && - ( bounds.left < 0 || bounds.top < 0 ) + style.display === 'none' || + style.visibility === 'hidden' || + style.opacity === '0' ) { return false; } From d2d2841837ca481c8cce8f4b8a76d9145bee412e Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 22 Aug 2024 14:43:01 +1000 Subject: [PATCH 07/10] To calculate visible bounds using rectUnion, take into account the outer limits of the container in which an element is supposed to be "visible" For example, if an element is positioned -10px to the left of the window x value (0), we should discount the negative overhang because it's not visible and therefore to be counted in the visible calculations. Updated comments --- packages/block-editor/src/utils/dom.js | 58 ++++++++++++++++++++++---- 1 file changed, 49 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index eef322959a5c6d..35bc4f41303f46 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -58,19 +58,53 @@ export function getBlockClientId( node ) { return blockNode.id.slice( 'block-'.length ); } +/* + * Cache for rectUnion() return values. + * When popovers are present on the canvas, + * this calculation function is called + * multiple times with the same values. + */ +const rectUnionCache = new Map(); /** - * Returns the union of two DOMRect objects. + * Calculates the union of two rectangles, and optionally constrains this union within a containerRect's + * left and right values. + * The function returns a new DOMRect object representing this union. * - * @param {DOMRect} rect1 First rectangle. - * @param {DOMRect} rect2 Second rectangle. + * @param {DOMRect} rect1 First rectangle. + * @param {DOMRect} rect2 Second rectangle. + * @param {DOMRectReadOnly?} containerRect An optional container rectangle. The union will be clipped to this rectangle. * @return {DOMRect} Union of the two rectangles. */ -export function rectUnion( rect1, rect2 ) { - const left = Math.min( rect1.left, rect2.left ); - const top = Math.min( rect1.top, rect2.top ); - const right = Math.max( rect1.right, rect2.right ); +export function rectUnion( rect1, rect2, containerRect ) { + const cacheKey = JSON.stringify( { rect1, rect2, containerRect } ); + + if ( rectUnionCache.has( cacheKey ) ) { + return rectUnionCache.get( cacheKey ); + } + + let left = Math.min( rect1.left, rect2.left ); + let right = Math.max( rect1.right, rect2.right ); const bottom = Math.max( rect1.bottom, rect2.bottom ); - return new window.DOMRect( left, top, right - left, bottom - top ); + const top = Math.min( rect1.top, rect2.top ); + + /* + * To calculate visible bounds using rectUnion, take into account the outer + * horizontal limits of the container in which an element is supposed to be "visible". + * For example, if an element is positioned -10px to the left of the window x value (0), + * this function discounts the negative overhang because it's not visible and + * therefore to be counted in the visible calculations. + * Top and bottom values are not accounted for to accommodate vertical scroll. + */ + if ( containerRect ) { + left = Math.max( left, containerRect.left ); + right = Math.min( right, containerRect.right ); + } + + const result = new window.DOMRect( left, top, right - left, bottom - top ); + + rectUnionCache.set( cacheKey, result ); + + return result; } /** @@ -130,6 +164,12 @@ export function getVisibleElementBounds( element ) { } let bounds = element.getBoundingClientRect(); + const viewportRect = new window.DOMRectReadOnly( + 0, + 0, + viewport.innerWidth, + viewport.innerHeight + ); const stack = [ element ]; let currentElement; @@ -138,7 +178,7 @@ export function getVisibleElementBounds( element ) { for ( const child of currentElement.children ) { if ( isElementVisible( child ) ) { const childBounds = child.getBoundingClientRect(); - bounds = rectUnion( bounds, childBounds ); + bounds = rectUnion( bounds, childBounds, viewportRect ); stack.push( child ); } } From 06b18667ac8d963e35ec998906667c4cc3763893 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 22 Aug 2024 15:28:38 +1000 Subject: [PATCH 08/10] grammar in the comment --- packages/block-editor/src/utils/dom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index 35bc4f41303f46..3ca634550c10c5 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -92,7 +92,7 @@ export function rectUnion( rect1, rect2, containerRect ) { * horizontal limits of the container in which an element is supposed to be "visible". * For example, if an element is positioned -10px to the left of the window x value (0), * this function discounts the negative overhang because it's not visible and - * therefore to be counted in the visible calculations. + * therefore not to be counted in the visibility calculations. * Top and bottom values are not accounted for to accommodate vertical scroll. */ if ( containerRect ) { From f0d46010dd10b74d8239b3e8b95a3d2f36f8b945 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 23 Aug 2024 12:04:05 +1000 Subject: [PATCH 09/10] Remove caching optimization. Better for a follow up if there are concerns. --- packages/block-editor/src/utils/dom.js | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index 3ca634550c10c5..78d235000e33d3 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -58,13 +58,6 @@ export function getBlockClientId( node ) { return blockNode.id.slice( 'block-'.length ); } -/* - * Cache for rectUnion() return values. - * When popovers are present on the canvas, - * this calculation function is called - * multiple times with the same values. - */ -const rectUnionCache = new Map(); /** * Calculates the union of two rectangles, and optionally constrains this union within a containerRect's * left and right values. @@ -76,12 +69,6 @@ const rectUnionCache = new Map(); * @return {DOMRect} Union of the two rectangles. */ export function rectUnion( rect1, rect2, containerRect ) { - const cacheKey = JSON.stringify( { rect1, rect2, containerRect } ); - - if ( rectUnionCache.has( cacheKey ) ) { - return rectUnionCache.get( cacheKey ); - } - let left = Math.min( rect1.left, rect2.left ); let right = Math.max( rect1.right, rect2.right ); const bottom = Math.max( rect1.bottom, rect2.bottom ); @@ -100,11 +87,7 @@ export function rectUnion( rect1, rect2, containerRect ) { right = Math.min( right, containerRect.right ); } - const result = new window.DOMRect( left, top, right - left, bottom - top ); - - rectUnionCache.set( cacheKey, result ); - - return result; + return new window.DOMRect( left, top, right - left, bottom - top ); } /** From 675b3a686ab524c40a86bcd33167a9ce3c1e50eb Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 23 Aug 2024 12:22:56 +1000 Subject: [PATCH 10/10] switch to checkVisibility DOM method --- packages/block-editor/src/utils/dom.js | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index 78d235000e33d3..e41ade344e49d8 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -112,16 +112,11 @@ function isElementVisible( element ) { return false; } - const style = viewport.getComputedStyle( element ); - if ( - style.display === 'none' || - style.visibility === 'hidden' || - style.opacity === '0' - ) { - return false; - } - - return true; + return element.checkVisibility( { + opacityProperty: true, + contentVisibilityAuto: true, + visibilityProperty: true, + } ); } /**