From 95a070f43ba62921bc0811b96bd41792a2e7a629 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 25 Aug 2022 16:04:26 +0200 Subject: [PATCH 1/4] Popover: enable autoupdating every animation frame --- packages/components/src/popover/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js index c40804e1164e23..84b03a4d5db202 100644 --- a/packages/components/src/popover/index.js +++ b/packages/components/src/popover/index.js @@ -374,7 +374,10 @@ const Popover = ( return autoUpdate( resultingReferenceRef, refs.floating.current, - update + update, + { + animationFrame: true, + } ); // 'reference' and 'refs.floating' are refs and don't need to be listed // as dependencies (see https://github.com/WordPress/gutenberg/pull/41612) From b661a491a6cb6d5007509ec8b35f7dbfb50f5b21 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 25 Aug 2022 16:06:24 +0200 Subject: [PATCH 2/4] Remove unnecessary __unobserveElement prop --- .../src/components/block-popover/index.js | 2 -- packages/components/src/popover/index.js | 14 -------------- packages/components/src/popover/stories/index.js | 1 - 3 files changed, 17 deletions(-) diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index 597f61eb949106..15be18b0a8c82e 100644 --- a/packages/block-editor/src/components/block-popover/index.js +++ b/packages/block-editor/src/components/block-popover/index.js @@ -66,8 +66,6 @@ function BlockPopover( // Render in the old slot if needed for backward compatibility, // otherwise render in place (not in the default popover slot). __unstableSlotName={ __unstablePopoverSlot || null } - // Observe movement for block animations (especially horizontal). - __unstableObserveElement={ selectedElement } __unstableForcePosition __unstableShift { ...props } diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js index 84b03a4d5db202..509ab4ec9c15bf 100644 --- a/packages/components/src/popover/index.js +++ b/packages/components/src/popover/index.js @@ -143,7 +143,6 @@ const Popover = ( expandOnMobile, onFocusOutside, __unstableSlotName = SLOT_NAME, - __unstableObserveElement, __unstableForcePosition = false, __unstableShift = false, ...contentProps @@ -384,19 +383,6 @@ const Popover = ( // eslint-disable-next-line react-hooks/exhaustive-deps }, [ anchorRef, anchorRect, getAnchorRect, update ] ); - // This is only needed for a smooth transition when moving blocks. - useLayoutEffect( () => { - if ( ! __unstableObserveElement ) { - return; - } - const observer = new window.MutationObserver( update ); - observer.observe( __unstableObserveElement, { attributes: true } ); - - return () => { - observer.disconnect(); - }; - }, [ __unstableObserveElement, update ] ); - // If the reference element is in a different ownerDocument (e.g. iFrame), // we need to manually update the floating's position as the reference's owner // document scrolls. Also update the frame offset if the view resizes. diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 7e066d77c49cff..cc9b3a8e85ed49 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -73,7 +73,6 @@ export default { options: AVAILABLE_POSITIONS, }, __unstableSlotName: { control: { type: null } }, - __unstableObserveElement: { control: { type: null } }, __unstableForcePosition: { control: { type: 'boolean' } }, __unstableShift: { control: { type: 'boolean' } }, }, From 2b91aefc730c6d61da78f55f244f3f89fb3ae2f5 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 25 Aug 2022 16:06:40 +0200 Subject: [PATCH 3/4] Remove unnecessary scroll listener on iframe --- packages/components/src/popover/index.js | 33 ++++++++++-------------- 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js index 509ab4ec9c15bf..67e7c0abc89e90 100644 --- a/packages/components/src/popover/index.js +++ b/packages/components/src/popover/index.js @@ -387,35 +387,28 @@ const Popover = ( // we need to manually update the floating's position as the reference's owner // document scrolls. Also update the frame offset if the view resizes. useLayoutEffect( () => { - if ( referenceOwnerDocument === document ) { + const referenceAndFloatingHaveSameDocument = + referenceOwnerDocument === document; + const hasFrameElement = + !! referenceOwnerDocument?.defaultView?.frameElement; + + if ( referenceAndFloatingHaveSameDocument || ! hasFrameElement ) { frameOffsetRef.current = undefined; return; } const { defaultView } = referenceOwnerDocument; - referenceOwnerDocument.addEventListener( 'scroll', update ); + const updateFrameOffset = () => { + frameOffsetRef.current = getFrameOffset( referenceOwnerDocument ); + update(); + }; + defaultView.addEventListener( 'resize', updateFrameOffset ); - let updateFrameOffset; - const hasFrameElement = - !! referenceOwnerDocument?.defaultView?.frameElement; - if ( hasFrameElement ) { - updateFrameOffset = () => { - frameOffsetRef.current = getFrameOffset( - referenceOwnerDocument - ); - update(); - }; - updateFrameOffset(); - defaultView.addEventListener( 'resize', updateFrameOffset ); - } + updateFrameOffset(); return () => { - referenceOwnerDocument.removeEventListener( 'scroll', update ); - - if ( updateFrameOffset ) { - defaultView.removeEventListener( 'resize', updateFrameOffset ); - } + defaultView.removeEventListener( 'resize', updateFrameOffset ); }; }, [ referenceOwnerDocument, update ] ); From d164ae8f7927dd176bb1429f4ec346712d132822 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 25 Aug 2022 17:23:20 +0200 Subject: [PATCH 4/4] CHANGELOG --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index b8000b2772d714..44988ddab5fd17 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fix + +- `Popover`: enable auto-updating every animation frame ([#43617](https://github.com/WordPress/gutenberg/pull/43617)). + ### Internal - Refactor `FocalPointPicker` to function component ([#39168](https://github.com/WordPress/gutenberg/pull/39168)).