Block Popover: editor canvas as boundary (#19322)

WordPress · Feb 18, 2020 · 42c9c58 · 42c9c58
1 parent 6d565e3
commit 42c9c58
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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,