@wordpress/edit-site 6.50.0 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.50.0",
+	"version": "7.0.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,8 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=18.12.0",
-		"npm": ">=8.19.2"
+		"node": "^20.19.0 || >=22.13.0",
+		"npm": ">=10.2.3"
 	},
 	"files": [
 		"src",
@@ -47,52 +47,52 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.50.0",
-		"@wordpress/admin-ui": "^2.5.0",
-		"@wordpress/api-fetch": "^7.50.0",
-		"@wordpress/base-styles": "^10.2.0",
-		"@wordpress/blob": "^4.50.0",
-		"@wordpress/block-editor": "^15.23.0",
-		"@wordpress/block-library": "^10.1.0",
-		"@wordpress/blocks": "^15.23.0",
-		"@wordpress/commands": "^1.50.0",
-		"@wordpress/components": "^36.1.0",
-		"@wordpress/compose": "^8.3.0",
-		"@wordpress/core-data": "^7.50.0",
-		"@wordpress/data": "^10.50.0",
-		"@wordpress/dataviews": "^17.1.0",
-		"@wordpress/date": "^5.50.0",
-		"@wordpress/deprecated": "^4.50.0",
-		"@wordpress/dom": "^4.50.0",
-		"@wordpress/editor": "^14.50.0",
-		"@wordpress/element": "^8.2.0",
-		"@wordpress/escape-html": "^3.50.0",
-		"@wordpress/fields": "^0.42.0",
-		"@wordpress/global-styles-engine": "^1.17.0",
-		"@wordpress/global-styles-ui": "^1.17.0",
-		"@wordpress/hooks": "^4.50.0",
-		"@wordpress/html-entities": "^4.50.0",
-		"@wordpress/i18n": "^6.23.0",
-		"@wordpress/icons": "^15.1.0",
-		"@wordpress/keyboard-shortcuts": "^5.50.0",
-		"@wordpress/keycodes": "^4.50.0",
-		"@wordpress/media-utils": "^5.50.0",
-		"@wordpress/notices": "^5.50.0",
-		"@wordpress/patterns": "^2.50.0",
-		"@wordpress/plugins": "^7.50.0",
-		"@wordpress/preferences": "^4.50.0",
-		"@wordpress/primitives": "^4.50.0",
-		"@wordpress/private-apis": "^1.50.0",
-		"@wordpress/reusable-blocks": "^5.50.0",
-		"@wordpress/router": "^1.50.0",
-		"@wordpress/style-engine": "^2.50.0",
-		"@wordpress/theme": "^0.17.0",
-		"@wordpress/ui": "^0.17.0",
-		"@wordpress/url": "^4.50.0",
-		"@wordpress/viewport": "^6.50.0",
-		"@wordpress/views": "^1.17.0",
-		"@wordpress/widgets": "^4.50.0",
-		"@wordpress/wordcount": "^4.50.0",
+		"@wordpress/a11y": "^4.51.0",
+		"@wordpress/admin-ui": "^2.6.0",
+		"@wordpress/api-fetch": "^7.51.0",
+		"@wordpress/base-styles": "^11.0.0",
+		"@wordpress/blob": "^4.51.0",
+		"@wordpress/block-editor": "^16.0.0",
+		"@wordpress/block-library": "^10.2.0",
+		"@wordpress/blocks": "^15.24.0",
+		"@wordpress/commands": "^1.51.0",
+		"@wordpress/components": "^37.0.0",
+		"@wordpress/compose": "^8.4.0",
+		"@wordpress/core-data": "^7.51.0",
+		"@wordpress/data": "^10.51.0",
+		"@wordpress/dataviews": "^17.2.0",
+		"@wordpress/date": "^5.51.0",
+		"@wordpress/deprecated": "^4.51.0",
+		"@wordpress/dom": "^4.51.0",
+		"@wordpress/editor": "^14.51.0",
+		"@wordpress/element": "^8.3.0",
+		"@wordpress/escape-html": "^3.51.0",
+		"@wordpress/fields": "^0.43.0",
+		"@wordpress/global-styles-engine": "^1.18.0",
+		"@wordpress/global-styles-ui": "^1.18.0",
+		"@wordpress/hooks": "^4.51.0",
+		"@wordpress/html-entities": "^4.51.0",
+		"@wordpress/i18n": "^6.24.0",
+		"@wordpress/icons": "^15.2.0",
+		"@wordpress/keyboard-shortcuts": "^5.51.0",
+		"@wordpress/keycodes": "^4.51.0",
+		"@wordpress/media-utils": "^5.51.0",
+		"@wordpress/notices": "^5.51.0",
+		"@wordpress/patterns": "^2.51.0",
+		"@wordpress/plugins": "^7.51.0",
+		"@wordpress/preferences": "^4.51.0",
+		"@wordpress/primitives": "^4.51.0",
+		"@wordpress/private-apis": "^1.51.0",
+		"@wordpress/reusable-blocks": "^5.51.0",
+		"@wordpress/router": "^1.51.0",
+		"@wordpress/style-engine": "^2.51.0",
+		"@wordpress/theme": "^1.0.0",
+		"@wordpress/ui": "^0.18.0",
+		"@wordpress/url": "^4.51.0",
+		"@wordpress/viewport": "^6.51.0",
+		"@wordpress/views": "^1.18.0",
+		"@wordpress/widgets": "^4.51.0",
+		"@wordpress/wordcount": "^4.51.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
@@ -101,11 +101,11 @@
 		"react-autosize-textarea": "^7.1.0"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
+	"gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
 }

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -54,7 +54,7 @@ function SuggestionListItem( {
 			<WCText
 				size="body"
 				lineHeight={ 1.53846153846 } // 20px
-				weight={ 500 }
+				weight="var(--wpds-typography-font-weight-emphasis)"
 				className={ `${ baseCssClass }__title` }
 			>
 				<TextHighlight
@@ -223,7 +223,7 @@ function AddCustomTemplateModalContent( {
 						>
 							<WCText
 								as="span"
-								weight={ 500 }
+								weight="var(--wpds-typography-font-weight-emphasis)"
 								lineHeight={ 1.53846153846 } // 20px
 							>
 								{ entityForSuggestions.labels.all_items }
@@ -247,7 +247,7 @@ function AddCustomTemplateModalContent( {
 						>
 							<WCText
 								as="span"
-								weight={ 500 }
+								weight="var(--wpds-typography-font-weight-emphasis)"
 								lineHeight={ 1.53846153846 } // 20px
 							>
 								{ entityForSuggestions.labels.singular_name }

package/src/components/add-new-template/index.js

@@ -131,7 +131,7 @@ function TemplateListItem( {
 				>
 					<WCText
 						align="center"
-						weight={ 500 }
+						weight="var(--wpds-typography-font-weight-emphasis)"
 						lineHeight={ 1.53846153846 } // 20px
 					>
 						{ title }

package/src/components/add-new-template-legacy/add-custom-template-modal-content.js

@@ -54,7 +54,7 @@ function SuggestionListItem( {
 			<WCText
 				size="body"
 				lineHeight={ 1.53846153846 } // 20px
-				weight={ 500 }
+				weight="var(--wpds-typography-font-weight-emphasis)"
 				className={ `${ baseCssClass }__title` }
 			>
 				<TextHighlight
@@ -225,7 +225,7 @@ function AddCustomTemplateModalContent( {
 						>
 							<WCText
 								as="span"
-								weight={ 500 }
+								weight="var(--wpds-typography-font-weight-emphasis)"
 								lineHeight={ 1.53846153846 } // 20px
 							>
 								{ entityForSuggestions.labels.all_items }
@@ -249,7 +249,7 @@ function AddCustomTemplateModalContent( {
 						>
 							<WCText
 								as="span"
-								weight={ 500 }
+								weight="var(--wpds-typography-font-weight-emphasis)"
 								lineHeight={ 1.53846153846 } // 20px
 							>
 								{ entityForSuggestions.labels.singular_name }

package/src/components/add-new-template-legacy/index.js

@@ -132,7 +132,7 @@ function TemplateListItem( {
 				>
 					<WCText
 						align="center"
-						weight={ 500 }
+						weight="var(--wpds-typography-font-weight-emphasis)"
 						lineHeight={ 1.53846153846 } // 20px
 					>
 						{ title }

package/src/components/editor/index.js

@@ -1,14 +1,9 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button, __unstableMotion as motion } from '@wordpress/components';
-import { useInstanceId, useReducedMotion } from '@wordpress/compose';
+import { Button } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
 	privateApis as editorPrivateApis,
@@ -21,7 +16,7 @@ import { useCallback } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { decodeEntities } from '@wordpress/html-entities';
-import { Icon, arrowUpLeft, arrowUpRight } from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -37,7 +32,6 @@ import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 import SaveButton from '../save-button';
 import SavePanel from '../save-panel';
 import SiteEditorMoreMenu from '../more-menu';
-import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import { ViewportSync } from '../block-editor/use-viewport-sync';
 import useEditorTitle from './use-editor-title';
@@ -53,30 +47,6 @@ const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
-const toggleHomeIconVariants = {
-	edit: {
-		opacity: 0,
-		scale: 0.2,
-	},
-	hover: {
-		opacity: 1,
-		scale: 1,
-		clipPath: 'inset( 22% round 2px )',
-	},
-};
-
-const siteIconVariants = {
-	edit: {
-		clipPath: 'inset(0% round 0px)',
-	},
-	hover: {
-		clipPath: 'inset( 22% round 2px )',
-	},
-	tap: {
-		clipPath: 'inset(0% round 0px)',
-	},
-};
-
 function getListPathForPostType( postType ) {
 	switch ( postType ) {
 		case 'navigation':
@@ -113,7 +83,6 @@ function getNavigationPath( location, postType ) {
 }
 
 export default function EditSiteEditor( { isHomeRoute = false } ) {
-	const disableMotion = useReducedMotion();
 	const location = useLocation();
 	const history = useHistory();
 	const { canvas = 'view' } = location.query;
@@ -123,15 +92,10 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 	// deprecated sync state with url
 	useSyncDeprecatedEntityIntoState( entity );
 	const { postType, postId, context } = entity;
-	const { isBlockBasedTheme, hasSiteIcon } = useSelect( ( select ) => {
-		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
-		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
-
-		return {
-			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
-			hasSiteIcon: !! siteData?.site_icon_url,
-		};
-	}, [] );
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreDataStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
 	const postWithTemplate = !! context?.postId;
 	useEditorTitle(
 		postWithTemplate ? context.postType : postType,
@@ -204,11 +168,6 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 	);
 
 	const isReady = ! isLoading;
-	const transition = {
-		duration: disableMotion ? 0 : 0.2,
-	};
-
-	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
 
 	return ! isBlockBasedTheme && isHomeRoute ? (
 		<SitePreview />
@@ -246,81 +205,31 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 						<BackButton>
 							{ ( { length } ) =>
 								length <= 1 && (
-									<motion.div
-										className="edit-site-editor__view-mode-toggle"
-										transition={ transition }
-										animate="edit"
-										initial="edit"
-										whileHover="hover"
-										whileTap="tap"
-									>
-										<Button
-											__next40pxDefaultSize
-											label={ __( 'Open Navigation' ) }
-											showTooltip
-											tooltipPosition="middle right"
-											onClick={ () => {
-												resetZoomLevel();
-												setCurrentRevisionId( null );
-												history.navigate(
-													getNavigationPath(
-														location,
-														postWithTemplate
-															? context.postType
-															: postType
-													),
-													{
-														transition:
-															'canvas-mode-view-transition',
-													}
-												);
-											} }
-										>
-											{ ! hasAdminBarInEditor && (
-												<motion.div
-													variants={
-														! disableMotion &&
-														siteIconVariants
-													}
-												>
-													<SiteIcon className="edit-site-editor__view-mode-toggle-icon" />
-												</motion.div>
-											) }
-										</Button>
-										{ hasAdminBarInEditor ? (
-											<div className="edit-site-editor__back-icon">
-												<Icon
-													icon={
-														isRTL()
-															? arrowUpRight
-															: arrowUpLeft
-													}
-												/>
-											</div>
-										) : (
-											<motion.div
-												className={ clsx(
-													'edit-site-editor__back-icon',
-													{
-														'has-site-icon':
-															hasSiteIcon,
-													}
-												) }
-												variants={
-													! disableMotion &&
-													toggleHomeIconVariants
+									<Button
+										size="compact"
+										label={ __( 'Open Navigation' ) }
+										showTooltip
+										tooltipPosition="middle right"
+										onClick={ () => {
+											resetZoomLevel();
+											setCurrentRevisionId( null );
+											history.navigate(
+												getNavigationPath(
+													location,
+													postWithTemplate
+														? context.postType
+														: postType
+												),
+												{
+													transition:
+														'canvas-mode-view-transition',
 												}
-											>
-												<Icon
-													icon={
-														isRTL()
-															? arrowUpRight
-															: arrowUpLeft
-													}
-												/>
-											</motion.div>
-										) }
-									</motion.div>
+											);
+										} }
+										icon={
+											isRTL() ? chevronRight : chevronLeft
+										}
+									/>
 								)
 							}
 						</BackButton>

package/src/components/editor/style.scss

@@ -22,65 +22,3 @@
 	display: flex;
 	justify-content: center;
 }
-
-.edit-site-editor__view-mode-toggle {
-	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-	view-transition-name: toggle;
-	/* stylelint-enable */
-	top: 0;
-	left: 0;
-	height: $header-height;
-	width: $header-height;
-	z-index: 100;
-
-	.components-button {
-		color: $white;
-		height: 100%;
-		width: 100%;
-		border-radius: 0;
-		overflow: hidden;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		&:hover,
-		&:active {
-			color: $white;
-		}
-
-		&:focus {
-			box-shadow: none;
-		}
-	}
-
-	.edit-site-editor__view-mode-toggle-icon {
-		svg,
-		img {
-			background: $gray-900;
-			display: block;
-		}
-	}
-}
-
-.edit-site-editor__back-icon {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: $header-height;
-	height: $header-height;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: hsla(0, 0%, 80%);
-	pointer-events: none;
-
-	svg {
-		fill: currentColor;
-	}
-
-	&.has-site-icon {
-		background-color: hsla(0, 0%, 100%, 0.6);
-		-webkit-backdrop-filter: saturate(180%) blur(15px);
-		backdrop-filter: saturate(180%) blur(15px);
-	}
-}

package/src/components/layout/index.js

@@ -19,6 +19,7 @@ import {
 	useResizeObserver,
 	usePrevious,
 } from '@wordpress/compose';
+import { focus } from '@wordpress/dom';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useRef, useEffect, useMemo } from '@wordpress/element';
 import {
@@ -37,7 +38,7 @@ import { Tooltip } from '@wordpress/ui';
 /**
  * Internal dependencies
  */
-import { default as SiteHub, SiteHubMobile } from '../site-hub';
+import { SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import { unlock } from '../../lock-unlock';
 import SaveKeyboardShortcut from '../save-keyboard-shortcut';
@@ -57,13 +58,12 @@ function Layout() {
 	const { query, name: routeKey, areas, widths } = useLocation();
 	// Force canvas to 'view' on notfound route to show the error message and allow navigation.
 	const canvas = routeKey === 'notfound' ? 'view' : query?.canvas ?? 'view';
-	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
-	const showDesktopSiteHub = ! hasAdminBarInEditor;
-	const showMobileSiteHub = ! hasAdminBarInEditor || routeKey !== 'home';
+	const showMobileSiteHub = !! areas.mobileContent;
 	const hasMobileAreas =
 		areas.mobileSidebar || areas.mobileContent || areas.preview;
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const toggleRef = useRef();
+	const mobileToggleRef = useRef();
+	const sidebarRegionRef = useRef();
 	const navigateRegionsProps = useNavigateRegions();
 	const disableMotion = useReducedMotion();
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
@@ -88,9 +88,14 @@ function Layout() {
 	const previousCanvaMode = usePrevious( canvas );
 	useEffect( () => {
 		if ( previousCanvaMode === 'edit' ) {
-			toggleRef.current?.focus();
+			const desktopToggle = sidebarRegionRef.current
+				? // We're typically expecting the `<DashboardBackButton />` component as the first tabbable element.
+				  focus.tabbable.find( sidebarRegionRef.current )[ 0 ]
+				: undefined;
+			( desktopToggle ?? mobileToggleRef.current )?.focus();
 		}
 		// Should not depend on the previous canvas mode value but the next.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ canvas ] );
 
 	return (
@@ -116,6 +121,7 @@ function Layout() {
 					*/ }
 					{ ( ! isMobileViewport || ! hasMobileAreas ) && (
 						<NavigableRegion
+							ref={ sidebarRegionRef }
 							ariaLabel={ __( 'Navigation' ) }
 							className="edit-site-layout__sidebar-region"
 						>
@@ -137,14 +143,6 @@ function Layout() {
 										} }
 										className="edit-site-layout__sidebar"
 									>
-										{ showDesktopSiteHub && (
-											<SiteHub
-												ref={ toggleRef }
-												isTransparent={
-													isResizableFrameOversized
-												}
-											/>
-										) }
 										<SidebarNavigationProvider>
 											<SidebarContent
 												shouldAnimate={
@@ -176,10 +174,7 @@ function Layout() {
 									<>
 										{ showMobileSiteHub && (
 											<SiteHubMobile
-												ref={ toggleRef }
-												isTransparent={
-													isResizableFrameOversized
-												}
+												ref={ mobileToggleRef }
 											/>
 										) }
 										{ areas.mobileContent ? (

package/src/components/layout/style.scss

@@ -17,6 +17,7 @@
 
 .edit-site-layout__content {
 	height: 100%;
+	min-height: 0;
 	flex-grow: 1;
 	display: flex;
 }
@@ -33,15 +34,16 @@
 	// This is only necessary for the exit animation
 	.edit-site-layout.is-full-canvas & {
 		position: fixed !important;
-		height: 100vh;
+		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
 		left: 0;
-		top: 0;
+		top: var(--wp-admin--admin-bar--height, 0);
 	}
 
 	.edit-site-layout__sidebar {
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		min-height: 0;
 	}
 
 	.resizable-editor__drag-handle {
@@ -163,7 +165,6 @@
 	height: 100%;
 }
 
-/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	animation-delay: 255ms;
 }
@@ -175,64 +176,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		animation: none !important;
 	}
 }
-/* stylelint-enable  */
-
-.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
-	display: none;
-}
-
-.edit-site-layout__view-mode-toggle.components-button {
-	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-	view-transition-name: toggle;
-	/* stylelint-enable  */
-	position: relative;
-	color: var(--wpds-color-foreground-interactive-neutral);
-	height: $header-height;
-	width: $header-height;
-	overflow: hidden;
-	padding: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: var(--wpds-color-background-surface-neutral-weak);
-	border-radius: 0;
-
-	&:hover,
-	&:active {
-		color: var(--wpds-color-foreground-interactive-neutral-active);
-	}
-
-	&:focus-visible,
-	&:focus {
-		box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
-		outline: 4px solid #0000;
-		outline-offset: 4px;
-	}
-
-	&::before {
-		content: "";
-		display: block;
-		position: absolute;
-		top: $grid-unit-10 + $border-width;
-		right: $grid-unit-10 + $border-width;
-		bottom: $grid-unit-10 + $border-width;
-		left: $grid-unit-20 + $border-width;
-		border-radius: $radius-medium;
-		box-shadow: none;
-
-		@media not (prefers-reduced-motion) {
-			transition: box-shadow 0.1s ease;
-		}
-	}
-
-	.edit-site-layout__view-mode-toggle-icon {
-		display: flex;
-		height: $header-height;
-		width: $header-height;
-		justify-content: center;
-		align-items: center;
-	}
-}
 
 .edit-site-layout__actions {
 	z-index: z-index(".edit-site-layout__actions");
@@ -254,7 +197,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	&.is-entity-save-view-open {
 		&:focus,
 		&:focus-within {
-			top: 0;
+			top: var(--wp-admin--admin-bar--height, 0);
 		}
 	}