Use BlockEdit and render title outside popover.

WordPress · May 18, 2021 · beea27a · beea27a
1 parent 600c198
commit beea27a
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 23 deletions.
diff --git a/packages/block-library/src/legacy-widget/block.json b/packages/block-library/src/legacy-widget/block.json
@@ -17,10 +17,6 @@
 		"instance": {
 			"type": "object",
 			"default": null
-		},
-		"isWide": {
-			"type": "boolean",
-			"default": false
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/legacy-widget/edit/form.js b/packages/block-library/src/legacy-widget/edit/form.js
@@ -76,17 +76,20 @@ export default function Form( {
 
 	if ( isWide && isMediumLargeViewport ) {
 		return (
-			<Popover focusOnMount={ false } position="bottom left">
-				<div
-					ref={ ref }
-					className="wp-block-legacy-widget__edit-form"
-					hidden={ ! isVisible }
-				>
+			<div className="wp-block-legacy-widget__container">
+				{ isVisible && (
 					<h3 className="wp-block-legacy-widget__edit-form-title">
 						{ title }
 					</h3>
-				</div>
-			</Popover>
+				) }
+				<Popover focusOnMount={ false } position="middle left">
+					<div
+						ref={ ref }
+						className="wp-block-legacy-widget__edit-form"
+						hidden={ ! isVisible }
+					></div>
+				</Popover>
+			</div>
 		);
 	}
 

diff --git a/packages/block-library/src/legacy-widget/edit/index.js b/packages/block-library/src/legacy-widget/edit/index.js
@@ -31,7 +31,8 @@ import NoPreview from './no-preview';
 import ConvertToBlocksButton from './convert-to-blocks-button';
 
 export default function Edit( props ) {
-	const { id, idBase, isWide } = props.attributes;
+	const { id, idBase } = props.attributes;
+	const { isWide = false } = props;
 
 	const blockProps = useBlockProps( {
 		className: classnames( {
@@ -44,7 +45,7 @@ export default function Edit( props ) {
 			{ ! id && ! idBase ? (
 				<Empty { ...props } />
 			) : (
-				<NotEmpty { ...props } />
+				<NotEmpty { ...props } isWide={ isWide } />
 			) }
 		</div>
 	);
@@ -85,10 +86,11 @@ function Empty( { attributes: { id, idBase }, setAttributes } ) {
 }
 
 function NotEmpty( {
-	attributes: { id, idBase, instance, isWide },
+	attributes: { id, idBase, instance },
 	setAttributes,
 	clientId,
 	isSelected,
+	isWide,
 } ) {
 	const [ hasPreview, setHasPreview ] = useState( null );
 

diff --git a/packages/block-library/src/legacy-widget/editor.scss b/packages/block-library/src/legacy-widget/editor.scss
@@ -86,3 +86,7 @@
 	margin: 0 0 5px;
 	font-weight: 500;
 }
+
+.wp-block-legacy-widget__container {
+	min-height: 30px;
+}
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js b/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js
@@ -194,11 +194,6 @@ export default class SidebarAdapter {
 		const settingId = widgetIdToSettingId( widgetId );
 		const setting = this.api( settingId );
 
-		const isWide = wp.customize.Widgets.data.availableWidgets.filter(
-			// eslint-disable-next-line camelcase
-			( { id_base } ) => id_base === idBase
-		)[ 0 ].is_wide;
-
 		if ( ! setting ) {
 			return null;
 		}
@@ -214,7 +209,6 @@ export default class SidebarAdapter {
 			idBase,
 			number,
 			instance,
-			isWide,
 		};
 
 		this.widgetsCache.set( instance, widget );

diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js b/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js
@@ -58,7 +58,7 @@ function blockToWidget( block, existingWidget = null ) {
 	};
 }
 
-function widgetToBlock( { id, idBase, number, instance, isWide } ) {
+function widgetToBlock( { id, idBase, number, instance } ) {
 	let block;
 
 	const {
@@ -83,7 +83,6 @@ function widgetToBlock( { id, idBase, number, instance, isWide } ) {
 				raw,
 				...rest,
 			},
-			isWide,
 		} );
 	} else {
 		// Widget that does not extend WP_Widget.

diff --git a/packages/customize-widgets/src/filters/index.js b/packages/customize-widgets/src/filters/index.js
@@ -3,3 +3,4 @@
  */
 import './move-to-sidebar';
 import './replace-media-upload';
+import './wide-widget-display';
diff --git a/packages/customize-widgets/src/filters/wide-widget-display.js b/packages/customize-widgets/src/filters/wide-widget-display.js
@@ -0,0 +1,28 @@
+/**
+ * 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 && wp.customize
+				? wp.customize.Widgets.data.availableWidgets.filter(
+						( widget ) => widget.id_base === idBase
+				  )[ 0 ]?.is_wide
+				: false;
+
+		return <BlockEdit { ...props } isWide={ isWide } />;
+	},
+	'withWideWidgetDisplay'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/customize-widgets/wide-widget-display',
+	withWideWidgetDisplay
+);