Display wide widgets as popovers in Customizer (#31736)

packages/block-library/src/legacy-widget/edit/form.js

@@ -1,11 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
 import { useRef, useEffect } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { __ } from '@wordpress/i18n';
-
+import { Popover } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -17,11 +22,14 @@ export default function Form( {
 	id,
 	idBase,
 	instance,
+	isWide,
 	onChangeInstance,
 	onChangeHasPreview,
 } ) {
 	const ref = useRef();
 
+	const isMediumLargeViewport = useViewportMatch( 'small' );
+
 	// We only want to remount the control when the instance changes
 	// *externally*. For example, if the user performs an undo. To do this, we
 	// keep track of changes made to instance by the control itself and then
@@ -68,7 +76,41 @@ export default function Form( {
 
 			control.destroy();
 		};
-	}, [ id, idBase, instance, onChangeInstance, onChangeHasPreview ] );
+	}, [
+		id,
+		idBase,
+		instance,
+		onChangeInstance,
+		onChangeHasPreview,
+		isMediumLargeViewport,
+	] );
+
+	if ( isWide && isMediumLargeViewport ) {
+		return (
+			<div
+				className={ classnames( {
+					'wp-block-legacy-widget__container': isVisible,
+				} ) }
+			>
+				{ isVisible && (
+					<h3 className="wp-block-legacy-widget__edit-form-title">
+						{ title }
+					</h3>
+				) }
+				<Popover
+					focusOnMount={ false }
+					position="middle right"
+					__unstableForceXAlignment
+				>
+					<div
+						ref={ ref }
+						className="wp-block-legacy-widget__edit-form"
+						hidden={ ! isVisible }
+					></div>
+				</Popover>
+			</div>
+		);
+	}
 
 	return (
 		<div

packages/block-library/src/legacy-widget/edit/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -27,8 +32,16 @@ import ConvertToBlocksButton from './convert-to-blocks-button';
 
 export default function Edit( props ) {
 	const { id, idBase } = props.attributes;
+	const { isWide = false } = props;
+
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			'is-wide-widget': isWide,
+		} ),
+	} );
+
 	return (
-		<div { ...useBlockProps() }>
+		<div { ...blockProps }>
 			{ ! id && ! idBase ? (
 				<Empty { ...props } />
 			) : (
@@ -77,6 +90,7 @@ function NotEmpty( {
 	setAttributes,
 	clientId,
 	isSelected,
+	isWide = false,
 } ) {
 	const [ hasPreview, setHasPreview ] = useState( null );
 
@@ -168,6 +182,7 @@ function NotEmpty( {
 				id={ id }
 				idBase={ idBase }
 				instance={ instance }
+				isWide={ isWide }
 				onChangeInstance={ setInstance }
 				onChangeHasPreview={ setHasPreview }
 			/>

packages/block-library/src/legacy-widget/editor.scss

@@ -86,3 +86,11 @@
 	margin: 0 0 5px;
 	font-weight: 500;
 }
+
+// When wide widget is selected it opens in a popover but its container should still have a bit of height.
+.is-selected {
+	.wp-block-legacy-widget__container {
+		padding: $grid-unit-10 $grid-unit-15;
+		min-height: 50px;
+	}
+}

packages/components/src/popover/index.js

@@ -261,6 +261,7 @@ const Popover = (
 		__unstableObserveElement,
 		__unstableBoundaryParent,
 		__unstableForcePosition,
+		__unstableForceXAlignment,
 		/* eslint-enable no-unused-vars */
 		...contentProps
 	},
@@ -354,7 +355,8 @@ const Popover = (
 				containerRef.current,
 				relativeOffsetTop,
 				boundaryElement,
-				__unstableForcePosition
+				__unstableForcePosition,
+				__unstableForceXAlignment
 			);
 
 			if (

packages/components/src/popover/utils.js

@@ -21,6 +21,7 @@ const HEIGHT_OFFSET = 10; // used by the arrow and a bit of empty space
  * @param {string}  chosenYAxis           yAxis to be used.
  * @param {Element} boundaryElement       Boundary element.
  * @param {boolean} forcePosition         Don't adjust position based on anchor.
+ * @param {boolean} forceXAlignment       Don't adjust alignment based on YAxis
  *
  * @return {Object} Popover xAxis position and constraints.
  */
@@ -32,7 +33,8 @@ export function computePopoverXAxisPosition(
 	stickyBoundaryElement,
 	chosenYAxis,
 	boundaryElement,
-	forcePosition
+	forcePosition,
+	forceXAlignment
 ) {
 	const { width } = contentSize;
 
@@ -64,15 +66,15 @@ export function computePopoverXAxisPosition(
 
 	if ( corner === 'right' ) {
 		leftAlignmentX = anchorRect.right;
-	} else if ( chosenYAxis !== 'middle' ) {
+	} else if ( chosenYAxis !== 'middle' && ! forceXAlignment ) {
 		leftAlignmentX = anchorMidPoint;
 	}
 
 	let rightAlignmentX = anchorRect.right;
 
 	if ( corner === 'left' ) {
 		rightAlignmentX = anchorRect.left;
-	} else if ( chosenYAxis !== 'middle' ) {
+	} else if ( chosenYAxis !== 'middle' && ! forceXAlignment ) {
 		rightAlignmentX = anchorMidPoint;
 	}
 
@@ -285,6 +287,7 @@ export function computePopoverYAxisPosition(
  *                                        relative positioned parent container.
  * @param {Element} boundaryElement       Boundary element.
  * @param {boolean} forcePosition         Don't adjust position based on anchor.
+ *  @param {boolean} forceXAlignment       Don't adjust alignment based on YAxis
  *
  * @return {Object} Popover position and constraints.
  */
@@ -296,7 +299,8 @@ export function computePopoverPosition(
 	anchorRef,
 	relativeOffsetTop,
 	boundaryElement,
-	forcePosition
+	forcePosition,
+	forceXAlignment
 ) {
 	const [ yAxis, xAxis = 'center', corner ] = position.split( ' ' );
 
@@ -318,7 +322,8 @@ export function computePopoverPosition(
 		stickyBoundaryElement,
 		yAxisPosition.yAxis,
 		boundaryElement,
-		forcePosition
+		forcePosition,
+		forceXAlignment
 	);
 
 	return {

packages/customize-widgets/src/filters/index.js

@@ -3,3 +3,4 @@
  */
 import './move-to-sidebar';
 import './replace-media-upload';
+import './wide-widget-display';

packages/customize-widgets/src/filters/wide-widget-display.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
+
+const { wp } = window;
+
+const withWideWidgetDisplay = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { idBase } = props.attributes;
+		const isWide =
+			wp.customize.Widgets.data.availableWidgets.find(
+				( widget ) => widget.id_base === idBase
+			)?.is_wide ?? false;
+
+		return <BlockEdit { ...props } isWide={ isWide } />;
+	},
+	'withWideWidgetDisplay'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/customize-widgets/wide-widget-display',
+	withWideWidgetDisplay
+);