{ canvasResizer }
{ !! canvasSize.width && (
diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
index aeb124bf76fe5..02f7e7b25594a 100644
--- a/packages/edit-site/src/components/layout/router.js
+++ b/packages/edit-site/src/components/layout/router.js
@@ -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:
,
+ mobile:
+ canvas === 'edit' ? (
+
+ ) : undefined,
},
widths: {
content: undefined,
@@ -63,6 +71,10 @@ export default function useLayoutAreas() {
return {
areas: {
preview:
,
+ mobile:
+ canvas === 'edit' ? (
+
+ ) : undefined,
},
};
}
@@ -79,6 +91,11 @@ export default function useLayoutAreas() {
preview: isListLayout && (
),
+ mobile: (
+
+ ),
},
widths: {
content: isListLayout ? 380 : undefined,
@@ -98,6 +115,11 @@ export default function useLayoutAreas() {
preview: isListLayout && (
),
+ mobile: (
+
+ ),
},
widths: {
content: isListLayout ? 380 : undefined,
@@ -110,12 +132,19 @@ export default function useLayoutAreas() {
return {
areas: {
content:
,
+ mobile:
,
},
};
}
// Fallback shows the home page preview
return {
- areas: { preview:
},
+ areas: {
+ preview:
,
+ mobile:
+ canvas === 'edit' ? (
+
+ ) : undefined,
+ },
};
}
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 9be0b001ed9e2..ad33768989a81 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -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;
@@ -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;
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 2dc9326e4d29b..d4afcaea18647 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -43,6 +43,12 @@
}
.edit-site-page-patterns-dataviews {
+ margin-top: 60px;
+
+ @include break-medium {
+ margin-top: 0;
+ }
+
.page-patterns-preview-field {
display: flex;
flex-direction: column;
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
index 82fc6d0fa2412..7641ac1fe97a0 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
@@ -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
@@ -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',
@@ -220,12 +222,14 @@ export default function SidebarNavigationScreenPages() {
) ) }
-
- { __( 'Manage all pages' ) }
-
+ { ! isMobileViewport && (
+
+ { __( 'Manage all pages' ) }
+
+ ) }
}
/>
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 19cd55ae6fac2..1890d3afcf7ba 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -12,6 +12,7 @@ import {
__experimentalNavigatorScreen as NavigatorScreen,
} from '@wordpress/components';
import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useViewportMatch } from '@wordpress/compose';
/**
* Internal dependencies
@@ -50,6 +51,7 @@ function SidebarScreenWrapper( { className, ...props } ) {
function SidebarScreens() {
useSyncPathWithURL();
+ const isMobileViewport = useViewportMatch( 'medium', '<' );
return (
<>
@@ -77,9 +79,11 @@ function SidebarScreens() {
-
-
-
+ { ! isMobileViewport && (
+
+
+
+ ) }