Widgets editor: fix block toolbar position after scroll (#32212)

* Widgets editor: fix block toolbar position after scroll * Fix for other editors * Fix unit test
WordPress · May 31, 2021 · 65ce7b4 · 65ce7b4
1 parent 063b032
commit 65ce7b4
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 44 deletions.
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -47,7 +47,8 @@ function computeAnchorRect(
 	anchorRect,
 	getAnchorRect,
 	anchorRef = false,
-	shouldAnchorIncludePadding
+	shouldAnchorIncludePadding,
+	container
 ) {
 	if ( anchorRect ) {
 		return anchorRect;
@@ -61,7 +62,8 @@ function computeAnchorRect(
 		const rect = getAnchorRect( anchorRefFallback.current );
 		return offsetIframe(
 			rect,
-			rect.ownerDocument || anchorRefFallback.current.ownerDocument
+			rect.ownerDocument || anchorRefFallback.current.ownerDocument,
+			container
 		);
 	}
 
@@ -81,7 +83,8 @@ function computeAnchorRect(
 		if ( typeof anchorRef?.cloneRange === 'function' ) {
 			return offsetIframe(
 				getRectangleFromRange( anchorRef ),
-				anchorRef.endContainer.ownerDocument
+				anchorRef.endContainer.ownerDocument,
+				container
 			);
 		}
 
@@ -91,7 +94,8 @@ function computeAnchorRect(
 		if ( typeof anchorRef?.getBoundingClientRect === 'function' ) {
 			const rect = offsetIframe(
 				anchorRef.getBoundingClientRect(),
-				anchorRef.ownerDocument
+				anchorRef.ownerDocument,
+				container
 			);
 
 			if ( shouldAnchorIncludePadding ) {
@@ -111,7 +115,8 @@ function computeAnchorRect(
 				topRect.width,
 				bottomRect.bottom - topRect.top
 			),
-			top.ownerDocument
+			top.ownerDocument,
+			container
 		);
 
 		if ( shouldAnchorIncludePadding ) {
@@ -294,7 +299,8 @@ const Popover = (
 				anchorRect,
 				getAnchorRect,
 				anchorRef,
-				shouldAnchorIncludePadding
+				shouldAnchorIncludePadding,
+				containerRef.current
 			);
 
 			if ( ! anchor ) {

diff --git a/packages/components/src/popover/test/utils.js b/packages/components/src/popover/test/utils.js
@@ -296,7 +296,7 @@ describe( 'offsetIframe', () => {
 		} ) );
 
 		const rect = child.getBoundingClientRect();
-		const offsettedRect = offsetIframe( rect, child.ownerDocument );
+		const offsettedRect = offsetIframe( rect, child.ownerDocument, parent );
 
 		expect( offsettedRect.left ).toBe( iframeLeft + childLeft );
 		expect( offsettedRect.top ).toBe( iframeTop + childTop );

diff --git a/packages/components/src/popover/utils.js b/packages/components/src/popover/utils.js
@@ -328,19 +328,22 @@ export function computePopoverPosition(
 }
 
 /**
- * Offsets the given rect by the position of the iframe that contains the element.
- * If the owner document is not in an iframe then it returns with the original rect.
+ * Offsets the given rect by the position of the iframe that contains the
+ * element. If the owner document is not in an iframe then it returns with the
+ * original rect. If the popover container document and the anchor document are
+ * the same, the original rect will also be returned.
  *
- * @param {DOMRect} rect bounds of the element
+ * @param {DOMRect}  rect          bounds of the element
  * @param {Document} ownerDocument document of the element
+ * @param {Element}  container     The popover container to position.
  *
  * @return {DOMRect} offsetted bounds
  */
-export function offsetIframe( rect, ownerDocument ) {
+export function offsetIframe( rect, ownerDocument, container ) {
 	const { defaultView } = ownerDocument;
 	const { frameElement } = defaultView;
 
-	if ( ! frameElement ) {
+	if ( ! frameElement || ownerDocument === container.ownerDocument ) {
 		return rect;
 	}
 

diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
@@ -163,19 +163,19 @@ export default function Layout( { blockEditorSettings } ) {
 											/>
 										) }
 									{ isBlockEditorReady && (
-										<BlockTools>
-											<div
-												className="edit-navigation-layout__content-area"
-												ref={ contentAreaRef }
-											>
+										<div
+											className="edit-navigation-layout__content-area"
+											ref={ contentAreaRef }
+										>
+											<BlockTools>
 												<Editor
 													isPending={
 														! hasLoadedMenus
 													}
 													blocks={ blocks }
 												/>
-											</div>
-										</BlockTools>
+											</BlockTools>
+										</div>
 									) }
 								</>
 							}

diff --git a/packages/edit-navigation/src/components/layout/style.scss b/packages/edit-navigation/src/components/layout/style.scss
@@ -31,6 +31,9 @@
 	}
 
 	.edit-navigation-layout__content-area {
+		// Reference element for the block popover position.
+		position: relative;
+
 		// The 10px match that of similar settings pages.
 		padding: $grid-unit-15 10px 10px 10px;
 

diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
@@ -21,20 +21,22 @@ export default function WidgetAreasBlockEditorContent( {
 	blockEditorSettings,
 } ) {
 	return (
-		<BlockTools>
-			<KeyboardShortcuts />
-			<BlockEditorKeyboardShortcuts />
+		<div className="edit-widgets-block-editor">
 			<Notices />
-			<div className="edit-widgets-block-editor editor-styles-wrapper">
-				<EditorStyles styles={ blockEditorSettings.styles } />
-				<BlockSelectionClearer>
-					<WritingFlow>
-						<ObserveTyping>
-							<BlockList className="edit-widgets-main-block-list" />
-						</ObserveTyping>
-					</WritingFlow>
-				</BlockSelectionClearer>
-			</div>
-		</BlockTools>
+			<BlockTools>
+				<KeyboardShortcuts />
+				<BlockEditorKeyboardShortcuts />
+				<div className="editor-styles-wrapper">
+					<EditorStyles styles={ blockEditorSettings.styles } />
+					<BlockSelectionClearer>
+						<WritingFlow>
+							<ObserveTyping>
+								<BlockList className="edit-widgets-main-block-list" />
+							</ObserveTyping>
+						</WritingFlow>
+					</BlockSelectionClearer>
+				</div>
+			</BlockTools>
+		</div>
 	);
 }
diff --git a/storybook/stories/playground/index.js b/storybook/stories/playground/index.js
@@ -38,17 +38,19 @@ function App() {
 					<div className="playground__sidebar">
 						<BlockInspector />
 					</div>
-					<BlockTools>
-						<div className="editor-styles-wrapper">
-							<BlockEditorKeyboardShortcuts.Register />
-							<BlockEditorKeyboardShortcuts />
-							<WritingFlow>
-								<ObserveTyping>
-									<BlockList />
-								</ObserveTyping>
-							</WritingFlow>
-						</div>
-					</BlockTools>
+					<div className="playground__content">
+						<BlockTools>
+							<div className="editor-styles-wrapper">
+								<BlockEditorKeyboardShortcuts.Register />
+								<BlockEditorKeyboardShortcuts />
+								<WritingFlow>
+									<ObserveTyping>
+										<BlockList />
+									</ObserveTyping>
+								</WritingFlow>
+							</div>
+						</BlockTools>
+					</div>
 					<Popover.Slot />
 				</BlockEditorProvider>
 			</SlotFillProvider>

diff --git a/storybook/stories/playground/style.scss b/storybook/stories/playground/style.scss
@@ -24,6 +24,11 @@
 	}
 }
 
+.playground__content {
+	// Reference element for the block popover position.
+	position: relative;
+}
+
 .playground__sidebar {
 	position: fixed;
 	top: 0;