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 db743bc16506b..72db4563054e4 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -13,6 +13,8 @@ import { RangeControl, ToggleControl, Notice, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { InspectorControls } from '@wordpress/block-editor'; @@ -26,7 +28,7 @@ import { store as coreStore } from '@wordpress/core-data'; import OrderControl from './order-control'; import AuthorControl from './author-control'; import ParentControl from './parent-control'; -import TaxonomyControls from './taxonomy-controls'; +import { TaxonomyControls, useTaxonomiesInfo } from './taxonomy-controls'; import StickyControl from './sticky-control'; import { usePostTypes } from '../../utils'; @@ -57,6 +59,7 @@ export default function QueryInspectorControls( { } = query; const [ showSticky, setShowSticky ] = useState( postType === 'post' ); const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes(); + const taxonomiesInfo = useTaxonomiesInfo( postType ); const isPostTypeHierarchical = useIsPostTypeHierarchical( postType ); useEffect( () => { setShowSticky( postType === 'post' ); @@ -100,78 +103,139 @@ export default function QueryInspectorControls( { return onChangeDebounced.cancel; }, [ querySearch, onChangeDebounced ] ); return ( - - - setQuery( { inherit: !! value } ) } - /> - { ! inherit && ( - + + + + setQuery( { inherit: !! value } ) + } /> - ) } - { displayLayout?.type === 'flex' && ( - <> - - setDisplayLayout( { columns: value } ) - } - min={ 2 } - max={ Math.max( 6, displayLayout.columns ) } + { ! inherit && ( + - { displayLayout.columns > 6 && ( - - { __( - 'This column count exceeds the recommended amount and may cause visual breakage.' - ) } - - ) } - - ) } - { ! inherit && ( - - ) } - { ! inherit && showSticky && ( - setQuery( { sticky: value } ) } - /> - ) } - - { ! inherit && ( - - - - - { isPostTypeHierarchical && ( - + + 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 && ( + ) } + { ! inherit && showSticky && ( + + setQuery( { sticky: value } ) + } + /> + ) } + + { ! inherit && ( + + { + setQuery( { + author: '', + parents: [], + search: '', + taxQuery: null, + } ); + setQuerySearch( '' ); + } } + > + { !! taxonomiesInfo?.length && ( + + Object.values( taxQuery || {} ).some( + ( terms ) => !! terms.length + ) + } + onDeselect={ () => + setQuery( { taxQuery: null } ) + } + > + + + ) } + !! authorIds } + label={ __( 'Authors' ) } + onDeselect={ () => setQuery( { author: '' } ) } + > + + + !! querySearch } + label={ __( 'Keyword' ) } + onDeselect={ () => setQuerySearch( '' ) } + > + + + { isPostTypeHierarchical && ( + !! parents?.length } + label={ __( 'Parents' ) } + onDeselect={ () => setQuery( { parents: [] } ) } + > + + + ) } + + ) } - + ); } diff --git a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js index 7778996f63ff4..297ea8321985e 100644 --- a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js +++ b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js @@ -33,8 +33,8 @@ const getTermIdByTermValue = ( termsMappedByName, termValue ) => { } }; -function TaxonomyControls( { onChange, query } ) { - const taxonomies = useTaxonomies( query.postType ); +export const useTaxonomiesInfo = ( postType ) => { + const taxonomies = useTaxonomies( postType ); const taxonomiesInfo = useSelect( ( select ) => { const { getEntityRecords } = select( coreStore ); @@ -51,6 +51,11 @@ function TaxonomyControls( { onChange, query } ) { }, [ taxonomies ] ); + return taxonomiesInfo; +}; + +export function TaxonomyControls( { onChange, query } ) { + const taxonomiesInfo = useTaxonomiesInfo( query.postType ); const onTermsChange = ( taxonomySlug ) => ( newTermValues ) => { const taxonomyInfo = taxonomiesInfo.find( ( { slug } ) => slug === taxonomySlug @@ -102,17 +107,19 @@ function TaxonomyControls( { onChange, query } ) { return null; } return ( - + className="block-library-query-inspector__taxonomy-control" + > + + ); } ) } ); } - -export default TaxonomyControls; diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss index c8c9650d83722..e6eead11f152c 100644 --- a/packages/block-library/src/query/editor.scss +++ b/packages/block-library/src/query/editor.scss @@ -43,3 +43,12 @@ max-height: none; } } + +.block-library-query-toolspanel__filters { + .components-form-token-field__help { + margin-bottom: 0; + } + .block-library-query-inspector__taxonomy-control:not(:last-child) { + margin-bottom: $grid-unit-30; + } +}