Query block: move patterns modal to dropdown on block toolbar (#66993)

* Reinstate modal. * Delete unused component * showTitlesAsTooltip prop * Remove redundant style-edit route * Revert slot for navigation mode. * First attempt at moving the designs in a dropdone popover. * Tweaking widths. Ensure expansion on mobile Unlinked contributors: jarekmorawski. Co-authored-by: ramonjd <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: talldan <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: fabiankaegy <[email protected]>
WordPress · Dec 5, 2024 · 1d85714 · 1d85714
1 parent 8f429de
commit 1d85714
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 75 deletions.
diff --git 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/...src/query/edit/pattern-selection-modal.js → ...brary/src/query/edit/pattern-selection.js b/...src/query/edit/pattern-selection-modal.js → ...brary/src/query/edit/pattern-selection.js
@@ -21,48 +21,67 @@ 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 function useBlockPatterns( clientId, attributes ) {
+	const blockNameForPatterns = useBlockNameForPatterns(
+		clientId,
+		attributes
+	);
+	return usePatterns( clientId, blockNameForPatterns );
+}
+
+export default function PatternSelection( {
+	clientId,
+	attributes,
+	showTitlesAsTooltip = false,
+	showSearch = true,
 } ) {
 	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 (
-		<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-content">
+			{ showSearch && (
 				<div className="block-library-query-pattern__selection-search">
 					<SearchControl
 						__nextHasNoMarginBottom
@@ -72,13 +91,14 @@ export default function PatternSelectionModal( {
 						placeholder={ __( 'Search' ) }
 					/>
 				</div>
-				<BlockContextProvider value={ blockPreviewContext }>
-					<BlockPatternsList
-						blockPatterns={ filteredBlockPatterns }
-						onClickPattern={ onBlockPatternSelect }
-					/>
-				</BlockContextProvider>
-			</div>
-		</Modal>
+			) }
+			<BlockContextProvider value={ blockPreviewContext }>
+				<BlockPatternsList
+					blockPatterns={ filteredBlockPatterns }
+					onClickPattern={ onBlockPatternSelect }
+					showTitlesAsTooltip={ 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
@@ -19,21 +19,20 @@ 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';
+import QueryToolbar from './query-toolbar';
 
 const DEFAULTS_POSTS_PER_PAGE = 3;
 
 const TEMPLATE = [ [ 'core/post-template' ] ];
 export default function QueryContent( {
 	attributes,
 	setAttributes,
-	openPatternSelectionModal,
-	name,
 	clientId,
 	context,
+	name,
 } ) {
 	const {
 		queryId,
@@ -154,6 +153,7 @@ export default function QueryContent( {
 			/>
 			<InspectorControls>
 				<QueryInspectorControls
+					name={ name }
 					attributes={ attributes }
 					setQuery={ updateQuery }
 					setDisplayLayout={ updateDisplayLayout }
@@ -163,13 +163,7 @@ export default function QueryContent( {
 				/>
 			</InspectorControls>
 			<BlockControls>
-				<QueryToolbar
-					name={ name }
-					clientId={ clientId }
-					attributes={ attributes }
-					setQuery={ updateQuery }
-					openPatternSelectionModal={ openPatternSelectionModal }
-				/>
+				<QueryToolbar attributes={ attributes } clientId={ clientId } />
 			</BlockControls>
 			<InspectorControls group="advanced">
 				<SelectControl

diff --git 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 ||

diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
@@ -1,30 +1,51 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import {
+	ToolbarGroup,
+	ToolbarButton,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { usePatterns } from '../utils';
+import PatternSelection, { useBlockPatterns } from './pattern-selection';
 
-export default function QueryToolbar( {
-	openPatternSelectionModal,
-	name,
-	clientId,
-} ) {
-	const hasPatterns = !! usePatterns( clientId, name ).length;
+export default function QueryToolbar( { clientId, attributes } ) {
+	const hasPatterns = useBlockPatterns( clientId, attributes ).length;
+	if ( ! hasPatterns ) {
+		return null;
+	}
 
 	return (
-		<>
-			{ hasPatterns && (
-				<ToolbarGroup className="wp-block-template-part__block-control-group">
-					<ToolbarButton onClick={ openPatternSelectionModal }>
-						{ __( 'Replace' ) }
-					</ToolbarButton>
-				</ToolbarGroup>
-			) }
-		</>
+		<ToolbarGroup className="wp-block-template-part__block-control-group">
+			<DropdownContentWrapper>
+				<Dropdown
+					contentClassName="block-editor-block-settings-menu__popover"
+					focusOnMount="firstElement"
+					expandOnMobile
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<ToolbarButton
+							aria-haspopup="true"
+							aria-expanded={ isOpen }
+							onClick={ onToggle }
+						>
+							{ __( 'Change design' ) }
+						</ToolbarButton>
+					) }
+					renderContent={ () => (
+						<PatternSelection
+							clientId={ clientId }
+							attributes={ attributes }
+							showSearch={ false }
+							showTitlesAsTooltip
+						/>
+					) }
+				/>
+			</DropdownContentWrapper>
+		</ToolbarGroup>
 	);
 }
diff --git 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-content {
+		margin-top: $grid-unit-10;
+	}
+}
+
 .wp-block-query__enhanced-pagination-modal {
 	@include break-small() {
 		max-width: $break-mobile;
@@ -54,3 +60,27 @@
 .wp-block-query__enhanced-pagination-notice {
 	margin: 0;
 }
+
+.block-editor-block-settings-menu__popover {
+	&.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;
+	}
+}