From 8d56c0642daa737370b5940a6ee9cb5d88472126 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 15 Nov 2024 11:50:46 +1100
Subject: [PATCH 1/7] Reinstate modal.

---
 .../block-library/src/query/edit/index.js     |  2 +-
 .../query/edit/inspector-controls/index.js    | 26 ++++++++-
 ...election-modal.js => pattern-selection.js} | 55 +++++++++++--------
 .../src/query/edit/query-content.js           | 15 +----
 packages/block-library/src/query/editor.scss  |  6 ++
 5 files changed, 63 insertions(+), 41 deletions(-)
 rename packages/block-library/src/query/edit/{pattern-selection-modal.js => pattern-selection.js} (71%)

diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js
index 9a54b5976fe4bc..60fc2ebd6170b3 100644
--- a/packages/block-library/src/query/edit/index.js
+++ b/packages/block-library/src/query/edit/index.js
@@ -10,7 +10,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import QueryContent from './query-content';
 import QueryPlaceholder from './query-placeholder';
-import PatternSelectionModal from './pattern-selection-modal';
+import { PatternSelectionModal } from './pattern-selection';
 
 const QueryEdit = ( props ) => {
 	const { clientId, attributes } = props;
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 0ae4b052b57873..bd0a27ad0a1123 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -30,17 +30,27 @@ import StickyControl from './sticky-control';
 import PerPageControl from './per-page-control';
 import OffsetControl from './offset-controls';
 import PagesControl from './pages-control';
+import PatternSelection from '../pattern-selection';
+import { unlock } from '../../../lock-unlock';
 import {
 	usePostTypes,
 	useIsPostTypeHierarchical,
 	useAllowedControls,
 	isControlAllowed,
 	useTaxonomies,
+	usePatterns,
 } from '../../utils';
 import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout, isSingular } = props;
+	const {
+		attributes,
+		setQuery,
+		setDisplayLayout,
+		isSingular,
+		clientId,
+		name,
+	} = props;
 	const { query, displayLayout } = attributes;
 	const {
 		order,
@@ -173,19 +183,29 @@ export default function QueryInspectorControls( props ) {
 		showParentControl ||
 		showFormatControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-
+	const hasPatterns = !! usePatterns( clientId, name ).length;
 	const showPostCountControl = isControlAllowed(
 		allowedControls,
 		'postCount'
 	);
 	const showOffSetControl = isControlAllowed( allowedControls, 'offset' );
 	const showPagesControl = isControlAllowed( allowedControls, 'pages' );
-
 	const showDisplayPanel =
 		showPostCountControl || showOffSetControl || showPagesControl;
 
 	return (
 		<>
+			{ hasPatterns && (
+				<PanelBody
+					title={ __( 'Design' ) }
+					className="block-library-query-toolspanel__design"
+				>
+					<PatternSelection
+						attributes={ attributes }
+						clientId={ clientId }
+					/>
+				</PanelBody>
+			) }
 			{ showSettingsPanel && (
 				<PanelBody title={ __( 'Settings' ) }>
 					{ showInheritControl && (
diff --git a/packages/block-library/src/query/edit/pattern-selection-modal.js b/packages/block-library/src/query/edit/pattern-selection.js
similarity index 71%
rename from packages/block-library/src/query/edit/pattern-selection-modal.js
rename to packages/block-library/src/query/edit/pattern-selection.js
index e4cc8d0c851c23..8d597de029cfb8 100644
--- a/packages/block-library/src/query/edit/pattern-selection-modal.js
+++ b/packages/block-library/src/query/edit/pattern-selection.js
@@ -21,11 +21,24 @@ import {
 } from '../utils';
 import { searchPatterns } from '../../utils/search-patterns';
 
-export default function PatternSelectionModal( {
+export function PatternSelectionModal( {
 	clientId,
 	attributes,
 	setIsPatternSelectionModalOpen,
 } ) {
+	return (
+		<Modal
+			overlayClassName="block-library-query-pattern__selection-modal"
+			title={ __( 'Choose a pattern' ) }
+			onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
+			isFullScreen
+		>
+			<PatternSelection clientId={ clientId } attributes={ attributes } />
+		</Modal>
+	);
+}
+
+export default function PatternSelection( { clientId, attributes } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 	const onBlockPatternSelect = ( pattern, blocks ) => {
@@ -56,29 +69,23 @@ export default function PatternSelectionModal( {
 	}, [ blockPatterns, searchValue ] );
 
 	return (
-		<Modal
-			overlayClassName="block-library-query-pattern__selection-modal"
-			title={ __( 'Choose a pattern' ) }
-			onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
-			isFullScreen
-		>
-			<div className="block-library-query-pattern__selection-content">
-				<div className="block-library-query-pattern__selection-search">
-					<SearchControl
-						__nextHasNoMarginBottom
-						onChange={ setSearchValue }
-						value={ searchValue }
-						label={ __( 'Search' ) }
-						placeholder={ __( 'Search' ) }
-					/>
-				</div>
-				<BlockContextProvider value={ blockPreviewContext }>
-					<BlockPatternsList
-						blockPatterns={ filteredBlockPatterns }
-						onClickPattern={ onBlockPatternSelect }
-					/>
-				</BlockContextProvider>
+		<div className="block-library-query-pattern__selection-content">
+			<div className="block-library-query-pattern__selection-search">
+				<SearchControl
+					__nextHasNoMarginBottom
+					onChange={ setSearchValue }
+					value={ searchValue }
+					label={ __( 'Search' ) }
+					placeholder={ __( 'Search' ) }
+				/>
 			</div>
-		</Modal>
+			<BlockContextProvider value={ blockPreviewContext }>
+				<BlockPatternsList
+					blockPatterns={ filteredBlockPatterns }
+					onClickPattern={ onBlockPatternSelect }
+					showTitlesAsTooltip
+				/>
+			</BlockContextProvider>
+		</div>
 	);
 }
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
index 17eea9337823c5..391dba64ff3299 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useCallback } from '@wordpress/element';
 import {
-	BlockControls,
 	InspectorControls,
 	useBlockProps,
 	store as blockEditorStore,
@@ -19,7 +18,6 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';
-import QueryToolbar from './query-toolbar';
 import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
 import { getQueryContextFromTemplate } from '../utils';
@@ -30,10 +28,9 @@ const TEMPLATE = [ [ 'core/post-template' ] ];
 export default function QueryContent( {
 	attributes,
 	setAttributes,
-	openPatternSelectionModal,
-	name,
 	clientId,
 	context,
+	name,
 } ) {
 	const {
 		queryId,
@@ -154,6 +151,7 @@ export default function QueryContent( {
 			/>
 			<InspectorControls>
 				<QueryInspectorControls
+					name={ name }
 					attributes={ attributes }
 					setQuery={ updateQuery }
 					setDisplayLayout={ updateDisplayLayout }
@@ -162,15 +160,6 @@ export default function QueryContent( {
 					isSingular={ isSingular }
 				/>
 			</InspectorControls>
-			<BlockControls>
-				<QueryToolbar
-					name={ name }
-					clientId={ clientId }
-					attributes={ attributes }
-					setQuery={ updateQuery }
-					openPatternSelectionModal={ openPatternSelectionModal }
-				/>
-			</BlockControls>
 			<InspectorControls group="advanced">
 				<SelectControl
 					__nextHasNoMarginBottom
diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss
index da863bff0b5da6..a80acb2885d914 100644
--- a/packages/block-library/src/query/editor.scss
+++ b/packages/block-library/src/query/editor.scss
@@ -45,6 +45,12 @@
 	}
 }
 
+.block-library-query-toolspanel__design {
+	.block-library-query-pattern__selection-search {
+		margin-bottom: $grid-unit-20;
+	}
+}
+
 .wp-block-query__enhanced-pagination-modal {
 	@include break-small() {
 		max-width: $break-mobile;

From 806aaf1c54f94c55c17ccc5cba1b6cd727db3c5f Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 15 Nov 2024 11:56:41 +1100
Subject: [PATCH 2/7] Delete unused component

---
 .../src/query/edit/query-toolbar.js           | 30 -------------------
 1 file changed, 30 deletions(-)
 delete mode 100644 packages/block-library/src/query/edit/query-toolbar.js

diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
deleted file mode 100644
index cc2d62a54d529f..00000000000000
--- a/packages/block-library/src/query/edit/query-toolbar.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { usePatterns } from '../utils';
-
-export default function QueryToolbar( {
-	openPatternSelectionModal,
-	name,
-	clientId,
-} ) {
-	const hasPatterns = !! usePatterns( clientId, name ).length;
-
-	return (
-		<>
-			{ hasPatterns && (
-				<ToolbarGroup className="wp-block-template-part__block-control-group">
-					<ToolbarButton onClick={ openPatternSelectionModal }>
-						{ __( 'Replace' ) }
-					</ToolbarButton>
-				</ToolbarGroup>
-			) }
-		</>
-	);
-}

From 0a228d6b2ce71ea50fc7da97e6b6a945d54c277f Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 15 Nov 2024 12:07:00 +1100
Subject: [PATCH 3/7] showTitlesAsTooltip prop

---
 .../src/query/edit/inspector-controls/index.js            | 1 +
 .../block-library/src/query/edit/pattern-selection.js     | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

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 bd0a27ad0a1123..310345db9c59f7 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -203,6 +203,7 @@ export default function QueryInspectorControls( props ) {
 					<PatternSelection
 						attributes={ attributes }
 						clientId={ clientId }
+						showTitlesAsTooltip
 					/>
 				</PanelBody>
 			) }
diff --git a/packages/block-library/src/query/edit/pattern-selection.js b/packages/block-library/src/query/edit/pattern-selection.js
index 8d597de029cfb8..7265f124156716 100644
--- a/packages/block-library/src/query/edit/pattern-selection.js
+++ b/packages/block-library/src/query/edit/pattern-selection.js
@@ -38,7 +38,11 @@ export function PatternSelectionModal( {
 	);
 }
 
-export default function PatternSelection( { clientId, attributes } ) {
+export default function PatternSelection( {
+	clientId,
+	attributes,
+	showTitlesAsTooltip = false,
+} ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 	const onBlockPatternSelect = ( pattern, blocks ) => {
@@ -83,7 +87,7 @@ export default function PatternSelection( { clientId, attributes } ) {
 				<BlockPatternsList
 					blockPatterns={ filteredBlockPatterns }
 					onClickPattern={ onBlockPatternSelect }
-					showTitlesAsTooltip
+					showTitlesAsTooltip={ showTitlesAsTooltip }
 				/>
 			</BlockContextProvider>
 		</div>

From 607360a1a615ab80910b54de7db71871faa18844 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 19 Nov 2024 11:05:51 +1100
Subject: [PATCH 4/7] Remove redundant style-edit route

---
 .../query/edit/inspector-controls/index.js    | 20 +++++-----
 .../src/query/edit/pattern-selection.js       | 40 +++++++++++--------
 .../src/query/edit/query-placeholder.js       | 19 +++------
 3 files changed, 37 insertions(+), 42 deletions(-)

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 310345db9c59f7..d5c74daf388299 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,7 @@ import StickyControl from './sticky-control';
 import PerPageControl from './per-page-control';
 import OffsetControl from './offset-controls';
 import PagesControl from './pages-control';
-import PatternSelection from '../pattern-selection';
+import PatternSelection, { useBlockPatterns } from '../pattern-selection';
 import { unlock } from '../../../lock-unlock';
 import {
 	usePostTypes,
@@ -38,19 +38,12 @@ import {
 	useAllowedControls,
 	isControlAllowed,
 	useTaxonomies,
-	usePatterns,
 } from '../../utils';
 import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
 export default function QueryInspectorControls( props ) {
-	const {
-		attributes,
-		setQuery,
-		setDisplayLayout,
-		isSingular,
-		clientId,
-		name,
-	} = props;
+	const { attributes, setQuery, setDisplayLayout, isSingular, clientId } =
+		props;
 	const { query, displayLayout } = attributes;
 	const {
 		order,
@@ -183,7 +176,7 @@ export default function QueryInspectorControls( props ) {
 		showParentControl ||
 		showFormatControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	const hasPatterns = !! usePatterns( clientId, name ).length;
+	const hasPatterns = !! useBlockPatterns( clientId, attributes ).length;
 	const showPostCountControl = isControlAllowed(
 		allowedControls,
 		'postCount'
@@ -207,6 +200,11 @@ export default function QueryInspectorControls( props ) {
 					/>
 				</PanelBody>
 			) }
+			{ !! postType && (
+				<BlockInfo>
+					<CreateNewPostLink postType={ postType } />
+				</BlockInfo>
+			) }
 			{ showSettingsPanel && (
 				<PanelBody title={ __( 'Settings' ) }>
 					{ showInheritControl && (
diff --git a/packages/block-library/src/query/edit/pattern-selection.js b/packages/block-library/src/query/edit/pattern-selection.js
index 7265f124156716..a0c338e8490ad3 100644
--- a/packages/block-library/src/query/edit/pattern-selection.js
+++ b/packages/block-library/src/query/edit/pattern-selection.js
@@ -38,6 +38,14 @@ export function PatternSelectionModal( {
 	);
 }
 
+export function useBlockPatterns( clientId, attributes ) {
+	const blockNameForPatterns = useBlockNameForPatterns(
+		clientId,
+		attributes
+	);
+	return usePatterns( clientId, blockNameForPatterns );
+}
+
 export default function PatternSelection( {
 	clientId,
 	attributes,
@@ -45,33 +53,31 @@ export default function PatternSelection( {
 } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
-	const onBlockPatternSelect = ( pattern, blocks ) => {
-		const { newBlocks, queryClientIds } = getTransformedBlocksFromPattern(
-			blocks,
-			attributes
-		);
-		replaceBlock( clientId, newBlocks );
-		if ( queryClientIds[ 0 ] ) {
-			selectBlock( queryClientIds[ 0 ] );
-		}
-	};
-	// When we preview Query Loop blocks we should prefer the current
-	// block's postType, which is passed through block context.
+	const blockPatterns = useBlockPatterns( clientId, attributes );
+	/*
+	 * When we preview Query Loop blocks we should prefer the current
+	 * block's postType, which is passed through block context.
+	 */
 	const blockPreviewContext = useMemo(
 		() => ( {
 			previewPostType: attributes.query.postType,
 		} ),
 		[ attributes.query.postType ]
 	);
-	const blockNameForPatterns = useBlockNameForPatterns(
-		clientId,
-		attributes
-	);
-	const blockPatterns = usePatterns( clientId, blockNameForPatterns );
 	const filteredBlockPatterns = useMemo( () => {
 		return searchPatterns( blockPatterns, searchValue );
 	}, [ blockPatterns, searchValue ] );
 
+	const onBlockPatternSelect = ( pattern, blocks ) => {
+		const { newBlocks, queryClientIds } = getTransformedBlocksFromPattern(
+			blocks,
+			attributes
+		);
+		replaceBlock( clientId, newBlocks );
+		if ( queryClientIds[ 0 ] ) {
+			selectBlock( queryClientIds[ 0 ] );
+		}
+	};
 	return (
 		<div className="block-library-query-pattern__selection-content">
 			<div className="block-library-query-pattern__selection-search">
diff --git a/packages/block-library/src/query/edit/query-placeholder.js b/packages/block-library/src/query/edit/query-placeholder.js
index 631eb64de07157..c3a01a0447f55e 100644
--- a/packages/block-library/src/query/edit/query-placeholder.js
+++ b/packages/block-library/src/query/edit/query-placeholder.js
@@ -18,7 +18,8 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useScopedBlockVariations, useBlockNameForPatterns } from '../utils';
+import { useScopedBlockVariations } from '../utils';
+import { useBlockPatterns } from './pattern-selection';
 
 export default function QueryPlaceholder( {
 	attributes,
@@ -28,31 +29,21 @@ export default function QueryPlaceholder( {
 } ) {
 	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
 	const blockProps = useBlockProps();
-	const blockNameForPatterns = useBlockNameForPatterns(
-		clientId,
-		attributes
-	);
-	const { blockType, activeBlockVariation, hasPatterns } = useSelect(
+	const { blockType, activeBlockVariation } = useSelect(
 		( select ) => {
 			const { getActiveBlockVariation, getBlockType } =
 				select( blocksStore );
-			const { getBlockRootClientId, getPatternsByBlockTypes } =
-				select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
 			return {
 				blockType: getBlockType( name ),
 				activeBlockVariation: getActiveBlockVariation(
 					name,
 					attributes
 				),
-				hasPatterns: !! getPatternsByBlockTypes(
-					blockNameForPatterns,
-					rootClientId
-				).length,
 			};
 		},
-		[ name, blockNameForPatterns, clientId, attributes ]
+		[ name, attributes ]
 	);
+	const hasPatterns = !! useBlockPatterns( clientId, attributes ).length;
 	const icon =
 		activeBlockVariation?.icon?.src ||
 		activeBlockVariation?.icon ||

From ae968566c74f4f7073e5bef60a26b3c3cf168c82 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 22 Nov 2024 13:08:17 +1100
Subject: [PATCH 5/7] Revert slot for navigation mode.

---
 .../query/edit/inspector-controls/index.js    |  2 ++
 .../src/query/edit/pattern-selection.js       | 21 +++++++++++--------
 packages/block-library/src/query/editor.scss  |  4 ++--
 3 files changed, 16 insertions(+), 11 deletions(-)

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 d5c74daf388299..d97010013283dc 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -191,12 +191,14 @@ export default function QueryInspectorControls( props ) {
 			{ hasPatterns && (
 				<PanelBody
 					title={ __( 'Design' ) }
+					initialOpen={ false }
 					className="block-library-query-toolspanel__design"
 				>
 					<PatternSelection
 						attributes={ attributes }
 						clientId={ clientId }
 						showTitlesAsTooltip
+						showSearch={ false }
 					/>
 				</PanelBody>
 			) }
diff --git a/packages/block-library/src/query/edit/pattern-selection.js b/packages/block-library/src/query/edit/pattern-selection.js
index a0c338e8490ad3..0c5d95d15206f2 100644
--- a/packages/block-library/src/query/edit/pattern-selection.js
+++ b/packages/block-library/src/query/edit/pattern-selection.js
@@ -50,6 +50,7 @@ export default function PatternSelection( {
 	clientId,
 	attributes,
 	showTitlesAsTooltip = false,
+	showSearch = true,
 } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
@@ -80,15 +81,17 @@ export default function PatternSelection( {
 	};
 	return (
 		<div className="block-library-query-pattern__selection-content">
-			<div className="block-library-query-pattern__selection-search">
-				<SearchControl
-					__nextHasNoMarginBottom
-					onChange={ setSearchValue }
-					value={ searchValue }
-					label={ __( 'Search' ) }
-					placeholder={ __( 'Search' ) }
-				/>
-			</div>
+			{ showSearch && (
+				<div className="block-library-query-pattern__selection-search">
+					<SearchControl
+						__nextHasNoMarginBottom
+						onChange={ setSearchValue }
+						value={ searchValue }
+						label={ __( 'Search' ) }
+						placeholder={ __( 'Search' ) }
+					/>
+				</div>
+			) }
 			<BlockContextProvider value={ blockPreviewContext }>
 				<BlockPatternsList
 					blockPatterns={ filteredBlockPatterns }
diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss
index a80acb2885d914..7aac1fd8f947b6 100644
--- a/packages/block-library/src/query/editor.scss
+++ b/packages/block-library/src/query/editor.scss
@@ -46,8 +46,8 @@
 }
 
 .block-library-query-toolspanel__design {
-	.block-library-query-pattern__selection-search {
-		margin-bottom: $grid-unit-20;
+	.block-library-query-pattern__selection-content {
+		margin-top: $grid-unit-10;
 	}
 }
 

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 6/7] 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;
+}

From 5797f50e839142856763b2152a11a655c70f4c6c Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 27 Nov 2024 09:42:05 +1100
Subject: [PATCH 7/7] Tweaking widths. Ensure expansion on mobile

bad robot
---
 .../query/edit/inspector-controls/index.js    |  8 ++-----
 .../src/query/edit/query-toolbar.js           |  2 ++
 packages/block-library/src/query/editor.scss  | 22 ++++++++++++++++++-
 3 files changed, 25 insertions(+), 7 deletions(-)

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 fa4250d448c9a9..0ae4b052b57873 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 { unlock } from '../../../lock-unlock';
 import {
 	usePostTypes,
 	useIsPostTypeHierarchical,
@@ -174,22 +173,19 @@ export default function QueryInspectorControls( props ) {
 		showParentControl ||
 		showFormatControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const showPostCountControl = isControlAllowed(
 		allowedControls,
 		'postCount'
 	);
 	const showOffSetControl = isControlAllowed( allowedControls, 'offset' );
 	const showPagesControl = isControlAllowed( allowedControls, 'pages' );
+
 	const showDisplayPanel =
 		showPostCountControl || showOffSetControl || showPagesControl;
 
 	return (
 		<>
-			{ !! postType && (
-				<BlockInfo>
-					<CreateNewPostLink postType={ postType } />
-				</BlockInfo>
-			) }
 			{ showSettingsPanel && (
 				<PanelBody title={ __( 'Settings' ) }>
 					{ showInheritControl && (
diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
index 1e48a968e2bcd6..25e087ebe1559c 100644
--- a/packages/block-library/src/query/edit/query-toolbar.js
+++ b/packages/block-library/src/query/edit/query-toolbar.js
@@ -26,6 +26,7 @@ export default function QueryToolbar( { clientId, attributes } ) {
 				<Dropdown
 					contentClassName="block-editor-block-settings-menu__popover"
 					focusOnMount="firstElement"
+					expandOnMobile
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<ToolbarButton
 							aria-haspopup="true"
@@ -40,6 +41,7 @@ export default function QueryToolbar( { clientId, attributes } ) {
 							clientId={ clientId }
 							attributes={ attributes }
 							showSearch={ false }
+							showTitlesAsTooltip
 						/>
 					) }
 				/>
diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss
index 57191afe7d5891..5bf0db81870403 100644
--- a/packages/block-library/src/query/editor.scss
+++ b/packages/block-library/src/query/editor.scss
@@ -62,5 +62,25 @@
 }
 
 .block-editor-block-settings-menu__popover {
-	min-width: 500px;
+	&.is-expanded {
+		overflow-y: scroll;
+	}
+	.block-library-query-pattern__selection-content {
+		height: 100%;
+	}
+	.block-editor-block-patterns-list {
+		display: grid;
+		grid-template-columns: 1fr;
+		@include break-small() {
+			grid-template-columns: 1fr 1fr;
+		}
+		grid-gap: $grid-unit-15;
+		min-width: $break-zoomed-in;
+		@include break-small() {
+			min-width: $break-mobile;
+		}
+	}
+	.block-editor-block-patterns-list__list-item {
+		margin-bottom: 0;
+	}
 }