@wordpress/edit-site 6.8.8 → 6.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.8.8",
+	"version": "6.10.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,47 +27,47 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
+		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.8.2",
-		"@wordpress/api-fetch": "^7.8.2",
-		"@wordpress/blob": "^4.8.1",
-		"@wordpress/block-editor": "^14.3.6",
-		"@wordpress/block-library": "^9.8.7",
-		"@wordpress/blocks": "^13.8.4",
-		"@wordpress/commands": "^1.8.6",
-		"@wordpress/components": "^28.8.6",
-		"@wordpress/compose": "^7.8.3",
-		"@wordpress/core-commands": "^1.8.6",
-		"@wordpress/core-data": "^7.8.6",
-		"@wordpress/data": "^10.8.3",
-		"@wordpress/dataviews": "^4.4.6",
-		"@wordpress/date": "^5.8.2",
-		"@wordpress/deprecated": "^4.8.2",
-		"@wordpress/dom": "^4.8.2",
-		"@wordpress/editor": "^14.8.8",
-		"@wordpress/element": "^6.8.1",
-		"@wordpress/escape-html": "^3.8.1",
-		"@wordpress/hooks": "^4.8.2",
-		"@wordpress/html-entities": "^4.8.1",
-		"@wordpress/i18n": "^5.8.2",
-		"@wordpress/icons": "^10.8.2",
-		"@wordpress/keyboard-shortcuts": "^5.8.3",
-		"@wordpress/keycodes": "^4.8.2",
-		"@wordpress/notices": "^5.8.3",
-		"@wordpress/patterns": "^2.8.6",
-		"@wordpress/plugins": "^7.8.6",
-		"@wordpress/preferences": "^4.8.6",
-		"@wordpress/primitives": "^4.8.1",
-		"@wordpress/priority-queue": "^3.8.1",
-		"@wordpress/private-apis": "^1.8.1",
-		"@wordpress/reusable-blocks": "^5.8.6",
-		"@wordpress/router": "^1.8.1",
-		"@wordpress/style-engine": "^2.8.1",
-		"@wordpress/url": "^4.8.1",
-		"@wordpress/viewport": "^6.8.3",
-		"@wordpress/widgets": "^4.8.6",
-		"@wordpress/wordcount": "^4.8.1",
+		"@wordpress/a11y": "^4.10.0",
+		"@wordpress/api-fetch": "^7.10.0",
+		"@wordpress/blob": "^4.10.0",
+		"@wordpress/block-editor": "^14.5.0",
+		"@wordpress/block-library": "^9.10.0",
+		"@wordpress/blocks": "^13.10.0",
+		"@wordpress/commands": "^1.10.0",
+		"@wordpress/components": "^28.10.0",
+		"@wordpress/compose": "^7.10.0",
+		"@wordpress/core-commands": "^1.10.0",
+		"@wordpress/core-data": "^7.10.0",
+		"@wordpress/data": "^10.10.0",
+		"@wordpress/dataviews": "^4.6.0",
+		"@wordpress/date": "^5.10.0",
+		"@wordpress/deprecated": "^4.10.0",
+		"@wordpress/dom": "^4.10.0",
+		"@wordpress/editor": "^14.10.0",
+		"@wordpress/element": "^6.10.0",
+		"@wordpress/escape-html": "^3.10.0",
+		"@wordpress/hooks": "^4.10.0",
+		"@wordpress/html-entities": "^4.10.0",
+		"@wordpress/i18n": "^5.10.0",
+		"@wordpress/icons": "^10.10.0",
+		"@wordpress/keyboard-shortcuts": "^5.10.0",
+		"@wordpress/keycodes": "^4.10.0",
+		"@wordpress/notices": "^5.10.0",
+		"@wordpress/patterns": "^2.10.0",
+		"@wordpress/plugins": "^7.10.0",
+		"@wordpress/preferences": "^4.10.0",
+		"@wordpress/primitives": "^4.10.0",
+		"@wordpress/priority-queue": "^3.10.0",
+		"@wordpress/private-apis": "^1.10.0",
+		"@wordpress/reusable-blocks": "^5.10.0",
+		"@wordpress/router": "^1.10.0",
+		"@wordpress/style-engine": "^2.10.0",
+		"@wordpress/url": "^4.10.0",
+		"@wordpress/viewport": "^6.10.0",
+		"@wordpress/widgets": "^4.10.0",
+		"@wordpress/wordcount": "^4.10.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b7af02f8431034ee19cdc33dd105d21705823eed"
+	"gitHead": "ab34a7ac935fd1478eac63b596242d83270897ee"
 }

package/src/components/editor-canvas-container/index.js

@@ -125,7 +125,7 @@ function EditorCanvasContainer( {
 					>
 						{ shouldShowCloseButton && (
 							<Button
-								__next40pxDefaultSize
+								size="compact"
 								className="edit-site-editor-canvas-container__close-button"
 								icon={ closeSmall }
 								label={ closeButtonLabel || __( 'Close' ) }

package/src/components/editor-canvas-container/style.scss

@@ -29,7 +29,7 @@
 .edit-site-editor-canvas-container__close-button {
 	position: absolute;
 	right: $grid-unit-10;
-	top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
-	z-index: 1;
+	top: $grid-unit-10;
+	z-index: 2;
 	background: $white;
 }

package/src/components/global-styles/font-families.js

@@ -6,9 +6,11 @@ import {
 	__experimentalText as Text,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
 	Button,
 } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { settings } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -67,10 +69,18 @@ function FontFamilies() {
 				/>
 			) }
 
-			<VStack spacing={ 4 }>
+			<VStack spacing={ 2 }>
+				<HStack justify="space-between">
+					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					<Button
+						onClick={ () => setModalTabOpen( 'installed-fonts' ) }
+						label={ __( 'Manage fonts' ) }
+						icon={ settings }
+						size="small"
+					/>
+				</HStack>
 				{ activeFonts.length > 0 && (
 					<>
-						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 						<ItemGroup size="large" isBordered isSeparated>
 							{ activeFonts.map( ( font ) => (
 								<FontFamilyItem
@@ -82,31 +92,30 @@ function FontFamilies() {
 					</>
 				) }
 				{ ! hasFonts && (
-					<VStack>
-						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					<>
 						<Text as="p">
 							{ hasInstalledFonts
 								? __( 'No fonts activated.' )
 								: __( 'No fonts installed.' ) }
 						</Text>
-					</VStack>
+						<Button
+							className="edit-site-global-styles-font-families__manage-fonts"
+							variant="secondary"
+							__next40pxDefaultSize
+							onClick={ () => {
+								setModalTabOpen(
+									hasInstalledFonts
+										? 'installed-fonts'
+										: 'upload-fonts'
+								);
+							} }
+						>
+							{ hasInstalledFonts
+								? __( 'Manage fonts' )
+								: __( 'Add fonts' ) }
+						</Button>
+					</>
 				) }
-				<Button
-					className="edit-site-global-styles-font-families__manage-fonts"
-					variant="secondary"
-					__next40pxDefaultSize
-					onClick={ () => {
-						setModalTabOpen(
-							hasInstalledFonts
-								? 'installed-fonts'
-								: 'upload-fonts'
-						);
-					} }
-				>
-					{ hasInstalledFonts
-						? __( 'Manage fonts' )
-						: __( 'Add fonts' ) }
-				</Button>
 			</VStack>
 		</>
 	);

package/src/components/global-styles/font-library-modal/font-card.js

@@ -3,7 +3,7 @@
  */
 import { _n, sprintf, isRTL } from '@wordpress/i18n';
 import {
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 	__experimentalText as Text,
 	Button,
 	Flex,

package/src/components/global-styles/font-library-modal/font-collection.js

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

package/src/components/global-styles/font-library-modal/index.js

@@ -67,7 +67,7 @@ function FontLibraryModal( {
 			className="font-library-modal"
 		>
 			<Tabs defaultTabId={ defaultTabId }>
-				<div className="font-library-modal__tablist">
+				<div className="font-library-modal__tablist-container">
 					<Tabs.TabList>
 						{ tabs.map( ( { id, title } ) => (
 							<Tabs.Tab key={ id } tabId={ id }>

package/src/components/global-styles/font-library-modal/installed-fonts.js

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

package/src/components/global-styles/font-library-modal/style.scss

@@ -133,7 +133,7 @@ $footer-height: 70px;
 	padding-bottom: $grid-unit-20;
 }
 
-.font-library-modal__tablist {
+.font-library-modal__tablist-container {
 	position: sticky;
 	top: 0;
 	border-bottom: 1px solid $gray-300;
@@ -141,6 +141,10 @@ $footer-height: 70px;
 	margin: 0 #{$grid-unit-40 * -1};
 	padding: 0 $grid-unit-20;
 	z-index: 1;
+
+	[role="tablist"] {
+		margin-bottom: -1px;
+	}
 }
 
 

package/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,
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 	__experimentalView as View,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -36,7 +36,7 @@ function FontSize() {
 
 	const {
 		params: { origin, slug },
-		goTo,
+		goBack,
 	} = useNavigator();
 
 	const [ fontSizes, setFontSizes ] = useGlobalSetting(
@@ -51,6 +51,17 @@ function FontSize() {
 	// Get the font size by slug.
 	const fontSize = sizes.find( ( size ) => size.slug === slug );
 
+	// Navigate to the font sizes list if the font size is not available.
+	useEffect( () => {
+		if ( !! slug && ! fontSize ) {
+			goBack();
+		}
+	}, [ slug, fontSize, goBack ] );
+
+	if ( ! origin || ! slug || ! fontSize ) {
+		return null;
+	}
+
 	// Whether the font size is fluid. If not defined, use the global fluid value of the theme.
 	const isFluid =
 		fontSize?.fluid !== undefined ? !! fontSize.fluid : !! globalFluid;
@@ -121,18 +132,6 @@ function FontSize() {
 		setIsRenameDialogOpen( ! isRenameDialogOpen );
 	};
 
-	// Navigate to the font sizes list if the font size is not available.
-	useEffect( () => {
-		if ( ! fontSize ) {
-			goTo( '/typography/font-sizes/', { isBack: true } );
-		}
-	}, [ fontSize, goTo ] );
-
-	// Avoid rendering if the font size is not available.
-	if ( ! fontSize ) {
-		return null;
-	}
-
 	return (
 		<>
 			<ConfirmDeleteFontSizeDialog
@@ -159,7 +158,6 @@ function FontSize() {
 							__( 'Manage the font size %s.' ),
 							fontSize.name
 						) }
-						onBack={ () => goTo( '/typography/font-sizes/' ) }
 					/>
 					{ origin === 'custom' && (
 						<FlexItem>
@@ -198,7 +196,11 @@ function FontSize() {
 				</HStack>
 
 				<View>
-					<Spacer paddingX={ 4 }>
+					<Spacer
+						paddingX={ 4 }
+						marginBottom={ 0 }
+						paddingBottom={ 6 }
+					>
 						<VStack spacing={ 4 }>
 							<FlexItem>
 								<FontSizePreview fontSize={ fontSize } />

package/src/components/global-styles/font-sizes/font-sizes-count.js

@@ -24,7 +24,7 @@ function FontSizes() {
 			</HStack>
 			<ItemGroup isBordered isSeparated>
 				<NavigationButtonAsItem
-					path="/typography/font-sizes/"
+					path="/typography/font-sizes"
 					aria-label={ __( 'Edit font size presets' ) }
 				>
 					<HStack direction="row">

package/src/components/global-styles/header.js

@@ -7,7 +7,7 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	Navigator,
 } 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 }>
-						<NavigatorBackButton
+						<Navigator.BackButton
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							size="small"
 							label={ __( 'Back' ) }

package/src/components/global-styles/navigation-button.js

@@ -2,8 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	Navigator,
 	__experimentalItem as Item,
 	FlexItem,
 	__experimentalHStack as HStack,
@@ -29,11 +28,11 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 }
 
 function NavigationButtonAsItem( props ) {
-	return <NavigatorButton as={ GenericNavigationButton } { ...props } />;
+	return <Navigator.Button as={ GenericNavigationButton } { ...props } />;
 }
 
 function NavigationBackButtonAsItem( props ) {
-	return <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;
+	return <Navigator.BackButton as={ GenericNavigationButton } { ...props } />;
 }
 
 export { NavigationButtonAsItem, NavigationBackButtonAsItem };

package/src/components/global-styles/screen-block-list.js

@@ -174,7 +174,7 @@ function ScreenBlockList() {
 				className="edit-site-block-types-search"
 				onChange={ setFilterValue }
 				value={ filterValue }
-				label={ __( 'Search for blocks' ) }
+				label={ __( 'Search' ) }
 				placeholder={ __( 'Search' ) }
 			/>
 			<MemoizedBlockList filterValue={ deferredFilterValue } />

package/src/components/global-styles/screen-revisions/index.js

@@ -3,7 +3,6 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	__experimentalUseNavigator as useNavigator,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
 } from '@wordpress/components';
@@ -33,7 +32,6 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 const PAGE_SIZE = 10;
 
 function ScreenRevisions() {
-	const { goTo } = useNavigator();
 	const { user: currentEditorGlobalStyles, setUserConfig } =
 		useContext( GlobalStylesContext );
 	const { blocks, editorCanvasContainerView } = useSelect(
@@ -71,8 +69,9 @@ function ScreenRevisions() {
 		currentEditorGlobalStyles
 	);
 
+	// The actual code that triggers the revisions screen to navigate back
+	// to the home screen in in `packages/edit-site/src/components/global-styles/ui.js`.
 	const onCloseRevisions = () => {
-		goTo( '/' ); // Return to global styles main panel.
 		const canvasContainerView =
 			editorCanvasContainerView === 'global-styles-revisions:style-book'
 				? 'style-book'
@@ -86,15 +85,6 @@ function ScreenRevisions() {
 		onCloseRevisions();
 	};
 
-	useEffect( () => {
-		if (
-			! editorCanvasContainerView ||
-			! editorCanvasContainerView.startsWith( 'global-styles-revisions' )
-		) {
-			goTo( '/' ); // Return to global styles main panel.
-		}
-	}, [ editorCanvasContainerView ] );
-
 	useEffect( () => {
 		if ( ! isLoading && revisions.length ) {
 			setCurrentRevisions( revisions );

package/src/components/global-styles/shadows-edit-panel.js

@@ -15,7 +15,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalGrid as Grid,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalConfirmDialog as ConfirmDialog,
@@ -114,6 +114,10 @@ export default function ShadowsEditPanel() {
 	const [ isRenameModalVisible, setIsRenameModalVisible ] = useState( false );
 	const [ shadowName, setShadowName ] = useState( selectedShadow.name );
 
+	if ( ! category || ! slug ) {
+		return null;
+	}
+
 	const onShadowChange = ( shadow ) => {
 		setSelectedShadow( { ...selectedShadow, shadow } );
 		const updatedShadows = shadows.map( ( s ) =>

package/src/components/global-styles/style-variations-container.js

@@ -3,7 +3,7 @@
  */
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useContext, useEffect, useMemo, useState } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import { __experimentalGrid as Grid } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
@@ -20,12 +20,7 @@ const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
 export default function StyleVariationsContainer( { gap = 2 } ) {
 	const { user } = useContext( GlobalStylesContext );
-	const [ currentUserStyles, setCurrentUserStyles ] = useState( user );
-	const userStyles = currentUserStyles?.styles;
-
-	useEffect( () => {
-		setCurrentUserStyles( user );
-	}, [ user ] );
+	const userStyles = user?.styles;
 
 	const variations = useSelect( ( select ) => {
 		return select(