@wordpress/edit-site 6.0.0 → 6.0.2

package/src/components/sidebar-navigation-screen/style.scss

@@ -59,7 +59,7 @@
 	position: sticky;
 	top: 0;
 	background: $gray-900;
-	padding-top: $grid-unit-60 + $header-height;
+	padding-top: $grid-unit-60;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
 	z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
@@ -67,8 +67,8 @@
 
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
-	padding: $grid-unit-15 * 0.5 0 0 0;
 	overflow-wrap: break-word;
+	padding: $grid-unit-05 * 0.5 0 0 0;
 }
 
 .edit-site-sidebar-navigation-screen__actions {

package/src/components/sidebar-navigation-screen-navigation-menu/delete-confirm-dialog.js

@@ -16,6 +16,7 @@ export default function DeleteConfirmDialog( { onClose, onConfirm } ) {
 			} }
 			onCancel={ onClose }
 			confirmButtonText={ __( 'Delete' ) }
+			size="medium"
 		>
 			{ __( 'Are you sure you want to delete this Navigation Menu?' ) }
 		</ConfirmDialog>

package/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js

@@ -43,6 +43,7 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 
 						<Button
 							__next40pxDefaultSize
+							__experimentalIsFocusable
 							disabled={ ! isEditedMenuTitleValid }
 							variant="primary"
 							type="submit"

package/src/components/sidebar-navigation-screen-patterns/category-item.js

@@ -3,7 +3,12 @@
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLink } from '../routes/link';
-import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants';
+import {
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_PART_ALL_AREAS_CATEGORY,
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_TYPES,
+} from '../../utils/constants';
 
 export default function CategoryItem( {
 	count,
@@ -14,7 +19,11 @@ export default function CategoryItem( {
 	type,
 } ) {
 	const linkInfo = useLink( {
-		categoryId: id,
+		categoryId:
+			id !== TEMPLATE_PART_ALL_AREAS_CATEGORY &&
+			id !== PATTERN_DEFAULT_CATEGORY
+				? id
+				: undefined,
 		postType:
 			type === TEMPLATE_PART_POST_TYPE
 				? TEMPLATE_PART_POST_TYPE

package/src/components/sidebar-navigation-screen-patterns/index.js

@@ -106,8 +106,12 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 	const {
 		params: { postType, categoryId },
 	} = useLocation();
-	const currentCategory = categoryId || PATTERN_DEFAULT_CATEGORY;
 	const currentType = postType || PATTERN_TYPES.user;
+	const currentCategory =
+		categoryId ||
+		( currentType === PATTERN_TYPES.user
+			? PATTERN_DEFAULT_CATEGORY
+			: TEMPLATE_PART_ALL_AREAS_CATEGORY );
 
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();

package/src/components/site-hub/index.js

@@ -7,19 +7,11 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	Button,
-	__unstableMotion as motion,
-	__unstableAnimatePresence as AnimatePresence,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
-import { useReducedMotion } from '@wordpress/compose';
+import { Button, __experimentalHStack as HStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { memo } from '@wordpress/element';
+import { memo, forwardRef } from '@wordpress/element';
 import { search } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
@@ -32,14 +24,10 @@ import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../lock-unlock';
 
-const HUB_ANIMATION_DURATION = 0.3;
-
-const SiteHub = memo( ( { isTransparent, className } ) => {
-	const { canvasMode, dashboardLink, homeUrl, siteTitle } = useSelect(
-		( select ) => {
-			const { getCanvasMode, getSettings } = unlock(
-				select( editSiteStore )
-			);
+const SiteHub = memo(
+	forwardRef( ( { isTransparent }, ref ) => {
+		const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
+			const { getSettings } = unlock( select( editSiteStore ) );
 
 			const {
 				getSite,
@@ -47,7 +35,6 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 			} = select( coreStore );
 			const _site = getSite();
 			return {
-				canvasMode: getCanvasMode(),
 				dashboardLink:
 					getSettings().__experimentalDashboardLink || 'index.php',
 				homeUrl: getUnstableBase()?.home,
@@ -56,141 +43,63 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 						? filterURLForDisplay( _site?.url )
 						: _site?.title,
 			};
-		},
-		[]
-	);
-	const { open: openCommandCenter } = useDispatch( commandsStore );
-
-	const disableMotion = useReducedMotion();
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setDeviceType } = useDispatch( editorStore );
-	const isBackToDashboardButton = canvasMode === 'view';
-	const siteIconButtonProps = isBackToDashboardButton
-		? {
-				href: dashboardLink,
-				label: __( 'Go to the Dashboard' ),
-		  }
-		: {
-				href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.
-				role: 'button',
-				label: __( 'Open Navigation' ),
-				onClick: ( event ) => {
-					event.preventDefault();
-					if ( canvasMode === 'edit' ) {
-						clearSelectedBlock();
-						setDeviceType( 'Desktop' );
-						setCanvasMode( 'view' );
-					}
-				},
-		  };
+		}, [] );
+		const { open: openCommandCenter } = useDispatch( commandsStore );
 
-	return (
-		<motion.div
-			className={ clsx( 'edit-site-site-hub', className ) }
-			variants={ {
-				isDistractionFree: { x: '-100%' },
-				isDistractionFreeHovering: { x: 0 },
-				view: { x: 0 },
-				edit: { x: 0 },
-			} }
-			initial={ false }
-			transition={ {
-				type: 'tween',
-				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-				ease: 'easeOut',
-			} }
-		>
-			<HStack justify="flex-start" spacing="0">
-				<motion.div
-					className={ clsx(
-						'edit-site-site-hub__view-mode-toggle-container',
-						{
-							'has-transparent-background': isTransparent,
-						}
-					) }
-					layout
-					transition={ {
-						type: 'tween',
-						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-						ease: 'easeOut',
-					} }
-				>
-					<Button
-						{ ...siteIconButtonProps }
-						className="edit-site-layout__view-mode-toggle"
+		return (
+			<div className="edit-site-site-hub">
+				<HStack justify="flex-start" spacing="0">
+					<div
+						className={ clsx(
+							'edit-site-site-hub__view-mode-toggle-container',
+							{
+								'has-transparent-background': isTransparent,
+							}
+						) }
 					>
-						<motion.div
-							initial={ false }
-							animate={ {
-								scale: canvasMode === 'view' ? 0.5 : 1,
-							} }
-							whileHover={ {
-								scale: canvasMode === 'view' ? 0.5 : 0.96,
-							} }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion
-									? 0
-									: HUB_ANIMATION_DURATION,
-								ease: 'easeOut',
+						<Button
+							ref={ ref }
+							href={ dashboardLink }
+							label={ __( 'Go to the Dashboard' ) }
+							className="edit-site-layout__view-mode-toggle"
+							style={ {
+								transform: 'scale(0.5)',
+								borderRadius: 4,
 							} }
 						>
 							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-						</motion.div>
-					</Button>
-				</motion.div>
+						</Button>
+					</div>
 
-				<AnimatePresence initial={ false }>
-					{ canvasMode === 'view' && (
+					<HStack>
+						<div className="edit-site-site-hub__title">
+							<Button
+								variant="link"
+								href={ homeUrl }
+								target="_blank"
+								label={ __( 'View site (opens in a new tab)' ) }
+							>
+								{ decodeEntities( siteTitle ) }
+							</Button>
+						</div>
 						<HStack
-							as={ motion.div }
-							initial={ { opacity: 0 } }
-							animate={ {
-								opacity: isTransparent ? 0 : 1,
-							} }
-							exit={ { opacity: 0 } }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion ? 0 : 0.2,
-								ease: 'easeOut',
-								delay: canvasMode === 'view' ? 0.1 : 0,
-							} }
+							spacing={ 0 }
+							expanded={ false }
+							className="edit-site-site-hub__actions"
 						>
-							<div className="edit-site-site-hub__title">
-								<Button
-									variant="link"
-									href={ homeUrl }
-									target="_blank"
-									label={ __(
-										'View site (opens in a new tab)'
-									) }
-									aria-label={ __(
-										'View site (opens in a new tab)'
-									) }
-								>
-									{ decodeEntities( siteTitle ) }
-								</Button>
-							</div>
-							<HStack
-								spacing={ 0 }
-								expanded={ false }
-								className="edit-site-site-hub__actions"
-							>
-								<Button
-									className="edit-site-site-hub_toggle-command-center"
-									icon={ search }
-									onClick={ () => openCommandCenter() }
-									label={ __( 'Open command palette' ) }
-									shortcut={ displayShortcut.primary( 'k' ) }
-								/>
-							</HStack>
+							<Button
+								className="edit-site-site-hub_toggle-command-center"
+								icon={ search }
+								onClick={ () => openCommandCenter() }
+								label={ __( 'Open command palette' ) }
+								shortcut={ displayShortcut.primary( 'k' ) }
+							/>
 						</HStack>
-					) }
-				</AnimatePresence>
-			</HStack>
-		</motion.div>
-	);
-} );
+					</HStack>
+				</HStack>
+			</div>
+		);
+	} )
+);
 
 export default SiteHub;

package/src/components/site-hub/style.scss

@@ -3,6 +3,7 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
+	margin-right: $grid-unit-15;
 }
 
 .edit-site-site-hub__actions {
@@ -14,10 +15,6 @@
 	width: $header-height;
 	flex-shrink: 0;
 
-	.edit-site-layout__view-mode-toggle-icon {
-		background: $gray-900;
-	}
-
 	&.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
 		background: transparent;
 	}

package/src/components/site-icon/style.scss

@@ -1,8 +1,5 @@
 .edit-site-site-icon__icon {
 	fill: currentColor;
-	// Matches SiteIcon motion, smoothing out the transition.
-	transition: padding 0.3s ease-out;
-	@include reduce-motion("transition");
 
 	.edit-site-layout.is-full-canvas & {
 		// Make the WordPress icon not so big in full canvas.
@@ -13,7 +10,6 @@
 .edit-site-site-icon__image {
 	width: 100%;
 	height: 100%;
-	border-radius: $radius-block-ui * 2;
 	object-fit: cover;
 	background: #333;
 

package/src/deprecated.js

@@ -6,8 +6,13 @@ import {
 	PluginSidebar as EditorPluginSidebar,
 	PluginSidebarMoreMenuItem as EditorPluginSidebarMoreMenuItem,
 } from '@wordpress/editor';
+import { getPath } from '@wordpress/url';
 import deprecated from '@wordpress/deprecated';
 
+const isSiteEditor = getPath( window.location.href )?.includes(
+	'site-editor.php'
+);
+
 const deprecateSlot = ( name ) => {
 	deprecated( `wp.editPost.${ name }`, {
 		since: '6.6',
@@ -20,6 +25,9 @@ const deprecateSlot = ( name ) => {
  * @see PluginMoreMenuItem in @wordpress/editor package.
  */
 export function PluginMoreMenuItem( props ) {
+	if ( ! isSiteEditor ) {
+		return null;
+	}
 	deprecateSlot( 'PluginMoreMenuItem' );
 	return <EditorPluginMoreMenuItem { ...props } />;
 }
@@ -28,6 +36,9 @@ export function PluginMoreMenuItem( props ) {
  * @see PluginSidebar in @wordpress/editor package.
  */
 export function PluginSidebar( props ) {
+	if ( ! isSiteEditor ) {
+		return null;
+	}
 	deprecateSlot( 'PluginSidebar' );
 	return <EditorPluginSidebar { ...props } />;
 }
@@ -36,6 +47,9 @@ export function PluginSidebar( props ) {
  * @see PluginSidebarMoreMenuItem in @wordpress/editor package.
  */
 export function PluginSidebarMoreMenuItem( props ) {
+	if ( ! isSiteEditor ) {
+		return null;
+	}
 	deprecateSlot( 'PluginSidebarMoreMenuItem' );
 	return <EditorPluginSidebarMoreMenuItem { ...props } />;
 }

package/src/hooks/push-changes-to-global-styles/index.js

@@ -287,7 +287,7 @@ function PushChangesToGlobalStylesControl( {
 			// notification.
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( newBlockAttributes );
-			setUserConfig( () => newUserConfig, { undoIgnore: true } );
+			setUserConfig( newUserConfig, { undoIgnore: true } );
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: Title of the block e.g. 'Heading'.
@@ -302,7 +302,7 @@ function PushChangesToGlobalStylesControl( {
 							onClick() {
 								__unstableMarkNextChangeAsNotPersistent();
 								setAttributes( attributes );
-								setUserConfig( () => userConfig, {
+								setUserConfig( userConfig, {
 									undoIgnore: true,
 								} );
 							},
@@ -339,6 +339,7 @@ function PushChangesToGlobalStylesControl( {
 			<Button
 				__next40pxDefaultSize
 				variant="secondary"
+				__experimentalIsFocusable
 				disabled={ changes.length === 0 }
 				onClick={ pushChanges }
 			>

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
 		'@wordpress/edit-site'
 	);

package/src/store/private-actions.js

@@ -13,39 +13,67 @@ import { store as editorStore } from '@wordpress/editor';
 export const setCanvasMode =
 	( mode ) =>
 	( { registry, dispatch } ) => {
-		const isMediumOrBigger =
-			window.matchMedia( '(min-width: 782px)' ).matches;
-		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
-		const isPublishSidebarOpened = registry
-			.select( editorStore )
-			.isPublishSidebarOpened();
-		dispatch( {
-			type: 'SET_CANVAS_MODE',
-			mode,
-		} );
-		const isEditMode = mode === 'edit';
-		if ( isPublishSidebarOpened && ! isEditMode ) {
-			registry.dispatch( editorStore ).closePublishSidebar();
-		}
+		const switchCanvasMode = () => {
+			registry.batch( () => {
+				const isMediumOrBigger =
+					window.matchMedia( '(min-width: 782px)' ).matches;
+				registry.dispatch( blockEditorStore ).clearSelectedBlock();
+				registry.dispatch( editorStore ).setDeviceType( 'Desktop' );
+				registry
+					.dispatch( blockEditorStore )
+					.__unstableSetEditorMode( 'edit' );
+				const isPublishSidebarOpened = registry
+					.select( editorStore )
+					.isPublishSidebarOpened();
+				dispatch( {
+					type: 'SET_CANVAS_MODE',
+					mode,
+				} );
+				const isEditMode = mode === 'edit';
+				if ( isPublishSidebarOpened && ! isEditMode ) {
+					registry.dispatch( editorStore ).closePublishSidebar();
+				}
+
+				// Check if the block list view should be open by default.
+				// If `distractionFree` mode is enabled, the block list view should not be open.
+				// This behavior is disabled for small viewports.
+				if (
+					isMediumOrBigger &&
+					isEditMode &&
+					registry
+						.select( preferencesStore )
+						.get( 'core', 'showListViewByDefault' ) &&
+					! registry
+						.select( preferencesStore )
+						.get( 'core', 'distractionFree' )
+				) {
+					registry
+						.dispatch( editorStore )
+						.setIsListViewOpened( true );
+				} else {
+					registry
+						.dispatch( editorStore )
+						.setIsListViewOpened( false );
+				}
+				registry.dispatch( editorStore ).setIsInserterOpened( false );
+			} );
+		};
 
-		// Check if the block list view should be open by default.
-		// If `distractionFree` mode is enabled, the block list view should not be open.
-		// This behavior is disabled for small viewports.
-		if (
-			isMediumOrBigger &&
-			isEditMode &&
-			registry
-				.select( preferencesStore )
-				.get( 'core', 'showListViewByDefault' ) &&
-			! registry
-				.select( preferencesStore )
-				.get( 'core', 'distractionFree' )
-		) {
-			registry.dispatch( editorStore ).setIsListViewOpened( true );
+		if ( ! document.startViewTransition ) {
+			switchCanvasMode();
 		} else {
-			registry.dispatch( editorStore ).setIsListViewOpened( false );
+			document.documentElement.classList.add(
+				`canvas-mode-${ mode }-transition`
+			);
+			const transition = document.startViewTransition( () =>
+				switchCanvasMode()
+			);
+			transition.finished.finally( () => {
+				document.documentElement.classList.remove(
+					`canvas-mode-${ mode }-transition`
+				);
+			} );
 		}
-		registry.dispatch( editorStore ).setIsInserterOpened( false );
 	};
 
 /**