Components: Extract Undo/Redo buttons as reusable components

editor/components/editor-history/redo.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { IconButton } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { hasEditorRedo } from '../../selectors';
+
+function EditorHistoryRedo( { hasRedo, redo } ) {
+	return (
+		<IconButton
+			icon="redo"
+			label={ __( 'Redo' ) }
+			disabled={ ! hasRedo }
+			onClick={ redo }
+		/>
+	);
+}
+
+export default connect(
+	( state ) => ( {
+		hasRedo: hasEditorRedo( state ),
+	} ),
+	( dispatch ) => ( {
+		redo: () => dispatch( { type: 'REDO' } ),
+	} )
+)( EditorHistoryRedo );

editor/components/editor-history/undo.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { IconButton } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { hasEditorUndo } from '../../selectors';
+
+function EditorHistoryUndo( { hasUndo, undo } ) {
+	return (
+		<IconButton
+			icon="undo"
+			label={ __( 'Undo' ) }
+			disabled={ ! hasUndo }
+			onClick={ undo }
+		/>
+	);
+}
+
+export default connect(
+	( state ) => ( {
+		hasUndo: hasEditorUndo( state ),
+	} ),
+	( dispatch ) => ( {
+		undo: () => dispatch( { type: 'UNDO' } ),
+	} )
+)( EditorHistoryUndo );

editor/components/index.js

@@ -1,6 +1,8 @@
 // Post Related Components
 export { default as AutosaveMonitor } from './autosave-monitor';
 export { default as DocumentOutline } from './document-outline';
+export { default as EditorHistoryRedo } from './editor-history/redo';
+export { default as EditorHistoryUndo } from './editor-history/undo';
 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/header/header-toolbar/index.js

@@ -7,34 +7,25 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import { Inserter, BlockToolbar, TableOfContents } from '../../../components';
+import { Inserter, BlockToolbar, TableOfContents, EditorHistoryRedo, EditorHistoryUndo } from '../../../components';
 import BlockSwitcher from '../../../components/block-switcher';
 import NavigableToolbar from '../../../components/navigable-toolbar';
-import { getMultiSelectedBlockUids, hasEditorUndo, hasEditorRedo, isFeatureActive } from '../../../selectors';
+import { getMultiSelectedBlockUids, isFeatureActive } from '../../../selectors';
 
-function HeaderToolbar( { hasUndo, hasRedo, hasFixedToolbar, undo, redo, isMultiBlockSelection, selectedBlockUids } ) {
+function HeaderToolbar( { hasFixedToolbar, isMultiBlockSelection, selectedBlockUids } ) {
 	return (
 		<NavigableToolbar
 			className="editor-header-toolbar"
 			aria-label={ __( 'Editor Toolbar' ) }
 		>
 			<Inserter position="bottom right" />
-			<IconButton
-				icon="undo"
-				label={ __( 'Undo' ) }
-				disabled={ ! hasUndo }
-				onClick={ undo } />
-			<IconButton
-				icon="redo"
-				label={ __( 'Redo' ) }
-				disabled={ ! hasRedo }
-				onClick={ redo } />
+			<EditorHistoryUndo />
+			<EditorHistoryRedo />
 			<TableOfContents />
 			{ isMultiBlockSelection && (
 				<div className="editor-header-toolbar__block-toolbar">
@@ -53,15 +44,9 @@ export default connect(
 	( state ) => {
 		const selectedBlockUids = getMultiSelectedBlockUids( state );
 		return {
-			hasUndo: hasEditorUndo( state ),
-			hasRedo: hasEditorRedo( state ),
 			hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
 			isMultiBlockSelection: selectedBlockUids.length > 1,
 			selectedBlockUids,
 		};
-	},
-	( dispatch ) => ( {
-		undo: () => dispatch( { type: 'UNDO' } ),
-		redo: () => dispatch( { type: 'REDO' } ),
-	} )
+	}
 )( HeaderToolbar );