Skip to content

Commit

Permalink
DocumentBar: Simplify component, use framer for animation (#58656)
Browse files Browse the repository at this point in the history 
* DocumentBar: Simplify component, use framer for animation

* Disable animation if reduced motion is on

Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
  • Loading branch information
@noisysocks @ramonjd @youknowriad
4 people authored Feb 20, 2024
1 parent e9980ac commit 0dc55a8
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 126 deletions.
203 changes: 114 additions & 89 deletions packages/editor/src/components/document-bar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import {
Button,
__experimentalText as Text,
__experimentalHStack as HStack,
__unstableMotion as motion,
__unstableAnimatePresence as AnimatePresence,
} from '@wordpress/components';
import { BlockIcon } from '@wordpress/block-editor';
import {
Expand All @@ -22,16 +24,17 @@ import {
symbol,
} from '@wordpress/icons';
import { displayShortcut } from '@wordpress/keycodes';
import { useEntityRecord } from '@wordpress/core-data';
import { store as coreStore } from '@wordpress/core-data';
import { store as commandsStore } from '@wordpress/commands';
import { useState, useEffect, useRef } from '@wordpress/element';
import { useRef, useEffect } from '@wordpress/element';
import { useReducedMotion } from '@wordpress/compose';

/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';

const typeLabels = {
const TYPE_LABELS = {
// translators: 1: Pattern title.
wp_pattern: __( 'Editing pattern: %s' ),
// translators: 1: Navigation menu title.
Expand All @@ -42,127 +45,149 @@ const typeLabels = {
wp_template_part: __( 'Editing template part: %s' ),
};

const icons = {
const ICONS = {
wp_block: symbol,
wp_navigation: navigationIcon,
};

export default function DocumentBar() {
const { postType, postId, onNavigateToPreviousEntityRecord } = useSelect(
( select ) => {
const {
getCurrentPostId,
getCurrentPostType,
getEditorSettings: getSettings,
} = select( editorStore );
return {
postType: getCurrentPostType(),
postId: getCurrentPostId(),
onNavigateToPreviousEntityRecord:
getSettings().onNavigateToPreviousEntityRecord,
getEditorSettings: getSettings,
};
},
[]
);
const TEMPLATE_POST_TYPES = [ 'wp_template', 'wp_template_part' ];

const handleOnBack = () => {
if ( onNavigateToPreviousEntityRecord ) {
onNavigateToPreviousEntityRecord();
}
};
const GLOBAL_POST_TYPES = [
...TEMPLATE_POST_TYPES,
'wp_block',
'wp_navigation',
];

return (
<BaseDocumentActions
postType={ postType }
postId={ postId }
onBack={
onNavigateToPreviousEntityRecord ? handleOnBack : undefined
}
/>
);
}
const MotionButton = motion( Button );

function BaseDocumentActions( { postType, postId, onBack } ) {
const { open: openCommandCenter } = useDispatch( commandsStore );
const { editedRecord: doc, isResolving } = useEntityRecord(
'postType',
export default function DocumentBar() {
const {
postType,
postId
);
const { templateIcon, templateTitle } = useSelect( ( select ) => {
const { __experimentalGetTemplateInfo: getTemplateInfo } =
select( editorStore );
const templateInfo = getTemplateInfo( doc );
document,
isResolving,
templateIcon,
templateTitle,
onNavigateToPreviousEntityRecord,
} = useSelect( ( select ) => {
const {
getCurrentPostType,
getCurrentPostId,
getEditorSettings,
__experimentalGetTemplateInfo: getTemplateInfo,
} = select( editorStore );
const { getEditedEntityRecord, getIsResolving } = select( coreStore );
const _postType = getCurrentPostType();
const _postId = getCurrentPostId();
const _document = getEditedEntityRecord(
'postType',
_postType,
_postId
);
const _templateInfo = getTemplateInfo( _document );
return {
templateIcon: templateInfo.icon,
templateTitle: templateInfo.title,
postType: _postType,
document: _document,
isResolving: getIsResolving(
'getEditedEntityRecord',
'postType',
_postType,
_postId
),
templateIcon: _templateInfo.icon,
templateTitle: _templateInfo.title,
onNavigateToPreviousEntityRecord:
getEditorSettings().onNavigateToPreviousEntityRecord,
};
} );
const isNotFound = ! doc && ! isResolving;
const icon = icons[ postType ] ?? pageIcon;
const [ isAnimated, setIsAnimated ] = useState( false );
const isMounting = useRef( true );
const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
postType
);
const isGlobalEntity = [
'wp_template',
'wp_navigation',
'wp_template_part',
'wp_block',
].includes( postType );
}, [] );

useEffect( () => {
if ( ! isMounting.current ) {
setIsAnimated( true );
}
isMounting.current = false;
}, [ postType, postId ] );
const { open: openCommandCenter } = useDispatch( commandsStore );
const isReducedMotion = useReducedMotion();

const isNotFound = ! document && ! isResolving;
const icon = ICONS[ postType ] ?? pageIcon;
const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType );
const hasBackButton = !! onNavigateToPreviousEntityRecord;
const title = isTemplate ? templateTitle : document.title;

const title = isTemplate ? templateTitle : doc.title;
const mounted = useRef( false );
useEffect( () => {
mounted.current = true;
}, [] );

return (
<div
className={ classnames( 'editor-document-bar', {
'has-back-button': !! onBack,
'is-animated': isAnimated,
'has-back-button': hasBackButton,
'is-global': isGlobalEntity,
} ) }
>
{ onBack && (
<Button
className="editor-document-bar__back"
icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
onClick={ ( event ) => {
event.stopPropagation();
onBack();
} }
size="compact"
>
{ __( 'Back' ) }
</Button>
) }
{ isNotFound && <Text>{ __( 'Document not found' ) }</Text> }
{ ! isNotFound && (
<AnimatePresence>
{ hasBackButton && (
<MotionButton
className="editor-document-bar__back"
icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
onClick={ ( event ) => {
event.stopPropagation();
onNavigateToPreviousEntityRecord();
} }
size="compact"
initial={
mounted.current
? { opacity: 0, transform: 'translateX(15%)' }
: false // Don't show entry animation when DocumentBar mounts.
}
animate={ { opacity: 1, transform: 'translateX(0%)' } }
exit={ { opacity: 0, transform: 'translateX(15%)' } }
transition={
isReducedMotion ? { duration: 0 } : undefined
}
>
{ __( 'Back' ) }
</MotionButton>
) }
</AnimatePresence>
{ isNotFound ? (
<Text>{ __( 'Document not found' ) }</Text>
) : (
<Button
className="editor-document-bar__command"
onClick={ () => openCommandCenter() }
size="compact"
>
<HStack
as={ motion.div }
className="editor-document-bar__title"
spacing={ 1 }
justify="center"
// Force entry animation when the back button is added or removed.
key={ hasBackButton }
initial={
mounted.current
? {
opacity: 0,
transform: hasBackButton
? 'translateX(15%)'
: 'translateX(-15%)',
}
: false // Don't show entry animation when DocumentBar mounts.
}
animate={ {
opacity: 1,
transform: 'translateX(0%)',
} }
transition={
isReducedMotion ? { duration: 0 } : undefined
}
>
<BlockIcon icon={ isTemplate ? templateIcon : icon } />
<Text
size="body"
as="h1"
aria-label={
typeLabels[ postType ]
TYPE_LABELS[ postType ]
? // eslint-disable-next-line @wordpress/valid-sprintf
sprintf( typeLabels[ postType ], title )
sprintf( TYPE_LABELS[ postType ], title )
: undefined
}
>
Expand Down
37 changes: 0 additions & 37 deletions packages/editor/src/components/document-bar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,16 +66,6 @@
max-width: 50%;
color: currentColor;
}

.editor-document-bar.is-animated.has-back-button & {
animation: editor-document-bar__slide-in-left 0.3s;
@include reduce-motion("animation");
}

.editor-document-bar.is-animated & {
animation: editor-document-bar__slide-in-right 0.3s;
@include reduce-motion("animation");
}
}

.editor-document-bar__shortcut {
Expand All @@ -100,31 +90,4 @@
color: var(--wp-block-synced-color);
background-color: transparent;
}

.editor-document-bar.is-animated & {
animation: editor-document-bar__slide-in-left 0.3s;
@include reduce-motion("animation");
}
}

@keyframes editor-document-bar__slide-in-right {
from {
transform: translateX(-15%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

@keyframes editor-document-bar__slide-in-left {
from {
transform: translateX(15%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

1 comment on commit 0dc55a8

@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 0dc55a8.
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/7967843843
📝 Reported issues:

Please sign in to comment.