Skip to content

Commit

Permalink
Site Editor: Fix navigation on mobile web (#59014)
Browse files Browse the repository at this point in the history
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
  • Loading branch information
7 people committed Feb 20, 2024
1 parent 3d0e9fb commit 011446c
Show file tree
Hide file tree
Showing 6 changed files with 108 additions and 41 deletions.
77 changes: 47 additions & 30 deletions packages/edit-site/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -251,47 +251,64 @@ export default function Layout() {
The NavigableRegion must always be rendered and not use
`inert` otherwise `useNavigateRegions` will fail.
*/ }
<NavigableRegion
ariaLabel={ __( 'Navigation' ) }
className="edit-site-layout__sidebar-region"
>
<AnimatePresence>
{ canvasMode === 'view' && (
<motion.div
initial={ { opacity: 0 } }
animate={ { opacity: 1 } }
exit={ { opacity: 0 } }
transition={ {
type: 'tween',
duration:
// Disable transition in mobile to emulate a full page transition.
disableMotion || isMobileViewport
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
className="edit-site-layout__sidebar"
>
<Sidebar />
</motion.div>
) }
</AnimatePresence>
</NavigableRegion>
{ ( ! isMobileViewport ||
( isMobileViewport && ! areas.mobile ) ) && (
<NavigableRegion
ariaLabel={ __( 'Navigation' ) }
className="edit-site-layout__sidebar-region"
>
<AnimatePresence>
{ canvasMode === 'view' && (
<motion.div
initial={ { opacity: 0 } }
animate={ { opacity: 1 } }
exit={ { opacity: 0 } }
transition={ {
type: 'tween',
duration:
// Disable transition in mobile to emulate a full page transition.
disableMotion ||
isMobileViewport
? 0
: ANIMATION_DURATION,
ease: 'easeOut',
} }
className="edit-site-layout__sidebar"
>
<Sidebar />
</motion.div>
) }
</AnimatePresence>
</NavigableRegion>
) }

<SavePanel />

{ areas.content && canvasMode !== 'edit' && (
{ isMobileViewport && areas.mobile && (
<div
className="edit-site-layout__area"
className="edit-site-layout__mobile"
style={ {
maxWidth: widths?.content,
} }
>
{ areas.content }
{ areas.mobile }
</div>
) }

{ areas.preview && (
{ ! isMobileViewport &&
areas.content &&
canvasMode !== 'edit' && (
<div
className="edit-site-layout__area"
style={ {
maxWidth: widths?.content,
} }
>
{ areas.content }
</div>
) }

{ ! isMobileViewport && areas.preview && (
<div className="edit-site-layout__canvas-container">
{ canvasResizer }
{ !! canvasSize.width && (
Expand Down
33 changes: 31 additions & 2 deletions packages/edit-site/src/components/layout/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,21 @@ const { useLocation } = unlock( routerPrivateApis );
export default function useLayoutAreas() {
const isSiteEditorLoading = useIsSiteEditorLoading();
const { params } = useLocation();
const { postType, postId, path, layout, isCustom } = params ?? {};
const { postType, postId, path, layout, isCustom, canvas } = params ?? {};

// Note: Since "sidebar" is not yet supported here,
// returning undefined from "mobile" means show the sidebar.

// Regular page
if ( path === '/page' ) {
return {
areas: {
content: undefined,
preview: <Editor isLoading={ isSiteEditorLoading } />,
mobile:
canvas === 'edit' ? (
<Editor isLoading={ isSiteEditorLoading } />
) : undefined,
},
widths: {
content: undefined,
Expand Down Expand Up @@ -63,6 +71,10 @@ export default function useLayoutAreas() {
return {
areas: {
preview: <Editor isLoading={ isSiteEditorLoading } />,
mobile:
canvas === 'edit' ? (
<Editor isLoading={ isSiteEditorLoading } />
) : undefined,
},
};
}
Expand All @@ -79,6 +91,11 @@ export default function useLayoutAreas() {
preview: isListLayout && (
<Editor isLoading={ isSiteEditorLoading } />
),
mobile: (
<PageTemplatesTemplateParts
postType={ TEMPLATE_POST_TYPE }
/>
),
},
widths: {
content: isListLayout ? 380 : undefined,
Expand All @@ -98,6 +115,11 @@ export default function useLayoutAreas() {
preview: isListLayout && (
<Editor isLoading={ isSiteEditorLoading } />
),
mobile: (
<PageTemplatesTemplateParts
postType={ TEMPLATE_PART_POST_TYPE }
/>
),
},
widths: {
content: isListLayout ? 380 : undefined,
Expand All @@ -110,12 +132,19 @@ export default function useLayoutAreas() {
return {
areas: {
content: <PagePatterns />,
mobile: <PagePatterns />,
},
};
}

// Fallback shows the home page preview
return {
areas: { preview: <Editor isLoading={ isSiteEditorLoading } /> },
areas: {
preview: <Editor isLoading={ isSiteEditorLoading } />,
mobile:
canvas === 'edit' ? (
<Editor isLoading={ isSiteEditorLoading } />
) : undefined,
},
};
}
7 changes: 7 additions & 0 deletions packages/edit-site/src/components/layout/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,12 @@
flex-direction: column;
}

.edit-site-layout__mobile {
position: relative;
width: 100%;
z-index: z-index(".edit-site-layout__canvas-container");
}

.edit-site-layout__canvas-container {
position: relative;
flex-grow: 1;
Expand Down Expand Up @@ -147,6 +153,7 @@
}

// This shouldn't be necessary (we should have a way to say that a skeletton is relative
.edit-site-layout__mobile .interface-interface-skeleton,
.edit-site-layout__canvas .interface-interface-skeleton,
.edit-site-template-pages-preview .interface-interface-skeleton {
position: relative !important;
Expand Down
6 changes: 6 additions & 0 deletions packages/edit-site/src/components/page-patterns/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,12 @@
* TODO: when this becomes stable, consolidate styles with the above.
*/
.edit-site-page-patterns-dataviews {
margin-top: 60px;

@include break-medium {
margin-top: 0;
}

.page-patterns-preview-field {
display: flex;
flex-direction: column;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { decodeEntities } from '@wordpress/html-entities';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { layout, page, home, verse, plus } from '@wordpress/icons';
import { useSelect } from '@wordpress/data';
import { useViewportMatch } from '@wordpress/compose';

/**
* Internal dependencies
Expand Down Expand Up @@ -42,6 +43,7 @@ const PageItem = ( { postType = 'page', postId, ...props } ) => {
};

export default function SidebarNavigationScreenPages() {
const isMobileViewport = useViewportMatch( 'medium', '<' );
const { records: pages, isResolving: isLoadingPages } = useEntityRecords(
'postType',
'page',
Expand Down Expand Up @@ -220,12 +222,14 @@ export default function SidebarNavigationScreenPages() {
</Truncate>
</PageItem>
) ) }
<SidebarNavigationItem
className="edit-site-sidebar-navigation-screen-pages__see-all"
{ ...pagesLink }
>
{ __( 'Manage all pages' ) }
</SidebarNavigationItem>
{ ! isMobileViewport && (
<SidebarNavigationItem
className="edit-site-sidebar-navigation-screen-pages__see-all"
{ ...pagesLink }
>
{ __( 'Manage all pages' ) }
</SidebarNavigationItem>
) }
</VStack>
}
/>
Expand Down
10 changes: 7 additions & 3 deletions packages/edit-site/src/components/sidebar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
} from '@wordpress/components';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { __ } from '@wordpress/i18n';
import { useViewportMatch } from '@wordpress/compose';

/**
* Internal dependencies
Expand Down Expand Up @@ -52,6 +53,7 @@ function SidebarScreenWrapper( { className, ...props } ) {

function SidebarScreens() {
useSyncPathWithURL();
const isMobileViewport = useViewportMatch( 'medium', '<' );

return (
<>
Expand Down Expand Up @@ -82,9 +84,11 @@ function SidebarScreens() {
<SidebarScreenWrapper path="/:postType(wp_template)">
<SidebarNavigationScreenTemplates />
</SidebarScreenWrapper>
<SidebarScreenWrapper path="/patterns">
<SidebarNavigationScreenPatterns />
</SidebarScreenWrapper>
{ ! isMobileViewport && (
<SidebarScreenWrapper path="/patterns">
<SidebarNavigationScreenPatterns />
</SidebarScreenWrapper>
) }
<SidebarScreenWrapper path="/:postType(wp_template|wp_template_part)/all">
<SidebarNavigationScreenTemplatesBrowse />
</SidebarScreenWrapper>
Expand Down

0 comments on commit 011446c

Please sign in to comment.