Trying to harmonize trunk and rollback

WordPress · Jul 5, 2023 · 1541fbf · 1541fbf
1 parent fd3fefe
commit 1541fbf
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 16 deletions.
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -285,6 +285,11 @@ export default function Layout() {
 						{ showSidebar && (
 							<ResizableBox
 								as={ motion.div }
+								// The sidebar is needed for routing on mobile
+								// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
+								// so we can't remove the element entirely. Using `inert` will make
+								// it inaccessible to screen readers and keyboard navigation.
+								inert={ showSidebar ? undefined : 'inert' }
 								initial={ {
 									opacity: 0,
 								} }
@@ -297,7 +302,10 @@ export default function Layout() {
 								transition={ {
 									type: 'tween',
 									duration:
-										disableMotion || isResizing
+										// Disable transition in mobile to emulate a full page transition.
+										disableMotion ||
+										isResizing ||
+										isMobileViewport
 											? 0
 											: ANIMATION_DURATION,
 									ease: 'easeOut',
@@ -421,6 +429,9 @@ export default function Layout() {
 													top: 0,
 													left: 0,
 													bottom: 0,
+													background:
+														gradientValue ??
+														backgroundColor,
 												} }
 												initial={ false }
 												animate={ {
@@ -437,12 +448,11 @@ export default function Layout() {
 												} }
 											>
 												<ErrorBoundary>
-													{ isEditorPage && (
-														<Editor />
-													) }
-													{ isListPage && (
-														<ListPage />
-													) }
+													<Editor
+														isLoading={
+															isEditorLoading
+														}
+													/>
 												</ErrorBoundary>
 											</motion.div>
 										</motion.div>

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -93,6 +93,13 @@
 
 	.resizable-editor__drag-handle {
 		right: 0;
+		&.is-variation-separator {
+			height: 150px;
+			&::after {
+				width: 5px;
+				border-radius: 5px;
+			}
+		}
 	}
 }
 
@@ -127,16 +134,14 @@
 	left: 0;
 	bottom: 0;
 	width: 100%;
-
-
 	overflow: hidden;
-	//display: flex;
-	//justify-content: center;
-	//align-items: center;
-	//
-	//&:has(.edit-site-layout__resizable-frame-oversized) {
-	//	justify-content: flex-end;
-	//}
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	&:has(.edit-site-layout__resizable-frame-oversized) {
+		justify-content: flex-end;
+	}
 
 	& > div {
 		color: $gray-900;