diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js
index a13e2cdf25865b..1ede6ebcd8b75a 100644
--- a/packages/edit-site/src/components/dataviews/view-actions.js
+++ b/packages/edit-site/src/components/dataviews/view-actions.js
@@ -13,6 +13,8 @@ import {
check,
blockTable,
chevronDown,
+ arrowUp,
+ arrowDown,
} from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
@@ -67,7 +69,7 @@ function PageSizeMenu( { dataView } ) {
suffix={
<>
{ currenPageSize }
- { ' ' }
+
>
}
>
@@ -116,20 +118,20 @@ function FieldsVisibilityMenu( { dataView } ) {
}
>
- { hideableFields?.map( ( column ) => {
+ { hideableFields?.map( ( field ) => {
return (
+ field.getIsVisible() &&
}
onSelect={ ( event ) => {
event.preventDefault();
- column.getToggleVisibilityHandler()( event );
+ field.getToggleVisibilityHandler()( event );
} }
role="menuitemcheckbox"
>
- { column.columnDef.header }
+ { field.columnDef.header }
);
} ) }
@@ -137,6 +139,91 @@ function FieldsVisibilityMenu( { dataView } ) {
);
}
+// This object is used to construct the sorting options per sortable field.
+const sortingItemsInfo = {
+ asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
+ desc: { icon: arrowDown, label: __( 'Sort descending' ) },
+};
+function SortMenu( { dataView } ) {
+ const sortableFields = dataView
+ .getAllColumns()
+ .filter( ( columnn ) => columnn.getCanSort() );
+ if ( ! sortableFields?.length ) {
+ return null;
+ }
+ const currentSortedField = sortableFields.find( ( field ) =>
+ field.getIsSorted()
+ );
+ return (
+
+ { currentSortedField?.columnDef.header }
+
+ >
+ }
+ >
+ { __( 'Sort by' ) }
+
+ }
+ >
+ { sortableFields?.map( ( field ) => {
+ const sortedDirection = field.getIsSorted();
+ return (
+ }
+ >
+ { field.columnDef.header }
+
+ }
+ side="left"
+ >
+ { Object.entries( sortingItemsInfo ).map(
+ ( [ direction, info ] ) => {
+ return (
+ }
+ suffix={
+ sortedDirection === direction && (
+
+ )
+ }
+ onSelect={ ( event ) => {
+ event.preventDefault();
+ if (
+ sortedDirection === direction
+ ) {
+ dataView.resetSorting();
+ } else {
+ dataView.setSorting( [
+ {
+ id: field.id,
+ desc:
+ direction ===
+ 'desc',
+ },
+ ] );
+ }
+ } }
+ >
+ { info.label }
+
+ );
+ }
+ ) }
+
+ );
+ } ) }
+
+ );
+}
+
export default function ViewActions( { dataView, className } ) {
return (
+