Notices: Fix snackbar placement (#60912)

* Fix snackbar placement for distraction free, and when blocks breadcrumbs is enabled. * Add `has-block-breadcrumbs` class only when the preference is set and not in distraction-free mode. * Update conditionals in favor of readability. Co-authored-by: juanfra <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: richtabor <[email protected]>
WordPress · Apr 30, 2024 · 667ba29 · 667ba29
1 parent 8c90f60
commit 667ba29
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -159,6 +159,7 @@ function Layout( { initialPost } ) {
 		showMetaBoxes,
 		documentLabel,
 		hasHistory,
+		hasBlockBreadcrumbs,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
@@ -193,6 +194,7 @@ function Layout( { initialPost } ) {
 			hasBlockSelected:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
+			hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 		};
 	}, [] );
 
@@ -243,6 +245,8 @@ function Layout( { initialPost } ) {
 		'has-metaboxes': hasActiveMetaboxes,
 		'is-distraction-free': isDistractionFree && isWideViewport,
 		'is-entity-save-view-open': !! entitiesSavedStatesCallback,
+		'has-block-breadcrumbs':
+			hasBlockBreadcrumbs && ! isDistractionFree && isWideViewport,
 	} );
 
 	const secondarySidebarLabel = isListViewOpened

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -7,14 +7,21 @@
 .edit-post-layout .components-editor-notices__snackbar {
 	position: fixed;
 	right: 0;
-	bottom: 40px;
+	bottom: 16px;
 	padding-left: 16px;
 	padding-right: 16px;
 }
 
 .is-distraction-free {
 	.components-editor-notices__snackbar {
-		bottom: 20px;
+		bottom: 16px;
+	}
+}
+
+// Adjust the position of the notices when breadcrumbs are present
+.has-block-breadcrumbs {
+	.components-editor-notices__snackbar {
+		bottom: 40px;
 	}
 }
 

diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
@@ -22,11 +22,16 @@
 	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: 40px;
+	bottom: 16px;
 	padding-left: 16px;
 	padding-right: 16px;
 }

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -78,6 +78,7 @@ export default function Layout() {
 		canvasMode,
 		previousShortcut,
 		nextShortcut,
+		hasBlockBreadcrumbs,
 	} = useSelect( ( select ) => {
 		const { getAllShortcutKeyCombinations } = select(
 			keyboardShortcutsStore
@@ -99,6 +100,10 @@ export default function Layout() {
 				'core',
 				'distractionFree'
 			),
+			hasBlockBreadcrumbs: select( preferencesStore ).get(
+				'core',
+				'showBlockBreadcrumbs'
+			),
 			isZoomOutMode:
 				select( blockEditorStore ).__unstableGetEditorMode() ===
 				'zoom-out',
@@ -182,6 +187,10 @@ export default function Layout() {
 						'has-fixed-toolbar': hasFixedToolbar,
 						'is-block-toolbar-visible': hasBlockSelected,
 						'is-zoom-out': isZoomOutMode,
+						'has-block-breadcrumbs':
+							hasBlockBreadcrumbs &&
+							! isDistractionFree &&
+							canvasMode === 'edit',
 					}
 				) }
 			>