diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 3d2f9a11f91a2..e88adbef06c78 100644 --- 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 index 6267e53f24c12..cd09e22ee57f7 100644 --- 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 index 72db4563054e4..aa1ab20a4de00 100644 --- 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,32 @@ function useIsPostTypeHierarchical( postType ) { ); } +function useAllowedControls( attributes ) { + return useSelect( + ( select ) => + select( blocksStore ).getActiveBlockVariation( + queryLoopName, + attributes + )?.allowControls || EMPTY_ARRAY, + + [ attributes ] + ); +} + +function isControllAllowed( allowedControls, key ) { + // Every controls is allowed if the list is empty or not defined. + if ( ! allowedControls?.length ) { + return true; + } + return allowedControls.includes( key ); +} + export default function QueryInspectorControls( { - attributes: { query, displayLayout }, + attributes, setQuery, setDisplayLayout, } ) { + const { query, displayLayout } = attributes; const { order, orderBy, @@ -57,6 +82,7 @@ export default function QueryInspectorControls( { taxQuery, parents, } = query; + const allowedControls = useAllowedControls( attributes ); const [ showSticky, setShowSticky ] = useState( postType === 'post' ); const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes(); const taxonomiesInfo = useTaxonomiesInfo( postType ); @@ -116,17 +142,18 @@ export default function QueryInspectorControls( { setQuery( { inherit: !! value } ) } /> - { ! inherit && ( - - ) } + { ! inherit && + isControllAllowed( allowedControls, 'postType' ) && ( + + ) } { displayLayout?.type === 'flex' && ( <> ) } - { ! inherit && ( - - ) } - { ! inherit && showSticky && ( - - setQuery( { sticky: value } ) - } - /> - ) } + { ! inherit && + isControllAllowed( allowedControls, 'order' ) && ( + + ) } + { ! inherit && + showSticky && + isControllAllowed( allowedControls, 'sticky' ) && ( + + setQuery( { sticky: value } ) + } + /> + ) } { ! inherit && ( @@ -181,58 +211,72 @@ export default function QueryInspectorControls( { setQuerySearch( '' ); } } > - { !! taxonomiesInfo?.length && ( + { !! taxonomiesInfo?.length && + isControllAllowed( + allowedControls, + 'taxQuery' + ) && ( + + Object.values( taxQuery || {} ).some( + ( terms ) => !! terms.length + ) + } + onDeselect={ () => + setQuery( { taxQuery: null } ) + } + > + + + ) } + { isControllAllowed( allowedControls, 'author' ) && ( - Object.values( taxQuery || {} ).some( - ( terms ) => !! terms.length - ) - } - onDeselect={ () => - setQuery( { taxQuery: null } ) - } + hasValue={ () => !! authorIds } + label={ __( 'Authors' ) } + onDeselect={ () => setQuery( { author: '' } ) } > - ) } - !! authorIds } - label={ __( 'Authors' ) } - onDeselect={ () => setQuery( { author: '' } ) } - > - - - !! querySearch } - label={ __( 'Keyword' ) } - onDeselect={ () => setQuerySearch( '' ) } - > - - - { isPostTypeHierarchical && ( + { isControllAllowed( allowedControls, 'search' ) && ( !! parents?.length } - label={ __( 'Parents' ) } - onDeselect={ () => setQuery( { parents: [] } ) } + hasValue={ () => !! querySearch } + label={ __( 'Keyword' ) } + onDeselect={ () => setQuerySearch( '' ) } > - ) } + { isPostTypeHierarchical && + ! isControllAllowed( + allowedControls, + 'parents' + ) && ( + !! parents?.length } + label={ __( 'Parents' ) } + onDeselect={ () => + setQuery( { parents: [] } ) + } + > + + + ) } ) } diff --git a/packages/block-library/src/query/variations.js b/packages/block-library/src/query/variations.js index fb15645760f29..f3b529b650713 100644 --- a/packages/block-library/src/query/variations.js +++ b/packages/block-library/src/query/variations.js @@ -31,6 +31,30 @@ 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, + }, + namespace: 'wp/query/products', + }, + allowControls: [ 'order', 'taxQuery', 'search' ], + isActive: ( blockAttributes, variationAttributes ) => + blockAttributes?.namespace === variationAttributes.namespace, + scope: [ 'inserter' ], + }, { name: 'posts-list', title: __( 'Posts List' ),