Allow popover to render inline

WordPress · Nov 10, 2022 · 5e5f924 · 5e5f924
1 parent 305d3ce
commit 5e5f924
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/block-alignment-visualizer/index.js b/packages/block-editor/src/components/block-alignment-visualizer/index.js
@@ -211,7 +211,7 @@ export default function BlockAlignmentVisualizer( {
 			focusOnMount={ false }
 			flip={ false }
 			resize={ false }
-			__unstableSlotName=""
+			__unstableInline
 		>
 			<Iframe
 				style={ coverElementStyle }

diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
@@ -71,7 +71,7 @@ import { limitShift as customLimitShift } from './limit-shift';
  *
  * @type {string}
  */
-const DEFAULT_SLOT_NAME = 'Popover';
+const SLOT_NAME = 'Popover';
 
 // An SVG displaying a triangle facing down, filled with a solid
 // color and bordered in such a way to create an arrow-like effect.
@@ -176,7 +176,8 @@ const UnforwardedPopover = (
 		anchor,
 		expandOnMobile,
 		onFocusOutside,
-		__unstableSlotName,
+		__unstableSlotName = SLOT_NAME,
+		__unstableInline = false,
 		flip = true,
 		resize = true,
 		shift = false,
@@ -321,9 +322,7 @@ const UnforwardedPopover = (
 	].filter(
 		( m: Middleware | undefined ): m is Middleware => m !== undefined
 	);
-
-	const contextSlotName = useContext( slotNameContext );
-	const slotName = __unstableSlotName ?? contextSlotName ?? DEFAULT_SLOT_NAME;
+	const slotName = useContext( slotNameContext ) || __unstableSlotName;
 	const slot = useSlot( slotName );
 
 	let onDialogClose;
@@ -531,12 +530,14 @@ const UnforwardedPopover = (
 		</AnimatedWrapper>
 	);
 
-	if ( slot.ref ) {
-		content = <Fill name={ slotName }>{ content }</Fill>;
-	}
+	if ( ! __unstableInline ) {
+		if ( slot.ref ) {
+			content = <Fill name={ slotName }>{ content }</Fill>;
+		}
 
-	if ( anchorRef || anchorRect || anchor ) {
-		return content;
+		if ( anchorRef || anchorRect || anchor ) {
+			return content;
+		}
 	}
 
 	return <span ref={ anchorRefFallback }>{ content }</span>;
@@ -568,7 +569,7 @@ const UnforwardedPopover = (
 export const Popover = forwardRef( UnforwardedPopover );
 
 function PopoverSlot(
-	{ name = DEFAULT_SLOT_NAME }: { name?: string },
+	{ name = SLOT_NAME }: { name?: string },
 	ref: ForwardedRef< any >
 ) {
 	return (

diff --git a/packages/components/src/popover/types.ts b/packages/components/src/popover/types.ts
@@ -34,6 +34,12 @@ export type PopoverProps = {
 	 * @default 'Popover'
 	 */
 	__unstableSlotName?: string;
+	/**
+	 * Should the popover render inline (not in a slot).
+	 *
+	 * @default false
+	 */
+	__unstableInline?: boolean;
 	/**
 	 * The element that should be used by the popover as its anchor. It can either
 	 * be an `Element` or, alternatively, a `VirtualElement` — ie. an object with