From 42c9c5816e9492c1b2063fd1291497963460a074 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <wp@iseulde.com>
Date: Tue, 14 Jan 2020 10:44:12 +0100
Subject: [PATCH] Block Popover: editor canvas as boundary (#19322)

---
 .../src/components/block-list/block-popover.js           | 4 ++++
 .../src/components/block-switcher/style.scss             | 2 +-
 packages/components/src/popover/index.js                 | 4 +++-
 packages/components/src/popover/utils.js                 | 9 ++++++++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js
index 2a70b80c2dafa..1b7b42289ed4c 100644
--- a/packages/block-editor/src/components/block-list/block-popover.js
+++ b/packages/block-editor/src/components/block-list/block-popover.js
@@ -160,6 +160,7 @@ function BlockPopover( {
 			className="block-editor-block-list__block-popover"
 			__unstableSticky={ ! showEmptyBlockSideInserter }
 			__unstableSlotName="block-toolbar"
+			__unstableBoundaryParent
 			// Allow subpixel positioning for the block movement animation.
 			__unstableAllowVerticalSubpixelPosition={
 				moverDirection !== 'horizontal' && node
@@ -169,6 +170,9 @@ function BlockPopover( {
 			}
 			onBlur={ () => setIsToolbarForced( false ) }
 			shouldAnchorIncludePadding
+			// Popover calculates the width once. Trigger a reset by remounting
+			// the component.
+			key={ shouldShowContextualToolbar }
 		>
 			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
 				<div
diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
index 3d6d81aa73f08..81563c74f3434 100644
--- a/packages/block-editor/src/components/block-switcher/style.scss
+++ b/packages/block-editor/src/components/block-switcher/style.scss
@@ -13,7 +13,7 @@
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	width: $icon-button-size;
 
-	.block-editor-blocsk-icon {
+	.block-editor-blocks-icon {
 		margin-right: auto;
 		margin-left: auto;
 	}
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index 943b1eb0d9b1f..53ba5b047dede 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -252,6 +252,7 @@ const Popover = ( {
 	__unstableAllowVerticalSubpixelPosition,
 	__unstableAllowHorizontalSubpixelPosition,
 	__unstableFixedPosition = true,
+	__unstableBoundaryParent,
 	/* eslint-enable no-unused-vars */
 	...contentProps
 } ) => {
@@ -471,6 +472,7 @@ const Popover = ( {
 		__unstableSticky,
 		__unstableAllowVerticalSubpixelPosition,
 		__unstableAllowHorizontalSubpixelPosition,
+		__unstableBoundaryParent,
 	] );
 
 	useFocusContentOnMount( focusOnMount, contentRef );
@@ -626,7 +628,7 @@ const Popover = ( {
 const PopoverContainer = Popover;
 
 PopoverContainer.Slot = ( { name = SLOT_NAME } ) => (
-	<Slot bubblesVirtually name={ name } />
+	<Slot bubblesVirtually name={ name } className="popover-slot" />
 );
 
 export default PopoverContainer;
diff --git a/packages/components/src/popover/utils.js b/packages/components/src/popover/utils.js
index a5a927a0b433e..d62d784273570 100644
--- a/packages/components/src/popover/utils.js
+++ b/packages/components/src/popover/utils.js
@@ -19,6 +19,7 @@ const HEIGHT_OFFSET = 10; // used by the arrow and a bit of empty space
  *                              scroll container edge when part of the anchor
  *                              leaves view.
  * @param {string}  chosenYAxis yAxis to be used.
+ * @param {Element} boundaryElement
  *
  * @return {Object} Popover xAxis position and constraints.
  */
@@ -28,7 +29,8 @@ export function computePopoverXAxisPosition(
 	xAxis,
 	corner,
 	sticky,
-	chosenYAxis
+	chosenYAxis,
+	boundaryElement
 ) {
 	const { width } = contentSize;
 	const isRTL = document.documentElement.dir === 'rtl';
@@ -121,6 +123,11 @@ export function computePopoverXAxisPosition(
 		popoverLeft = rightAlignment.popoverLeft;
 	}
 
+	if ( boundaryElement ) {
+		const boundaryRect = boundaryElement.getBoundingClientRect();
+		popoverLeft = Math.min( popoverLeft, boundaryRect.right - width );
+	}
+
 	return {
 		xAxis: chosenXAxis,
 		popoverLeft,