Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Animate the site icon element between view and edit in the site editor #48886

Merged
merged 15 commits into from
Apr 24, 2023
+80 −50
Merged

Animate the site icon element between view and edit in the site editor #48886

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
07ceb56
Add animation to the site icon element in the header.
mtias Feb 28, 2023
837773a
Balance W icon size and intial animation state.
mtias Mar 8, 2023
c0174f7
Simplify layout of site hub elements.
mtias Mar 17, 2023
b99e72b
Adjust timings so that title fades better according to the toolbar.
mtias Mar 30, 2023
4a60449
Fix site icon loading
youknowriad Mar 30, 2023
5939903
Address issue with layout animation:
mtias Mar 30, 2023
aec03c3
Set up shape fallback while loading site icon.
mtias Mar 30, 2023
ba4d1cb
Adjust width, height, and overflow to better render the icon.
mtias Mar 31, 2023
1b6169d
Change order of zoom operations and adjust bottom border.
mtias Apr 4, 2023
1d6bb3c
Ensure we are always scaling downwards.
mtias Apr 12, 2023
bd495d6
Account for double border in the header.
mtias Apr 12, 2023
98f464e
Remove unnecessary lines.
mtias Apr 12, 2023
3ac12bd
Fix centering of W icon.
mtias Apr 13, 2023
5710aaa
Revert useAnimation() as it no longer works in later versions
mtias Apr 14, 2023
7849538
Tweak button sizing & border in edit mode
ciampo Apr 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 1 addition & 10 deletions packages/edit-site/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' && (
Expand Down
19 changes: 15 additions & 4 deletions packages/edit-site/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}

Expand Down
72 changes: 50 additions & 22 deletions packages/edit-site/src/components/site-hub/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 )
);
Expand All @@ -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' ),
}
t-hamano marked this conversation as resolved.
Show resolved Hide resolved
: {
label: __( 'Open Navigation Sidebar' ),
onClick: () => {
clearSelectedBlock();
setCanvasMode( 'view' );
},
};
const siteIconButtonProps = {
label: __( 'Open Admin Sidebar' ),
onMouseDown: () => {
aristath marked this conversation as resolved.
Show resolved Hide resolved
if ( canvasMode === 'edit' ) {
clearSelectedBlock();
setCanvasMode( 'view' );
}
},
};
const siteTitle = useSelect(
( select ) =>
select( coreStore ).getEntityRecord( 'root', 'site' )?.title,
Expand All @@ -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,
Expand All @@ -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>
);
Expand Down
17 changes: 6 additions & 11 deletions packages/edit-site/src/components/site-icon/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand All @@ -41,7 +36,7 @@ function SiteIcon( { className } ) {
) : (
<Icon
className="edit-site-site-icon__icon"
size="32px"
size="48px"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feels a bit large when its the WordPress icon.

As-is:

CleanShot.2023-03-08.at.09.34.49.mp4

But if we use 40px, and 0.65 for scale we have this:

CleanShot.2023-03-08.at.09.40.28.mp4

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although (with the suggestion above) the site icon is perhaps a bit big.

CleanShot.2023-03-08.at.09.43.12.mp4

icon={ wordpress }
/>
);
Expand Down
11 changes: 8 additions & 3 deletions packages/edit-site/src/components/site-icon/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}