YOLO commit. This gets us conceptually where things ought to be, but …

…the navigation mode check is sketchy and needs testing
WordPress · Nov 21, 2024 · 4a72c8d · 4a72c8d
1 parent 5629744
commit 4a72c8d
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 30 deletions.
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -22,6 +22,9 @@ const InspectorControlsTypography = createSlotFill(
 const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
 const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );
 const InspectorControlsEffects = createSlotFill( 'InspectorControlsEffects' );
+const InspectorControlsNavigationMode = createSlotFill(
+	'InspectorControlsNavigationMode'
+);
 
 const groups = {
 	default: InspectorControlsDefault,
@@ -35,6 +38,7 @@ const groups = {
 	filter: InspectorControlsFilter,
 	list: InspectorControlsListView,
 	position: InspectorControlsPosition,
+	navigationMode: InspectorControlsNavigationMode,
 	settings: InspectorControlsDefault, // Alias for default.
 	styles: InspectorControlsStyles,
 	typography: InspectorControlsTypography,

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,7 +32,6 @@ 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, { useBlockPatterns } from '../pattern-selection';
 import { unlock } from '../../../lock-unlock';
 import {
 	usePostTypes,
@@ -46,8 +45,7 @@ import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout, isSingular, clientId } =
-		props;
+	const { attributes, setQuery, setDisplayLayout, isSingular } = props;
 	const { query, displayLayout } = attributes;
 	const {
 		order,
@@ -180,7 +178,6 @@ export default function QueryInspectorControls( props ) {
 		showParentControl ||
 		showFormatControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	const hasPatterns = !! useBlockPatterns( clientId, attributes ).length;
 	const showPostCountControl = isControlAllowed(
 		allowedControls,
 		'postCount'
@@ -430,18 +427,6 @@ export default function QueryInspectorControls( props ) {
 					) }
 				</ToolsPanel>
 			) }
-			{ hasPatterns && (
-				<PanelBody
-					title={ __( 'Design' ) }
-					className="block-library-query-toolspanel__design"
-				>
-					<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
@@ -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/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
@@ -10,7 +10,7 @@ import {
 	store as blockEditorStore,
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
-import { SelectControl } from '@wordpress/components';
+import { SelectControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -21,6 +21,8 @@ import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-
 import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
 import { getQueryContextFromTemplate } from '../utils';
+import PatternSelection, { useBlockPatterns } from './pattern-selection';
+import { unlock } from '../../lock-unlock';
 
 const DEFAULTS_POSTS_PER_PAGE = 3;
 
@@ -49,8 +51,10 @@ export default function QueryContent( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
-	const { postsPerPage } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
+	const { postsPerPage, isNavigationMode } = useSelect( ( select ) => {
+		const { getSettings, isNavigationMode: _isNavigationMode } = unlock(
+			select( blockEditorStore )
+		);
 		const { getEntityRecord, getEntityRecordEdits, canUser } =
 			select( coreStore );
 		const settingPerPage = canUser( 'read', {
@@ -67,6 +71,7 @@ export default function QueryContent( {
 			?.posts_per_page;
 
 		return {
+			isNavigationMode: _isNavigationMode(),
 			postsPerPage:
 				editedSettingPerPage ||
 				settingPerPage ||
@@ -126,6 +131,7 @@ export default function QueryContent( {
 		__unstableMarkNextChangeAsNotPersistent,
 		setAttributes,
 	] );
+	const hasPatterns = !! useBlockPatterns( clientId, attributes ).length;
 	const updateDisplayLayout = ( newDisplayLayout ) =>
 		setAttributes( {
 			displayLayout: { ...displayLayout, ...newDisplayLayout },
@@ -149,6 +155,24 @@ export default function QueryContent( {
 				setAttributes={ setAttributes }
 				clientId={ clientId }
 			/>
+			{ hasPatterns && (
+				<InspectorControls
+					group={ isNavigationMode ? 'navigationMode' : 'default' }
+				>
+					<PanelBody
+						initialOpen={ isNavigationMode }
+						title={ __( 'Design' ) }
+						className="block-library-query-toolspanel__design"
+					>
+						<PatternSelection
+							attributes={ attributes }
+							clientId={ clientId }
+							showTitlesAsTooltip
+							showSearch={ false }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
 			<InspectorControls>
 				<QueryInspectorControls
 					name={ name }

diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss
@@ -50,8 +50,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;
 	}
 }