From 0facff431df619fa333882639f900048fe2ab0ff Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 12 Jul 2021 14:37:26 +0400 Subject: [PATCH 1/5] Editor: Extract snackbars into a separate component Editor snackbars are no rendered in the InterfaceSkeleton footer to avoid z-index context issues. --- .../edit-post/src/components/layout/index.js | 24 +++++++++------ .../edit-site/src/components/editor/index.js | 8 ++++- .../src/components/editor-notices/index.js | 10 +------ .../src/components/editor-snackbars/index.js | 30 +++++++++++++++++++ packages/editor/src/components/index.js | 1 + 5 files changed, 54 insertions(+), 19 deletions(-) create mode 100644 packages/editor/src/components/editor-snackbars/index.js diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index e931a08402bbc1..14b14c01812d5a 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -12,6 +12,7 @@ import { UnsavedChangesWarning, EditorNotices, EditorKeyboardShortcutsRegister, + EditorSnackbars, store as editorStore, } from '@wordpress/editor'; import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data'; @@ -246,15 +247,20 @@ function Layout( { styles } ) { } footer={ - ! hasReducedUI && - showBlockBreadcrumbs && - ! isMobileViewport && - isRichEditingEnabled && - mode === 'visual' && ( -
- -
- ) + <> + + { ! hasReducedUI && + showBlockBreadcrumbs && + ! isMobileViewport && + isRichEditingEnabled && + mode === 'visual' && ( +
+ +
+ ) } + } actions={ } - footer={ } + footer={ + <> + + + + } /> diff --git a/packages/editor/src/components/editor-notices/index.js b/packages/editor/src/components/editor-notices/index.js index 734bb2dae2e015..1dd7b8e0e31bf7 100644 --- a/packages/editor/src/components/editor-notices/index.js +++ b/packages/editor/src/components/editor-notices/index.js @@ -6,7 +6,7 @@ import { filter } from 'lodash'; /** * WordPress dependencies */ -import { NoticeList, SnackbarList } from '@wordpress/components'; +import { NoticeList } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { store as noticesStore } from '@wordpress/notices'; @@ -25,9 +25,6 @@ export function EditorNotices( { notices, onRemove } ) { isDismissible: false, type: 'default', } ); - const snackbarNotices = filter( notices, { - type: 'snackbar', - } ); return ( <> @@ -42,11 +39,6 @@ export function EditorNotices( { notices, onRemove } ) { > - ); } diff --git a/packages/editor/src/components/editor-snackbars/index.js b/packages/editor/src/components/editor-snackbars/index.js new file mode 100644 index 00000000000000..6dc01435eb4b45 --- /dev/null +++ b/packages/editor/src/components/editor-snackbars/index.js @@ -0,0 +1,30 @@ +/** + * External dependencies + */ +import { filter } from 'lodash'; + +/** + * WordPress dependencies + */ +import { SnackbarList } from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { store as noticesStore } from '@wordpress/notices'; + +export default function EditorSnackbars() { + const notices = useSelect( + ( select ) => select( noticesStore ).getNotices(), + [] + ); + const { removeNotice } = useDispatch( noticesStore ); + const snackbarNotices = filter( notices, { + type: 'snackbar', + } ); + + return ( + + ); +} diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index c2a281781a2ca6..50dfd6885166d2 100644 --- a/packages/editor/src/components/index.js +++ b/packages/editor/src/components/index.js @@ -11,6 +11,7 @@ export { default as EditorKeyboardShortcutsRegister } from './global-keyboard-sh export { default as EditorHistoryRedo } from './editor-history/redo'; export { default as EditorHistoryUndo } from './editor-history/undo'; export { default as EditorNotices } from './editor-notices'; +export { default as EditorSnackbars } from './editor-snackbars'; export { default as EntitiesSavedStates } from './entities-saved-states'; export { default as ErrorBoundary } from './error-boundary'; export { default as LocalAutosaveMonitor } from './local-autosave-monitor'; From 501373c34f287b4b70f250c2b2f6659f48e0a5da Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 13 Jul 2021 18:28:49 +0400 Subject: [PATCH 2/5] Move EditorSnackbars component to the InterfaceSekeleton actions --- .../edit-post/src/components/layout/index.js | 44 +++++++++---------- .../edit-site/src/components/editor/index.js | 8 +--- 2 files changed, 24 insertions(+), 28 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 14b14c01812d5a..c1090201b5a788 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -247,32 +247,32 @@ function Layout( { styles } ) { } footer={ + ! hasReducedUI && + showBlockBreadcrumbs && + ! isMobileViewport && + isRichEditingEnabled && + mode === 'visual' && ( +
+ +
+ ) + } + actions={ <> - { ! hasReducedUI && - showBlockBreadcrumbs && - ! isMobileViewport && - isRichEditingEnabled && - mode === 'visual' && ( -
- -
- ) } + } - actions={ - - } shortcuts={ { previous: previousShortcut, next: nextShortcut, diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 2a64bbffa7d6ed..c0afc973f13f3b 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -243,6 +243,7 @@ function Editor( { initialSettings } ) { } actions={ <> + { isEntitiesSavedStatesOpen ? ( } - footer={ - <> - - - - } + footer={ } /> From 3c480e56b37882a58fff09a26e3b93b6312d9a80 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 14 Jul 2021 18:00:47 +0400 Subject: [PATCH 3/5] Add notices landmark region to InterfaceSkeleton --- .../src/components/interface-skeleton/index.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index 184f0ddde30056..c76e2be55e1074 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -3,6 +3,9 @@ */ import classnames from 'classnames'; +/** + * WordPress dependencies + */ /** * WordPress dependencies */ @@ -31,6 +34,7 @@ function InterfaceSkeleton( header, sidebar, secondarySidebar, + notices, content, drawer, actions, @@ -50,6 +54,8 @@ function InterfaceSkeleton( drawer: __( 'Drawer' ), /* translators: accessibility text for the top bar landmark region. */ header: __( 'Header' ), + /* translators: accessibility text for the notices landmark region. */ + notices: __( 'Notices' ), /* translators: accessibility text for the content landmark region. */ body: __( 'Content' ), /* translators: accessibility text for the secondary sidebar landmark region. */ @@ -105,6 +111,16 @@ function InterfaceSkeleton( { secondarySidebar } ) } + { !! notices && ( +
+ { notices } +
+ ) }
Date: Wed, 14 Jul 2021 18:12:18 +0400 Subject: [PATCH 4/5] Move EditorSnackbars component to the notices landmark region --- .../edit-post/src/components/layout/index.js | 24 ++++++++----------- .../edit-site/src/components/editor/index.js | 2 +- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index c1090201b5a788..51311d59ea7b6e 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -226,6 +226,7 @@ function Layout( { styles } ) { ) } + notices={ } content={ <> @@ -258,20 +259,15 @@ function Layout( { styles } ) { ) } actions={ - <> - - - + } shortcuts={ { previous: previousShortcut, diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index c0afc973f13f3b..4d3eca9143f1f0 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -214,6 +214,7 @@ function Editor( { initialSettings } ) { } /> } + notices={ } content={ <> @@ -243,7 +244,6 @@ function Editor( { initialSettings } ) { } actions={ <> - { isEntitiesSavedStatesOpen ? ( Date: Wed, 14 Jul 2021 18:35:30 +0400 Subject: [PATCH 5/5] Don't mark notices container as landmark region --- .../interface/src/components/interface-skeleton/index.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index c76e2be55e1074..26bf20681f659a 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -54,8 +54,6 @@ function InterfaceSkeleton( drawer: __( 'Drawer' ), /* translators: accessibility text for the top bar landmark region. */ header: __( 'Header' ), - /* translators: accessibility text for the notices landmark region. */ - notices: __( 'Notices' ), /* translators: accessibility text for the content landmark region. */ body: __( 'Content' ), /* translators: accessibility text for the secondary sidebar landmark region. */ @@ -112,12 +110,7 @@ function InterfaceSkeleton(
) } { !! notices && ( -
+
{ notices }
) }