Revert "Navigator: use stable export instead of experimental export (W…

…ordPress#65753)" This reverts commit 591700a.
huubl · Oct 2, 2024 · 77e75f4 · 77e75f4
1 parent b5c58bd
commit 77e75f4
Show file tree

Hide file tree

Showing 13 changed files with 69 additions and 57 deletions.
diff --git a/packages/block-editor/src/components/inserter/mobile-tab-navigation.js b/packages/block-editor/src/components/inserter/mobile-tab-navigation.js
@@ -10,7 +10,10 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
-	Navigator,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	FlexBlock,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
@@ -21,7 +24,7 @@ function ScreenHeader( { title } ) {
 			<View>
 				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
 					<HStack spacing={ 2 }>
-						<Navigator.BackButton
+						<NavigatorBackButton
 							style={
 								// TODO: This style override is also used in ToolsPanelHeader.
 								// It should be supported out-of-the-box by Button.
@@ -43,14 +46,14 @@ function ScreenHeader( { title } ) {
 
 export default function MobileTabNavigation( { categories, children } ) {
 	return (
-		<Navigator
+		<NavigatorProvider
 			initialPath="/"
 			className="block-editor-inserter__mobile-tab-navigation"
 		>
-			<Navigator.Screen path="/">
+			<NavigatorScreen path="/">
 				<ItemGroup>
 					{ categories.map( ( category ) => (
-						<Navigator.Button
+						<NavigatorButton
 							key={ category.name }
 							path={ `/category/${ category.name }` }
 							as={ Item }
@@ -64,19 +67,19 @@ export default function MobileTabNavigation( { categories, children } ) {
 									}
 								/>
 							</HStack>
-						</Navigator.Button>
+						</NavigatorButton>
 					) ) }
 				</ItemGroup>
-			</Navigator.Screen>
+			</NavigatorScreen>
 			{ categories.map( ( category ) => (
-				<Navigator.Screen
+				<NavigatorScreen
 					key={ category.name }
 					path={ `/category/${ category.name }` }
 				>
 					<ScreenHeader title={ __( 'Back' ) } />
 					{ children( category ) }
-				</Navigator.Screen>
+				</NavigatorScreen>
 			) ) }
-		</Navigator>
+		</NavigatorProvider>
 	);
 }
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -130,12 +130,9 @@ export {
 	NavigatorButton as __experimentalNavigatorButton,
 	NavigatorBackButton as __experimentalNavigatorBackButton,
 	NavigatorToParentButton as __experimentalNavigatorToParentButton,
-} from './navigator/legacy';
-export {
-	Navigator,
-	useNavigator,
 	useNavigator as __experimentalUseNavigator,
-} from './navigator';
+} from './navigator/legacy';
+export { Navigator, useNavigator } from './navigator';
 export { default as Notice } from './notice';
 export { default as __experimentalNumberControl } from './number-control';
 export { default as NoticeList } from './notice/list';

diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js
@@ -6,7 +6,7 @@ import {
 	FlexBlock,
 	Flex,
 	Button,
-	useNavigator,
+	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen, backup } from '@wordpress/icons';

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
@@ -3,7 +3,7 @@
  */
 import { _n, sprintf, isRTL } from '@wordpress/i18n';
 import {
-	useNavigator,
+	__experimentalUseNavigator as useNavigator,
 	__experimentalText as Text,
 	Button,
 	Flex,

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -13,7 +13,9 @@ import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	Navigator,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	__experimentalHeading as Heading,
 	Notice,
 	SelectControl,
@@ -282,11 +284,11 @@ function FontCollection( { slug } ) {
 
 			{ ! isLoading && (
 				<>
-					<Navigator
+					<NavigatorProvider
 						initialPath="/"
 						className="font-library-modal__tabpanel-layout"
 					>
-						<Navigator.Screen path="/">
+						<NavigatorScreen path="/">
 							<HStack justify="space-between">
 								<VStack>
 									<Heading level={ 2 } size={ 13 }>
@@ -376,11 +378,11 @@ function FontCollection( { slug } ) {
 								</ul>
 								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</div>
-						</Navigator.Screen>
+						</NavigatorScreen>
 
-						<Navigator.Screen path="/fontFamily">
+						<NavigatorScreen path="/fontFamily">
 							<Flex justify="flex-start">
-								<Navigator.BackButton
+								<NavigatorBackButton
 									icon={
 										isRTL() ? chevronRight : chevronLeft
 									}
@@ -461,8 +463,8 @@ function FontCollection( { slug } ) {
 								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</VStack>
 							<Spacer margin={ 16 } />
-						</Navigator.Screen>
-					</Navigator>
+						</NavigatorScreen>
+					</NavigatorProvider>
 
 					{ selectedFont && (
 						<Flex

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -6,8 +6,10 @@ import {
 	__experimentalConfirmDialog as ConfirmDialog,
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
-	Navigator,
-	useNavigator,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
+	__experimentalUseNavigator as useNavigator,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
@@ -233,12 +235,12 @@ function InstalledFonts() {
 
 			{ ! isResolvingLibrary && (
 				<>
-					<Navigator
+					<NavigatorProvider
 						initialPath={
 							libraryFontSelected ? '/fontFamily' : '/'
 						}
 					>
-						<Navigator.Screen path="/">
+						<NavigatorScreen path="/">
 							<VStack spacing="8">
 								{ notice && (
 									<Notice
@@ -336,9 +338,9 @@ function InstalledFonts() {
 									</VStack>
 								) }
 							</VStack>
-						</Navigator.Screen>
+						</NavigatorScreen>
 
-						<Navigator.Screen path="/fontFamily">
+						<NavigatorScreen path="/fontFamily">
 							<ConfirmDeleteDialog
 								font={ libraryFontSelected }
 								isOpen={ isConfirmDeleteOpen }
@@ -351,7 +353,7 @@ function InstalledFonts() {
 							/>
 
 							<Flex justify="flex-start">
-								<Navigator.BackButton
+								<NavigatorBackButton
 									icon={
 										isRTL() ? chevronRight : chevronLeft
 									}
@@ -425,8 +427,8 @@ function InstalledFonts() {
 								</ul>
 								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</VStack>
-						</Navigator.Screen>
-					</Navigator>
+						</NavigatorScreen>
+					</NavigatorProvider>
 
 					<HStack
 						justify="flex-end"

diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-size.js b/packages/edit-site/src/components/global-styles/font-sizes/font-size.js
@@ -5,7 +5,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	__experimentalSpacer as Spacer,
-	useNavigator,
+	__experimentalUseNavigator as useNavigator,
 	__experimentalView as View,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,

diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
@@ -7,7 +7,7 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
-	Navigator,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -18,7 +18,7 @@ function ScreenHeader( { title, description, onBack } ) {
 			<View>
 				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
 					<HStack spacing={ 2 }>
-						<Navigator.BackButton
+						<NavigatorBackButton
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							size="small"
 							label={ __( 'Back' ) }

diff --git a/packages/edit-site/src/components/global-styles/navigation-button.js b/packages/edit-site/src/components/global-styles/navigation-button.js
@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import {
-	Navigator,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	__experimentalItem as Item,
 	FlexItem,
 	__experimentalHStack as HStack,
@@ -28,11 +29,11 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 }
 
 function NavigationButtonAsItem( props ) {
-	return <Navigator.Button as={ GenericNavigationButton } { ...props } />;
+	return <NavigatorButton as={ GenericNavigationButton } { ...props } />;
 }
 
 function NavigationBackButtonAsItem( props ) {
-	return <Navigator.BackButton as={ GenericNavigationButton } { ...props } />;
+	return <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;
 }
 
 export { NavigationButtonAsItem, NavigationBackButtonAsItem };
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	useNavigator,
+	__experimentalUseNavigator as useNavigator,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
 } from '@wordpress/components';

diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -15,7 +15,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalGrid as Grid,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
-	useNavigator,
+	__experimentalUseNavigator as useNavigator,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalConfirmDialog as ConfirmDialog,

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import {
-	Navigator,
-	useNavigator,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalUseNavigator as useNavigator,
 	createSlotFill,
 	DropdownMenu,
 	MenuGroup,
@@ -123,7 +124,7 @@ function GlobalStylesActionMenu() {
 
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
-		<Navigator.Screen
+		<NavigatorScreen
 			className={ [
 				'edit-site-global-styles-sidebar__navigator-screen',
 				className,
@@ -282,7 +283,7 @@ function GlobalStylesUI() {
 		[]
 	);
 	return (
-		<Navigator
+		<NavigatorProvider
 			className="edit-site-global-styles-sidebar__navigator-provider"
 			initialPath="/"
 		>
@@ -384,7 +385,7 @@ function GlobalStylesUI() {
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
 			<GlobalStylesEditorCanvasContainerLink />
-		</Navigator>
+		</NavigatorProvider>
 	);
 }
 export { GlobalStylesMenuSlot };

diff --git a/packages/preferences/src/components/preferences-modal-tabs/index.js b/packages/preferences/src/components/preferences-modal-tabs/index.js
@@ -3,7 +3,10 @@
  */
 import { useViewportMatch } from '@wordpress/compose';
 import {
-	Navigator,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
@@ -95,14 +98,17 @@ export default function PreferencesModalTabs( { sections } ) {
 		);
 	} else {
 		modalContent = (
-			<Navigator initialPath="/" className="preferences__provider">
-				<Navigator.Screen path="/">
+			<NavigatorProvider
+				initialPath="/"
+				className="preferences__provider"
+			>
+				<NavigatorScreen path="/">
 					<Card isBorderless size="small">
 						<CardBody>
 							<ItemGroup>
 								{ tabs.map( ( tab ) => {
 									return (
-										<Navigator.Button
+										<NavigatorButton
 											key={ tab.name }
 											path={ `/${ tab.name }` }
 											as={ Item }
@@ -124,17 +130,17 @@ export default function PreferencesModalTabs( { sections } ) {
 													/>
 												</FlexItem>
 											</HStack>
-										</Navigator.Button>
+										</NavigatorButton>
 									);
 								} ) }
 							</ItemGroup>
 						</CardBody>
 					</Card>
-				</Navigator.Screen>
+				</NavigatorScreen>
 				{ sections.length &&
 					sections.map( ( section ) => {
 						return (
-							<Navigator.Screen
+							<NavigatorScreen
 								key={ `${ section.name }-menu` }
 								path={ `/${ section.name }` }
 							>
@@ -145,7 +151,7 @@ export default function PreferencesModalTabs( { sections } ) {
 										size="small"
 										gap="6"
 									>
-										<Navigator.BackButton
+										<NavigatorBackButton
 											icon={
 												isRTL()
 													? chevronRight
@@ -159,10 +165,10 @@ export default function PreferencesModalTabs( { sections } ) {
 									</CardHeader>
 									<CardBody>{ section.content }</CardBody>
 								</Card>
-							</Navigator.Screen>
+							</NavigatorScreen>
 						);
 					} ) }
-			</Navigator>
+			</NavigatorProvider>
 		);
 	}