From d0745d4d282f1bc53625b490c37ac77bda7faef3 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Thu, 1 Aug 2024 12:43:01 +0100
Subject: [PATCH 01/18] New view config UI

---
 .../dataviews-view-config/index.tsx           | 527 +++++++++---------
 .../dataviews-view-config/style.scss          |  39 ++
 packages/dataviews/src/constants.ts           |   4 +
 packages/dataviews/src/style.scss             |   1 +
 4 files changed, 298 insertions(+), 273 deletions(-)
 create mode 100644 packages/dataviews/src/components/dataviews-view-config/style.scss

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index b89e964f6a5d0..eaa0dbca1e8b8 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -1,150 +1,195 @@
 /**
  * External dependencies
  */
-import type { ChangeEvent } from 'react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import {
 	Button,
-	privateApis as componentsPrivateApis,
+	Popover,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	SelectControl,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { memo, useContext } from '@wordpress/element';
-import { cog } from '@wordpress/icons';
+import { memo, useContext, useState, useMemo } from '@wordpress/element';
+import { cog, seen } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
-import { SORTING_DIRECTIONS, sortLabels } from '../../constants';
+import { SORTING_DIRECTIONS, sortLabelsShort } from '../../constants';
 import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
-import type { NormalizedField, View, SupportedLayouts } from '../../types';
+import type { SupportedLayouts } from '../../types';
 import DataViewsContext from '../dataviews-context';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
-	DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-} = unlock( componentsPrivateApis );
-
-interface ViewTypeMenuProps {
-	view: View;
-	onChangeView: ( view: View ) => void;
+interface ViewActionsProps {
 	defaultLayouts?: SupportedLayouts;
 }
 
-interface PageSizeMenuProps {
-	view: View;
-	onChangeView: ( view: View ) => void;
-}
-
-interface FieldsVisibilityMenuProps< Item > {
-	view: View;
-	onChangeView: ( view: View ) => void;
-	fields: NormalizedField< Item >[];
+function LayoutPicker( {
+	defaultLayouts = { list: {}, grid: {}, table: {} },
+}: ViewActionsProps ) {
+	const { view, onChangeView } = useContext( DataViewsContext );
+	const availableLayouts = Object.keys( defaultLayouts );
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Layout' ) }
+			value={ view.type }
+			onChange={ ( newLayout ) => {
+				switch ( newLayout ) {
+					case 'list':
+					case 'grid':
+					case 'table':
+						return onChangeView( {
+							...view,
+							type: newLayout,
+							...defaultLayouts[ newLayout ],
+						} );
+				}
+				throw new Error( 'Invalid dataview' );
+			} }
+		>
+			{ availableLayouts.map( ( layout ) => {
+				const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
+				if ( ! config ) {
+					return null;
+				}
+				return (
+					<ToggleGroupControlOption
+						key={ layout }
+						value={ layout }
+						label={ config.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
+	);
 }
 
-interface SortMenuProps< Item > {
-	fields: NormalizedField< Item >[];
-	view: View;
-	onChangeView: ( view: View ) => void;
-}
+function SortFieldControl() {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
+	const orderOptions = useMemo( () => {
+		const sortableFields = fields.filter(
+			( field ) => field.enableSorting !== false
+		);
+		return sortableFields.map( ( field ) => {
+			return {
+				label: field.label,
+				value: field.id,
+			};
+		} );
+	}, [ fields ] );
 
-interface ViewActionsProps {
-	defaultLayouts?: SupportedLayouts;
+	return (
+		<SelectControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ __( 'Sort by' ) }
+			value={ view.sort?.field }
+			options={ orderOptions }
+			onChange={ ( value: string ) => {
+				onChangeView( {
+					...view,
+					sort: {
+						direction: view?.sort?.direction || 'desc',
+						field: value,
+					},
+				} );
+			} }
+		/>
+	);
 }
 
-function ViewTypeMenu( {
-	view,
-	onChangeView,
-	defaultLayouts = { list: {}, grid: {}, table: {} },
-}: ViewTypeMenuProps ) {
-	const availableLayouts = Object.keys( defaultLayouts );
-	if ( availableLayouts.length <= 1 ) {
-		return null;
-	}
-	return availableLayouts.map( ( layout ) => {
-		const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
-		if ( ! config ) {
-			return null;
-		}
-		return (
-			<DropdownMenuRadioItem
-				key={ layout }
-				value={ layout }
-				name="view-actions-available-view"
-				checked={ layout === view.type }
-				hideOnClick
-				onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
-					switch ( e.target.value ) {
-						case 'list':
-						case 'grid':
-						case 'table':
-							return onChangeView( {
-								...view,
-								type: e.target.value,
-								...defaultLayouts[ e.target.value ],
-							} );
-					}
-					throw new Error( 'Invalid dataview' );
-				} }
-			>
-				<DropdownMenuItemLabel>{ config.label }</DropdownMenuItemLabel>
-			</DropdownMenuRadioItem>
-		);
-	} );
+function SortDirectionControl() {
+	const { view, onChangeView } = useContext( DataViewsContext );
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Order' ) }
+			value={ view.sort?.direction || 'desc' }
+			disabled={ ! view?.sort?.field }
+			onChange={ ( newDirection ) => {
+				if ( ! view?.sort?.field ) {
+					return;
+				}
+				if ( newDirection === 'asc' || newDirection === 'desc' ) {
+					onChangeView( {
+						...view,
+						sort: {
+							direction: newDirection,
+							field: view.sort.field,
+						},
+					} );
+					return;
+				}
+				throw new Error( 'Invalid direction' );
+			} }
+		>
+			{ SORTING_DIRECTIONS.map( ( direction ) => {
+				return (
+					<ToggleGroupControlOption
+						key={ direction }
+						value={ direction }
+						label={ sortLabelsShort[ direction ] }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
+	);
 }
 
 const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
-function PageSizeMenu( { view, onChangeView }: PageSizeMenuProps ) {
+function ItemsPerPageControl() {
+	const { view, onChangeView } = useContext( DataViewsContext );
 	return (
-		<DropdownMenu
-			trigger={
-				<DropdownMenuItem
-					suffix={ <span aria-hidden="true">{ view.perPage }</span> }
-				>
-					<DropdownMenuItemLabel>
-						{ __( 'Items per page' ) }
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-			}
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Items per page' ) }
+			value={ view.perPage || 10 }
+			disabled={ ! view?.sort?.field }
+			onChange={ ( newItemsPerPage ) => {
+				const newItemsPerPageNumber =
+					typeof newItemsPerPage === 'number' ||
+					newItemsPerPage === undefined
+						? newItemsPerPage
+						: parseInt( newItemsPerPage, 10 );
+				onChangeView( {
+					...view,
+					perPage: newItemsPerPageNumber,
+					page: 1,
+				} );
+			} }
 		>
-			{ PAGE_SIZE_VALUES.map( ( size ) => {
+			{ PAGE_SIZE_VALUES.map( ( value ) => {
 				return (
-					<DropdownMenuRadioItem
-						key={ size }
-						value={ size }
-						name="view-actions-page-size"
-						checked={ view.perPage === size }
-						onChange={ () => {
-							onChangeView( {
-								...view,
-								// `e.target.value` holds the same value as `size` but as a string,
-								// so we use `size` directly to avoid parsing to int.
-								perPage: size,
-								page: 1,
-							} );
-						} }
-					>
-						<DropdownMenuItemLabel>{ size }</DropdownMenuItemLabel>
-					</DropdownMenuRadioItem>
+					<ToggleGroupControlOption
+						key={ value }
+						value={ value }
+						label={ value.toString() }
+					/>
 				);
 			} ) }
-		</DropdownMenu>
+		</ToggleGroupControl>
 	);
 }
 
-function FieldsVisibilityMenu< Item >( {
-	view,
-	onChangeView,
-	fields,
-}: FieldsVisibilityMenuProps< Item > ) {
+function FieldControl() {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
 	const mandatoryFields = getMandatoryFields( view );
 	const hidableFields = fields.filter(
 		( field ) =>
@@ -156,186 +201,122 @@ function FieldsVisibilityMenu< Item >( {
 		return null;
 	}
 	return (
-		<DropdownMenu
-			trigger={
-				<DropdownMenuItem>
-					<DropdownMenuItemLabel>
-						{ __( 'Fields' ) }
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-			}
-		>
+		<ItemGroup isBordered isSeparated>
 			{ hidableFields?.map( ( field ) => {
+				const isVisible = viewFields.includes( field.id );
 				return (
-					<DropdownMenuCheckboxItem
-						key={ field.id }
-						value={ field.id }
-						checked={ viewFields.includes( field.id ) }
-						onChange={ () => {
-							onChangeView( {
-								...view,
-								fields: viewFields.includes( field.id )
-									? viewFields.filter(
-											( id ) => id !== field.id
-									  )
-									: [ ...viewFields, field.id ],
-							} );
-						} }
-					>
-						<DropdownMenuItemLabel>
-							{ field.label }
-						</DropdownMenuItemLabel>
-					</DropdownMenuCheckboxItem>
+					<Item key={ field.id }>
+						<HStack expanded>
+							<span>{ field.label }</span>
+							<Button
+								className={ clsx(
+									'dataviews-view-config__field-control-button',
+									{
+										'is-hidden': ! isVisible,
+									}
+								) }
+								size="compact"
+								onClick={ () =>
+									onChangeView( {
+										...view,
+										fields: isVisible
+											? viewFields.filter(
+													( id ) => id !== field.id
+											  )
+											: [ ...viewFields, field.id ],
+									} )
+								}
+								icon={ seen }
+								label={
+									isVisible
+										? __( 'Hide field' )
+										: __( 'Show field' )
+								}
+							/>
+						</HStack>
+					</Item>
 				);
 			} ) }
-		</DropdownMenu>
+		</ItemGroup>
 	);
 }
 
-function SortMenu< Item >( {
-	fields,
-	view,
-	onChangeView,
-}: SortMenuProps< Item > ) {
-	const sortableFields = fields.filter(
-		( field ) => field.enableSorting !== false
-	);
-	if ( ! sortableFields?.length ) {
-		return null;
-	}
-	const currentSortedField = fields.find(
-		( field ) => field.id === view.sort?.field
-	);
+function SettingsSection( {
+	title,
+	description,
+	children,
+}: {
+	title: string;
+	description: string;
+	children: React.ReactNode;
+} ) {
 	return (
-		<DropdownMenu
-			trigger={
-				<DropdownMenuItem
-					suffix={
-						<span aria-hidden="true">
-							{ currentSortedField?.label }
-						</span>
-					}
-				>
-					<DropdownMenuItemLabel>
-						{ __( 'Sort by' ) }
-					</DropdownMenuItemLabel>
-				</DropdownMenuItem>
-			}
-		>
-			{ sortableFields?.map( ( field ) => {
-				const sortedDirection = view.sort?.direction;
-				return (
-					<DropdownMenu
-						key={ field.id }
-						trigger={
-							<DropdownMenuItem>
-								<DropdownMenuItemLabel>
-									{ field.label }
-								</DropdownMenuItemLabel>
-							</DropdownMenuItem>
-						}
-						style={ {
-							minWidth: '220px',
-						} }
-					>
-						{ SORTING_DIRECTIONS.map( ( direction ) => {
-							const isChecked =
-								currentSortedField !== undefined &&
-								sortedDirection === direction &&
-								field.id === currentSortedField.id;
-
-							const value = `${ field.id }-${ direction }`;
-
-							return (
-								<DropdownMenuRadioItem
-									key={ value }
-									// All sorting radio items share the same name, so that
-									// selecting a sorting option automatically deselects the
-									// previously selected one, even if it is displayed in
-									// another submenu. The field and direction are passed via
-									// the `value` prop.
-									name="view-actions-sorting"
-									value={ value }
-									checked={ isChecked }
-									onChange={ () => {
-										onChangeView( {
-											...view,
-											sort: {
-												field: field.id,
-												direction,
-											},
-										} );
-									} }
-								>
-									<DropdownMenuItemLabel>
-										{ sortLabels[ direction ] }
-									</DropdownMenuItemLabel>
-								</DropdownMenuRadioItem>
-							);
-						} ) }
-					</DropdownMenu>
-				);
-			} ) }
-		</DropdownMenu>
+		<Grid columns={ 2 } className="dataviews-settings-section">
+			<VStack>
+				<h2 className="dataviews-settings-section__title">{ title }</h2>
+				<span className="dataviews-settings-section__description">
+					{ description }
+				</span>
+			</VStack>
+			<VStack spacing={ 4 }>{ children }</VStack>
+		</Grid>
 	);
 }
 
-function _DataViewsViewConfig( { defaultLayouts }: ViewActionsProps ) {
-	const { view, fields, onChangeView } = useContext( DataViewsContext );
-	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
+function DataviewsViewConfigContent( {
+	defaultLayouts = { list: {}, grid: {}, table: {} },
+}: ViewActionsProps ) {
 	return (
-		<>
-			<HStack
-				spacing={ 1 }
-				expanded={ false }
-				style={ { flexShrink: 0 } }
+		<VStack className="dataviews-view-config" spacing={ 6 }>
+			<SettingsSection
+				title={ __( 'Appearance' ) }
+				description={ __( 'Customise the display of data' ) }
+			>
+				<LayoutPicker defaultLayouts={ defaultLayouts } />
+				<HStack expanded className="is-divided-in-two">
+					<SortFieldControl />
+					<SortDirectionControl />
+				</HStack>
+				<ItemsPerPageControl />
+			</SettingsSection>
+			<SettingsSection
+				title={ __( 'Properties' ) }
+				description={ __( 'Manage property order and display' ) }
 			>
-				<DropdownMenu
-					trigger={
-						<Button
-							size="compact"
-							icon={ activeView?.icon }
-							label={ __( 'Layout' ) }
-						/>
-					}
+				<FieldControl />
+			</SettingsSection>
+		</VStack>
+	);
+}
+
+function _DataViewsViewConfig( {
+	defaultLayouts = { list: {}, grid: {}, table: {} },
+}: ViewActionsProps ) {
+	const [ isShowingViewPopover, setIsShowingViewPopover ] =
+		useState< boolean >( false );
+
+	return (
+		<div>
+			<Button
+				size="compact"
+				icon={ cog }
+				label={ _x( 'View options', 'View is used as a noun' ) }
+				onClick={ () => setIsShowingViewPopover( true ) }
+			/>
+			{ isShowingViewPopover && (
+				<Popover
+					placement="bottom-end"
+					onClose={ () => {
+						setIsShowingViewPopover( false );
+					} }
+					focusOnMount
 				>
-					<ViewTypeMenu
-						view={ view }
-						onChangeView={ onChangeView }
+					<DataviewsViewConfigContent
 						defaultLayouts={ defaultLayouts }
 					/>
-				</DropdownMenu>
-				<DropdownMenu
-					trigger={
-						<Button
-							size="compact"
-							icon={ cog }
-							label={ _x(
-								'View options',
-								'View is used as a noun'
-							) }
-						/>
-					}
-				>
-					<DropdownMenuGroup>
-						<SortMenu
-							fields={ fields }
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-						<FieldsVisibilityMenu
-							fields={ fields }
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-						<PageSizeMenu
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-					</DropdownMenuGroup>
-				</DropdownMenu>
-			</HStack>
-		</>
+				</Popover>
+			) }
+		</div>
 	);
 }
 
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
new file mode 100644
index 0000000000000..6a0c98cba2397
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -0,0 +1,39 @@
+.dataviews-view-config {
+    width: 363px;
+    container-type: inline-size;
+    padding: $grid-unit-20;
+}
+
+.dataviews-settings-section__title {
+    font-size: 13px;
+	font-weight: 600;
+	margin-top: 0;
+    margin-bottom: $grid-unit-05;
+}
+
+.dataviews-settings-section.dataviews-settings-section {
+    align-items: start;
+    grid-template-columns: 1fr;
+}
+
+.dataviews-settings-section__description {
+	margin: -$grid-unit-10 0 $grid-unit-10 0;
+	font-size: $helptext-font-size;
+	font-style: normal;
+	color: $gray-700;
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (min-width: 500px) {
+    .dataviews-settings-section.dataviews-settings-section {
+        grid-template-columns: 4fr 8fr;
+    }
+}
+
+.dataviews-view-config .is-divided-in-two > * {
+    width: calc(50% - #{ ($grid-unit-10) });
+}
+
+.dataviews-view-config__field-control-button.is-hidden {
+    opacity: 0.3;
+}
\ No newline at end of file
diff --git a/packages/dataviews/src/constants.ts b/packages/dataviews/src/constants.ts
index 48753470280d0..44b6cb7ec2d0a 100644
--- a/packages/dataviews/src/constants.ts
+++ b/packages/dataviews/src/constants.ts
@@ -58,6 +58,10 @@ export const sortLabels = {
 	asc: __( 'Sort ascending' ),
 	desc: __( 'Sort descending' ),
 };
+export const sortLabelsShort = {
+	asc: __( 'ASC' ),
+	desc: __( 'DESC' ),
+};
 
 // View layouts.
 export const LAYOUT_TABLE = 'table';
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 7cf737b9a3849..b780c9c3a587d 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -5,6 +5,7 @@
 @import "./components/dataviews-pagination/style.scss";
 @import "./components/dataviews-item-actions/style.scss";
 @import "./components/dataviews-selection-checkbox/style.scss";
+@import "./components/dataviews-view-config/style.scss";
 
 @import "./dataviews-layouts/grid/style.scss";
 @import "./dataviews-layouts/list/style.scss";

From 8b67ea94a50c82e74796010a968302480d9aa31a Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Thu, 1 Aug 2024 17:23:07 +0100
Subject: [PATCH 02/18] lint fix

---
 .../dataviews/src/components/dataviews-view-config/style.scss   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 6a0c98cba2397..504b81d83151b 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -36,4 +36,4 @@
 
 .dataviews-view-config__field-control-button.is-hidden {
     opacity: 0.3;
-}
\ No newline at end of file
+}

From 41a9023e5af4d36d9176450937f9b6b89fc9a83d Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 2 Aug 2024 16:44:38 +0100
Subject: [PATCH 03/18] Style adjustments

---
 .../src/components/dataviews-view-config/index.tsx    |  4 ++--
 .../src/components/dataviews-view-config/style.scss   | 11 ++++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index eaa0dbca1e8b8..6ee186d859f18 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -251,8 +251,8 @@ function SettingsSection( {
 	children: React.ReactNode;
 } ) {
 	return (
-		<Grid columns={ 2 } className="dataviews-settings-section">
-			<VStack>
+		<Grid columns={ 2 } className="dataviews-settings-section" gap={ 4 }>
+			<VStack spacing={ 0 }>
 				<h2 className="dataviews-settings-section__title">{ title }</h2>
 				<span className="dataviews-settings-section__description">
 					{ description }
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 504b81d83151b..0b9d1e74ee9b9 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -5,10 +5,10 @@
 }
 
 .dataviews-settings-section__title {
-    font-size: 13px;
+    font-size: 15px;
+    line-height: $grid-unit-30;
 	font-weight: 600;
-	margin-top: 0;
-    margin-bottom: $grid-unit-05;
+	margin: 0;
 }
 
 .dataviews-settings-section.dataviews-settings-section {
@@ -17,10 +17,11 @@
 }
 
 .dataviews-settings-section__description {
-	margin: -$grid-unit-10 0 $grid-unit-10 0;
-	font-size: $helptext-font-size;
+	margin: 0;
 	font-style: normal;
 	color: $gray-700;
+    text-wrap: balance; // Fallback for Safari
+	text-wrap: pretty;
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */

From 373d868a16dd62ed254c17ff398de949741f23da Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 6 Aug 2024 12:36:14 +0100
Subject: [PATCH 04/18] refactor grid

---
 .../dataviews-view-config/index.tsx           | 14 +++++--
 .../dataviews-view-config/style.scss          | 42 ++++++++++++-------
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 6ee186d859f18..799e08686af90 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -251,14 +251,20 @@ function SettingsSection( {
 	children: React.ReactNode;
 } ) {
 	return (
-		<Grid columns={ 2 } className="dataviews-settings-section" gap={ 4 }>
-			<VStack spacing={ 0 }>
+		<Grid columns={ 12 } className="dataviews-settings-section" gap={ 4 }>
+			<div className="dataviews-settings-section__sidebar">
 				<h2 className="dataviews-settings-section__title">{ title }</h2>
 				<span className="dataviews-settings-section__description">
 					{ description }
 				</span>
-			</VStack>
-			<VStack spacing={ 4 }>{ children }</VStack>
+			</div>
+			<Grid
+				columns={ 8 }
+				gap={ 4 }
+				className="dataviews-settings-section__content"
+			>
+				{ children }
+			</Grid>
 		</Grid>
 	);
 }
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 0b9d1e74ee9b9..81ea39f5974ec 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -11,11 +11,6 @@
 	margin: 0;
 }
 
-.dataviews-settings-section.dataviews-settings-section {
-    align-items: start;
-    grid-template-columns: 1fr;
-}
-
 .dataviews-settings-section__description {
 	margin: 0;
 	font-style: normal;
@@ -24,17 +19,36 @@
 	text-wrap: pretty;
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
-@container (min-width: 500px) {
-    .dataviews-settings-section.dataviews-settings-section {
-        grid-template-columns: 4fr 8fr;
-    }
+.dataviews-view-config__field-control-button.is-hidden {
+    opacity: 0.3;
 }
 
-.dataviews-view-config .is-divided-in-two > * {
-    width: calc(50% - #{ ($grid-unit-10) });
+.dataviews-settings-section__sidebar {
+    grid-column: span 4;
 }
 
-.dataviews-view-config__field-control-button.is-hidden {
-    opacity: 0.3;
+.dataviews-settings-section__content, 
+.dataviews-settings-section__content > * {
+    grid-column: span 8;
+}
+
+.dataviews-settings-section__content .is-divided-in-two {
+    display: contents;
+    & > * {
+        grid-column: span 4;
+    }
 }
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 500px) {
+    .dataviews-settings-section.dataviews-settings-section {
+        grid-template-columns: repeat( 2, 1fr );
+        .dataviews-settings-section__sidebar {
+            grid-column: span 2;
+        }
+        
+        .dataviews-settings-section__content {
+            grid-column: span 2;
+        }
+    }
+}
\ No newline at end of file

From 465737d5dfa1b00cb7af623c779e59ba6e07487d Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 6 Aug 2024 14:04:01 +0100
Subject: [PATCH 05/18] address reviews

---
 packages/dataviews/package.json               |  1 +
 .../dataviews-view-config/index.tsx           | 25 ++++++++++++++-----
 .../dataviews-view-config/style.scss          | 16 +++---------
 packages/dataviews/src/constants.ts           |  4 +--
 4 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index d95192957a1a4..53cfa97c275c6 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -38,6 +38,7 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/private-apis": "file:../private-apis",
+		"@wordpress/warning": "file:../warning",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 799e08686af90..414d765014315 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -17,10 +17,13 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { memo, useContext, useState, useMemo } from '@wordpress/element';
 import { cog, seen } from '@wordpress/icons';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -57,7 +60,7 @@ function LayoutPicker( {
 							...defaultLayouts[ newLayout ],
 						} );
 				}
-				throw new Error( 'Invalid dataview' );
+				warning( 'Invalid dataview' );
 			} }
 		>
 			{ availableLayouts.map( ( layout ) => {
@@ -115,6 +118,7 @@ function SortDirectionControl() {
 	const { view, onChangeView } = useContext( DataViewsContext );
 	return (
 		<ToggleGroupControl
+			className="dataviews-view-config__sort-direction"
 			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			isBlock
@@ -135,7 +139,7 @@ function SortDirectionControl() {
 					} );
 					return;
 				}
-				throw new Error( 'Invalid direction' );
+				warning( 'Invalid direction' );
 			} }
 		>
 			{ SORTING_DIRECTIONS.map( ( direction ) => {
@@ -253,10 +257,19 @@ function SettingsSection( {
 	return (
 		<Grid columns={ 12 } className="dataviews-settings-section" gap={ 4 }>
 			<div className="dataviews-settings-section__sidebar">
-				<h2 className="dataviews-settings-section__title">{ title }</h2>
-				<span className="dataviews-settings-section__description">
+				<Heading
+					level={ 2 }
+					className="dataviews-settings-section__title"
+					size={ 15 }
+				>
+					{ title }
+				</Heading>
+				<Text
+					variant="muted"
+					className="dataviews-settings-section__description"
+				>
 					{ description }
-				</span>
+				</Text>
 			</div>
 			<Grid
 				columns={ 8 }
@@ -276,7 +289,7 @@ function DataviewsViewConfigContent( {
 		<VStack className="dataviews-view-config" spacing={ 6 }>
 			<SettingsSection
 				title={ __( 'Appearance' ) }
-				description={ __( 'Customise the display of data' ) }
+				description={ __( 'Customize the display of data' ) }
 			>
 				<LayoutPicker defaultLayouts={ defaultLayouts } />
 				<HStack expanded className="is-divided-in-two">
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 81ea39f5974ec..b5cf05349a7c8 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -3,20 +3,12 @@
     container-type: inline-size;
     padding: $grid-unit-20;
 }
+.dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
+    text-transform: uppercase;
+}   
 
-.dataviews-settings-section__title {
-    font-size: 15px;
+.dataviews-settings-section__title.dataviews-settings-section__title {
     line-height: $grid-unit-30;
-	font-weight: 600;
-	margin: 0;
-}
-
-.dataviews-settings-section__description {
-	margin: 0;
-	font-style: normal;
-	color: $gray-700;
-    text-wrap: balance; // Fallback for Safari
-	text-wrap: pretty;
 }
 
 .dataviews-view-config__field-control-button.is-hidden {
diff --git a/packages/dataviews/src/constants.ts b/packages/dataviews/src/constants.ts
index 44b6cb7ec2d0a..d8faf20d39d76 100644
--- a/packages/dataviews/src/constants.ts
+++ b/packages/dataviews/src/constants.ts
@@ -59,8 +59,8 @@ export const sortLabels = {
 	desc: __( 'Sort descending' ),
 };
 export const sortLabelsShort = {
-	asc: __( 'ASC' ),
-	desc: __( 'DESC' ),
+	asc: __( 'Asc' ),
+	desc: __( 'Desc' ),
 };
 
 // View layouts.

From f40233ffa4fea4bd3c2279480b51b813064fe9f4 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 6 Aug 2024 14:10:39 +0100
Subject: [PATCH 06/18] add traslation context

---
 packages/dataviews/src/constants.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/dataviews/src/constants.ts b/packages/dataviews/src/constants.ts
index d8faf20d39d76..779f5a204f23d 100644
--- a/packages/dataviews/src/constants.ts
+++ b/packages/dataviews/src/constants.ts
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -59,8 +59,14 @@ export const sortLabels = {
 	desc: __( 'Sort descending' ),
 };
 export const sortLabelsShort = {
-	asc: __( 'Asc' ),
-	desc: __( 'Desc' ),
+	asc: _x(
+		'Asc',
+		'Short label for ascending sorting, should be at most 6 characters'
+	),
+	desc: _x(
+		'Desc',
+		'Short label for descending sorting, should be at most 6 characters'
+	),
 };
 
 // View layouts.

From 5e808199e8432bf0c2a0353814dc6a98456f5c87 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 6 Aug 2024 15:31:25 +0100
Subject: [PATCH 07/18] lint fixes

---
 .../dataviews-view-config/style.scss          | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index b5cf05349a7c8..3388f5ae374f4 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -1,46 +1,46 @@
 .dataviews-view-config {
-    width: 363px;
-    container-type: inline-size;
-    padding: $grid-unit-20;
+	width: 363px;
+	container-type: inline-size;
+	padding: $grid-unit-20;
 }
 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
-    text-transform: uppercase;
+	text-transform: uppercase;
 }   
 
 .dataviews-settings-section__title.dataviews-settings-section__title {
-    line-height: $grid-unit-30;
+	line-height: $grid-unit-30;
 }
 
 .dataviews-view-config__field-control-button.is-hidden {
-    opacity: 0.3;
+	opacity: 0.3;
 }
 
 .dataviews-settings-section__sidebar {
-    grid-column: span 4;
+	grid-column: span 4;
 }
 
 .dataviews-settings-section__content, 
 .dataviews-settings-section__content > * {
-    grid-column: span 8;
+	grid-column: span 8;
 }
 
 .dataviews-settings-section__content .is-divided-in-two {
-    display: contents;
-    & > * {
-        grid-column: span 4;
-    }
+	display: contents;
+	& > * {
+		grid-column: span 4;
+	}
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 500px) {
-    .dataviews-settings-section.dataviews-settings-section {
-        grid-template-columns: repeat( 2, 1fr );
-        .dataviews-settings-section__sidebar {
-            grid-column: span 2;
-        }
-        
-        .dataviews-settings-section__content {
-            grid-column: span 2;
-        }
-    }
+	.dataviews-settings-section.dataviews-settings-section {
+		grid-template-columns: repeat( 2, 1fr );
+		.dataviews-settings-section__sidebar {
+			grid-column: span 2;
+		}
+		
+		.dataviews-settings-section__content {
+			grid-column: span 2;
+		}
+	}
 }
\ No newline at end of file

From d332d330ac99f383ee5944eb8ed000bfedb8000c Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 6 Aug 2024 16:31:07 +0100
Subject: [PATCH 08/18] use unseen icon

---
 .../dataviews-view-config/index.tsx           | 98 +++++++++++--------
 .../dataviews-view-config/style.scss          |  5 +-
 2 files changed, 58 insertions(+), 45 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 414d765014315..bd4c8a5116e3b 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import clsx from 'clsx';
+import type { ChangeEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -19,10 +19,11 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { memo, useContext, useState, useMemo } from '@wordpress/element';
-import { cog, seen } from '@wordpress/icons';
+import { cog, seen, unseen } from '@wordpress/icons';
 import warning from '@wordpress/warning';
 
 /**
@@ -32,36 +33,36 @@ import { SORTING_DIRECTIONS, sortLabelsShort } from '../../constants';
 import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
 import type { SupportedLayouts } from '../../types';
 import DataViewsContext from '../dataviews-context';
+import { unlock } from '../../lock-unlock';
 
-interface ViewActionsProps {
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+} = unlock( componentsPrivateApis );
+
+interface ViewTypeMenuProps {
 	defaultLayouts?: SupportedLayouts;
 }
 
-function LayoutPicker( {
+function ViewTypeMenu( {
 	defaultLayouts = { list: {}, grid: {}, table: {} },
-}: ViewActionsProps ) {
+}: ViewTypeMenuProps ) {
 	const { view, onChangeView } = useContext( DataViewsContext );
 	const availableLayouts = Object.keys( defaultLayouts );
+	if ( availableLayouts.length <= 1 ) {
+		return null;
+	}
+	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
 	return (
-		<ToggleGroupControl
-			__nextHasNoMarginBottom
-			__next40pxDefaultSize
-			isBlock
+		<DropdownMenu
+			trigger={
+				<Button
+					size="compact"
+					icon={ activeView?.icon }
 			label={ __( 'Layout' ) }
-			value={ view.type }
-			onChange={ ( newLayout ) => {
-				switch ( newLayout ) {
-					case 'list':
-					case 'grid':
-					case 'table':
-						return onChangeView( {
-							...view,
-							type: newLayout,
-							...defaultLayouts[ newLayout ],
-						} );
+				/>
 				}
-				warning( 'Invalid dataview' );
-			} }
 		>
 			{ availableLayouts.map( ( layout ) => {
 				const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
@@ -69,17 +70,40 @@ function LayoutPicker( {
 					return null;
 				}
 				return (
-					<ToggleGroupControlOption
+					<DropdownMenuRadioItem
 						key={ layout }
 						value={ layout }
-						label={ config.label }
-					/>
+						name="view-actions-available-view"
+						checked={ layout === view.type }
+						hideOnClick
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
+							switch ( e.target.value ) {
+								case 'list':
+								case 'grid':
+								case 'table':
+									return onChangeView( {
+										...view,
+										type: e.target.value,
+										...defaultLayouts[ e.target.value ],
+									} );
+							}
+							warning( 'Invalid dataview' );
+						} }
+					>
+						<DropdownMenuItemLabel>
+							{ config.label }
+						</DropdownMenuItemLabel>
+					</DropdownMenuRadioItem>
 				);
 			} ) }
-		</ToggleGroupControl>
+		</DropdownMenu>
 	);
 }
 
+interface ViewActionsProps {
+	defaultLayouts?: SupportedLayouts;
+}
+
 function SortFieldControl() {
 	const { view, fields, onChangeView } = useContext( DataViewsContext );
 	const orderOptions = useMemo( () => {
@@ -213,12 +237,7 @@ function FieldControl() {
 						<HStack expanded>
 							<span>{ field.label }</span>
 							<Button
-								className={ clsx(
-									'dataviews-view-config__field-control-button',
-									{
-										'is-hidden': ! isVisible,
-									}
-								) }
+								className="'dataviews-view-config__field-control-button"
 								size="compact"
 								onClick={ () =>
 									onChangeView( {
@@ -230,7 +249,7 @@ function FieldControl() {
 											: [ ...viewFields, field.id ],
 									} )
 								}
-								icon={ seen }
+								icon={ isVisible ? seen : unseen }
 								label={
 									isVisible
 										? __( 'Hide field' )
@@ -260,7 +279,6 @@ function SettingsSection( {
 				<Heading
 					level={ 2 }
 					className="dataviews-settings-section__title"
-					size={ 15 }
 				>
 					{ title }
 				</Heading>
@@ -282,16 +300,13 @@ function SettingsSection( {
 	);
 }
 
-function DataviewsViewConfigContent( {
-	defaultLayouts = { list: {}, grid: {}, table: {} },
-}: ViewActionsProps ) {
+function DataviewsViewConfigContent() {
 	return (
 		<VStack className="dataviews-view-config" spacing={ 6 }>
 			<SettingsSection
 				title={ __( 'Appearance' ) }
 				description={ __( 'Customize the display of data' ) }
 			>
-				<LayoutPicker defaultLayouts={ defaultLayouts } />
 				<HStack expanded className="is-divided-in-two">
 					<SortFieldControl />
 					<SortDirectionControl />
@@ -315,6 +330,8 @@ function _DataViewsViewConfig( {
 		useState< boolean >( false );
 
 	return (
+		<>
+			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
 		<div>
 			<Button
 				size="compact"
@@ -330,12 +347,11 @@ function _DataViewsViewConfig( {
 					} }
 					focusOnMount
 				>
-					<DataviewsViewConfigContent
-						defaultLayouts={ defaultLayouts }
-					/>
+						<DataviewsViewConfigContent />
 				</Popover>
 			) }
 		</div>
+		</>
 	);
 }
 
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 3388f5ae374f4..0edd37508e91f 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -9,10 +9,7 @@
 
 .dataviews-settings-section__title.dataviews-settings-section__title {
 	line-height: $grid-unit-30;
-}
-
-.dataviews-view-config__field-control-button.is-hidden {
-	opacity: 0.3;
+    font-size: 15px;
 }
 
 .dataviews-settings-section__sidebar {

From 006fb8c0b1eb12476bf4619738547ef5d8d561ba Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 7 Aug 2024 15:10:08 +0100
Subject: [PATCH 09/18] enhacements

---
 .../dataviews-view-config/index.tsx           | 74 +++++++++----------
 .../dataviews-view-config/style.scss          |  2 +-
 packages/dataviews/src/constants.ts           | 15 ++--
 3 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index bd4c8a5116e3b..28e151079008e 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -11,6 +11,7 @@ import {
 	Popover,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	SelectControl,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
@@ -29,7 +30,7 @@ import warning from '@wordpress/warning';
 /**
  * Internal dependencies
  */
-import { SORTING_DIRECTIONS, sortLabelsShort } from '../../constants';
+import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
 import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
 import type { SupportedLayouts } from '../../types';
 import DataViewsContext from '../dataviews-context';
@@ -60,9 +61,9 @@ function ViewTypeMenu( {
 				<Button
 					size="compact"
 					icon={ activeView?.icon }
-			label={ __( 'Layout' ) }
+					label={ __( 'Layout' ) }
 				/>
-				}
+			}
 		>
 			{ availableLayouts.map( ( layout ) => {
 				const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
@@ -168,10 +169,11 @@ function SortDirectionControl() {
 		>
 			{ SORTING_DIRECTIONS.map( ( direction ) => {
 				return (
-					<ToggleGroupControlOption
+					<ToggleGroupControlOptionIcon
 						key={ direction }
 						value={ direction }
-						label={ sortLabelsShort[ direction ] }
+						icon={ sortIcons[ direction ] }
+						label={ sortLabels[ direction ] }
 					/>
 				);
 			} ) }
@@ -270,7 +272,7 @@ function SettingsSection( {
 	children,
 }: {
 	title: string;
-	description: string;
+	description?: string;
 	children: React.ReactNode;
 } ) {
 	return (
@@ -282,12 +284,14 @@ function SettingsSection( {
 				>
 					{ title }
 				</Heading>
-				<Text
-					variant="muted"
-					className="dataviews-settings-section__description"
-				>
-					{ description }
-				</Text>
+				{ description && (
+					<Text
+						variant="muted"
+						className="dataviews-settings-section__description"
+					>
+						{ description }
+					</Text>
+				) }
 			</div>
 			<Grid
 				columns={ 8 }
@@ -303,20 +307,14 @@ function SettingsSection( {
 function DataviewsViewConfigContent() {
 	return (
 		<VStack className="dataviews-view-config" spacing={ 6 }>
-			<SettingsSection
-				title={ __( 'Appearance' ) }
-				description={ __( 'Customize the display of data' ) }
-			>
+			<SettingsSection title={ __( 'Appearance' ) }>
 				<HStack expanded className="is-divided-in-two">
 					<SortFieldControl />
 					<SortDirectionControl />
 				</HStack>
 				<ItemsPerPageControl />
 			</SettingsSection>
-			<SettingsSection
-				title={ __( 'Properties' ) }
-				description={ __( 'Manage property order and display' ) }
-			>
+			<SettingsSection title={ __( 'Properties' ) }>
 				<FieldControl />
 			</SettingsSection>
 		</VStack>
@@ -332,25 +330,25 @@ function _DataViewsViewConfig( {
 	return (
 		<>
 			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
-		<div>
-			<Button
-				size="compact"
-				icon={ cog }
-				label={ _x( 'View options', 'View is used as a noun' ) }
-				onClick={ () => setIsShowingViewPopover( true ) }
-			/>
-			{ isShowingViewPopover && (
-				<Popover
-					placement="bottom-end"
-					onClose={ () => {
-						setIsShowingViewPopover( false );
-					} }
-					focusOnMount
-				>
+			<div>
+				<Button
+					size="compact"
+					icon={ cog }
+					label={ _x( 'View options', 'View is used as a noun' ) }
+					onClick={ () => setIsShowingViewPopover( true ) }
+				/>
+				{ isShowingViewPopover && (
+					<Popover
+						placement="bottom-end"
+						onClose={ () => {
+							setIsShowingViewPopover( false );
+						} }
+						focusOnMount
+					>
 						<DataviewsViewConfigContent />
-				</Popover>
-			) }
-		</div>
+					</Popover>
+				) }
+			</div>
 		</>
 	);
 }
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 0edd37508e91f..2709577c206a4 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -1,5 +1,5 @@
 .dataviews-view-config {
-	width: 363px;
+	width: 320px;
 	container-type: inline-size;
 	padding: $grid-unit-20;
 }
diff --git a/packages/dataviews/src/constants.ts b/packages/dataviews/src/constants.ts
index 779f5a204f23d..5ae94c7eb4a13 100644
--- a/packages/dataviews/src/constants.ts
+++ b/packages/dataviews/src/constants.ts
@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
+import { arrowDown, arrowUp } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -58,15 +59,9 @@ export const sortLabels = {
 	asc: __( 'Sort ascending' ),
 	desc: __( 'Sort descending' ),
 };
-export const sortLabelsShort = {
-	asc: _x(
-		'Asc',
-		'Short label for ascending sorting, should be at most 6 characters'
-	),
-	desc: _x(
-		'Desc',
-		'Short label for descending sorting, should be at most 6 characters'
-	),
+export const sortIcons = {
+	asc: arrowUp,
+	desc: arrowDown,
 };
 
 // View layouts.

From f894ba3ad55d93a499f0a49852355e4a87341f2b Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 7 Aug 2024 15:18:47 +0100
Subject: [PATCH 10/18] lint fixes

---
 .../src/components/dataviews-view-config/style.scss | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 2709577c206a4..85e86722f7b61 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -1,22 +1,23 @@
 .dataviews-view-config {
 	width: 320px;
+	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
 	container-type: inline-size;
 	padding: $grid-unit-20;
 }
 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
 	text-transform: uppercase;
-}   
+}
 
 .dataviews-settings-section__title.dataviews-settings-section__title {
 	line-height: $grid-unit-30;
-    font-size: 15px;
+	font-size: 15px;
 }
 
 .dataviews-settings-section__sidebar {
 	grid-column: span 4;
 }
 
-.dataviews-settings-section__content, 
+.dataviews-settings-section__content,
 .dataviews-settings-section__content > * {
 	grid-column: span 8;
 }
@@ -31,13 +32,13 @@
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 500px) {
 	.dataviews-settings-section.dataviews-settings-section {
-		grid-template-columns: repeat( 2, 1fr );
+		grid-template-columns: repeat(2, 1fr);
 		.dataviews-settings-section__sidebar {
 			grid-column: span 2;
 		}
-		
+
 		.dataviews-settings-section__content {
 			grid-column: span 2;
 		}
 	}
-}
\ No newline at end of file
+}

From df0ee71ddf47db49ac47fe8e4191352816cb40c5 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 7 Aug 2024 15:56:17 +0100
Subject: [PATCH 11/18] lint and end to end test updates

---
 packages/dataviews/tsconfig.json                      | 3 ++-
 test/e2e/specs/site-editor/new-templates-list.spec.js | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/dataviews/tsconfig.json b/packages/dataviews/tsconfig.json
index 869f9fcfb9b49..78e68b5a7c98b 100644
--- a/packages/dataviews/tsconfig.json
+++ b/packages/dataviews/tsconfig.json
@@ -14,7 +14,8 @@
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
 		{ "path": "../primitives" },
-		{ "path": "../private-apis" }
+		{ "path": "../private-apis" },
+		{ "path": "../warning" }
 	],
 	"include": [ "src" ]
 }
diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
index 878f0ed2eb48c..f74d462e0f946 100644
--- a/test/e2e/specs/site-editor/new-templates-list.spec.js
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -24,9 +24,9 @@ test.describe( 'Templates', () => {
 
 		// Descending by title.
 		await page.getByRole( 'button', { name: 'View options' } ).click();
-		await page.getByRole( 'menuitem', { name: 'Sort by' } ).click();
-		await page.getByRole( 'menuitem', { name: 'Template' } ).click();
-		await page.getByRole( 'menuitemradio', { name: 'descending' } ).click();
+		await page.getByRole( 'combobox', { name: 'Sort by' } ).click();
+		await page.getByRole( 'option', { name: 'Template' } ).click();
+		await page.getByRole( 'radio', { name: 'Sort descending' } ).click();
 		const firstTitle = page
 			.getByRole( 'region', {
 				name: 'Template',
@@ -37,7 +37,7 @@ test.describe( 'Templates', () => {
 		await expect( firstTitle ).toHaveText( 'Tag Archives' );
 
 		// Ascending by title.
-		await page.getByRole( 'menuitemradio', { name: 'ascending' } ).click();
+		await page.getByRole( 'radio', { name: 'Sort ascending' } ).click();
 		await expect( firstTitle ).toHaveText( 'Category Archives' );
 	} );
 

From 975f409e1e4df7fea2cc2b09184399aee5a42190 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 7 Aug 2024 16:04:52 +0100
Subject: [PATCH 12/18] update package lock

---
 package-lock.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index e2cab9e63002d..c340c58c0b4f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52990,6 +52990,7 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/primitives": "file:../primitives",
 				"@wordpress/private-apis": "file:../private-apis",
+				"@wordpress/warning": "file:../warning",
 				"clsx": "^2.1.1",
 				"remove-accents": "^0.5.0"
 			},
@@ -67763,6 +67764,7 @@
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/primitives": "file:../primitives",
 				"@wordpress/private-apis": "file:../private-apis",
+				"@wordpress/warning": "file:../warning",
 				"clsx": "^2.1.1",
 				"remove-accents": "^0.5.0"
 			},

From 5c24ff499966d8d38e0c992bae84ca16c868dde0 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 7 Aug 2024 16:21:25 +0100
Subject: [PATCH 13/18] test update

---
 test/e2e/specs/site-editor/new-templates-list.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
index f74d462e0f946..e15d3a574f5f3 100644
--- a/test/e2e/specs/site-editor/new-templates-list.spec.js
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -25,7 +25,7 @@ test.describe( 'Templates', () => {
 		// Descending by title.
 		await page.getByRole( 'button', { name: 'View options' } ).click();
 		await page.getByRole( 'combobox', { name: 'Sort by' } ).click();
-		await page.getByRole( 'option', { name: 'Template' } ).click();
+		await page.getByRole( 'option', { name: 'title' } ).click();
 		await page.getByRole( 'radio', { name: 'Sort descending' } ).click();
 		const firstTitle = page
 			.getByRole( 'region', {

From ac61973fca5807ee769a48b0bf9b0f9e2b777e91 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 7 Aug 2024 16:41:14 +0100
Subject: [PATCH 14/18] test update

---
 test/e2e/specs/site-editor/new-templates-list.spec.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
index e15d3a574f5f3..6c44777089040 100644
--- a/test/e2e/specs/site-editor/new-templates-list.spec.js
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -1,8 +1,14 @@
+/**
+ * External dependencies
+ */
+import userEvent from '@testing-library/user-event';
+
 /**
  * WordPress dependencies
  */
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
+
 test.describe( 'Templates', () => {
 	test.beforeAll( async ( { requestUtils } ) => {
 		await Promise.all( [
@@ -20,11 +26,14 @@ test.describe( 'Templates', () => {
 	} );
 
 	test( 'Sorting', async ( { admin, page } ) => {
+		const user = userEvent.setup();
 		await admin.visitSiteEditor( { postType: 'wp_template' } );
 
 		// Descending by title.
 		await page.getByRole( 'button', { name: 'View options' } ).click();
-		await page.getByRole( 'combobox', { name: 'Sort by' } ).click();
+		const sortBySelect = page.getByRole( 'combobox', { name: 'Sort by' } );
+		await sortBySelect.click();
+		await user.selectOptions( sortBySelect, 'title' );
 		await page.getByRole( 'option', { name: 'title' } ).click();
 		await page.getByRole( 'radio', { name: 'Sort descending' } ).click();
 		const firstTitle = page

From 648594446d5e829690d9143d8d943aaaca6dc7dc Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 7 Aug 2024 16:41:52 +0100
Subject: [PATCH 15/18] lint fix

---
 test/e2e/specs/site-editor/new-templates-list.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
index 6c44777089040..0622e994256bd 100644
--- a/test/e2e/specs/site-editor/new-templates-list.spec.js
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -8,7 +8,6 @@ import userEvent from '@testing-library/user-event';
  */
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
-
 test.describe( 'Templates', () => {
 	test.beforeAll( async ( { requestUtils } ) => {
 		await Promise.all( [

From fc962984099d2dc9bb7d8bdbcc29f39e778c856b Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 7 Aug 2024 17:02:23 +0100
Subject: [PATCH 16/18] end to end test update

---
 test/e2e/specs/site-editor/new-templates-list.spec.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
index 0622e994256bd..2a9a7a42bef10 100644
--- a/test/e2e/specs/site-editor/new-templates-list.spec.js
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -25,15 +25,13 @@ test.describe( 'Templates', () => {
 	} );
 
 	test( 'Sorting', async ( { admin, page } ) => {
-		const user = userEvent.setup();
 		await admin.visitSiteEditor( { postType: 'wp_template' } );
 
 		// Descending by title.
 		await page.getByRole( 'button', { name: 'View options' } ).click();
-		const sortBySelect = page.getByRole( 'combobox', { name: 'Sort by' } );
-		await sortBySelect.click();
-		await user.selectOptions( sortBySelect, 'title' );
-		await page.getByRole( 'option', { name: 'title' } ).click();
+		await page.getByRole( 'combobox', { name: 'Sort by' } ).click();
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Enter' );
 		await page.getByRole( 'radio', { name: 'Sort descending' } ).click();
 		const firstTitle = page
 			.getByRole( 'region', {

From 499171eee5c7ac9d0bb0d0e54c63a4ed8a36b73f Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 7 Aug 2024 17:47:16 +0100
Subject: [PATCH 17/18] end to end test update

---
 test/e2e/specs/site-editor/new-templates-list.spec.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
index 2a9a7a42bef10..cfb294743ebea 100644
--- a/test/e2e/specs/site-editor/new-templates-list.spec.js
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -29,9 +29,6 @@ test.describe( 'Templates', () => {
 
 		// Descending by title.
 		await page.getByRole( 'button', { name: 'View options' } ).click();
-		await page.getByRole( 'combobox', { name: 'Sort by' } ).click();
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Enter' );
 		await page.getByRole( 'radio', { name: 'Sort descending' } ).click();
 		const firstTitle = page
 			.getByRole( 'region', {

From 72b8b4d934c8637b891df4c5aaa595b244d19bdb Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 7 Aug 2024 17:52:00 +0100
Subject: [PATCH 18/18] lint fix

---
 test/e2e/specs/site-editor/new-templates-list.spec.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
index cfb294743ebea..31dbe9af814d2 100644
--- a/test/e2e/specs/site-editor/new-templates-list.spec.js
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import userEvent from '@testing-library/user-event';
-
 /**
  * WordPress dependencies
  */