Don't overlap canvas with inserter panel at large screens (#64110)

* Don't overlap canvas with inserter panel at large screens * Always resize canvas * Cleanup * Refactor to share new -sidebar-width var * Try to improve animation -- still needs work * animate the pattern category preview panel * use the same animation for both elements * Add animate presence * only use one animated div * Pattern panel zindex * Animate pattern tab panel on open * Try to smooth entrance and exit secondary sidebar animations * remove unneeded properties so that the parent controls the animation * remove unneeded double shadow --------- Co-authored-by: Ben Dwyer <[email protected]> Co-authored-by: Rich Tabor <[email protected]> Co-authored-by: jeryj <[email protected]> Co-authored-by: scruffian <[email protected]> Co-authored-by: richtabor <[email protected]>
WordPress · Jul 31, 2024 · 08d3c86 · 08d3c86
1 parent dfa18c5
commit 08d3c86
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 25 deletions.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -90,7 +90,7 @@ $sidebar-width: 280px;
 $content-width: 840px;
 $wide-content-width: 1100px;
 $widget-area-width: 700px;
-
+$secondary-sidebar-width: 350px;
 
 /**
  * Block & Editor UI.

diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js
@@ -1,11 +1,13 @@
 /**
  * WordPress dependencies
  */
+import { usePrevious, useReducedMotion } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 import {
 	__experimentalHStack as HStack,
 	FlexBlock,
 	privateApis as componentsPrivateApis,
+	__unstableMotion as motion,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 
@@ -22,6 +24,17 @@ function CategoryTabs( {
 	onSelectCategory,
 	children,
 } ) {
+	// Copied from InterfaceSkeleton.
+	const ANIMATION_DURATION = 0.25;
+	const disableMotion = useReducedMotion();
+	const defaultTransition = {
+		type: 'tween',
+		duration: disableMotion ? 0 : ANIMATION_DURATION,
+		ease: [ 0.6, 0, 0.4, 1 ],
+	};
+
+	const previousSelectedCategory = usePrevious( selectedCategory );
+
 	return (
 		<Tabs
 			className="block-editor-inserter__category-tabs"
@@ -62,9 +75,29 @@ function CategoryTabs( {
 					key={ category.name }
 					tabId={ category.name }
 					focusable={ false }
-					className="block-editor-inserter__category-panel"
 				>
-					{ children }
+					<motion.div
+						className="block-editor-inserter__category-panel"
+						initial={
+							! previousSelectedCategory ? 'closed' : 'open'
+						}
+						animate="open"
+						variants={ {
+							open: {
+								transform: 'translateX( 0 )',
+								transitionEnd: {
+									zIndex: '1',
+								},
+							},
+							closed: {
+								transform: 'translateX( -100% )',
+								zIndex: '-1',
+							},
+						} }
+						transition={ defaultTransition }
+					>
+						{ children }
+					</motion.div>
 				</Tabs.TabPanel>
 			) ) }
 		</Tabs>

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -1,5 +1,5 @@
 $block-inserter-preview-height: 350px;
-$block-inserter-width: 350px;
+$block-quick-inserter-width: 350px;
 $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter {
@@ -24,6 +24,12 @@ $block-inserter-tabs-height: 44px;
 	&.show-as-tabs {
 		gap: 0;
 	}
+
+	.block-editor-tabbed-sidebar {
+		@include break-medium() {
+			width: $secondary-sidebar-width;
+		}
+	}
 }
 
 .block-editor-inserter__popover.is-quick {
@@ -85,6 +91,12 @@ $block-inserter-tabs-height: 44px;
 	height: 100%;
 	position: relative;
 	overflow: visible;
+
+	&.show-panel {
+		@include break-medium() {
+			width: $secondary-sidebar-width + $sidebar-width;
+		}
+	}
 }
 
 .block-editor-inserter__inline-elements {
@@ -299,14 +311,13 @@ $block-inserter-tabs-height: 44px;
 	@include break-medium {
 		border-left: $border-width solid $gray-200;
 		padding: 0;
-		left: 100%;
-		width: 300px;
+		left: $secondary-sidebar-width;
+		width: $sidebar-width;
 		position: absolute;
 		top: -$border-width;
 		height: calc(100% + #{$border-width});
 		background: $gray-100;
 		border-top: $border-width solid $gray-200;
-		box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 
 		.block-editor-inserter__media-list,
 		.block-editor-block-patterns-list {
@@ -366,7 +377,7 @@ $block-inserter-tabs-height: 44px;
 	max-width: 100%;
 
 	@include break-medium {
-		width: $block-inserter-width;
+		width: $block-quick-inserter-width;
 	}
 }
 
@@ -679,12 +690,6 @@ $block-inserter-tabs-height: 44px;
 			height: 100%;
 		}
 	}
-
-	// Remove doubled-up shadow that occurs when categories panel is opened, only in zoom out.
-	// Shadow cannot be removed from the source, as it is required when not zoomed out.
-	.block-editor-inserter__category-panel {
-		box-shadow: none;
-	}
 }
 
 .show-icon-labels {

diff --git a/packages/block-editor/src/components/tabbed-sidebar/style.scss b/packages/block-editor/src/components/tabbed-sidebar/style.scss
@@ -1,13 +1,10 @@
 .block-editor-tabbed-sidebar {
+	background-color: $white;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
 	overflow: hidden;
-
-	@include break-medium() {
-		width: 350px;
-	}
 }
 
 .block-editor-tabbed-sidebar__tablist-and-close-button {

diff --git a/packages/editor/src/components/list-view-sidebar/style.scss b/packages/editor/src/components/list-view-sidebar/style.scss
@@ -1,5 +1,9 @@
 .editor-list-view-sidebar {
 	height: 100%;
+
+	@include break-medium {
+		width: $secondary-sidebar-width;
+	}
 }
 
 .editor-list-view-sidebar__list-view-panel-content,

diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
@@ -182,30 +182,32 @@ function InterfaceSkeleton(
 								ariaLabel={ mergedLabels.secondarySidebar }
 								as={ motion.div }
 								initial="closed"
-								animate={
-									isMobileViewport ? 'mobileOpen' : 'open'
-								}
+								animate="open"
 								exit="closed"
 								variants={ {
 									open: { width: secondarySidebarSize.width },
 									closed: { width: 0 },
-									mobileOpen: { width: '100vw' },
 								} }
 								transition={ defaultTransition }
 							>
-								<div
+								<motion.div
 									style={ {
 										position: 'absolute',
 										width: isMobileViewport
 											? '100vw'
 											: 'fit-content',
 										height: '100%',
-										right: 0,
+										left: 0,
 									} }
+									variants={ {
+										open: { x: 0 },
+										closed: { x: '-100%' },
+									} }
+									transition={ defaultTransition }
 								>
 									{ secondarySidebarResizeListener }
 									{ secondarySidebar }
-								</div>
+								</motion.div>
 							</NavigableRegion>
 						) }
 					</AnimatePresence>