diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 4db2c1ebf41e7..e814611744e83 100644 --- 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 index 229ab58a4e14b..e226e9c65a3e0 100644 --- 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 index 26403858ff22e..8803c0c59ff5a 100644 --- 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 index e497695e73e6b..77c057bde2468 100644 --- 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', } ) } >