Fix for other editors

WordPress · May 25, 2021 · b0479b2 · b0479b2
1 parent cfbe75f
commit b0479b2
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 26 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/utils.js b/packages/components/src/popover/utils.js
@@ -333,14 +333,15 @@ export function computePopoverPosition(
  *
  * @param {DOMRect} rect bounds of the element
  * @param {Document} ownerDocument document of the element
+ * @param {Element}  container The positioned container.
  *
  * @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
@@ -160,19 +160,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/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;