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;
+ }
+}