Block Popover: editor canvas as boundary (#19322)

WordPress · Jan 23, 2020 · 3c58cbb · 3c58cbb
1 parent 246ee5d
commit 3c58cbb
Show file tree

Hide file tree

Showing 4 changed files with 15 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
@@ -128,11 +128,15 @@ function BlockPopover( {
 			className="block-editor-block-list__block-popover"
 			__unstableSticky={ showEmptyBlockSideInserter ? false : popoverIsSticky }
 			__unstableSlotName="block-toolbar"
+			__unstableBoundaryParent
 			// Allow subpixel positioning for the block movement animation.
 			__unstableAllowVerticalSubpixelPosition={ moverDirection !== 'horizontal' && node }
 			__unstableAllowHorizontalSubpixelPosition={ moverDirection === 'horizontal' && node }
 			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
@@ -228,6 +228,7 @@ const Popover = ( {
 	__unstableSlotName = SLOT_NAME,
 	__unstableAllowVerticalSubpixelPosition,
 	__unstableAllowHorizontalSubpixelPosition,
+	__unstableBoundaryParent,
 	/* eslint-enable no-unused-vars */
 	...contentProps
 } ) => {
@@ -395,6 +396,7 @@ const Popover = ( {
 		__unstableSticky,
 		__unstableAllowVerticalSubpixelPosition,
 		__unstableAllowHorizontalSubpixelPosition,
+		__unstableBoundaryParent,
 	] );
 
 	useFocusContentOnMount( focusOnMount, contentRef );
@@ -532,6 +534,6 @@ 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,10 +19,11 @@ 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.
  */
-export function computePopoverXAxisPosition( anchorRect, contentSize, xAxis, corner, sticky, chosenYAxis ) {
+export function computePopoverXAxisPosition( anchorRect, contentSize, xAxis, corner, sticky, chosenYAxis, boundaryElement ) {
 	const { width } = contentSize;
 	const isRTL = document.documentElement.dir === 'rtl';
 
@@ -101,6 +102,11 @@ export function computePopoverXAxisPosition( anchorRect, contentSize, xAxis, cor
 		popoverLeft = rightAlignment.popoverLeft;
 	}
 
+	if ( boundaryElement ) {
+		const boundaryRect = boundaryElement.getBoundingClientRect();
+		popoverLeft = Math.min( popoverLeft, boundaryRect.right - width );
+	}
+
 	return {
 		xAxis: chosenXAxis,
 		popoverLeft,