@wordpress/edit-post 5.0.2 → 5.0.6

package/src/components/preferences-modal/index.js

@@ -7,13 +7,23 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import {
-	__experimentalNavigation as Navigation,
-	__experimentalNavigationMenu as NavigationMenu,
-	__experimentalNavigationItem as NavigationItem,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalUseNavigator as useNavigator,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	__experimentalTruncate as Truncate,
+	FlexItem,
 	Modal,
 	TabPanel,
+	Button,
+	Card,
+	CardHeader,
+	CardBody,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { isRTL, __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo, useCallback, useState } from '@wordpress/element';
@@ -26,6 +36,7 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -44,6 +55,21 @@ 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 }
+		/>
+	);
+}
+
 export default function PreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { closeModal } = useDispatch( editPostStore );
@@ -301,34 +327,73 @@ export default function PreferencesModal() {
 		);
 	} else {
 		modalContent = (
-			<Navigation
-				activeMenu={ activeMenu }
-				onActivateMenu={ setActiveMenu }
-			>
-				<NavigationMenu menu={ PREFERENCES_MENU }>
-					{ tabs.map( ( tab ) => {
-						return (
-							<NavigationItem
-								key={ tab.name }
-								title={ tab.title }
-								navigateToMenu={ tab.name }
-							/>
-						);
-					} ) }
-				</NavigationMenu>
+			<NavigatorProvider initialPath="/">
+				<NavigatorScreen path="/">
+					<Card isBorderless size="small">
+						<CardBody>
+							<ItemGroup>
+								{ tabs.map( ( tab ) => {
+									return (
+										<NavigationButton
+											key={ tab.name }
+											path={ tab.name }
+											as={ Item }
+											isAction
+										>
+											<HStack justify="space-between">
+												<FlexItem>
+													<Truncate>
+														{ tab.title }
+													</Truncate>
+												</FlexItem>
+												<FlexItem>
+													<Icon
+														icon={
+															isRTL()
+																? chevronLeft
+																: chevronRight
+														}
+													/>
+												</FlexItem>
+											</HStack>
+										</NavigationButton>
+									);
+								} ) }
+							</ItemGroup>
+						</CardBody>
+					</Card>
+				</NavigatorScreen>
 				{ sections.map( ( section ) => {
 					return (
-						<NavigationMenu
+						<NavigatorScreen
 							key={ `${ section.name }-menu` }
-							menu={ section.name }
-							title={ section.tabLabel }
-							parentMenu={ PREFERENCES_MENU }
+							path={ section.name }
 						>
-							<NavigationItem>{ section.content }</NavigationItem>
-						</NavigationMenu>
+							<Card isBorderless size="large">
+								<CardHeader
+									isBorderless={ false }
+									justify="left"
+									size="small"
+									gap="6"
+								>
+									<NavigationButton
+										path="/"
+										icon={
+											isRTL() ? chevronRight : chevronLeft
+										}
+										isBack
+										aria-label={ __(
+											'Navigate to the previous view'
+										) }
+									/>
+									<Text size="16">{ section.tabLabel }</Text>
+								</CardHeader>
+								<CardBody>{ section.content }</CardBody>
+							</Card>
+						</NavigatorScreen>
 					);
 				} ) }
-			</Navigation>
+			</NavigatorProvider>
 		);
 	}
 	return (

package/src/components/preferences-modal/style.scss

@@ -14,7 +14,7 @@ $vertical-tabs-width: 160px;
 		height: 70%;
 	}
 
-	// Clears spacing to flush fit the navigation component to the modal edges.
+	// Clears spacing to flush fit the navigator component to the modal edges.
 	@media (max-width: #{ ($break-medium - 1) }) {
 		.components-modal__content {
 			padding: 0;
@@ -23,61 +23,10 @@ $vertical-tabs-width: 160px;
 				content: none;
 			}
 		}
-	}
-
-	.components-navigation {
-		background-color: $white;
-		padding: 0;
-		max-height: 100%;
-		overflow-y: auto;
-
-		> * {
-			// Matches spacing cleared from the modal content element.
-			padding: $grid-unit-30 $grid-unit-40;
-		}
-
-		.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;
-			}
+		// Keep the navigator component from overflowing the modal content area
+		// to ensure that sticky position elements stick where intended.
+		.components-navigator-provider {
+			height: 100%;
 		}
 	}
 
@@ -118,6 +67,7 @@ $vertical-tabs-width: 160px;
 	&__section-title {
 		font-size: 0.9rem;
 		font-weight: 600;
+		margin-top: 0;
 	}
 
 	&__option {