Animate the site icon between view and edit in the site editor header (…

…#48886) Add animation: Grow to fill the square container when going into "edit" mode and shrink back when going into "view" mode. Balance W icon size and intial animation state. Simplify layout of site hub elements. Adjust timings so that title fades better according to the toolbar. Fix site icon loading flow. Resolve problem where title element would shift on initial render. Improve orchestration so there's no visible overlap of elements. Set up shape fallback while loading site icon. Adjust width, height, and overflow to better render the icon. Account for double border in the header by tweaking sizing & border. Ensure we are always scaling downwards for max resolution. --------- Co-authored-by: Riad Benguella <[email protected]> Co-authored-by: Marco Ciampini <[email protected]>
WordPress · Apr 24, 2023 · 1c19781 · 1c19781
1 parent 30e1054
commit 1c19781
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 50 deletions.
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -144,16 +144,7 @@ export default function Layout() {
 					}
 				) }
 			>
-				<SiteHub
-					ref={ hubRef }
-					className="edit-site-layout__hub"
-					style={ {
-						width:
-							isResizingEnabled && forcedWidth
-								? forcedWidth - 48
-								: undefined,
-					} }
-				/>
+				<SiteHub ref={ hubRef } className="edit-site-layout__hub" />
 
 				<AnimatePresence initial={ false }>
 					{ isEditorPage && canvasMode === 'edit' && (

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -15,7 +15,7 @@
 	z-index: z-index(".edit-site-layout__hub");
 
 	.edit-site-layout.is-full-canvas.is-edit-mode & {
-		width: auto;
+		width: $header-height;
 		padding-right: 0;
 	}
 
@@ -149,13 +149,20 @@
 .edit-site-layout__view-mode-toggle.components-button {
 	position: relative;
 	color: $white;
-	height: 100%;
-	width: 100%;
-	border-radius: $radius-block-ui;
+	border-radius: 0;
+	height: $header-height;
+	width: $header-height;
+	overflow: hidden;
 	padding: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	border-bottom: 1px solid transparent;
+
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		border-bottom-color: $gray-200;
+		transition: border-bottom-color 0.15s 0.4s ease-out;
+	}
 
 	&:hover,
 	&:active {
@@ -190,6 +197,10 @@
 	.edit-site-layout__view-mode-toggle-icon {
 		display: flex;
 		border-radius: $radius-block-ui;
+		height: $grid-unit-80;
+		width: $grid-unit-80;
+		justify-content: center;
+		align-items: center;
 	}
 }
 

diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
@@ -10,14 +10,15 @@ 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 { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { forwardRef } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,7 +30,7 @@ import { unlock } from '../../private-apis';
 const HUB_ANIMATION_DURATION = 0.3;
 
 const SiteHub = forwardRef( ( props, ref ) => {
-	const { canvasMode, dashboardLink } = useSelect( ( select ) => {
+	const { canvasMode } = useSelect( ( select ) => {
 		const { getCanvasMode, getSettings } = unlock(
 			select( editSiteStore )
 		);
@@ -41,20 +42,15 @@ const SiteHub = forwardRef( ( props, ref ) => {
 	const disableMotion = useReducedMotion();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const isBackToDashboardButton = canvasMode === 'view';
-	const showLabels = canvasMode !== 'edit';
-	const siteIconButtonProps = isBackToDashboardButton
-		? {
-				href: dashboardLink || 'index.php',
-				label: __( 'Go back to the Dashboard' ),
-		  }
-		: {
-				label: __( 'Open Navigation Sidebar' ),
-				onClick: () => {
-					clearSelectedBlock();
-					setCanvasMode( 'view' );
-				},
-		  };
+	const siteIconButtonProps = {
+		label: __( 'Open Admin Sidebar' ),
+		onMouseDown: () => {
+			if ( canvasMode === 'edit' ) {
+				clearSelectedBlock();
+				setCanvasMode( 'view' );
+			}
+		},
+	};
 	const siteTitle = useSelect(
 		( select ) =>
 			select( coreStore ).getEntityRecord( 'root', 'site' )?.title,
@@ -66,7 +62,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
 			ref={ ref }
 			{ ...props }
 			className={ classnames( 'edit-site-site-hub', props.className ) }
-			layout
+			initial={ false }
 			transition={ {
 				type: 'tween',
 				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
@@ -91,15 +87,47 @@ const SiteHub = forwardRef( ( props, ref ) => {
 						{ ...siteIconButtonProps }
 						className="edit-site-layout__view-mode-toggle"
 					>
-						<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						<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',
+							} }
+						>
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						</motion.div>
 					</Button>
 				</motion.div>
 
-				{ showLabels && (
-					<div className="edit-site-site-hub__site-title">
+				<AnimatePresence>
+					<motion.div
+						layout={ canvasMode === 'edit' }
+						animate={ {
+							opacity: canvasMode === 'view' ? 1 : 0,
+						} }
+						exit={ {
+							opacity: 0,
+						} }
+						className="edit-site-site-hub__site-title"
+						transition={ {
+							type: 'tween',
+							duration: disableMotion ? 0 : 0.2,
+							ease: 'easeOut',
+							delay: canvasMode === 'view' ? 0.1 : 0,
+						} }
+					>
 						{ decodeEntities( siteTitle ) }
-					</div>
-				) }
+					</motion.div>
+				</AnimatePresence>
 			</HStack>
 		</motion.div>
 	);

diff --git a/packages/edit-site/src/components/site-icon/index.js b/packages/edit-site/src/components/site-icon/index.js
@@ -14,22 +14,17 @@ import { store as coreDataStore } from '@wordpress/core-data';
 
 function SiteIcon( { className } ) {
 	const { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {
-		const { getEntityRecord, isResolving } = select( coreDataStore );
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+		const { getEntityRecord } = select( coreDataStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		return {
-			isRequestingSite: isResolving( 'core', 'getEntityRecord', [
-				'root',
-				'__unstableBase',
-				undefined,
-			] ),
-			siteIconUrl: siteData.site_icon_url,
+			isRequestingSite: ! siteData,
+			siteIconUrl: siteData?.site_icon_url,
 		};
 	}, [] );
 
 	if ( isRequestingSite && ! siteIconUrl ) {
-		return null;
+		return <div className="edit-site-site-icon__image" />;
 	}
 
 	const icon = siteIconUrl ? (
@@ -41,7 +36,7 @@ function SiteIcon( { className } ) {
 	) : (
 		<Icon
 			className="edit-site-site-icon__icon"
-			size="32px"
+			size="48px"
 			icon={ wordpress }
 		/>
 	);

diff --git a/packages/edit-site/src/components/site-icon/style.scss b/packages/edit-site/src/components/site-icon/style.scss
@@ -3,8 +3,13 @@
 }
 
 .edit-site-site-icon__image {
-	width: $grid-unit-40;
-	height: $grid-unit-40;
-	border-radius: $radius-block-ui;
+	width: 100%;
+	height: auto;
+	border-radius: $radius-block-ui * 2;
 	object-fit: cover;
+	background: #333;
+
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		border-radius: 0;
+	}
 }