Add view config control to switch on/off hierarchical vizualization

WordPress · Dec 3, 2024 · 292f8d9 · 292f8d9
1 parent f42e9fe
commit 292f8d9
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 5 deletions.
diff --git 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() {
 								<SortFieldControl />
 								<SortDirectionControl />
 							</HStack>
-							{ !! activeLayout?.viewConfigOptions && (
-								<activeLayout.viewConfigOptions />
-							) }
+							{ !! activeLayout?.viewConfigOptions &&
+								activeLayout.viewConfigOptions.map(
+									( Control, index ) => (
+										<Control key={ index } />
+									)
+								) }
 							<ItemsPerPageControl />
 						</SettingsSection>
 						<SettingsSection title={ __( 'Properties' ) }>

diff --git a/packages/dataviews/src/dataviews-layouts/index.ts b/packages/dataviews/src/dataviews-layouts/index.ts
@@ -19,21 +19,22 @@ 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 = [
 	{
 		type: LAYOUT_TABLE,
 		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
@@ -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 (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Hierarchy' ) }
+			value={
+				view.layout?.hierarchicalSort === true ? 'enabled' : 'disabled'
+			}
+			onChange={ ( value ) => {
+				onChangeView( {
+					...view,
+					layout: {
+						...view.layout,
+						hierarchicalSort: value === 'enabled',
+					},
+				} );
+			} }
+		>
+			<ToggleGroupControlOption
+				key="enabled"
+				value="enabled"
+				label={ __( 'Enabled' ) }
+			/>
+			<ToggleGroupControlOption
+				key="disabled"
+				value="disabled"
+				label={ __( 'Disabled' ) }
+			/>
+		</ToggleGroupControl>
+	);
+}
+
+export default SortHierarchicalControl;
diff --git 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
@@ -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
@@ -31,6 +31,7 @@ export const defaultLayouts = {
 		layout: {
 			primaryField: 'title',
 			hierarchical: 'parent',
+			hierarchicalSort: true,
 			styles: {
 				title: {
 					maxWidth: 300,
@@ -43,13 +44,15 @@ export const defaultLayouts = {
 			mediaField: 'featured_media',
 			primaryField: 'title',
 			hierarchical: 'parent', // TODO: remove this
+			hierarchicalSort: true, // TODO: remove this
 		},
 	},
 	[ LAYOUT_LIST ]: {
 		layout: {
 			primaryField: 'title',
 			mediaField: 'featured_media',
 			hierarchical: 'parent', // TODO: remove this
+			hierarchicalSort: true, // TODO: remove this
 		},
 	},
 };