From 292f8d9066bee683c8661284b0ba58879ab255d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:34:03 +0100
Subject: [PATCH] Add view config control to switch on/off hierarchical
vizualization
---
.../dataviews-view-config/index.tsx | 9 ++-
.../dataviews/src/dataviews-layouts/index.ts | 5 +-
.../table/sort-hierarchical.tsx | 55 +++++++++++++++++++
packages/dataviews/src/types.ts | 5 ++
.../src/components/post-list/index.js | 4 ++
.../sidebar-dataviews/default-views.js | 3 +
6 files changed, 76 insertions(+), 5 deletions(-)
create mode 100644 packages/dataviews/src/dataviews-layouts/table/sort-hierarchical.tsx
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index f13670f27cdab7..ce24009f9b9302 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -545,9 +545,12 @@ function DataviewsViewConfigDropdown() {
- { !! activeLayout?.viewConfigOptions && (
-
- ) }
+ { !! activeLayout?.viewConfigOptions &&
+ activeLayout.viewConfigOptions.map(
+ ( Control, index ) => (
+
+ )
+ ) }
diff --git a/packages/dataviews/src/dataviews-layouts/index.ts b/packages/dataviews/src/dataviews-layouts/index.ts
index 7abdd1eb459328..fdfd3da9c98f91 100644
--- a/packages/dataviews/src/dataviews-layouts/index.ts
+++ b/packages/dataviews/src/dataviews-layouts/index.ts
@@ -19,6 +19,7 @@ import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
import type { View, Field } from '../types';
import PreviewSizePicker from './grid/preview-size-picker';
import DensityPicker from './table/density-picker';
+import SortHierarchical from './table/sort-hierarchical';
export const VIEW_LAYOUTS = [
{
@@ -26,14 +27,14 @@ export const VIEW_LAYOUTS = [
label: __( 'Table' ),
component: ViewTable,
icon: blockTable,
- viewConfigOptions: DensityPicker,
+ viewConfigOptions: [ SortHierarchical, DensityPicker ],
},
{
type: LAYOUT_GRID,
label: __( 'Grid' ),
component: ViewGrid,
icon: category,
- viewConfigOptions: PreviewSizePicker,
+ viewConfigOptions: [ PreviewSizePicker ],
},
{
type: LAYOUT_LIST,
diff --git a/packages/dataviews/src/dataviews-layouts/table/sort-hierarchical.tsx b/packages/dataviews/src/dataviews-layouts/table/sort-hierarchical.tsx
new file mode 100644
index 00000000000000..9d73c735a75671
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/table/sort-hierarchical.tsx
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ __experimentalToggleGroupControl as ToggleGroupControl,
+ __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../components/dataviews-context';
+import type { ViewTable } from '../../types';
+
+function SortHierarchicalControl() {
+ const context = useContext( DataViewsContext );
+ const view = context.view as ViewTable;
+ const onChangeView = context.onChangeView;
+
+ return (
+ {
+ onChangeView( {
+ ...view,
+ layout: {
+ ...view.layout,
+ hierarchicalSort: value === 'enabled',
+ },
+ } );
+ } }
+ >
+
+
+
+ );
+}
+
+export default SortHierarchicalControl;
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index e4a66d8d0acc7a..83e8d17899e1d6 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -359,6 +359,11 @@ export interface ViewTable extends ViewBase {
* The field to visualize hierarchical data.
*/
hierarchical?: string;
+
+ /**
+ * Switch on/off hierarchical sorting.
+ */
+ hierarchicalSort?: boolean;
};
}
diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
index 200aa60ee17977..9fb0442abdac0c 100644
--- a/packages/edit-site/src/components/post-list/index.js
+++ b/packages/edit-site/src/components/post-list/index.js
@@ -290,6 +290,10 @@ export default function PostList( { postType } ) {
_embed: 'author',
order: view.sort?.direction,
orderby: view.sort?.field,
+ orderby_hierarchy:
+ view.type === 'table' && !! view.layout?.hierarchicalSort
+ ? true
+ : false,
search: view.search,
...filters,
};
diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
index 847550ef7c6751..d4780cfb755fb7 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -31,6 +31,7 @@ export const defaultLayouts = {
layout: {
primaryField: 'title',
hierarchical: 'parent',
+ hierarchicalSort: true,
styles: {
title: {
maxWidth: 300,
@@ -43,6 +44,7 @@ export const defaultLayouts = {
mediaField: 'featured_media',
primaryField: 'title',
hierarchical: 'parent', // TODO: remove this
+ hierarchicalSort: true, // TODO: remove this
},
},
[ LAYOUT_LIST ]: {
@@ -50,6 +52,7 @@ export const defaultLayouts = {
primaryField: 'title',
mediaField: 'featured_media',
hierarchical: 'parent', // TODO: remove this
+ hierarchicalSort: true, // TODO: remove this
},
},
};