Some design tweaks

WordPress · Sep 20, 2021 · ec8f7c8 · ec8f7c8
1 parent 1e65bf8
commit ec8f7c8
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 27 deletions.
diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
@@ -11,10 +11,11 @@ import {
 	__experimentalNavigation as Navigation,
 	__experimentalNavigationItem as NavigationItem,
 	__experimentalNavigationMenu as NavigationMenu,
+	__experimentalNavigationGroup as NavigationGroup,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
-import { styles } from '@wordpress/icons';
+import { layout, brush, styles, typography } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -63,27 +64,32 @@ function GlobalStylesLevel( {
 
 	return (
 		<>
-			{ hasTypographyPanel && (
-				<NavigationItem
-					item="item-typography"
-					navigateToMenu={ parentMenu + '.typography' }
-					title={ __( 'Typography' ) }
-				/>
-			) }
-			{ hasColorPanel && (
-				<NavigationItem
-					item="item-color"
-					navigateToMenu={ parentMenu + '.color' }
-					title={ __( 'Colors' ) }
-				/>
-			) }
-			{ hasLayoutPanel && (
-				<NavigationItem
-					item="item-layout"
-					navigateToMenu={ parentMenu + '.layout' }
-					title={ __( 'Layout' ) }
-				/>
-			) }
+			<NavigationGroup>
+				{ hasTypographyPanel && (
+					<NavigationItem
+						item="item-typography"
+						navigateToMenu={ parentMenu + '.typography' }
+						icon={ typography }
+						title={ __( 'Typography' ) }
+					/>
+				) }
+				{ hasColorPanel && (
+					<NavigationItem
+						item="item-color"
+						navigateToMenu={ parentMenu + '.color' }
+						title={ __( 'Colors' ) }
+						icon={ brush }
+					/>
+				) }
+				{ hasLayoutPanel && (
+					<NavigationItem
+						item="item-layout"
+						navigateToMenu={ parentMenu + '.layout' }
+						title={ __( 'Layout' ) }
+						icon={ layout }
+					/>
+				) }
+			</NavigationGroup>
 
 			{ hasTypographyPanel && (
 				<NavigationMenu
@@ -189,11 +195,21 @@ export default function GlobalStylesSidebar() {
 						getSetting={ getSetting }
 						setSetting={ setSetting }
 					/>
-					<NavigationItem
-						item="item-blocks"
-						navigateToMenu="blocks"
-						title={ __( 'Blocks' ) }
-					/>
+					<NavigationGroup className="edit-site-global-styles-sidebar__blocks-group">
+						<NavigationItem
+							className="edit-site-global-styles-sidebar__blocks-group-help"
+							isText
+						>
+							{ __(
+								'Customize the appearance of specific blocks for the whole site'
+							) }
+						</NavigationItem>
+						<NavigationItem
+							item="item-blocks"
+							navigateToMenu="blocks"
+							title={ __( 'Blocks' ) }
+						/>
+					</NavigationGroup>
 				</NavigationMenu>
 				<NavigationMenu
 					menu="blocks"

diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
@@ -41,9 +41,23 @@
 
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
 	font-size: $default-font-size * 1.2;
+	font-weight: 500;
+}
+
+.edit-site-global-styles-sidebar .components-navigation__item > button span {
+	font-weight: 500;
 }
 
 .edit-site-typography-panel,
 .edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
 	border: 0;
 }
+
+.edit-site-global-styles-sidebar__blocks-group {
+	padding-top: $grid-unit-30;
+	border-top: $border-width solid $gray-200;
+}
+
+.edit-site-global-styles-sidebar__blocks-group-help {
+	padding: 0 $grid-unit-20;
+}