POC: Animate the editor areas (sidebar, footer)

WordPress · Apr 3, 2024 · 4e62009 · 4e62009
1 parent acf21a7
commit 4e62009
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 52 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -24,7 +24,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Button, ScrollLock } from '@wordpress/components';
+import { ScrollLock } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -139,8 +139,7 @@ function Layout( { initialPost } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const { openGeneralSidebar, closeGeneralSidebar } =
-		useDispatch( editPostStore );
+	const { closeGeneralSidebar } = useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { setIsInserterOpened } = useDispatch( editorStore );
 	const {
@@ -206,11 +205,6 @@ function Layout( { initialPost } ) {
 
 	const styles = useEditorStyles();
 
-	const openSidebarPanel = () =>
-		openGeneralSidebar(
-			hasBlockSelected ? 'edit-post/block' : 'edit-post/document'
-		);
-
 	// Inserter and Sidebars are mutually exclusive
 	useEffect( () => {
 		if ( sidebarIsOpened && ! isHugeViewport ) {
@@ -314,24 +308,10 @@ function Layout( { initialPost } ) {
 				secondarySidebar={ secondarySidebar() }
 				sidebar={
 					( ( isMobileViewport && sidebarIsOpened ) ||
-						( ! isMobileViewport && ! isDistractionFree ) ) && (
-						<>
-							{ ! isMobileViewport && ! sidebarIsOpened && (
-								<div className="edit-post-layout__toggle-sidebar-panel">
-									<Button
-										variant="secondary"
-										className="edit-post-layout__toggle-sidebar-panel-button"
-										onClick={ openSidebarPanel }
-										aria-expanded={ false }
-									>
-										{ hasBlockSelected
-											? __( 'Open block settings' )
-											: __( 'Open document settings' ) }
-									</Button>
-								</div>
-							) }
-							<ComplementaryArea.Slot scope="core/edit-post" />
-						</>
+						( ! isMobileViewport &&
+							sidebarIsOpened &&
+							! isDistractionFree ) ) && (
+						<ComplementaryArea.Slot scope="core/edit-post" />
 					)
 				}
 				notices={ <EditorSnackbars /> }

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -254,7 +254,6 @@ export default function Editor( { isLoading, onClick } ) {
 								( shouldShowListView && <ListViewSidebar /> ) )
 						}
 						sidebar={
-							! isDistractionFree &&
 							isEditMode &&
 							isRightSidebarOpen &&
 							! isDistractionFree && (

diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
@@ -10,15 +10,18 @@ import { forwardRef, useEffect } from '@wordpress/element';
 import {
 	__unstableUseNavigateRegions as useNavigateRegions,
 	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useReducedMotion } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import NavigableRegion from '../navigable-region';
 
+const ANIMATION_DURATION = 0.2;
+
 function useHTMLClass( className ) {
 	useEffect( () => {
 		const element =
@@ -62,7 +65,13 @@ function InterfaceSkeleton(
 	},
 	ref
 ) {
+	const disableMotion = useReducedMotion();
 	const navigateRegionsProps = useNavigateRegions( shortcuts );
+	const defaultTransition = {
+		type: 'tween',
+		duration: disableMotion ? 0 : ANIMATION_DURATION,
+		ease: 'easeOut',
+	};
 
 	useHTMLClass( 'interface-interface-skeleton__html-container' );
 
@@ -134,14 +143,21 @@ function InterfaceSkeleton(
 					</div>
 				) }
 				<div className="interface-interface-skeleton__body">
-					{ !! secondarySidebar && (
-						<NavigableRegion
-							className="interface-interface-skeleton__secondary-sidebar"
-							ariaLabel={ mergedLabels.secondarySidebar }
-						>
-							{ secondarySidebar }
-						</NavigableRegion>
-					) }
+					<AnimatePresence initial={ false }>
+						{ !! secondarySidebar && (
+							<NavigableRegion
+								className="interface-interface-skeleton__secondary-sidebar"
+								ariaLabel={ mergedLabels.secondarySidebar }
+								as={ motion.div }
+								initial={ { x: '-100%' } }
+								animate={ { x: 0 } }
+								exit={ { x: '-100%' } }
+								transition={ defaultTransition }
+							>
+								{ secondarySidebar }
+							</NavigableRegion>
+						) }
+					</AnimatePresence>
 					{ !! notices && (
 						<div className="interface-interface-skeleton__notices">
 							{ notices }
@@ -153,14 +169,21 @@ function InterfaceSkeleton(
 					>
 						{ content }
 					</NavigableRegion>
-					{ !! sidebar && (
-						<NavigableRegion
-							className="interface-interface-skeleton__sidebar"
-							ariaLabel={ mergedLabels.sidebar }
-						>
-							{ sidebar }
-						</NavigableRegion>
-					) }
+					<AnimatePresence initial={ false }>
+						{ !! sidebar && (
+							<NavigableRegion
+								className="interface-interface-skeleton__sidebar"
+								ariaLabel={ mergedLabels.sidebar }
+								as={ motion.div }
+								initial={ { x: '100%' } }
+								animate={ { x: 0 } }
+								exit={ { x: '100%' } }
+								transition={ defaultTransition }
+							>
+								{ sidebar }
+							</NavigableRegion>
+						) }
+					</AnimatePresence>
 					{ !! actions && (
 						<NavigableRegion
 							className="interface-interface-skeleton__actions"
@@ -171,14 +194,21 @@ function InterfaceSkeleton(
 					) }
 				</div>
 			</div>
-			{ !! footer && (
-				<NavigableRegion
-					className="interface-interface-skeleton__footer"
-					ariaLabel={ mergedLabels.footer }
-				>
-					{ footer }
-				</NavigableRegion>
-			) }
+			<AnimatePresence initial={ false }>
+				{ !! footer && (
+					<NavigableRegion
+						className="interface-interface-skeleton__footer"
+						ariaLabel={ mergedLabels.footer }
+						as={ motion.div }
+						initial={ { y: '100%' } }
+						animate={ { y: 0 } }
+						exit={ { y: '100%' } }
+						transition={ defaultTransition }
+					>
+						{ footer }
+					</NavigableRegion>
+				) }
+			</AnimatePresence>
 		</div>
 	);
 }