@wordpress/edit-site 5.33.0 → 5.35.0

package/src/components/resizable-frame/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ import {
 	Tooltip,
 	__unstableMotion as motion,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -86,6 +86,7 @@ function ResizableFrame( {
 	defaultSize,
 	innerContentStyle,
 } ) {
+	const disableMotion = useReducedMotion();
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// The width of the resizable frame when a new resize gesture starts.
 	const [ startingWidth, setStartingWidth ] = useState();
@@ -203,11 +204,11 @@ function ResizableFrame( {
 		},
 		visible: {
 			opacity: 1,
-			left: -16,
+			left: -14, // Account for the handle's width.
 		},
 		active: {
 			opacity: 1,
-			left: -16,
+			left: -14, // Account for the handle's width.
 			scaleY: 1.3,
 		},
 	};
@@ -226,9 +227,21 @@ function ResizableFrame( {
 			variants={ frameAnimationVariants }
 			animate={ isFullWidth ? 'fullWidth' : 'default' }
 			onAnimationComplete={ ( definition ) => {
-				if ( definition === 'fullWidth' )
+				if ( definition === 'fullWidth' ) {
 					setFrameSize( { width: '100%', height: '100%' } );
+				}
 			} }
+			whileHover={
+				canvasMode === 'view'
+					? {
+							scale: 1.005,
+							transition: {
+								duration: disableMotion ? 0 : 0.5,
+								ease: 'easeOut',
+							},
+					  }
+					: {}
+			}
 			transition={ FRAME_TRANSITION }
 			size={ frameSize }
 			enable={ {
@@ -265,7 +278,7 @@ function ResizableFrame( {
 								key="handle"
 								role="separator"
 								aria-orientation="vertical"
-								className={ classnames(
+								className={ clsx(
 									'edit-site-resizable-frame__handle',
 									{ 'is-resizing': isResizing }
 								) }
@@ -297,7 +310,7 @@ function ResizableFrame( {
 			onResizeStart={ handleResizeStart }
 			onResize={ handleResize }
 			onResizeStop={ handleResizeStop }
-			className={ classnames( 'edit-site-resizable-frame__inner', {
+			className={ clsx( 'edit-site-resizable-frame__inner', {
 				'is-resizing': isResizing,
 			} ) }
 			showHandle={ false } // Do not show the default handle, as we're using a custom one.

package/src/components/revisions/index.js

@@ -10,6 +10,7 @@ import {
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
 
@@ -18,7 +19,6 @@ import { useContext, useMemo } from '@wordpress/element';
  */
 
 import { unlock } from '../../lock-unlock';
-import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
 import EditorCanvasContainer from '../editor-canvas-container';
 
 const {
@@ -26,6 +26,7 @@ const {
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
 } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;

package/src/components/save-panel/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -139,19 +139,19 @@ export default function SavePanel() {
 	const disabled = isSaving || ! activateSaveEnabled;
 	return (
 		<NavigableRegion
-			className={ classnames( 'edit-site-layout__actions', {
+			className={ clsx( 'edit-site-layout__actions', {
 				'is-entity-save-view-open': isSaveViewOpen,
 			} ) }
 			ariaLabel={ __( 'Save panel' ) }
 		>
 			<div
-				className={ classnames( 'edit-site-editor__toggle-save-panel', {
+				className={ clsx( 'edit-site-editor__toggle-save-panel', {
 					'screen-reader-text': isSaveViewOpen,
 				} ) }
 			>
 				<Button
 					variant="secondary"
-					className={ classnames(
+					className={ clsx(
 						'edit-site-editor__toggle-save-panel-button'
 					) }
 					onClick={ () => setIsSaveViewOpened( true ) }

package/src/components/sidebar/index.js

@@ -1,68 +1,92 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import {
-	useCallback,
 	createContext,
+	useContext,
 	useState,
 	useRef,
-	useEffect,
+	useLayoutEffect,
 } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 
 export const SidebarNavigationContext = createContext( () => {} );
+// Focus a sidebar element after a navigation. The element to focus is either
+// specified by `focusSelector` (when navigating back) or it is the first
+// tabbable element (usually the "Back" button).
+function focusSidebarElement( el, direction, focusSelector ) {
+	let elementToFocus;
+	if ( direction === 'back' && focusSelector ) {
+		elementToFocus = el.querySelector( focusSelector );
+	}
+	if ( direction !== null && ! elementToFocus ) {
+		const [ firstTabbable ] = focus.tabbable.find( el );
+		elementToFocus = firstTabbable ?? el;
+	}
+	elementToFocus?.focus();
+}
 
-export default function SidebarContent( { routeKey, children } ) {
-	const [ navState, setNavState ] = useState( {
+// Navigation state that is updated when navigating back or forward. Helps us
+// manage the animations and also focus.
+function createNavState() {
+	let state = {
 		direction: null,
 		focusSelector: null,
-	} );
+	};
 
-	const navigate = useCallback( ( direction, focusSelector = null ) => {
-		setNavState( ( prevState ) => ( {
-			direction,
-			focusSelector:
-				direction === 'forward' && focusSelector
-					? focusSelector
-					: prevState.focusSelector,
-		} ) );
-	}, [] );
+	return {
+		get() {
+			return state;
+		},
+		navigate( direction, focusSelector = null ) {
+			state = {
+				direction,
+				focusSelector:
+					direction === 'forward' && focusSelector
+						? focusSelector
+						: state.focusSelector,
+			};
+		},
+	};
+}
 
+function SidebarContentWrapper( { children } ) {
+	const navState = useContext( SidebarNavigationContext );
 	const wrapperRef = useRef();
-	useEffect( () => {
-		let elementToFocus;
-		if ( navState.direction === 'back' && navState.focusSelector ) {
-			elementToFocus = wrapperRef.current.querySelector(
-				navState.focusSelector
-			);
-		}
-		if ( navState.direction !== null && ! elementToFocus ) {
-			const [ firstTabbable ] = focus.tabbable.find( wrapperRef.current );
-			elementToFocus = firstTabbable ?? wrapperRef.current;
-		}
-		elementToFocus?.focus();
+	const [ navAnimation, setNavAnimation ] = useState( null );
+
+	useLayoutEffect( () => {
+		const { direction, focusSelector } = navState.get();
+		focusSidebarElement( wrapperRef.current, direction, focusSelector );
+		setNavAnimation( direction );
 	}, [ navState ] );
 
-	const wrapperCls = classnames( 'edit-site-sidebar__screen-wrapper', {
-		'slide-from-left': navState.direction === 'back',
-		'slide-from-right': navState.direction === 'forward',
+	const wrapperCls = clsx( 'edit-site-sidebar__screen-wrapper', {
+		'slide-from-left': navAnimation === 'back',
+		'slide-from-right': navAnimation === 'forward',
 	} );
 
 	return (
-		<SidebarNavigationContext.Provider value={ navigate }>
+		<div ref={ wrapperRef } className={ wrapperCls }>
+			{ children }
+		</div>
+	);
+}
+
+export default function SidebarContent( { routeKey, children } ) {
+	const [ navState ] = useState( createNavState );
+
+	return (
+		<SidebarNavigationContext.Provider value={ navState }>
 			<div className="edit-site-sidebar__content">
-				<div
-					ref={ wrapperRef }
-					key={ routeKey }
-					className={ wrapperCls }
-				>
+				<SidebarContentWrapper key={ routeKey }>
 					{ children }
-				</div>
+				</SidebarContentWrapper>
 			</div>
 		</SidebarNavigationContext.Provider>
 	);

package/src/components/sidebar-button/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,10 +12,7 @@ export default function SidebarButton( props ) {
 	return (
 		<Button
 			{ ...props }
-			className={ classnames(
-				'edit-site-sidebar-button',
-				props.className
-			) }
+			className={ clsx( 'edit-site-sidebar-button', props.className ) }
 		/>
 	);
 }

package/src/components/sidebar-dataviews/dataview-item.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -44,12 +44,9 @@ export default function DataViewItem( {
 	return (
 		<HStack
 			justify="flex-start"
-			className={ classnames(
-				'edit-site-sidebar-dataviews-dataview-item',
-				{
-					'is-selected': isActive,
-				}
-			) }
+			className={ clsx( 'edit-site-sidebar-dataviews-dataview-item', {
+				'is-selected': isActive,
+			} ) }
 		>
 			<SidebarNavigationItem
 				icon={ iconToUse }

package/src/components/sidebar-navigation-item/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,7 @@ export default function SidebarNavigationItem( {
 	...props
 } ) {
 	const history = useHistory();
-	const navigate = useContext( SidebarNavigationContext );
+	const { navigate } = useContext( SidebarNavigationContext );
 
 	// If there is no custom click handler, create one that navigates to `path`.
 	function handleClick( e ) {
@@ -51,7 +51,7 @@ export default function SidebarNavigationItem( {
 
 	return (
 		<Item
-			className={ classnames(
+			className={ clsx(
 				'edit-site-sidebar-navigation-item',
 				{ 'with-suffix': ! withChevron && suffix },
 				className

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,25 +32,6 @@ import { SidebarNavigationContext } from '../sidebar';
 
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 
-function getBackPath( params ) {
-	// From a data view path we navigate back to root
-	if ( params.path ) {
-		return {};
-	}
-
-	// From edit screen for a post we navigate back to post-type specific data view
-	if ( params.postType === 'page' ) {
-		return { path: '/page', postId: params.postId };
-	} else if ( params.postType === 'wp_template' ) {
-		return { path: '/wp_template', postId: params.postId };
-	} else if ( params.postType === 'wp_navigation' ) {
-		return { path: '/navigation', postId: params.postId };
-	}
-
-	// Go back to root by default
-	return {};
-}
-
 export default function SidebarNavigationScreen( {
 	isRoot,
 	title,
@@ -81,17 +62,16 @@ export default function SidebarNavigationScreen( {
 	);
 	const location = useLocation();
 	const history = useHistory();
-	const navigate = useContext( SidebarNavigationContext );
+	const { navigate } = useContext( SidebarNavigationContext );
+	const backPath = backPathProp ?? location.state?.backPath;
 	const icon = isRTL() ? chevronRight : chevronLeft;
+
 	return (
 		<>
 			<VStack
-				className={ classnames(
-					'edit-site-sidebar-navigation-screen__main',
-					{
-						'has-footer': !! footer,
-					}
-				) }
+				className={ clsx( 'edit-site-sidebar-navigation-screen__main', {
+					'has-footer': !! footer,
+				} ) }
 				spacing={ 0 }
 				justify="flex-start"
 			>
@@ -103,10 +83,6 @@ export default function SidebarNavigationScreen( {
 					{ ! isRoot && (
 						<SidebarButton
 							onClick={ () => {
-								const backPath =
-									backPathProp ??
-									location.state?.backPath ??
-									getBackPath( location.params );
 								history.push( backPath );
 								navigate( 'back' );
 							} }

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

@@ -99,20 +99,22 @@
 }
 
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item {
+
+	// Use a white outline to provide contrast with the dark background.
 	.edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width $gray-900;
+		outline-color: rgba($white, 0.05);
 	}
 
-	&:focus .edit-site-global-styles-variations_item-preview,
-	&.is-active .edit-site-global-styles-variations_item-preview {
-		box-shadow: inset 0 0 0 $border-width $gray-900, 0 0 0 var(--wp-admin-border-width-focus) $white;
+	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+		outline-color: rgba($white, 0.15);
+	}
 
-		// Shown in Windows 10 high contrast mode.
-		outline-width: 3px;
+	&.is-active .edit-site-global-styles-variations_item-preview {
+		outline-color: $white;
+	}
 
-		&::after {
-			box-shadow: inset 0 0 0 1px $gray-900;
-		}
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		outline-color: var(--wp-admin-theme-color);
 	}
 }
 

package/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -19,7 +19,7 @@ export default function SidebarNavigationScreenDetailsPanelRow( {
 			key={ label }
 			spacing={ 5 }
 			alignment="left"
-			className={ classnames(
+			className={ clsx(
 				'edit-site-sidebar-navigation-details-screen-panel__row',
 				className
 			) }

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -103,7 +103,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
 	);
 }
 
-export default function SidebarNavigationScreenGlobalStyles() {
+export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -179,6 +179,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				description={ __(
 					'Choose a different style combination for the theme styles.'
 				) }
+				backPath={ backPath }
 				content={ <SidebarNavigationScreenGlobalStylesContent /> }
 				footer={
 					shouldShowGlobalStylesFooter && (

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

@@ -22,7 +22,7 @@ const { useLocation } = unlock( routerPrivateApis );
 
 export const postType = `wp_navigation`;
 
-export default function SidebarNavigationScreenNavigationMenu() {
+export default function SidebarNavigationScreenNavigationMenu( { backPath } ) {
 	const {
 		params: { postId },
 	} = useLocation();
@@ -67,6 +67,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 				description={ __(
 					'Navigation Menus are a curated collection of blocks that allow visitors to get around your site.'
 				) }
+				backPath={ backPath }
 			>
 				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
 			</SidebarNavigationScreenWrapper>
@@ -77,6 +78,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 		return (
 			<SidebarNavigationScreenWrapper
 				description={ __( 'Navigation Menu missing.' ) }
+				backPath={ backPath }
 			/>
 		);
 	}
@@ -86,12 +88,14 @@ export default function SidebarNavigationScreenNavigationMenu() {
 			<SidebarNavigationScreenWrapper
 				actions={
 					<ScreenNavigationMoreMenu
+						menuId={ navigationMenu?.id }
 						menuTitle={ decodeEntities( menuTitle ) }
 						onDelete={ _handleDelete }
 						onSave={ _handleSave }
 						onDuplicate={ _handleDuplicate }
 					/>
 				}
+				backPath={ backPath }
 				title={ buildNavigationLabel(
 					navigationMenu?.title,
 					navigationMenu?.id,
@@ -105,6 +109,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 	return (
 		<SingleNavigationMenu
 			navigationMenu={ navigationMenu }
+			backPath={ backPath }
 			handleDelete={ _handleDelete }
 			handleSave={ _handleSave }
 			handleDuplicate={ _handleDuplicate }

package/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js

@@ -5,24 +5,30 @@ import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import RenameModal from './rename-modal';
 import DeleteConfirmDialog from './delete-confirm-dialog';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
 };
 
 export default function ScreenNavigationMoreMenu( props ) {
-	const { onDelete, onSave, onDuplicate, menuTitle } = props;
+	const { onDelete, onSave, onDuplicate, menuTitle, menuId } = props;
 
 	const [ renameModalOpen, setRenameModalOpen ] = useState( false );
 	const [ deleteConfirmDialogOpen, setDeleteConfirmDialogOpen ] =
 		useState( false );
 
+	const history = useHistory();
+
 	const closeModals = () => {
 		setRenameModalOpen( false );
 		setDeleteConfirmDialogOpen( false );
@@ -50,6 +56,17 @@ export default function ScreenNavigationMoreMenu( props ) {
 							>
 								{ __( 'Rename' ) }
 							</MenuItem>
+							<MenuItem
+								onClick={ () => {
+									history.push( {
+										postId: menuId,
+										postType: 'wp_navigation',
+										canvas: 'edit',
+									} );
+								} }
+							>
+								{ __( 'Edit' ) }
+							</MenuItem>
 							<MenuItem
 								onClick={ () => {
 									onDuplicate();

package/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js

@@ -13,6 +13,7 @@ import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/
 
 export default function SingleNavigationMenu( {
 	navigationMenu,
+	backPath,
 	handleDelete,
 	handleDuplicate,
 	handleSave,
@@ -24,6 +25,7 @@ export default function SingleNavigationMenu( {
 			actions={
 				<>
 					<ScreenNavigationMoreMenu
+						menuId={ navigationMenu?.id }
 						menuTitle={ decodeEntities( menuTitle ) }
 						onDelete={ handleDelete }
 						onSave={ handleSave }
@@ -31,6 +33,7 @@ export default function SingleNavigationMenu( {
 					/>
 				</>
 			}
+			backPath={ backPath }
 			title={ buildNavigationLabel(
 				navigationMenu?.title,
 				navigationMenu?.id,

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

@@ -46,7 +46,7 @@ function buildMenuLabel( title, id, status ) {
 // Save a boolean to prevent us creating a fallback more than once per session.
 let hasCreatedFallback = false;
 
-export default function SidebarNavigationScreenNavigationMenus() {
+export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 	const {
 		records: navigationMenus,
 		isResolving: isResolvingNavigationMenus,
@@ -87,7 +87,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 
 	if ( isLoading ) {
 		return (
-			<SidebarNavigationScreenWrapper>
+			<SidebarNavigationScreenWrapper backPath={ backPath }>
 				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
 			</SidebarNavigationScreenWrapper>
 		);
@@ -97,6 +97,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		return (
 			<SidebarNavigationScreenWrapper
 				description={ __( 'No Navigation Menus found.' ) }
+				backPath={ backPath }
 			/>
 		);
 	}
@@ -106,6 +107,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		return (
 			<SingleNavigationMenu
 				navigationMenu={ firstNavigationMenu }
+				backPath={ backPath }
 				handleDelete={ () => handleDelete( firstNavigationMenu ) }
 				handleDuplicate={ () => handleDuplicate( firstNavigationMenu ) }
 				handleSave={ ( edits ) =>
@@ -116,7 +118,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 	}
 
 	return (
-		<SidebarNavigationScreenWrapper>
+		<SidebarNavigationScreenWrapper backPath={ backPath }>
 			<ItemGroup>
 				{ navigationMenus?.map( ( { id, title, status }, index ) => (
 					<NavMenuItem
@@ -138,12 +140,14 @@ export function SidebarNavigationScreenWrapper( {
 	actions,
 	title,
 	description,
+	backPath,
 } ) {
 	return (
 		<SidebarNavigationScreen
 			title={ title || __( 'Navigation' ) }
 			actions={ actions }
 			description={ description || __( 'Manage your Navigation Menus.' ) }
+			backPath={ backPath }
 			content={ children }
 		/>
 	);
@@ -152,7 +156,7 @@ export function SidebarNavigationScreenWrapper( {
 const NavMenuItem = ( { postId, ...props } ) => {
 	const linkInfo = useLink( {
 		postId,
-		postType: NAVIGATION_POST_TYPE,
+		path: '/navigation',
 	} );
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };