Refactor Navigator usage across repository

WordPress · Dec 15, 2021 · 28b64a7 · 28b64a7
1 parent fb477da
commit 28b64a7
Show file tree

Hide file tree

Showing 16 changed files with 35 additions and 59 deletions.
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
@@ -55,19 +55,14 @@ import BlockManager from '../block-manager';
 const MODAL_NAME = 'edit-post/preferences';
 const PREFERENCES_MENU = 'preferences-menu';
 
-function NavigationButton( {
-	as: Tag = Button,
-	path,
-	isBack = false,
-	...props
-} ) {
-	const navigator = useNavigator();
-	return (
-		<Tag
-			onClick={ () => navigator.push( path, { isBack } ) }
-			{ ...props }
-		/>
-	);
+function NavigationButton( { as: Tag = Button, path, ...props } ) {
+	const { push } = useNavigator();
+	return <Tag onClick={ () => push( path ) } { ...props } />;
+}
+
+function NavigationBackButton( { as: Tag = Button, ...props } ) {
+	const { pop } = useNavigator();
+	return <Tag onClick={ pop } { ...props } />;
 }
 
 export default function PreferencesModal() {
@@ -376,12 +371,10 @@ export default function PreferencesModal() {
 									size="small"
 									gap="6"
 								>
-									<NavigationButton
-										path="/"
+									<NavigationBackButton
 										icon={
 											isRTL() ? chevronRight : chevronLeft
 										}
-										isBack
 										aria-label={ __(
 											'Navigate to the previous view'
 										) }

diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -12,7 +12,7 @@ import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );

diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
@@ -14,23 +14,21 @@ import { chevronRight, chevronLeft, Icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import NavigationButton from './navigation-button';
+import { NavigationBackButton } from './navigation-button';
 
-function ScreenHeader( { back, title, description } ) {
+function ScreenHeader( { title, description } ) {
 	return (
 		<VStack spacing={ 2 }>
 			<HStack spacing={ 2 }>
 				<View>
-					<NavigationButton
-						path={ back }
+					<NavigationBackButton
 						icon={
 							<Icon
 								icon={ isRTL() ? chevronRight : chevronLeft }
 								variant="muted"
 							/>
 						}
 						size="small"
-						isBack
 						aria-label={ __( 'Navigate to the previous view' ) }
 					/>
 				</View>

diff --git a/packages/edit-site/src/components/global-styles/navigation-button.js b/packages/edit-site/src/components/global-styles/navigation-button.js
@@ -9,16 +9,9 @@ import {
 } from '@wordpress/components';
 import { Icon } from '@wordpress/icons';
 
-function NavigationButton( {
-	path,
-	icon,
-	children,
-	isBack = false,
-	...props
-} ) {
-	const navigator = useNavigator();
+function GenericNavigationButton( { icon, children, ...props } ) {
 	return (
-		<Item onClick={ () => navigator.push( path, { isBack } ) } { ...props }>
+		<Item { ...props }>
 			{ icon && (
 				<HStack justify="flex-start">
 					<FlexItem>
@@ -31,5 +24,16 @@ function NavigationButton( {
 		</Item>
 	);
 }
+function NavigationButton( { path, ...props } ) {
+	const { push } = useNavigator();
+	return (
+		<GenericNavigationButton onClick={ () => push( path ) } { ...props } />
+	);
+}
+
+function NavigationBackButton( { ...props } ) {
+	const { pop } = useNavigator();
+	return <GenericNavigationButton onClick={ pop } { ...props } />;
+}
 
-export default NavigationButton;
+export { NavigationButton, NavigationBackButton };
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
@@ -17,7 +17,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import Subtitle from './subtitle';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { useSetting } from './hooks';
 
 const EMPTY_COLORS = [];

diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -17,7 +17,6 @@ import {
 } from './hooks';
 
 function ScreenBackgroundColor( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ gradients ] = useSetting( 'color.gradients', name );
@@ -86,7 +85,6 @@ function ScreenBackgroundColor( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Background' ) }
 				description={ __(
 					'Set a background color or gradient for the whole site.'

diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -17,7 +17,7 @@ import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import ScreenHeader from './header';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 
 function BlockMenuItem( { block } ) {
 	const hasTypographyPanel = useHasTypographyPanel( block.name );
@@ -48,7 +48,6 @@ function ScreenBlockList() {
 	return (
 		<>
 			<ScreenHeader
-				back="/"
 				title={ __( 'Blocks' ) }
 				description={ __(
 					'Customize the appearance of specific blocks and for the whole site.'

diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -14,7 +14,7 @@ function ScreenBlock( { name } ) {
 
 	return (
 		<>
-			<ScreenHeader back="/blocks" title={ blockType.title } />
+			<ScreenHeader title={ blockType.title } />
 			<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />
 		</>
 	);

diff --git a/packages/edit-site/src/components/global-styles/screen-color-palette.js b/packages/edit-site/src/components/global-styles/screen-color-palette.js
@@ -17,12 +17,10 @@ import ScreenHeader from './header';
 
 function ScreenColorPalette( { name } ) {
 	const [ currentTab, setCurrentTab ] = useState( 'solid' );
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Palette' ) }
 				description={ __(
 					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'

diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -15,7 +15,7 @@ import {
  */
 import ScreenHeader from './header';
 import Palette from './palette';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 
@@ -93,7 +93,6 @@ function ScreenColors( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu ? parentMenu : '/' }
 				title={ __( 'Colors' ) }
 				description={ __(
 					'Manage palettes and the default color of different global elements on the site.'

diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -11,16 +11,12 @@ import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
 
 function ScreenLayout( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
 
 	return (
 		<>
-			<ScreenHeader
-				back={ parentMenu ? parentMenu : '/' }
-				title={ __( 'Layout' ) }
-			/>
+			<ScreenHeader title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
 			{ hasBorderPanel && <BorderPanel name={ name } /> }
 		</>

diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -16,7 +16,6 @@ import {
 } from './hooks';
 
 function ScreenLinkColor( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -47,7 +46,6 @@ function ScreenLinkColor( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Links' ) }
 				description={ __(
 					'Set the default color used for links across the site.'

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -17,7 +17,7 @@ import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import StylesPreview from './preview';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import ContextMenu from './context-menu';
 
 function ScreenRoot() {

diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
@@ -16,7 +16,6 @@ import {
 } from './hooks';
 
 function ScreenTextColor( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -39,7 +38,6 @@ function ScreenTextColor( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Text' ) }
 				description={ __(
 					'Set the default color used for text across the site.'

diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js
@@ -21,13 +21,9 @@ const elements = {
 };
 
 function ScreenTypographyElement( { name, element } ) {
-	const parentMenu =
-		name === undefined ? '/typography' : '/blocks/' + name + '/typography';
-
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu }
 				title={ elements[ element ].title }
 				description={ elements[ element ].description }
 			/>

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -13,7 +13,7 @@ import {
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
@@ -72,7 +72,6 @@ function ScreenTypography( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu ? parentMenu : '/' }
 				title={ __( 'Typography' ) }
 				description={ __(
 					'Manage the typography settings for different elements.'
@@ -101,7 +100,7 @@ function ScreenTypography( { name } ) {
 				</div>
 			) }
 
-			{ /* no typogrpahy elements support yet for blocks */ }
+			{ /* no typography elements support yet for blocks */ }
 			{ !! name && <TypographyPanel name={ name } element="text" /> }
 		</>
 	);