Update the global styles sidebar to use a navigation component (#34885)

WordPress · Sep 20, 2021 · 0d6d63d · 0d6d63d
1 parent ffcce3e
commit 0d6d63d
Show file tree

Hide file tree

Showing 11 changed files with 239 additions and 193 deletions.
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -89,6 +89,7 @@ export const PanelColorGradientSettingsInner = ( {
 	children,
 	settings,
 	title,
+	showTitle = true,
 	...props
 } ) => {
 	if (
@@ -120,13 +121,14 @@ export const PanelColorGradientSettingsInner = ( {
 			/>
 		</span>
 	);
+
 	return (
 		<PanelBody
 			className={ classnames(
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }
-			title={ titleElement }
+			title={ showTitle ? titleElement : undefined }
 			{ ...props }
 		>
 			{ settings.map( ( setting, index ) => (

diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -20,6 +20,7 @@ export default function ColorPanel( {
 	settings,
 	clientId,
 	enableContrastChecking = true,
+	showTitle = true,
 } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
@@ -58,6 +59,7 @@ export default function ColorPanel( {
 				title={ __( 'Color' ) }
 				initialOpen={ false }
 				settings={ settings }
+				showTitle={ showTitle }
 			>
 				{ enableContrastChecking && (
 					<ContrastChecker

diff --git a/packages/components/src/navigation/menu/index.js b/packages/components/src/navigation/menu/index.js
@@ -74,13 +74,15 @@ export default function NavigationMenu( props ) {
 					/>
 				) }
 
-				<NavigationMenuTitle
-					hasSearch={ hasSearch }
-					onSearch={ onSearch }
-					search={ search }
-					title={ title }
-					titleAction={ titleAction }
-				/>
+				{ title && (
+					<NavigationMenuTitle
+						hasSearch={ hasSearch }
+						onSearch={ onSearch }
+						search={ search }
+						title={ title }
+						titleAction={ titleAction }
+					/>
+				) }
 
 				<NavigableMenu>
 					<ul aria-labelledby={ menuTitleId }>

diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
@@ -11,17 +11,15 @@ import { isRTL } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { G2, UI } from '../../utils/colors-values';
+import { BASE, G2, UI } from '../../utils/colors-values';
 import Button from '../../button';
 import { Text } from '../../text';
 import { reduceMotion, rtl } from '../../utils';
 import { space } from '../../ui/utils/space';
 
 export const NavigationUI = styled.div`
 	width: 100%;
-	background-color: ${ G2.darkGray.primary };
 	box-sizing: border-box;
-	color: #f0f0f0;
 	padding: 0 ${ space( 4 ) };
 	overflow: hidden;
 `;
@@ -47,16 +45,19 @@ export const MenuUI = styled.div`
 
 export const MenuBackButtonUI = styled( Button )`
 	&.is-tertiary {
-		color: ${ G2.lightGray.ui };
+		color: inherit;
+		opacity: 0.7;
 
 		&:hover:not( :disabled ) {
-			color: #ddd;
+			opacity: 1;
 			box-shadow: none;
+			color: inherit;
 		}
 
 		&:active:not( :disabled ) {
 			background: transparent;
-			color: #ddd;
+			opacity: 1;
+			color: inherit;
 		}
 	}
 `;
@@ -68,7 +69,7 @@ export const MenuTitleUI = styled.div`
 
 export const MenuTitleHeadingUI = styled( Text )`
 	align-items: center;
-	color: ${ G2.gray[ 100 ] };
+	color: inherit;
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: ${ space( 2 ) };
@@ -84,17 +85,20 @@ export const MenuTitleActionsUI = styled.span`
 	height: ${ space( 6 ) }; // 24px, same height as the buttons inside
 
 	.components-button.is-small {
-		color: ${ G2.lightGray.ui };
+		color: inherit;
+		opacity: 0.7;
 		margin-right: ${ space( 1 ) }; // Avoid hiding the focus outline
 		padding: 0;
 
 		&:active:not( :disabled ) {
 			background: none;
-			color: ${ G2.gray[ 200 ] };
+			opacity: 1;
+			color: inherit;
 		}
 		&:hover:not( :disabled ) {
 			box-shadow: none;
-			color: ${ G2.gray[ 200 ] };
+			opacity: 1;
+			color: inherit;
 		}
 	}
 `;
@@ -142,46 +146,49 @@ export const MenuTitleSearchUI = styled.div`
 `;
 
 export const GroupTitleUI = styled( Text )`
+	color: inherit;
 	margin-top: ${ space( 2 ) };
 	padding: ${ () =>
 		isRTL()
 			? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } 0`
 			: `${ space( 1 ) } 0 ${ space( 1 ) } ${ space( 4 ) }` };
 	text-transform: uppercase;
-	color: ${ G2.gray[ 100 ] };
 `;
 
 export const ItemBaseUI = styled.li`
 	border-radius: 2px;
-	color: ${ G2.lightGray.ui };
+	color: inherit;
 	margin-bottom: 0;
 
-	button,
-	a.components-button,
-	a {
+	> button,
+	> a.components-button,
+	> a {
 		width: 100%;
-		color: ${ G2.lightGray.ui };
+		color: inherit;
+		opacity: 0.7;
 		padding: ${ space( 2 ) } ${ space( 4 ) }; /* 8px 16px */
 		${ rtl( { textAlign: 'left' }, { textAlign: 'right' } ) }
 
 		&:hover,
 		&:focus:not( [aria-disabled='true'] ):active,
 		&:active:not( [aria-disabled='true'] ):active {
-			color: #ddd;
+			color: inherit;
+			opacity: 1;
 		}
 	}
 
 	&.is-active {
 		background-color: ${ UI.theme };
-		color: ${ UI.textDark };
+		color: ${ BASE.white };
 
-		button,
-		a {
-			color: ${ UI.textDark };
+		> button,
+		> a {
+			color: ${ BASE.white };
+			opacity: 1;
 		}
 	}
 
-	svg path {
+	> svg path {
 		color: ${ G2.lightGray.ui };
 	}
 `;
@@ -196,7 +203,8 @@ export const ItemUI = styled.div`
 	font-weight: 400;
 	line-height: 20px;
 	width: 100%;
-	color: ${ G2.lightGray.ui };
+	color: inherit;
+	opacity: 0.7;
 `;
 
 export const ItemBadgeUI = styled.span`

diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss
@@ -26,10 +26,10 @@ $vertical-tabs-width: 160px;
 	}
 
 	.components-navigation {
-		background-color: $white;
 		padding: 0;
 		max-height: 100%;
 		overflow-y: auto;
+		color: $black;
 
 		> * {
 			// Matches spacing cleared from the modal content element.
@@ -38,42 +38,26 @@ $vertical-tabs-width: 160px;
 
 		.components-navigation__menu {
 			margin: 0;
-			color: $gray-900;
 
 			.components-navigation__item {
-				color: $gray-900; // The inheritance of some items is quite strong, so we have to duplicate this one.
-
 				& > button {
-					color: inherit;
 					padding: 3px $grid-unit-20;
 					height: $grid-unit-60;
 					// Aligns button text instead of button box.
 					margin: 0 #{-$grid-unit-20};
 					width: calc(#{$grid-unit-40} + 100%);
 					&:focus {
-						background: $gray-100;
 						font-weight: 500;
 					}
-					&:hover {
-						color: var(--wp-admin-theme-color);
-					}
-				}
-				.components-toggle-control__label {
-					color: inherit;
 				}
 			}
 			.components-navigation__menu-title-heading {
-				color: inherit;
 				border-bottom: 1px solid $gray-300;
 				padding-left: 0;
 				padding-right: 0;
 			}
 			.components-navigation__back-button {
-				color: inherit;
 				padding-left: 0;
-				&:hover {
-					color: var(--wp-admin-theme-color);
-				}
 			}
 			.edit-post-preferences-modal__custom-fields-confirmation-button {
 				width: auto;

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss
@@ -4,6 +4,7 @@
 	width: 0;
 	overflow: hidden;
 	background: $gray-900;
+	color: $white;
 	transition: width 100ms linear;
 	@include reduce-motion("transition");
 

diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js
@@ -123,6 +123,7 @@ export default function ColorPanel( {
 			gradients={ gradients }
 			disableCustomColors={ ! areCustomSolidsEnabled }
 			disableCustomGradients={ ! areCustomGradientsEnabled }
+			showTitle={ false }
 		>
 			<ColorPalettePanel
 				key={ 'color-palette-panel-' + name }