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 index f9b0cddb7d8e1..a8aef191c445e 100644 --- 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 ( - - { customDataViews.map( ( customViewRecord ) => { - return ( - - ); - } ) } - - + <> +
+ { __( 'Custom Views' ) } +
+ + { customDataViews.map( ( customViewRecord ) => { + return ( + + ); + } ) } + + + ); } diff --git a/packages/edit-site/src/components/sidebar-dataviews/style.scss b/packages/edit-site/src/components/sidebar-dataviews/style.scss new file mode 100644 index 0000000000000..3e8812267b076 --- /dev/null +++ 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 index dadbf48d06e64..0b49f48a3e584 100644 --- 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";