Revert "Browse Mode: Add snackbar notices (#50794)"

This reverts commit a2d8295.
WordPress · May 25, 2023 · 1635871 · 1635871
1 parent 277a9ff
commit 1635871
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 21 deletions.
diff --git a/packages/components/src/snackbar/list.tsx b/packages/components/src/snackbar/list.tsx
@@ -73,6 +73,7 @@ export function SnackbarList( {
 
 					return (
 						<motion.div
+							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
 							initial={ 'init' }
 							animate={ 'open' }
 							exit={ 'exit' }

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -180,7 +180,12 @@ export default function Editor( { isLoading } ) {
 									'is-loading': isLoading,
 								}
 							) }
-							notices={ <EditorSnackbars /> }
+							notices={
+								( isEditMode ||
+									window?.__experimentalEnableThemePreviews ) && (
+									<EditorSnackbars />
+								)
+							}
 							content={
 								<>
 									<GlobalStylesRenderer />

diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
@@ -19,16 +19,11 @@
 }
 
 // Adjust the position of the notices
-.edit-site {
-	.components-editor-notices__snackbar {
-		position: fixed;
-		right: 0;
-		bottom: 0;
-		padding: 16px;
-	}
-	.is-edit-mode .components-editor-notices__snackbar {
-		bottom: 24px;
-	}
+.edit-site .components-editor-notices__snackbar {
+	position: fixed;
+	right: 0;
+	bottom: 40px;
+	padding-left: 16px;
+	padding-right: 16px;
 }
-
 @include editor-left(".edit-site .components-editor-notices__snackbar")
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -215,7 +215,7 @@ export default function Layout() {
 									whileHover={
 										isEditorPage && canvasMode === 'view'
 											? {
-													scale: 1.006,
+													scale: 1.005,
 													transition: {
 														duration:
 															disableMotion ||
@@ -227,14 +227,8 @@ export default function Layout() {
 											  }
 											: {}
 									}
-									// Setting a transform property (in this case scale) on an element makes it act as a containing block for its descendants.
-									// This means that the snackbar notices inside this component are repositioned to be relative to this element.
-									// To avoid the snackbars jumping about we need to ensure that a transform property is always set.
-									// Setting a scale of 1 is interpred by framer as no change, so once the animation completes
-									// the transform property of this element is set to none, thus removing its role as a container block.
-									// Instead we set the initial scale of this element to 1.0001 so that there is always a transform property set.
-									// If we set the initial scale to less than 1.001 then JavaScript rounds it to 1 and the problem reoccurs.
-									initial={ { scale: 1.001 } }
+									initial={ false }
+									layout="position"
 									className="edit-site-layout__canvas"
 									transition={ {
 										type: 'tween',