Site Editor: Use a consistent snackbar position (WordPress#61756)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: ntsekouras <[email protected]>
petitphp · May 17, 2024 · d538f42 · d538f42
1 parent 72612dc
commit d538f42
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 23 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -27,7 +27,6 @@ import {
 	EditorKeyboardShortcutsRegister,
 	EditorKeyboardShortcuts,
 	EditorNotices,
-	EditorSnackbars,
 	privateApis as editorPrivateApis,
 	store as editorStore,
 } from '@wordpress/editor';
@@ -345,7 +344,6 @@ export default function Editor( { isLoading, onClick } ) {
 								}
 							/>
 						}
-						notices={ <EditorSnackbars /> }
 						content={
 							<>
 								<GlobalStylesRenderer />

diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
@@ -17,18 +17,3 @@
 	display: flex;
 	justify-content: center;
 }
-
-// Adjust the position of the notices when breadcrumbs are present
-.edit-site .has-block-breadcrumbs.is-full-canvas .components-editor-notices__snackbar {
-	bottom: 40px;
-}
-
-// Adjust the position of the notices
-.edit-site .components-editor-notices__snackbar {
-	position: absolute;
-	right: 0;
-	bottom: 16px;
-	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
@@ -30,7 +30,10 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	EditorSnackbars,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -262,6 +265,8 @@ export default function Layout() {
 						</NavigableRegion>
 					) }
 
+					<EditorSnackbars />
+
 					{ isMobileViewport && areas.mobile && (
 						<div className="edit-site-layout__mobile">
 							{ areas.mobile }

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -277,3 +277,11 @@
 		margin: $canvas-padding $canvas-padding $canvas-padding 0;
 	}
 }
+
+.edit-site .components-editor-notices__snackbar {
+	position: fixed;
+	right: 0;
+	bottom: 16px;
+	padding-left: 16px;
+	padding-right: 16px;
+}
diff --git a/packages/edit-site/src/components/page/index.js b/packages/edit-site/src/components/page/index.js
@@ -6,10 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	EditorSnackbars,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -41,7 +38,6 @@ export default function Page( {
 				) }
 				{ children }
 			</div>
-			<EditorSnackbars />
 		</NavigableRegion>
 	);
 }