variation's hideControls property

WordPress · Aug 26, 2022 · 7f75edc · 7f75edc
1 parent b4f6baa
commit 7f75edc
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 23 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -609,7 +609,7 @@ An advanced block that allows displaying post types based on different query par
 -	**Name:** core/query
 -	**Category:** theme
 -	**Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~
--	**Attributes:** displayLayout, query, queryId, tagName
+-	**Attributes:** displayLayout, namespace, query, queryId, tagName
 
 ## No results
 

diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json
@@ -37,6 +37,9 @@
 			"default": {
 				"type": "list"
 			}
+		},
+		"namespace": {
+			"type": "string"
 		}
 	},
 	"providesContext": {

diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -21,6 +21,7 @@ import { InspectorControls } from '@wordpress/block-editor';
 import { useEffect, useState, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -31,6 +32,9 @@ import ParentControl from './parent-control';
 import { TaxonomyControls, useTaxonomiesInfo } from './taxonomy-controls';
 import StickyControl from './sticky-control';
 import { usePostTypes } from '../../utils';
+import { name as queryLoopName } from '../../block.json';
+
+const EMPTY_ARRAY = [];
 
 function useIsPostTypeHierarchical( postType ) {
 	return useSelect(
@@ -42,11 +46,24 @@ function useIsPostTypeHierarchical( postType ) {
 	);
 }
 
+function useControlsToHide( attributes ) {
+	return useSelect(
+		( select ) =>
+			select( blocksStore ).getActiveBlockVariation(
+				queryLoopName,
+				attributes
+			)?.hideControls || EMPTY_ARRAY,
+
+		[ attributes ]
+	);
+}
+
 export default function QueryInspectorControls( {
-	attributes: { query, displayLayout },
+	attributes,
 	setQuery,
 	setDisplayLayout,
 } ) {
+	const { query, displayLayout } = attributes;
 	const {
 		order,
 		orderBy,
@@ -57,6 +74,12 @@ export default function QueryInspectorControls( {
 		taxQuery,
 		parents,
 	} = query;
+	// TODO: query attributes can still be updated from `code editor`.
+	// Should we check for such updates when we have `hideControls` and
+	// handle them accordingly?
+	// TODO: also explore the inverse logic(not what to hide, but what to show..).
+	// TODO: we need to hide most controls here, if not all..
+	const controlsToHide = useControlsToHide( attributes );
 	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
 	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
 	const taxonomiesInfo = useTaxonomiesInfo( postType );
@@ -116,7 +139,7 @@ export default function QueryInspectorControls( {
 							setQuery( { inherit: !! value } )
 						}
 					/>
-					{ ! inherit && (
+					{ ! inherit && ! controlsToHide.includes( 'postType' ) && (
 						<SelectControl
 							options={ postTypesSelectOptions }
 							value={ postType }
@@ -199,27 +222,31 @@ export default function QueryInspectorControls( {
 								/>
 							</ToolsPanelItem>
 						) }
-						<ToolsPanelItem
-							hasValue={ () => !! authorIds }
-							label={ __( 'Authors' ) }
-							onDeselect={ () => setQuery( { author: '' } ) }
-						>
-							<AuthorControl
-								value={ authorIds }
-								onChange={ setQuery }
-							/>
-						</ToolsPanelItem>
-						<ToolsPanelItem
-							hasValue={ () => !! querySearch }
-							label={ __( 'Keyword' ) }
-							onDeselect={ () => setQuerySearch( '' ) }
-						>
-							<TextControl
+						{ ! controlsToHide.includes( 'author' ) && (
+							<ToolsPanelItem
+								hasValue={ () => !! authorIds }
+								label={ __( 'Authors' ) }
+								onDeselect={ () => setQuery( { author: '' } ) }
+							>
+								<AuthorControl
+									value={ authorIds }
+									onChange={ setQuery }
+								/>
+							</ToolsPanelItem>
+						) }
+						{ ! controlsToHide.includes( 'search' ) && (
+							<ToolsPanelItem
+								hasValue={ () => !! querySearch }
 								label={ __( 'Keyword' ) }
-								value={ querySearch }
-								onChange={ setQuerySearch }
-							/>
-						</ToolsPanelItem>
+								onDeselect={ () => setQuerySearch( '' ) }
+							>
+								<TextControl
+									label={ __( 'Keyword' ) }
+									value={ querySearch }
+									onChange={ setQuerySearch }
+								/>
+							</ToolsPanelItem>
+						) }
 						{ isPostTypeHierarchical && (
 							<ToolsPanelItem
 								hasValue={ () => !! parents?.length }

diff --git a/packages/block-library/src/query/variations.js b/packages/block-library/src/query/variations.js
@@ -31,6 +31,40 @@ const QUERY_DEFAULT_ATTRIBUTES = {
 };
 
 const variations = [
+	{
+		name: 'products-list',
+		title: __( 'Products List' ),
+		description: __( 'Display a list of your products.' ),
+		attributes: {
+			query: {
+				perPage: 4,
+				pages: 1,
+				offset: 0,
+				postType: 'product',
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				sticky: 'exclude',
+				inherit: false,
+			},
+			// TODO: We also need to check for implications when we `inherit`...
+			// We need a namespace to constraint changes to each variation.
+			namespace: 'wp/query/products',
+			// // TODO: also find a better name. `meta` is too generic. Something like `variationMeta`?..
+			// meta: {
+			// 	query: {},
+			// },
+		},
+		// The idea here is to have an array of the `query` attribute properties
+		// we want to hide, that will be checked in the block's `edit` function.
+		hideControls: [ 'postType', 'author' ],
+		// TODO: we need to check how resilient we want to make this,
+		// due to the ability to change values in code editor..
+		isActive: ( blockAttributes, variationAttributes ) =>
+			blockAttributes?.namespace === variationAttributes.namespace,
+		scope: [ 'inserter' ],
+	},
 	{
 		name: 'posts-list',
 		title: __( 'Posts List' ),