diff --git a/packages/dataviews/src/add-filter.js b/packages/dataviews/src/add-filter.js
index 0ebaa373c3ef9..4f77a35c52d2e 100644
--- a/packages/dataviews/src/add-filter.js
+++ b/packages/dataviews/src/add-filter.js
@@ -23,6 +23,7 @@ const {
DropdownMenuRadioItemV2: DropdownMenuRadioItem,
DropdownMenuSeparatorV2: DropdownMenuSeparator,
DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+ DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,
} = unlock( componentsPrivateApis );
function WithSeparators( { children } ) {
@@ -143,6 +144,13 @@ export default function AddFilter( { filters, view, onChangeView } ) {
{ element.label }
+ { !! element.description && (
+
+ {
+ element.description
+ }
+
+ ) }
);
} ) }
diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js
index f09c15c8eb137..723fee5b3ee52 100644
--- a/packages/dataviews/src/filter-summary.js
+++ b/packages/dataviews/src/filter-summary.js
@@ -23,6 +23,7 @@ const {
DropdownMenuItemV2: DropdownMenuItem,
DropdownMenuSeparatorV2: DropdownMenuSeparator,
DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+ DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,
} = unlock( componentsPrivateApis );
const FilterText = ( { activeElement, filterInView, filter } ) => {
@@ -126,6 +127,11 @@ export default function FilterSummary( { filter, view, onChangeView } ) {
{ element.label }
+ { !! element.description && (
+
+ { element.description }
+
+ ) }
);
} ) }
diff --git a/packages/dataviews/src/filters.js b/packages/dataviews/src/filters.js
index bcc9df9ae327a..a101a07753990 100644
--- a/packages/dataviews/src/filters.js
+++ b/packages/dataviews/src/filters.js
@@ -40,10 +40,13 @@ const Filters = memo( function Filters( { fields, view, onChangeView } ) {
switch ( field.type ) {
case ENUMERATION_TYPE:
+ if ( ! field.elements?.length ) {
+ return;
+ }
filters.push( {
field: field.id,
name: field.header,
- elements: field.elements || [],
+ elements: field.elements,
operators,
isVisible: view.filters.some(
( f ) =>
diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
index e43c9744c560f..5ac4d1d42d573 100644
--- a/packages/dataviews/src/view-grid.js
+++ b/packages/dataviews/src/view-grid.js
@@ -87,7 +87,7 @@ export default function ViewGrid( {
{ field.header }
- { field.render( { item } ) }
+ { renderedValue }
);
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index 0a7e29cd1068c..5bfcba5def4aa 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -26,6 +26,7 @@ const {
DropdownMenuRadioItemV2: DropdownMenuRadioItem,
DropdownMenuSeparatorV2: DropdownMenuSeparator,
DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+ DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,
} = unlock( componentsPrivateApis );
const sortArrows = { asc: '↑', desc: '↓' };
@@ -200,6 +201,11 @@ function HeaderMenu( { field, view, onChangeView } ) {
{ element.label }
+ { !! element.description && (
+
+ { element.description }
+
+ ) }
);
} ) }
diff --git a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
index 0a7c9f204091b..c626336c4f498 100644
--- a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
+++ b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
@@ -9,7 +9,7 @@ import {
Flex,
} from '@wordpress/components';
import { getQueryArgs } from '@wordpress/url';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
import {
useState,
useMemo,
@@ -46,6 +46,8 @@ import {
TEMPLATE_PART_POST_TYPE,
PATTERN_SYNC_TYPES,
PATTERN_DEFAULT_CATEGORY,
+ ENUMERATION_TYPE,
+ OPERATOR_IN,
} from '../../utils/constants';
import {
exportJSONaction,
@@ -76,13 +78,31 @@ const DEFAULT_VIEW = {
search: '',
page: 1,
perPage: 20,
- hiddenFields: [],
+ hiddenFields: [ 'sync-status' ],
layout: {
...defaultConfigPerViewType[ LAYOUT_GRID ],
},
filters: [],
};
+const SYNC_FILTERS = [
+ {
+ value: PATTERN_SYNC_TYPES.full,
+ label: _x( 'Synced', 'Option that shows all synchronized patterns' ),
+ description: __( 'Patterns that are kept in sync across the site.' ),
+ },
+ {
+ value: PATTERN_SYNC_TYPES.unsynced,
+ label: _x(
+ 'Not synced',
+ 'Option that shows all patterns that are not synchronized'
+ ),
+ description: __(
+ 'Patterns that can be changed freely without affecting the site.'
+ ),
+ },
+];
+
function Preview( { item, viewType } ) {
const descriptionId = useId();
const isUserPattern = item.type === PATTERN_TYPES.user;
@@ -204,27 +224,25 @@ export default function DataviewsPatterns() {
const isUncategorizedThemePatterns =
type === PATTERN_TYPES.theme && categoryId === 'uncategorized';
const previousCategoryId = usePrevious( categoryId );
+ const viewSyncStatus = view.filters?.find(
+ ( { field } ) => field === 'sync-status'
+ )?.value;
const { patterns, isResolving } = usePatterns(
type,
isUncategorizedThemePatterns ? '' : categoryId,
{
search: view.search,
- // syncStatus:
- // deferredSyncedFilter === 'all'
- // ? undefined
- // : deferredSyncedFilter,
+ syncStatus: viewSyncStatus,
}
);
- const fields = useMemo(
- () => [
+ const fields = useMemo( () => {
+ const _fields = [
{
header: __( 'Preview' ),
id: 'preview',
render: ( { item } ) => (
),
- minWidth: 120,
- maxWidth: 120,
enableSorting: false,
enableHiding: false,
},
@@ -235,12 +253,36 @@ export default function DataviewsPatterns() {
render: ( { item } ) => (
),
- maxWidth: 400,
enableHiding: false,
},
- ],
- [ view.type, categoryId ]
- );
+ ];
+ if ( type === PATTERN_TYPES.theme ) {
+ _fields.push( {
+ header: __( 'Sync Status' ),
+ id: 'sync-status',
+ render: ( { item } ) => {
+ // User patterns can have their sync statuses checked directly.
+ // Non-user patterns are all unsynced for the time being.
+ return (
+ SYNC_FILTERS.find(
+ ( { value } ) => value === item.syncStatus
+ )?.label ||
+ SYNC_FILTERS.find(
+ ( { value } ) =>
+ value === PATTERN_SYNC_TYPES.unsynced
+ ).label
+ );
+ },
+ type: ENUMERATION_TYPE,
+ elements: SYNC_FILTERS,
+ filterBy: {
+ operators: [ OPERATOR_IN ],
+ },
+ enableSorting: false,
+ } );
+ }
+ return _fields;
+ }, [ view.type, categoryId, type ] );
// Reset the page number when the category changes.
useEffect( () => {
if ( previousCategoryId !== categoryId ) {