Dataviews: Add: custom views header indication.

WordPress · Nov 7, 2023 · 070690c · 070690c
1 parent 137ad68
commit 070690c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 16 deletions.
diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
@@ -3,8 +3,12 @@
  */
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -70,20 +74,25 @@ export function useCustomDataViews( type ) {
 export default function CustomDataViewsList( { type, activeView, isCustom } ) {
 	const customDataViews = useCustomDataViews( type );
 	return (
-		<ItemGroup>
-			{ customDataViews.map( ( customViewRecord ) => {
-				return (
-					<CustomDataViewItem
-						key={ customViewRecord.id }
-						dataviewId={ customViewRecord.id }
-						isActive={
-							isCustom === 'true' &&
-							Number( activeView ) === customViewRecord.id
-						}
-					/>
-				);
-			} ) }
-			<AddNewItem type={ type } />
-		</ItemGroup>
+		<>
+			<div className="edit-site-sidebar-navigation-screen-dataviews__group-header">
+				<Heading level={ 2 }>{ __( 'Custom Views' ) }</Heading>
+			</div>
+			<ItemGroup>
+				{ customDataViews.map( ( customViewRecord ) => {
+					return (
+						<CustomDataViewItem
+							key={ customViewRecord.id }
+							dataviewId={ customViewRecord.id }
+							isActive={
+								isCustom === 'true' &&
+								Number( activeView ) === customViewRecord.id
+							}
+						/>
+					);
+				} ) }
+				<AddNewItem type={ type } />
+			</ItemGroup>
+		</>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-dataviews/style.scss b/packages/edit-site/src/components/sidebar-dataviews/style.scss
@@ -0,0 +1,8 @@
+.edit-site-sidebar-navigation-screen-dataviews__group-header {
+	margin-top: $grid-unit-40;
+	h2 {
+		font-size: 11px;
+		font-weight: 500;
+		text-transform: uppercase;
+	}
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -39,6 +39,7 @@
 @import "./components/sidebar-navigation-screen-pattern/style.scss";
 @import "./components/sidebar-navigation-screen-patterns/style.scss";
 @import "./components/sidebar-navigation-screen-template/style.scss";
+@import "./components/sidebar-dataviews/style.scss";
 @import "./components/site-hub/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
 @import "./components/site-icon/style.scss";