diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index 655bd83732293..e34ba84040a95 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -7,6 +7,8 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { default as InFilter, OPERATOR_IN } from './in-filter'; +import ResetFilters from './reset-filters'; + const VALID_OPERATORS = [ OPERATOR_IN ]; export default function Filters( { fields, view, onChangeView } ) { @@ -34,27 +36,41 @@ export default function Filters( { fields, view, onChangeView } ) { } ); } ); - return view.visibleFilters?.map( ( fieldName ) => { - const visibleFiltersForField = filtersRegistered.filter( - ( f ) => f.field === fieldName - ); + const visibleFilters = view.visibleFilters + ?.map( ( fieldName ) => { + const visibleFiltersForField = filtersRegistered.filter( + ( f ) => f.field === fieldName + ); - if ( visibleFiltersForField.length === 0 ) { - return null; - } - - return visibleFiltersForField.map( ( filter ) => { - if ( OPERATOR_IN === filter.operator ) { - return ( - - ); + if ( visibleFiltersForField.length === 0 ) { + return null; } - return null; - } ); - } ); + + return visibleFiltersForField.map( ( filter ) => { + if ( OPERATOR_IN === filter.operator ) { + return ( + + ); + } + return null; + } ); + } ) + .filter( Boolean ); + + if ( visibleFilters?.length > 0 ) { + visibleFilters.push( + + ); + } + + return visibleFilters; } diff --git a/packages/edit-site/src/components/dataviews/reset-filters.js b/packages/edit-site/src/components/dataviews/reset-filters.js new file mode 100644 index 0000000000000..68b5c17590c97 --- /dev/null +++ b/packages/edit-site/src/components/dataviews/reset-filters.js @@ -0,0 +1,26 @@ +/** + * WordPress dependencies + */ +import { BaseControl, Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +export default ( { view, onChangeView } ) => { + return ( + + + + ); +};