From 1c19781dea0bbe6ccafe5490b1d99a65b21212c2 Mon Sep 17 00:00:00 2001 From: Matias Ventura Date: Mon, 24 Apr 2023 14:39:37 +0200 Subject: [PATCH] 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 Co-authored-by: Marco Ciampini --- .../edit-site/src/components/layout/index.js | 11 +-- .../src/components/layout/style.scss | 19 +++-- .../src/components/site-hub/index.js | 72 +++++++++++++------ .../src/components/site-icon/index.js | 17 ++--- .../src/components/site-icon/style.scss | 11 ++- 5 files changed, 80 insertions(+), 50 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 609d677c07b3d6..2abe3cfaef2685 100644 --- 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() { } ) } > - + { isEditorPage && canvasMode === 'edit' && ( diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index c069c471a361ee..de106e98ee3992 100644 --- 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 index a8474a0f15e49c..469f48d129eb69 100644 --- 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" > - + + + - { showLabels && ( -
+ + { decodeEntities( siteTitle ) } -
- ) } + + ); diff --git a/packages/edit-site/src/components/site-icon/index.js b/packages/edit-site/src/components/site-icon/index.js index 967c0ebe460c62..5855e083d31c3c 100644 --- 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
; } const icon = siteIconUrl ? ( @@ -41,7 +36,7 @@ function SiteIcon( { className } ) { ) : ( ); diff --git a/packages/edit-site/src/components/site-icon/style.scss b/packages/edit-site/src/components/site-icon/style.scss index 40b8000122cf56..ac16279c9fe184 100644 --- 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; + } }