From e08f66f0bbf1bb0a51395529286ee6128a40321f Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Fri, 16 Jun 2023 12:21:15 +0800 Subject: [PATCH] Fix Library routing in mobile (#51558) --- .../edit-site/src/components/layout/index.js | 27 +++++++---- .../components/page-library/patterns-list.js | 48 +++++++++++++++---- .../src/components/page-library/style.scss | 6 ++- .../category-item.js | 18 +++++-- .../edit-site/src/utils/get-is-list-page.js | 20 ++++++-- 5 files changed, 92 insertions(+), 27 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 29b4605e67d259..d85b571d3d7fd2 100644 --- 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() {
- { showSidebar && ( + { - ) } + } diff --git a/packages/edit-site/src/components/page-library/patterns-list.js b/packages/edit-site/src/components/page-library/patterns-list.js index 29d8bedf2b652c..ae6543473c9677 100644 --- a/packages/edit-site/src/components/page-library/patterns-list.js +++ b/packages/edit-site/src/components/page-library/patterns-list.js @@ -7,9 +7,13 @@ 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 @@ -17,9 +21,16 @@ import { symbol } from '@wordpress/icons'; 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 ( - setFilterValue( value ) } - placeholder={ __( 'Search patterns' ) } - value={ filterValue } - __nextHasNoMarginBottom - /> + + { isMobileViewport && ( + { + // 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' } ); + } + } } + /> + ) } + + setFilterValue( value ) } + placeholder={ __( 'Search patterns' ) } + value={ filterValue } + __nextHasNoMarginBottom + /> + + { 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 index a34af8066451df..ad016c629b020e 100644 --- a/packages/edit-site/src/components/page-library/style.scss +++ b/packages/edit-site/src/components/page-library/style.scss @@ -1,6 +1,6 @@ .edit-site-library { background: rgba(0, 0, 0, 0.05); - margin: 0; + margin: $header-height 0 0; .components-text { color: $gray-600; } @@ -8,6 +8,10 @@ .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 index 7bd207b21bc5f6..dace89fa137837 100644 --- 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 index 890a0c7b0c8dc8..963287308ac9a3 100644 --- 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 ) ) ) + ); }