Browse Mode: Add snackbar notices (#50794)

* Browse Mode: Add snackbar notice * update number' * fix typo * remove layout * preserve the same grow animation * position snackbars in edit mode and view mode
WordPress · May 23, 2023 · a2d8295 · a2d8295 · github-actions · May 23, 2023
1 parent 97ab6b1
commit a2d8295
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 16 deletions.
diff --git a/packages/components/src/snackbar/list.tsx b/packages/components/src/snackbar/list.tsx
@@ -73,7 +73,6 @@ 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,12 +180,7 @@ export default function Editor( { isLoading } ) {
 									'is-loading': isLoading,
 								}
 							) }
-							notices={
-								( isEditMode ||
-									window?.__experimentalEnableThemePreviews ) && (
-									<EditorSnackbars />
-								)
-							}
+							notices={ <EditorSnackbars /> }
 							content={
 								<>
 									<GlobalStylesRenderer />

diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
@@ -19,11 +19,16 @@
 }
 
 // Adjust the position of the notices
-.edit-site .components-editor-notices__snackbar {
-	position: fixed;
-	right: 0;
-	bottom: 40px;
-	padding-left: 16px;
-	padding-right: 16px;
+.edit-site {
+	.components-editor-notices__snackbar {
+		position: fixed;
+		right: 0;
+		bottom: 0;
+		padding: 16px;
+	}
+	.is-edit-mode .components-editor-notices__snackbar {
+		bottom: 24px;
+	}
 }
+
 @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.005,
+													scale: 1.006,
 													transition: {
 														duration:
 															disableMotion ||
@@ -227,8 +227,14 @@ export default function Layout() {
 											  }
 											: {}
 									}
-									initial={ false }
-									layout="position"
+									// 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 } }
 									className="edit-site-layout__canvas"
 									transition={ {
 										type: 'tween',