From a1ebdc81cfdd0c2f29524caf3d398b4de03fb6d0 Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Fri, 19 Apr 2024 18:27:49 +0200 Subject: [PATCH 1/3] Fix snackbar placement for distraction free, and when blocks breadcrumbs is enabled. --- packages/edit-post/src/components/layout/index.js | 3 +++ packages/edit-post/src/components/layout/style.scss | 11 +++++++++-- packages/edit-site/src/components/editor/style.scss | 7 ++++++- packages/edit-site/src/components/layout/index.js | 6 ++++++ 4 files changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 09a08da149ee0..09d27d1e37960 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -158,6 +158,7 @@ function Layout( { initialPost } ) { showMetaBoxes, documentLabel, hasHistory, + hasBlockBreadcrumbs, } = useSelect( ( select ) => { const { get } = select( preferencesStore ); const { getEditorSettings, getPostTypeLabel } = select( editorStore ); @@ -192,6 +193,7 @@ function Layout( { initialPost } ) { hasBlockSelected: !! select( blockEditorStore ).getBlockSelectionStart(), hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord, + hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), }; }, [] ); @@ -242,6 +244,7 @@ function Layout( { initialPost } ) { 'has-metaboxes': hasActiveMetaboxes, 'is-distraction-free': isDistractionFree && isWideViewport, 'is-entity-save-view-open': !! entitiesSavedStatesCallback, + 'has-block-breadcrumbs': hasBlockBreadcrumbs, } ); 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..c407f4cda2526 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:not(.is-distraction-free) { + .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..f45a3396127f7 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:not(.is-distraction-free) .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 9ddeed49981be..606b1bc9e19ce 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,7 @@ export default function Layout() { 'has-fixed-toolbar': hasFixedToolbar, 'is-block-toolbar-visible': hasBlockSelected, 'is-zoom-out': isZoomOutMode, + 'has-block-breadcrumbs': hasBlockBreadcrumbs, } ) } > From fe1d8063a857b4bdda687026a24abbf904de2a28 Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Thu, 25 Apr 2024 17:48:17 +0200 Subject: [PATCH 2/3] Add `has-block-breadcrumbs` class only when the preference is set and not in distraction-free mode. --- packages/edit-post/src/components/layout/index.js | 3 ++- packages/edit-post/src/components/layout/style.scss | 2 +- packages/edit-site/src/components/editor/style.scss | 2 +- packages/edit-site/src/components/layout/index.js | 4 +++- 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 09d27d1e37960..78bb38cb1db8f 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -244,7 +244,8 @@ function Layout( { initialPost } ) { 'has-metaboxes': hasActiveMetaboxes, 'is-distraction-free': isDistractionFree && isWideViewport, 'is-entity-save-view-open': !! entitiesSavedStatesCallback, - 'has-block-breadcrumbs': hasBlockBreadcrumbs, + '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 c407f4cda2526..e226e9c65a3e0 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -19,7 +19,7 @@ } // Adjust the position of the notices when breadcrumbs are present -.has-block-breadcrumbs:not(.is-distraction-free) { +.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 f45a3396127f7..8803c0c59ff5a 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -23,7 +23,7 @@ } // Adjust the position of the notices when breadcrumbs are present -.edit-site .has-block-breadcrumbs.is-full-canvas:not(.is-distraction-free) .components-editor-notices__snackbar { +.edit-site .has-block-breadcrumbs.is-full-canvas .components-editor-notices__snackbar { bottom: 40px; } diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 606b1bc9e19ce..ebebcf4d08809 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -187,7 +187,9 @@ export default function Layout() { 'has-fixed-toolbar': hasFixedToolbar, 'is-block-toolbar-visible': hasBlockSelected, 'is-zoom-out': isZoomOutMode, - 'has-block-breadcrumbs': hasBlockBreadcrumbs, + 'has-block-breadcrumbs': + hasBlockBreadcrumbs && + ( ! isDistractionFree || canvasMode !== 'edit' ), } ) } > From 9f4b2ad75a0866c81af9e6b6549d1db729fd736c Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Mon, 29 Apr 2024 17:04:19 +0200 Subject: [PATCH 3/3] Update conditionals in favor of readability. --- packages/edit-post/src/components/layout/index.js | 2 +- packages/edit-site/src/components/layout/index.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 78bb38cb1db8f..89657e87f8785 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -245,7 +245,7 @@ function Layout( { initialPost } ) { 'is-distraction-free': isDistractionFree && isWideViewport, 'is-entity-save-view-open': !! entitiesSavedStatesCallback, 'has-block-breadcrumbs': - hasBlockBreadcrumbs && ( ! isDistractionFree || ! isWideViewport ), + hasBlockBreadcrumbs && ! isDistractionFree && isWideViewport, } ); const secondarySidebarLabel = isListViewOpened diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index ebebcf4d08809..69bb78fcb17c6 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -189,7 +189,8 @@ export default function Layout() { 'is-zoom-out': isZoomOutMode, 'has-block-breadcrumbs': hasBlockBreadcrumbs && - ( ! isDistractionFree || canvasMode !== 'edit' ), + ! isDistractionFree && + canvasMode === 'edit', } ) } >