Initial commit. Moving patterns selection modal content to inspector …

…panel.
WordPress · Nov 14, 2024 · 6407a2f · 6407a2f
1 parent d0a190b
commit 6407a2f
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 100 deletions.
diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js
@@ -2,45 +2,24 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import QueryContent from './query-content';
 import QueryPlaceholder from './query-placeholder';
-import PatternSelectionModal from './pattern-selection-modal';
 
 const QueryEdit = ( props ) => {
-	const { clientId, attributes } = props;
-	const [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] =
-		useState( false );
+	const { clientId } = props;
 	const hasInnerBlocks = useSelect(
 		( select ) =>
 			!! select( blockEditorStore ).getBlocks( clientId ).length,
 		[ clientId ]
 	);
+
 	const Component = hasInnerBlocks ? QueryContent : QueryPlaceholder;
-	return (
-		<>
-			<Component
-				{ ...props }
-				openPatternSelectionModal={ () =>
-					setIsPatternSelectionModalOpen( true )
-				}
-			/>
-			{ isPatternSelectionModalOpen && (
-				<PatternSelectionModal
-					clientId={ clientId }
-					attributes={ attributes }
-					setIsPatternSelectionModalOpen={
-						setIsPatternSelectionModalOpen
-					}
-				/>
-			) }
-		</>
-	);
+	return <Component { ...props } />;
 };
 
 export default QueryEdit;
diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -32,20 +32,29 @@ import CreateNewPostLink from './create-new-post-link';
 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';
 
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
 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,
@@ -178,7 +187,8 @@ export default function QueryInspectorControls( props ) {
 		showParentControl ||
 		showFormatControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-
+	const [ loadPatterns, setLoadPatterns ] = useState( false );
+	const hasPatterns = !! usePatterns( clientId, name ).length;
 	const showPostCountControl = isControlAllowed(
 		allowedControls,
 		'postCount'
@@ -196,6 +206,21 @@ export default function QueryInspectorControls( props ) {
 					<CreateNewPostLink postType={ postType } />
 				</BlockInfo>
 			) }
+			{ hasPatterns && (
+				<PanelBody
+					title={ __( 'Design' ) }
+					initialOpen={ false }
+					onToggle={ ( nextState ) =>
+						nextState ? setLoadPatterns( true ) : false
+					}
+				>
+					<PatternSelection
+						attributes={ attributes }
+						clientId={ clientId }
+						shouldLoadPatterns={ loadPatterns }
+					/>
+				</PanelBody>
+			) }
 			{ showSettingsPanel && (
 				<PanelBody title={ __( 'Settings' ) }>
 					{ showInheritControl && (

diff --git a/...src/query/edit/pattern-selection-modal.js → ...t/inspector-controls/pattern-selection.js b/...src/query/edit/pattern-selection-modal.js → ...t/inspector-controls/pattern-selection.js
@@ -3,7 +3,7 @@
  */
 import { useState, useMemo } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { Modal, SearchControl } from '@wordpress/components';
+import { SearchControl } from '@wordpress/components';
 import {
 	BlockContextProvider,
 	store as blockEditorStore,
@@ -18,14 +18,10 @@ import {
 	useBlockNameForPatterns,
 	getTransformedBlocksFromPattern,
 	usePatterns,
-} from '../utils';
-import { searchPatterns } from '../../utils/search-patterns';
+} from '../../utils';
+import { searchPatterns } from '../../../utils/search-patterns';
 
-export default function PatternSelectionModal( {
-	clientId,
-	attributes,
-	setIsPatternSelectionModalOpen,
-} ) {
+function PatternSelectionList( { clientId, attributes } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 	const onBlockPatternSelect = ( pattern, blocks ) => {
@@ -56,29 +52,36 @@ 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 }
+				/>
+			</BlockContextProvider>
+		</div>
+	);
+}
+
+export default function PatternSelection( {
+	clientId,
+	attributes,
+	shouldLoadPatterns,
+} ) {
+	if ( ! shouldLoadPatterns ) {
+		return;
+	}
+
+	return (
+		<PatternSelectionList attributes={ attributes } clientId={ clientId } />
 	);
 }
diff --git 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/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js