From 74a4423ef2bf812e989c0d7a15a750d1618e59d2 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 26 Nov 2024 16:57:29 +1100
Subject: [PATCH] First attempt at moving the designs in a dropdone popover.

---
 .../query/edit/inspector-controls/index.js    | 19 +------
 .../src/query/edit/query-content.js           |  5 ++
 .../src/query/edit/query-toolbar.js           | 49 +++++++++++++++++++
 packages/block-library/src/query/editor.scss  |  4 ++
 4 files changed, 59 insertions(+), 18 deletions(-)
 create mode 100644 packages/block-library/src/query/edit/query-toolbar.js

diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
index d97010013283dc..fa4250d448c9a9 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -30,7 +30,6 @@ import StickyControl from './sticky-control';
 import PerPageControl from './per-page-control';
 import OffsetControl from './offset-controls';
 import PagesControl from './pages-control';
-import PatternSelection, { useBlockPatterns } from '../pattern-selection';
 import { unlock } from '../../../lock-unlock';
 import {
 	usePostTypes,
@@ -42,8 +41,7 @@ import {
 import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout, isSingular, clientId } =
-		props;
+	const { attributes, setQuery, setDisplayLayout, isSingular } = props;
 	const { query, displayLayout } = attributes;
 	const {
 		order,
@@ -176,7 +174,6 @@ export default function QueryInspectorControls( props ) {
 		showParentControl ||
 		showFormatControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	const hasPatterns = !! useBlockPatterns( clientId, attributes ).length;
 	const showPostCountControl = isControlAllowed(
 		allowedControls,
 		'postCount'
@@ -188,20 +185,6 @@ export default function QueryInspectorControls( props ) {
 
 	return (
 		<>
-			{ hasPatterns && (
-				<PanelBody
-					title={ __( 'Design' ) }
-					initialOpen={ false }
-					className="block-library-query-toolspanel__design"
-				>
-					<PatternSelection
-						attributes={ attributes }
-						clientId={ clientId }
-						showTitlesAsTooltip
-						showSearch={ false }
-					/>
-				</PanelBody>
-			) }
 			{ !! postType && (
 				<BlockInfo>
 					<CreateNewPostLink postType={ postType } />
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
index 391dba64ff3299..a608f20bbeb001 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useCallback } from '@wordpress/element';
 import {
+	BlockControls,
 	InspectorControls,
 	useBlockProps,
 	store as blockEditorStore,
@@ -21,6 +22,7 @@ import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-
 import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
 import { getQueryContextFromTemplate } from '../utils';
+import QueryToolbar from './query-toolbar';
 
 const DEFAULTS_POSTS_PER_PAGE = 3;
 
@@ -160,6 +162,9 @@ export default function QueryContent( {
 					isSingular={ isSingular }
 				/>
 			</InspectorControls>
+			<BlockControls>
+				<QueryToolbar attributes={ attributes } clientId={ clientId } />
+			</BlockControls>
 			<InspectorControls group="advanced">
 				<SelectControl
 					__nextHasNoMarginBottom
diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
new file mode 100644
index 00000000000000..1e48a968e2bcd6
--- /dev/null
+++ b/packages/block-library/src/query/edit/query-toolbar.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToolbarGroup,
+	ToolbarButton,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PatternSelection, { useBlockPatterns } from './pattern-selection';
+
+export default function QueryToolbar( { clientId, attributes } ) {
+	const hasPatterns = useBlockPatterns( clientId, attributes ).length;
+	if ( ! hasPatterns ) {
+		return null;
+	}
+
+	return (
+		<ToolbarGroup className="wp-block-template-part__block-control-group">
+			<DropdownContentWrapper>
+				<Dropdown
+					contentClassName="block-editor-block-settings-menu__popover"
+					focusOnMount="firstElement"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<ToolbarButton
+							aria-haspopup="true"
+							aria-expanded={ isOpen }
+							onClick={ onToggle }
+						>
+							{ __( 'Change design' ) }
+						</ToolbarButton>
+					) }
+					renderContent={ () => (
+						<PatternSelection
+							clientId={ clientId }
+							attributes={ attributes }
+							showSearch={ false }
+						/>
+					) }
+				/>
+			</DropdownContentWrapper>
+		</ToolbarGroup>
+	);
+}
diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss
index 7aac1fd8f947b6..57191afe7d5891 100644
--- a/packages/block-library/src/query/editor.scss
+++ b/packages/block-library/src/query/editor.scss
@@ -60,3 +60,7 @@
 .wp-block-query__enhanced-pagination-notice {
 	margin: 0;
 }
+
+.block-editor-block-settings-menu__popover {
+	min-width: 500px;
+}