Fix Library routing in mobile (#51558)

WordPress · Jun 16, 2023 · e08f66f · e08f66f
1 parent 70745bd
commit e08f66f
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 27 deletions.
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -65,7 +65,8 @@ export default function Layout() {
 
 	const hubRef = useRef();
 	const { params } = useLocation();
-	const isListPage = getIsListPage( params );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isListPage = getIsListPage( params, isMobileViewport );
 	const isEditorPage = ! isListPage;
 	const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } =
 		useSelect( ( select ) => {
@@ -91,7 +92,6 @@ export default function Layout() {
 		next: nextShortcut,
 	} );
 	const disableMotion = useReducedMotion();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const showSidebar =
 		( isMobileViewport && ! isListPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
@@ -171,20 +171,31 @@ export default function Layout() {
 
 				<div className="edit-site-layout__content">
 					<AnimatePresence initial={ false }>
-						{ showSidebar && (
+						{
 							<motion.div
 								initial={ {
 									opacity: 0,
 								} }
-								animate={ {
-									opacity: 1,
-								} }
+								animate={
+									showSidebar
+										? { opacity: 1, display: 'block' }
+										: {
+												opacity: 0,
+												transitionEnd: {
+													display: 'none',
+												},
+										  }
+								}
 								exit={ {
 									opacity: 0,
 								} }
 								transition={ {
 									type: 'tween',
-									duration: ANIMATION_DURATION,
+									duration:
+										// Disable transition in mobile to emulate a full page transition.
+										disableMotion || isMobileViewport
+											? 0
+											: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
 								className="edit-site-layout__sidebar"
@@ -195,7 +206,7 @@ export default function Layout() {
 									<Sidebar />
 								</NavigableRegion>
 							</motion.div>
-						) }
+						}
 					</AnimatePresence>
 
 					<SavePanel />

diff --git a/packages/edit-site/src/components/page-library/patterns-list.js b/packages/edit-site/src/components/page-library/patterns-list.js
@@ -7,19 +7,30 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
+	Flex,
+	FlexBlock,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { symbol } from '@wordpress/icons';
+import { __, isRTL } from '@wordpress/i18n';
+import { symbol, chevronLeft, chevronRight } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import Grid from './grid';
 import NoPatterns from './no-patterns';
 import usePatterns from './use-patterns';
+import SidebarButton from '../sidebar-button';
 import useDebouncedInput from '../../utils/use-debounced-input';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function PatternsList( { categoryId, label, type } ) {
+	const location = useLocation();
+	const history = useHistory();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( '' );
 
@@ -34,13 +45,32 @@ export default function PatternsList( { categoryId, label, type } ) {
 
 	return (
 		<VStack spacing={ 6 }>
-			<SearchControl
-				className="edit-site-library__search"
-				onChange={ ( value ) => setFilterValue( value ) }
-				placeholder={ __( 'Search patterns' ) }
-				value={ filterValue }
-				__nextHasNoMarginBottom
-			/>
+			<Flex>
+				{ isMobileViewport && (
+					<SidebarButton
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						label={ __( 'Back' ) }
+						onClick={ () => {
+							// Go back in history if we came from the library page.
+							// Otherwise push a stack onto the history.
+							if ( location.state?.backPath === '/library' ) {
+								history.back();
+							} else {
+								history.push( { path: '/library' } );
+							}
+						} }
+					/>
+				) }
+				<FlexBlock>
+					<SearchControl
+						className="edit-site-library__search"
+						onChange={ ( value ) => setFilterValue( value ) }
+						placeholder={ __( 'Search patterns' ) }
+						value={ filterValue }
+						__nextHasNoMarginBottom
+					/>
+				</FlexBlock>
+			</Flex>
 			{ isResolving && __( 'Loading' ) }
 			{ ! isResolving && !! syncedPatterns.length && (
 				<>

diff --git a/packages/edit-site/src/components/page-library/style.scss b/packages/edit-site/src/components/page-library/style.scss
@@ -1,13 +1,17 @@
 .edit-site-library {
 	background: rgba(0, 0, 0, 0.05);
-	margin: 0;
+	margin: $header-height 0 0;
 	.components-text {
 		color: $gray-600;
 	}
 
 	.components-heading {
 		color: $white;
 	}
+
+	@include break-medium {
+		margin: 0;
+	}
 }
 
 .edit-site-library__grid {

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
@@ -12,11 +12,19 @@ export default function CategoryItem( {
 	label,
 	type,
 } ) {
-	const linkInfo = useLink( {
-		path: '/library',
-		categoryType: type,
-		categoryId: id,
-	} );
+	const linkInfo = useLink(
+		{
+			path: '/library',
+			categoryType: type,
+			categoryId: id,
+		},
+		{
+			// Keep record for where we came from in a state so we can
+			// use browser's back button to go back to the library.
+			// See the implementation of the back button in patterns-list.
+			backPath: '/library',
+		}
+	);
 
 	if ( ! count ) {
 		return;

diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js
@@ -1,11 +1,23 @@
 /**
  * Returns if the params match the list page route.
  *
- * @param {Object} params      The url params.
- * @param {string} params.path The current path.
+ * @param {Object}  params                The url params.
+ * @param {string}  params.path           The current path.
+ * @param {string}  [params.categoryType] The current category type.
+ * @param {string}  [params.categoryId]   The current category id.
+ * @param {boolean} isMobileViewport      Is mobile viewport.
  *
  * @return {boolean} Is list page or not.
  */
-export default function getIsListPage( { path } ) {
-	return path === '/wp_template/all' || path === '/library';
+export default function getIsListPage(
+	{ path, categoryType, categoryId },
+	isMobileViewport
+) {
+	return (
+		path === '/wp_template/all' ||
+		( path === '/library' &&
+			// Don't treat "/library" without categoryType and categoryId as a list page
+			// in mobile because the sidebar covers the whole page.
+			( ! isMobileViewport || ( !! categoryType && !! categoryId ) ) )
+	);
 }