Skip to content

Commit

Permalink
Distraction Free: Unify the header animation (#62167)
Browse files Browse the repository at this point in the history 
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: draganescu <[email protected]>
Co-authored-by: jasmussen <[email protected]>
  • Loading branch information
@youknowriad @draganescu
4 people authored May 31, 2024
1 parent 325c994 commit 2a5cf5e
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 87 deletions.
53 changes: 9 additions & 44 deletions packages/edit-site/src/components/editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,8 @@ import clsx from 'clsx';
* WordPress dependencies
*/
import { useDispatch, useSelect } from '@wordpress/data';
import {
Notice,
__unstableAnimatePresence as AnimatePresence,
__unstableMotion as motion,
} from '@wordpress/components';
import {
useInstanceId,
useViewportMatch,
useReducedMotion,
} from '@wordpress/compose';
import { Notice } from '@wordpress/components';
import { useInstanceId, useViewportMatch } from '@wordpress/compose';
import { store as preferencesStore } from '@wordpress/preferences';
import {
BlockBreadcrumb,
Expand Down Expand Up @@ -80,8 +72,6 @@ const interfaceLabels = {
header: __( 'Editor top bar' ),
};

const ANIMATION_DURATION = 0.25;

export default function Editor( { isLoading } ) {
const {
record: editedPost,
Expand All @@ -92,7 +82,6 @@ export default function Editor( { isLoading } ) {
const { type: editedPostType } = editedPost;

const isLargeViewport = useViewportMatch( 'medium' );
const disableMotion = useReducedMotion();

const {
context,
Expand Down Expand Up @@ -292,37 +281,13 @@ export default function Editor( { isLoading } ) {
}
) }
header={
<AnimatePresence initial={ false }>
{ canvasMode === 'edit' && (
<motion.div
initial={ {
marginTop: -60,
} }
animate={ {
marginTop: 0,
} }
exit={ {
marginTop: -60,
} }
transition={ {
type: 'tween',
duration:
// Disable transition in mobile to emulate a full page transition.
disableMotion ||
! isLargeViewport
? 0
: ANIMATION_DURATION,
ease: [ 0.6, 0, 0.4, 1 ],
} }
>
<Header
setEntitiesSavedStatesCallback={
setEntitiesSavedStatesCallback
}
/>
</motion.div>
) }
</AnimatePresence>
canvasMode === 'edit' && (
<Header
setEntitiesSavedStatesCallback={
setEntitiesSavedStatesCallback
}
/>
)
}
actions={
<SavePublishPanels
Expand Down
33 changes: 24 additions & 9 deletions packages/editor/src/components/header/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,20 @@ import PostViewLink from '../post-view-link';
import PreviewDropdown from '../preview-dropdown';
import { store as editorStore } from '../../store';

const slideY = {
hidden: { y: '-50px' },
distractionFreeInactive: { y: 0 },
hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
const toolbarVariations = {
distractionFreeDisabled: { y: '-50px' },
distractionFreeHover: { y: 0 },
distractionFreeHidden: { y: '-50px' },
visible: { y: 0 },
hidden: { y: 0 },
};

const backButtonVariations = {
distractionFreeDisabled: { x: '-100%' },
distractionFreeHover: { x: 0 },
distractionFreeHidden: { x: '-100%' },
visible: { x: 0 },
hidden: { x: 0 },
};

function Header( {
Expand Down Expand Up @@ -81,11 +91,16 @@ function Header( {
// as some plugins might be relying on its presence.
return (
<div className="editor-header edit-post-header">
<BackButton.Slot />
<motion.div
variants={ slideY }
transition={ { type: 'tween', delay: 0.8 } }
variants={ backButtonVariations }
transition={ { type: 'tween' } }
>
<BackButton.Slot />
</motion.div>
<motion.div
variants={ toolbarVariations }
className="editor-header__toolbar"
transition={ { type: 'tween' } }
>
<DocumentTools
disableBlockTools={ forceDisableBlockTools || isTextEditor }
Expand All @@ -112,8 +127,8 @@ function Header( {
</div>
</motion.div>
<motion.div
variants={ slideY }
transition={ { type: 'tween', delay: 0.8 } }
variants={ toolbarVariations }
transition={ { type: 'tween' } }
className="editor-header__settings"
>
{ ! customSaveButton && ! isPublishSidebarOpened && (
Expand Down
94 changes: 60 additions & 34 deletions packages/interface/src/components/interface-skeleton/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ import {
import NavigableRegion from '../navigable-region';

const ANIMATION_DURATION = 0.25;
const commonTransition = {
type: 'tween',
duration: ANIMATION_DURATION,
ease: [ 0.6, 0, 0.4, 1 ],
};

function useHTMLClass( className ) {
useEffect( () => {
Expand All @@ -42,12 +47,30 @@ function useHTMLClass( className ) {
}

const headerVariants = {
hidden: { opacity: 0 },
hover: {
hidden: { opacity: 1, marginTop: -60 },
visible: { opacity: 1, marginTop: 0 },
distractionFreeHover: {
opacity: 1,
transition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },
marginTop: 0,
transition: {
...commonTransition,
delay: 0.2,
delayChildren: 0.2,
},
},
distractionFreeHidden: {
opacity: 0,
marginTop: -60,
},
distractionFreeDisabled: {
opacity: 0,
marginTop: 0,
transition: {
...commonTransition,
delay: 0.8,
delayChildren: 0.8,
},
},
distractionFreeInactive: { opacity: 1, transition: { delay: 0 } },
};

function InterfaceSkeleton(
Expand Down Expand Up @@ -114,36 +137,39 @@ function InterfaceSkeleton(
) }
>
<div className="interface-interface-skeleton__editor">
{ !! header && (
<NavigableRegion
as={ motion.div }
className="interface-interface-skeleton__header"
aria-label={ mergedLabels.header }
initial={
isDistractionFree
? 'hidden'
: 'distractionFreeInactive'
}
whileHover={
isDistractionFree
? 'hover'
: 'distractionFreeInactive'
}
animate={
isDistractionFree
? 'hidden'
: 'distractionFreeInactive'
}
variants={ headerVariants }
transition={
isDistractionFree
? { type: 'tween', delay: 0.8 }
: undefined
}
>
{ header }
</NavigableRegion>
) }
<AnimatePresence initial={ false }>
{ !! header && (
<NavigableRegion
as={ motion.div }
className="interface-interface-skeleton__header"
aria-label={ mergedLabels.header }
initial={
isDistractionFree
? 'distractionFreeHidden'
: 'hidden'
}
whileHover={
isDistractionFree
? 'distractionFreeHover'
: 'visible'
}
animate={
isDistractionFree
? 'distractionFreeDisabled'
: 'visible'
}
exit={
isDistractionFree
? 'distractionFreeHidden'
: 'hidden'
}
variants={ headerVariants }
transition={ defaultTransition }
>
{ header }
</NavigableRegion>
) }
</AnimatePresence>
{ isDistractionFree && (
<div className="interface-interface-skeleton__header">
{ editorNotices }
Expand Down

1 comment on commit 2a5cf5e

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 2a5cf5e.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9314898549
📝 Reported issues:

Please sign in to comment.