From 731819e9ede5dccd8f7199f5ed52b76288f043c3 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 29 Aug 2022 11:10:53 +0300 Subject: [PATCH 1/6] allowedControls in Query Loop variations --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/query/block.json | 3 + .../query/edit/inspector-controls/index.js | 178 +++++++++++------- .../block-library/src/query/variations.js | 24 +++ 4 files changed, 139 insertions(+), 68 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 24839c7311000e..81707714170100 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 6267e53f24c126..cd09e22ee57f75 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 72db4563054e40..aa1ab20a4de001 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 fb15645760f293..f3b529b6507139 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' ), From a12e891774ea49bf15191617d7f22a1055be3108 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 7 Sep 2022 14:47:26 +0300 Subject: [PATCH 2/6] allow empty array as value of allowedControls --- .../block-library/src/query/edit/inspector-controls/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 aa1ab20a4de001..123fe219b0e97e 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -59,8 +59,8 @@ function useAllowedControls( attributes ) { } function isControllAllowed( allowedControls, key ) { - // Every controls is allowed if the list is empty or not defined. - if ( ! allowedControls?.length ) { + // Every controls is allowed if the list is not defined. + if ( ! allowedControls ) { return true; } return allowedControls.includes( key ); From c428d5fc45bcba4e5d40d764ec8bcf10beec882c Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 7 Sep 2022 16:12:03 +0300 Subject: [PATCH 3/6] remove test variation --- .../block-library/src/query/variations.js | 24 ------------------- 1 file changed, 24 deletions(-) diff --git a/packages/block-library/src/query/variations.js b/packages/block-library/src/query/variations.js index f3b529b6507139..fb15645760f293 100644 --- a/packages/block-library/src/query/variations.js +++ b/packages/block-library/src/query/variations.js @@ -31,30 +31,6 @@ 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' ), From 76401acb3cdd0982aca4a3d5b3190b022070c080 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 7 Sep 2022 16:42:27 +0300 Subject: [PATCH 4/6] move to utils --- .../query/edit/inspector-controls/index.js | 43 +++------------- packages/block-library/src/query/utils.js | 49 ++++++++++++++++++- 2 files changed, 54 insertions(+), 38 deletions(-) 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 123fe219b0e97e..042a36fc9d0f65 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -19,9 +19,6 @@ import { import { __ } from '@wordpress/i18n'; 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,40 +28,12 @@ import AuthorControl from './author-control'; 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( - ( select ) => { - const type = select( coreStore ).getPostType( postType ); - return type?.viewable && type?.hierarchical; - }, - [ 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 not defined. - if ( ! allowedControls ) { - return true; - } - return allowedControls.includes( key ); -} +import { + usePostTypes, + useIsPostTypeHierarchical, + useAllowedControls, + isControllAllowed, +} from '../../utils'; export default function QueryInspectorControls( { attributes, diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js index fb62191696f115..07b20879a0f760 100644 --- a/packages/block-library/src/query/utils.js +++ b/packages/block-library/src/query/utils.js @@ -10,7 +10,12 @@ import { useSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; -import { cloneBlock } from '@wordpress/blocks'; +import { cloneBlock, store as blocksStore } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { name as queryLoopName } from './block.json'; /** * @typedef IHasNameAndId @@ -127,6 +132,48 @@ export const useTaxonomies = ( postType ) => { return taxonomies; }; +/** + * Hook that returns whether a specific post type is hierarchical. + * + * @param {string} postType The post type to check. + * @return {boolean} Whether a specific post type is hierarchical. + */ +export function useIsPostTypeHierarchical( postType ) { + return useSelect( + ( select ) => { + const type = select( coreStore ).getPostType( postType ); + return type?.viewable && type?.hierarchical; + }, + [ postType ] + ); +} + +/** + * Hook that returns the query properties' names defined by the active + * block variation, to determine which block's filters to show. + * + * @param {Object} attributes Block attributes. + * @return {string[]} An array of the query attributes. + */ +export function useAllowedControls( attributes ) { + return useSelect( + ( select ) => + select( blocksStore ).getActiveBlockVariation( + queryLoopName, + attributes + )?.allowControls, + + [ attributes ] + ); +} +export function isControllAllowed( allowedControls, key ) { + // Every controls is allowed if the list is not defined. + if ( ! allowedControls ) { + return true; + } + return allowedControls.includes( key ); +} + /** * Clones a pattern's blocks and then recurses over that list of blocks, * transforming them to retain some `query` attribute properties. From b2506b81fb25cad389c65931b761adcda7a46d3c Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 8 Sep 2022 14:19:22 +0300 Subject: [PATCH 5/6] allow to hide the 'inherit' control --- .../query/edit/inspector-controls/index.js | 102 ++++++++++-------- 1 file changed, 59 insertions(+), 43 deletions(-) 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 042a36fc9d0f65..2500afbedd06d9 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -97,22 +97,40 @@ export default function QueryInspectorControls( { onChangeDebounced(); return onChangeDebounced.cancel; }, [ querySearch, onChangeDebounced ] ); + const showInheritControl = isControllAllowed( allowedControls, 'inherit' ); + const showPostTypeControl = + ! inherit && isControllAllowed( allowedControls, 'postType' ); + const showColumnsControl = displayLayout?.type === 'flex'; + const showOrderControl = + ! inherit && isControllAllowed( allowedControls, 'order' ); + const showStickyControl = + ! inherit && + showSticky && + isControllAllowed( allowedControls, 'sticky' ); + const showSettingsPanel = + showInheritControl || + showPostTypeControl || + showColumnsControl || + showOrderControl || + showStickyControl; return ( <> - - - + + { showInheritControl && ( + + setQuery( { inherit: !! value } ) + } + /> ) } - checked={ !! inherit } - onChange={ ( value ) => - setQuery( { inherit: !! value } ) - } - /> - { ! inherit && - isControllAllowed( allowedControls, 'postType' ) && ( + { showPostTypeControl && ( ) } - { displayLayout?.type === 'flex' && ( - <> - - setDisplayLayout( { columns: value } ) - } - min={ 2 } - max={ Math.max( 6, displayLayout.columns ) } - /> - { displayLayout.columns > 6 && ( - - { __( - 'This column count exceeds the recommended amount and may cause visual breakage.' - ) } - - ) } - - ) } - { ! inherit && - isControllAllowed( allowedControls, 'order' ) && ( + { showColumnsControl && ( + <> + + setDisplayLayout( { columns: value } ) + } + min={ 2 } + max={ Math.max( 6, displayLayout.columns ) } + /> + { displayLayout.columns > 6 && ( + + { __( + 'This column count exceeds the recommended amount and may cause visual breakage.' + ) } + + ) } + + ) } + { showOrderControl && ( ) } - { ! inherit && - showSticky && - isControllAllowed( allowedControls, 'sticky' ) && ( + { showStickyControl && ( @@ -163,8 +178,9 @@ export default function QueryInspectorControls( { } /> ) } - - + + + ) } { ! inherit && ( Date: Thu, 8 Sep 2022 14:38:15 +0300 Subject: [PATCH 6/6] fix typo --- .../query/edit/inspector-controls/index.js | 21 ++++++++----------- packages/block-library/src/query/utils.js | 2 +- 2 files changed, 10 insertions(+), 13 deletions(-) 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 2500afbedd06d9..33e77def49352d 100644 --- 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,7 @@ import { usePostTypes, useIsPostTypeHierarchical, useAllowedControls, - isControllAllowed, + isControlAllowed, } from '../../utils'; export default function QueryInspectorControls( { @@ -97,16 +97,16 @@ export default function QueryInspectorControls( { onChangeDebounced(); return onChangeDebounced.cancel; }, [ querySearch, onChangeDebounced ] ); - const showInheritControl = isControllAllowed( allowedControls, 'inherit' ); + const showInheritControl = isControlAllowed( allowedControls, 'inherit' ); const showPostTypeControl = - ! inherit && isControllAllowed( allowedControls, 'postType' ); + ! inherit && isControlAllowed( allowedControls, 'postType' ); const showColumnsControl = displayLayout?.type === 'flex'; const showOrderControl = - ! inherit && isControllAllowed( allowedControls, 'order' ); + ! inherit && isControlAllowed( allowedControls, 'order' ); const showStickyControl = ! inherit && showSticky && - isControllAllowed( allowedControls, 'sticky' ); + isControlAllowed( allowedControls, 'sticky' ); const showSettingsPanel = showInheritControl || showPostTypeControl || @@ -197,10 +197,7 @@ export default function QueryInspectorControls( { } } > { !! taxonomiesInfo?.length && - isControllAllowed( - allowedControls, - 'taxQuery' - ) && ( + isControlAllowed( allowedControls, 'taxQuery' ) && ( @@ -218,7 +215,7 @@ export default function QueryInspectorControls( { /> ) } - { isControllAllowed( allowedControls, 'author' ) && ( + { isControlAllowed( allowedControls, 'author' ) && ( !! authorIds } label={ __( 'Authors' ) } @@ -230,7 +227,7 @@ export default function QueryInspectorControls( { /> ) } - { isControllAllowed( allowedControls, 'search' ) && ( + { isControlAllowed( allowedControls, 'search' ) && ( !! querySearch } label={ __( 'Keyword' ) } @@ -244,7 +241,7 @@ export default function QueryInspectorControls( { ) } { isPostTypeHierarchical && - ! isControllAllowed( + ! isControlAllowed( allowedControls, 'parents' ) && ( diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js index 07b20879a0f760..d3633575616632 100644 --- a/packages/block-library/src/query/utils.js +++ b/packages/block-library/src/query/utils.js @@ -166,7 +166,7 @@ export function useAllowedControls( attributes ) { [ attributes ] ); } -export function isControllAllowed( allowedControls, key ) { +export function isControlAllowed( allowedControls, key ) { // Every controls is allowed if the list is not defined. if ( ! allowedControls ) { return true;