Components: Extract Reusable Editor Notices Component

editor/components/editor-notices/index.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { NoticeList } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { removeNotice } from '../../actions';
+import { getNotices } from '../../selectors';
+
+export default connect(
+	( state ) => ( {
+		notices: getNotices( state ),
+	} ),
+	{ onRemove: removeNotice }
+)( NoticeList );

editor/components/index.js

@@ -5,6 +5,7 @@ export { default as DocumentOutlineCheck } from './document-outline/check';
 export { default as EditorGlobalKeyboardShortcuts } from './editor-global-keyboard-shortcuts';
 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 MetaBoxes } from './meta-boxes';
 export { default as PageAttributes } from './page-attributes';
 export { default as PageAttributesCheck } from './page-attributes/check';

editor/edit-post/layout/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { NoticeList, Popover, navigateRegions } from '@wordpress/components';
+import { Popover, navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -19,23 +19,21 @@ import Sidebar from '../sidebar';
 import TextEditor from '../modes/text-editor';
 import VisualEditor from '../modes/visual-editor';
 import DocumentTitle from '../document-title';
-import { removeNotice } from '../../actions';
-import { MetaBoxes, AutosaveMonitor, UnsavedChangesWarning } from '../../components';
+import { MetaBoxes, AutosaveMonitor, UnsavedChangesWarning, EditorNotices } from '../../components';
 import {
 	getEditorMode,
 	isEditorSidebarOpened,
-	getNotices,
 } from '../../selectors';
 
-function Layout( { mode, isSidebarOpened, notices, ...props } ) {
+function Layout( { mode, isSidebarOpened } ) {
 	const className = classnames( 'editor-layout', {
 		'is-sidebar-opened': isSidebarOpened,
 	} );
 
 	return (
 		<div className={ className }>
 			<DocumentTitle />
-			<NoticeList onRemove={ props.removeNotice } notices={ notices } />
+			<EditorNotices />
 			<UnsavedChangesWarning />
 			<AutosaveMonitor />
 			<Header />
@@ -58,7 +56,5 @@ export default connect(
 	( state ) => ( {
 		mode: getEditorMode( state ),
 		isSidebarOpened: isEditorSidebarOpened( state ),
-		notices: getNotices( state ),
 	} ),
-	{ removeNotice }
 )( navigateRegions( Layout ) );