From 13360260485cd95250db9c93a5da07553dbc8839 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 8 Sep 2022 18:31:07 +0800 Subject: [PATCH] Site editor: fix padding and margin visualizer positioning (#43971) * Ensure popovers that are in an iframe with their reference element do not receive a frame offset * Fix comment * CHANGELOG * Use refs.floating to gain access to the floating owner document --- packages/components/CHANGELOG.md | 1 + packages/components/src/popover/index.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 5e0e1d9563d219..9bdfec755a5ca2 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,6 +13,7 @@ - `Popover`: enable auto-updating every animation frame ([#43617](https://github.com/WordPress/gutenberg/pull/43617)). - `Popover`: improve the component's performance and reactivity to prop changes by reworking its internals ([#43335](https://github.com/WordPress/gutenberg/pull/43335)). - `NavigatorScreen`: updated to satisfy `react/exhaustive-deps` eslint rule ([#43876](https://github.com/WordPress/gutenberg/pull/43876)) +- `Popover`: fix positioning when reference and floating elements are both within an iframe ([#43971](https://github.com/WordPress/gutenberg/pull/43971)) ### Enhancements diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx index a566e259a84f52..905943fc7cba27 100644 --- a/packages/components/src/popover/index.tsx +++ b/packages/components/src/popover/index.tsx @@ -416,10 +416,12 @@ const UnforwardedPopover = ( // document scrolls. Also update the frame offset if the view resizes. useLayoutEffect( () => { if ( - // reference and floating are in the same document + // Reference and root documents are the same. referenceOwnerDocument === document || - // the reference's document has a view (i.e. window) - // and a frame element (ie. it's an iframe) + // Reference and floating are in the same document. + referenceOwnerDocument === refs?.floating?.current?.ownerDocument || + // The reference's document has no view (i.e. window) + // or frame element (ie. it's not an iframe). ! referenceOwnerDocument?.defaultView?.frameElement ) { frameOffsetRef.current = undefined;