diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md index a1d03a42baab49..9128c71e64874d 100644 --- a/packages/edit-site/src/components/dataviews/README.md +++ b/packages/edit-site/src/components/dataviews/README.md @@ -69,12 +69,12 @@ The fields describe the dataset. For example: ); }, elements: [ - { value: 1, label: 'admin' } - { value: 2, label: 'user' } + { value: 1, label: 'Admin' } + { value: 2, label: 'User' } ] filters: [ - { id: 'author', type: 'enumeration' }, - { id: 'author_search', type: 'search' } + 'enumeration', + { id: 'author_search', type: 'search', name: __( 'Search by author' ) } ], }, ] @@ -85,10 +85,12 @@ The fields describe the dataset. For example: - `getValue`: function that returns the value of the field. - `render`: function that renders the field. - `elements`: a set of valid values for the field. -- `filters`: what filters are available. A filter is an object with `id` and `type` as properties: - - `id`: unique identifier for the filter. Matches the entity query param. +- `filters`: what filters are available for the user to use. A filter contains the following properties: + - `id`: unique identifier for the filter. Matches the entity query param. If not provided, the field's `id` is used. + - `name`: nice looking name for the filter. If not provided, the field's `header` is used. - `type`: the type of filter. One of `search` or `enumeration`. - + - `resetLabel`: the label for the reset option of the filter. If none provided, `All` is used. + - `resetValue`: the value for the reset option of the filter. If none provedid, `''` is used. ## DataViews diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index 8d72852e26bcb4..e30b3c9ca71bdf 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -16,8 +16,38 @@ export default function Filters( { fields, view, onChangeView } ) { return; } - field.filters.forEach( ( f ) => { - filters[ f.id ] = { type: f.type }; + field.filters.forEach( ( filter ) => { + let id = field.id; + if ( 'string' === typeof filter ) { + filters[ id ] = { + id, + name: field.header, + type: filter, + }; + } + + if ( 'object' === typeof filter ) { + id = filter.id || field.id; + filters[ id ] = { + id, + name: filter.name || field.header, + type: filter.type, + }; + } + + if ( 'enumeration' === filters[ id ]?.type ) { + const elements = [ + { + value: filter.resetValue || '', + label: filter.resetLabel || __( 'All' ), + }, + ...( field.elements || [] ), + ]; + filters[ id ] = { + ...filters[ id ], + elements, + }; + } } ); } ); @@ -33,7 +63,7 @@ export default function Filters( { fields, view, onChangeView } ) { return ( @@ -43,8 +73,7 @@ export default function Filters( { fields, view, onChangeView } ) { return ( diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js index 0b62b59a3028b0..ca9436f5a7ea1f 100644 --- a/packages/edit-site/src/components/dataviews/in-filter.js +++ b/packages/edit-site/src/components/dataviews/in-filter.js @@ -14,21 +14,19 @@ import { unlock } from '../../lock-unlock'; const { cleanEmptyObject } = unlock( blockEditorPrivateApis ); -export default ( { id, fields, view, onChangeView } ) => { - const field = fields.find( ( f ) => f.id === id ); - +export default ( { filter, view, onChangeView } ) => { return ( - { field.header + ':' } + { filter.name + ':' } } - options={ field?.elements || [] } + options={ filter.elements } onChange={ ( value ) => { if ( value === '' ) { value = undefined; @@ -38,7 +36,7 @@ export default ( { id, fields, view, onChangeView } ) => { ...currentView, filters: cleanEmptyObject( { ...currentView.filters, - [ id ]: value, + [ filter.id ]: value, } ), } ) ); } } diff --git a/packages/edit-site/src/components/dataviews/text-filter.js b/packages/edit-site/src/components/dataviews/text-filter.js index 4791bc1357e8df..cf324478391953 100644 --- a/packages/edit-site/src/components/dataviews/text-filter.js +++ b/packages/edit-site/src/components/dataviews/text-filter.js @@ -10,9 +10,9 @@ import { SearchControl } from '@wordpress/components'; */ import useDebouncedInput from '../../utils/use-debounced-input'; -export default function TextFilter( { id, view, onChangeView } ) { +export default function TextFilter( { filter, view, onChangeView } ) { const [ search, setSearch, debouncedSearch ] = useDebouncedInput( - view.filters[ id ] + view.filters[ filter.id ] ); const onChangeViewRef = useRef( onChangeView ); useEffect( () => { @@ -24,7 +24,7 @@ export default function TextFilter( { id, view, onChangeView } ) { page: 1, filters: { ...currentView.filters, - [ id ]: debouncedSearch, + [ filter.id ]: debouncedSearch, }, } ) ); }, [ debouncedSearch ] ); diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 4b7fe8228a53a9..0745810af3e441 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -133,7 +133,9 @@ export default function PagePages() { ); }, - filters: [ { id: 'search', type: 'search' } ], + filters: [ + { id: 'search', type: 'search', name: __( 'Search' ) }, + ], maxWidth: 400, sortingFn: 'alphanumeric', enableHiding: false, @@ -150,27 +152,27 @@ export default function PagePages() { ); }, - filters: [ { id: 'author', type: 'enumeration' } ], - elements: [ - { - value: '', - label: __( 'All' ), - }, - ...( authors?.map( ( { id, name } ) => ( { + filters: [ 'enumeration' ], + elements: + authors?.map( ( { id, name } ) => ( { value: id, label: name, - } ) ) || [] ), - ], + } ) ) || [], }, { header: __( 'Status' ), id: 'status', getValue: ( { item } ) => postStatuses[ item.status ] ?? item.status, - filters: [ { type: 'enumeration', id: 'status' } ], - elements: [ - { label: __( 'All' ), value: 'publish,draft' }, - ...( ( postStatuses && + filters: [ + { + type: 'enumeration', + id: 'status', + resetValue: 'publish,draft', + }, + ], + elements: + ( postStatuses && Object.entries( postStatuses ) .filter( ( [ slug ] ) => [ 'publish', 'draft' ].includes( slug ) @@ -179,8 +181,7 @@ export default function PagePages() { value: slug, label: name, } ) ) ) || - [] ), - ], + [], enableSorting: false, }, {