@wordpress/editor 12.9.0 → 12.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "12.9.0",
+	"version": "12.12.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,32 +31,32 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.10.0",
-		"@wordpress/api-fetch": "^6.7.0",
-		"@wordpress/blob": "^3.10.0",
-		"@wordpress/block-editor": "^9.2.0",
-		"@wordpress/blocks": "^11.9.0",
-		"@wordpress/components": "^19.12.0",
-		"@wordpress/compose": "^5.8.0",
-		"@wordpress/core-data": "^4.8.0",
-		"@wordpress/data": "^6.10.0",
-		"@wordpress/date": "^4.10.0",
-		"@wordpress/deprecated": "^3.10.0",
-		"@wordpress/element": "^4.8.0",
-		"@wordpress/hooks": "^3.10.0",
-		"@wordpress/html-entities": "^3.10.0",
-		"@wordpress/i18n": "^4.10.0",
-		"@wordpress/icons": "^9.1.0",
-		"@wordpress/keyboard-shortcuts": "^3.8.0",
-		"@wordpress/keycodes": "^3.10.0",
-		"@wordpress/media-utils": "^4.1.0",
-		"@wordpress/notices": "^3.10.0",
-		"@wordpress/preferences": "^2.2.0",
-		"@wordpress/reusable-blocks": "^3.8.0",
-		"@wordpress/rich-text": "^5.8.0",
-		"@wordpress/server-side-render": "^3.8.0",
-		"@wordpress/url": "^3.11.0",
-		"@wordpress/wordcount": "^3.10.0",
+		"@wordpress/a11y": "^3.13.0",
+		"@wordpress/api-fetch": "^6.10.0",
+		"@wordpress/blob": "^3.13.0",
+		"@wordpress/block-editor": "^9.5.0",
+		"@wordpress/blocks": "^11.12.0",
+		"@wordpress/components": "^19.15.0",
+		"@wordpress/compose": "^5.11.0",
+		"@wordpress/core-data": "^4.11.0",
+		"@wordpress/data": "^6.13.0",
+		"@wordpress/date": "^4.13.0",
+		"@wordpress/deprecated": "^3.13.0",
+		"@wordpress/element": "^4.11.0",
+		"@wordpress/hooks": "^3.13.0",
+		"@wordpress/html-entities": "^3.13.0",
+		"@wordpress/i18n": "^4.13.0",
+		"@wordpress/icons": "^9.4.0",
+		"@wordpress/keyboard-shortcuts": "^3.11.0",
+		"@wordpress/keycodes": "^3.13.0",
+		"@wordpress/media-utils": "^4.4.0",
+		"@wordpress/notices": "^3.13.0",
+		"@wordpress/preferences": "^2.5.0",
+		"@wordpress/reusable-blocks": "^3.11.0",
+		"@wordpress/rich-text": "^5.11.0",
+		"@wordpress/server-side-render": "^3.11.0",
+		"@wordpress/url": "^3.14.0",
+		"@wordpress/wordcount": "^3.13.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -70,5 +70,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
+	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
 }

package/src/components/document-outline/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { countBy, flatMap, get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -50,7 +45,7 @@ const multipleH1Headings = [
  * @return {Array} An array of heading blocks enhanced with the properties described above.
  */
 const computeOutlineHeadings = ( blocks = [] ) => {
-	return flatMap( blocks, ( block = {} ) => {
+	return blocks.flatMap( ( block = {} ) => {
 		if ( block.name === 'core/heading' ) {
 			return {
 				...block,
@@ -83,7 +78,13 @@ export const DocumentOutline = ( {
 	// Not great but it's the simplest way to locate the title right now.
 	const titleNode = document.querySelector( '.editor-post-title__input' );
 	const hasTitle = isTitleSupported && title && titleNode;
-	const countByLevel = countBy( headings, 'level' );
+	const countByLevel = headings.reduce(
+		( acc, heading ) => ( {
+			...acc,
+			[ heading.level ]: ( acc[ heading.level ] || 0 ) + 1,
+		} ),
+		{}
+	);
 	const hasMultipleH1 = countByLevel[ 1 ] > 1;
 
 	return (
@@ -155,7 +156,7 @@ export default compose(
 		return {
 			title: getEditedPostAttribute( 'title' ),
 			blocks: getBlocks(),
-			isTitleSupported: get( postType, [ 'supports', 'title' ], false ),
+			isTitleSupported: postType?.supports?.title ?? false,
 		};
 	} )
 )( DocumentOutline );

package/src/components/editor-help/index.native.js

@@ -99,9 +99,10 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 							</BottomSheet.NavBar>
 							<BottomSheetConsumer>
 								{ ( { listProps } ) => {
-									const contentContainerStyle = StyleSheet.flatten(
-										listProps.contentContainerStyle
-									);
+									const contentContainerStyle =
+										StyleSheet.flatten(
+											listProps.contentContainerStyle
+										);
 									return (
 										<ScrollView
 											{ ...listProps }
@@ -129,9 +130,8 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 														{ label, icon },
 														index
 													) => {
-														const labelSlug = kebabCase(
-															label
-														);
+														const labelSlug =
+															kebabCase( label );
 														const isLastItem =
 															index ===
 															HELP_TOPICS.length -

package/src/components/entities-saved-states/entity-record-item.js

@@ -57,18 +57,18 @@ export default function EntityRecordItem( {
 
 	const isSelected = useSelect(
 		( select ) => {
-			const selectedBlockId = select(
-				blockEditorStore
-			).getSelectedBlockClientId();
+			const selectedBlockId =
+				select( blockEditorStore ).getSelectedBlockClientId();
 			return selectedBlockId === parentBlockId;
 		},
 		[ parentBlockId ]
 	);
 	const isSelectedText = isSelected ? __( 'Selected' ) : __( 'Select' );
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const selectParentBlock = useCallback( () => selectBlock( parentBlockId ), [
-		parentBlockId,
-	] );
+	const selectParentBlock = useCallback(
+		() => selectBlock( parentBlockId ),
+		[ parentBlockId ]
+	);
 	const selectAndDismiss = useCallback( () => {
 		selectBlock( parentBlockId );
 		closePanel();

package/src/components/entities-saved-states/index.js

@@ -39,9 +39,8 @@ const PUBLISH_ON_SAVE_ENTITIES = [
 export default function EntitiesSavedStates( { close } ) {
 	const saveButtonRef = useRef();
 	const { dirtyEntityRecords } = useSelect( ( select ) => {
-		const dirtyRecords = select(
-			coreStore
-		).__experimentalGetDirtyEntityRecords();
+		const dirtyRecords =
+			select( coreStore ).__experimentalGetDirtyEntityRecords();
 
 		// Remove site object and decouple into its edited pieces.
 		const dirtyRecordsWithoutSite = dirtyRecords.filter(
@@ -77,13 +76,11 @@ export default function EntitiesSavedStates( { close } ) {
 		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
 	} = useDispatch( coreStore );
 
-	const { __unstableMarkLastChangeAsPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
 
-	const { createSuccessNotice, createErrorNotice } = useDispatch(
-		noticesStore
-	);
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 
 	// To group entities by type.
 	const partitionedSavables = groupBy( dirtyEntityRecords, 'name' );

package/src/components/error-boundary/index.js

@@ -7,6 +7,7 @@ import { Button } from '@wordpress/components';
 import { select } from '@wordpress/data';
 import { Warning } from '@wordpress/block-editor';
 import { useCopyToClipboard } from '@wordpress/compose';
+import { doAction } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -36,6 +37,8 @@ class ErrorBoundary extends Component {
 
 	componentDidCatch( error ) {
 		this.setState( { error } );
+
+		doAction( 'editor.ErrorBoundary.errorLogged', error );
 	}
 
 	reboot() {

package/src/components/global-keyboard-shortcuts/save-shortcut.js

@@ -12,9 +12,8 @@ import { store as editorStore } from '../../store';
 
 function SaveShortcut( { resetBlocksOnSave } ) {
 	const { resetEditorBlocks, savePost } = useDispatch( editorStore );
-	const { isEditedPostDirty, getPostEdits, isPostSavingLocked } = useSelect(
-		editorStore
-	);
+	const { isEditedPostDirty, getPostEdits, isPostSavingLocked } =
+		useSelect( editorStore );
 
 	useShortcut( 'core/editor/save', ( event ) => {
 		event.preventDefault();

package/src/components/index.js

@@ -41,23 +41,32 @@ export { default as PostPublishPanel } from './post-publish-panel';
 export { default as PostSavedState } from './post-saved-state';
 export { default as PostSchedule } from './post-schedule';
 export { default as PostScheduleCheck } from './post-schedule/check';
-export { default as PostScheduleLabel } from './post-schedule/label';
+export {
+	default as PostScheduleLabel,
+	usePostScheduleLabel,
+} from './post-schedule/label';
 export { default as PostSlug } from './post-slug';
 export { default as PostSlugCheck } from './post-slug/check';
 export { default as PostSticky } from './post-sticky';
 export { default as PostStickyCheck } from './post-sticky/check';
 export { default as PostSwitchToDraftButton } from './post-switch-to-draft-button';
 export { default as PostTaxonomies } from './post-taxonomies';
-export { default as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
-export { default as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';
+export { FlatTermSelector as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
+export { HierarchicalTermSelector as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';
 export { default as PostTaxonomiesCheck } from './post-taxonomies/check';
 export { default as PostTextEditor } from './post-text-editor';
 export { default as PostTitle } from './post-title';
 export { default as PostTrash } from './post-trash';
 export { default as PostTrashCheck } from './post-trash/check';
 export { default as PostTypeSupportCheck } from './post-type-support-check';
+export { default as PostURL } from './post-url';
+export { default as PostURLCheck } from './post-url/check';
+export { default as PostURLLabel, usePostURLLabel } from './post-url/label';
 export { default as PostVisibility } from './post-visibility';
-export { default as PostVisibilityLabel } from './post-visibility/label';
+export {
+	default as PostVisibilityLabel,
+	usePostVisibilityLabel,
+} from './post-visibility/label';
 export { default as PostVisibilityCheck } from './post-visibility/check';
 export { default as TableOfContents } from './table-of-contents';
 export { default as ThemeSupportCheck } from './theme-support-check';

package/src/components/local-autosave-monitor/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { once, uniqueId, omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -27,23 +22,30 @@ const requestIdleCallback = window.requestIdleCallback
 	? window.requestIdleCallback
 	: window.requestAnimationFrame;
 
+let hasStorageSupport;
+let uniqueId = 0;
+
 /**
  * Function which returns true if the current environment supports browser
  * sessionStorage, or false otherwise. The result of this function is cached and
  * reused in subsequent invocations.
  */
-const hasSessionStorageSupport = once( () => {
-	try {
-		// Private Browsing in Safari 10 and earlier will throw an error when
-		// attempting to set into sessionStorage. The test here is intentional in
-		// causing a thrown error as condition bailing from local autosave.
-		window.sessionStorage.setItem( '__wpEditorTestSessionStorage', '' );
-		window.sessionStorage.removeItem( '__wpEditorTestSessionStorage' );
-		return true;
-	} catch ( error ) {
-		return false;
+const hasSessionStorageSupport = () => {
+	if ( typeof hasStorageSupport === 'undefined' ) {
+		try {
+			// Private Browsing in Safari 10 and earlier will throw an error when
+			// attempting to set into sessionStorage. The test here is intentional in
+			// causing a thrown error as condition bailing from local autosave.
+			window.sessionStorage.setItem( '__wpEditorTestSessionStorage', '' );
+			window.sessionStorage.removeItem( '__wpEditorTestSessionStorage' );
+			hasStorageSupport = true;
+		} catch ( error ) {
+			hasStorageSupport = false;
+		}
 	}
-} );
+
+	return hasStorageSupport;
+};
 
 /**
  * Custom hook which manages the creation of a notice prompting the user to
@@ -54,8 +56,8 @@ function useAutosaveNotice() {
 		( select ) => ( {
 			postId: select( editorStore ).getCurrentPostId(),
 			isEditedPostNew: select( editorStore ).isEditedPostNew(),
-			hasRemoteAutosave: !! select( editorStore ).getEditorSettings()
-				.autosave,
+			hasRemoteAutosave:
+				!! select( editorStore ).getEditorSettings().autosave,
 		} ),
 		[]
 	);
@@ -98,7 +100,7 @@ function useAutosaveNotice() {
 			return;
 		}
 
-		const noticeId = uniqueId( 'wpEditorAutosaveRestore' );
+		const noticeId = `wpEditorAutosaveRestore${ ++uniqueId }`;
 		createWarningNotice(
 			__(
 				'The backup of this post in your browser is different from the version below.'
@@ -109,7 +111,11 @@ function useAutosaveNotice() {
 					{
 						label: __( 'Restore the backup' ),
 						onClick() {
-							editPost( omit( edits, [ 'content' ] ) );
+							const {
+								content: editsContent,
+								...editsWithoutContent
+							} = edits;
+							editPost( editsWithoutContent );
 							resetEditorBlocks( parse( edits.content ) );
 							removeNotice( noticeId );
 						},
@@ -124,22 +130,17 @@ function useAutosaveNotice() {
  * Custom hook which ejects a local autosave after a successful save occurs.
  */
 function useAutosavePurge() {
-	const {
-		postId,
-		isEditedPostNew,
-		isDirty,
-		isAutosaving,
-		didError,
-	} = useSelect(
-		( select ) => ( {
-			postId: select( editorStore ).getCurrentPostId(),
-			isEditedPostNew: select( editorStore ).isEditedPostNew(),
-			isDirty: select( editorStore ).isEditedPostDirty(),
-			isAutosaving: select( editorStore ).isAutosavingPost(),
-			didError: select( editorStore ).didPostSaveRequestFail(),
-		} ),
-		[]
-	);
+	const { postId, isEditedPostNew, isDirty, isAutosaving, didError } =
+		useSelect(
+			( select ) => ( {
+				postId: select( editorStore ).getCurrentPostId(),
+				isEditedPostNew: select( editorStore ).isEditedPostNew(),
+				isDirty: select( editorStore ).isEditedPostDirty(),
+				isAutosaving: select( editorStore ).isAutosavingPost(),
+				didError: select( editorStore ).didPostSaveRequestFail(),
+			} ),
+			[]
+		);
 
 	const lastIsDirty = useRef( isDirty );
 	const lastIsAutosaving = useRef( isAutosaving );
@@ -177,8 +178,8 @@ function LocalAutosaveMonitor() {
 
 	const { localAutosaveInterval } = useSelect(
 		( select ) => ( {
-			localAutosaveInterval: select( editorStore ).getEditorSettings()
-				.localAutosaveInterval,
+			localAutosaveInterval:
+				select( editorStore ).getEditorSettings().localAutosaveInterval,
 		} ),
 		[]
 	);

package/src/components/page-attributes/order.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { invoke } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -24,10 +19,7 @@ export const PageAttributesOrder = ( { onUpdateOrder, order = 0 } ) => {
 	const setUpdatedOrder = ( value ) => {
 		setOrderInput( value );
 		const newOrder = Number( value );
-		if (
-			Number.isInteger( newOrder ) &&
-			invoke( value, [ 'trim' ] ) !== ''
-		) {
+		if ( Number.isInteger( newOrder ) && value.trim?.() !== '' ) {
 			onUpdateOrder( Number( value ) );
 		}
 	};

package/src/components/page-attributes/parent.js

@@ -5,9 +5,7 @@ import {
 	get,
 	unescape as unescapeString,
 	debounce,
-	repeat,
 	find,
-	flatten,
 	deburr,
 } from 'lodash';
 
@@ -52,12 +50,10 @@ export function PageAttributesParent() {
 	const [ fieldValue, setFieldValue ] = useState( false );
 	const { parentPost, parentPostId, items, postType } = useSelect(
 		( select ) => {
-			const { getPostType, getEntityRecords, getEntityRecord } = select(
-				coreStore
-			);
-			const { getCurrentPostId, getEditedPostAttribute } = select(
-				editorStore
-			);
+			const { getPostType, getEntityRecords, getEntityRecord } =
+				select( coreStore );
+			const { getCurrentPostId, getEditedPostAttribute } =
+				select( editorStore );
 			const postTypeSlug = getEditedPostAttribute( 'type' );
 			const pageId = getEditedPostAttribute( 'parent' );
 			const pType = getPostType( postTypeSlug );
@@ -101,7 +97,7 @@ export function PageAttributesParent() {
 				{
 					value: treeNode.id,
 					label:
-						repeat( '— ', level ) + unescapeString( treeNode.name ),
+						'— '.repeat( level ) + unescapeString( treeNode.name ),
 					rawName: treeNode.name,
 				},
 				...getOptionsFromTree( treeNode.children || [], level + 1 ),
@@ -113,7 +109,7 @@ export function PageAttributesParent() {
 				return priorityA >= priorityB ? 1 : -1;
 			} );
 
-			return flatten( sortedNodes );
+			return sortedNodes.flat();
 		};
 
 		let tree = pageItems.map( ( item ) => ( {

package/src/components/post-author/select.js

@@ -18,9 +18,8 @@ function PostAuthorSelect() {
 	const { editPost } = useDispatch( editorStore );
 	const { postAuthor, authors } = useSelect( ( select ) => {
 		return {
-			postAuthor: select( editorStore ).getEditedPostAttribute(
-				'author'
-			),
+			postAuthor:
+				select( editorStore ).getEditedPostAttribute( 'author' ),
 			authors: select( coreStore ).getUsers( AUTHORS_QUERY ),
 		};
 	}, [] );

package/src/components/post-comments/index.js

@@ -29,9 +29,10 @@ function PostComments( { commentStatus = 'open', ...props } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			commentStatus: select( editorStore ).getEditedPostAttribute(
-				'comment_status'
-			),
+			commentStatus:
+				select( editorStore ).getEditedPostAttribute(
+					'comment_status'
+				),
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {

package/src/components/post-format/index.js

@@ -49,9 +49,8 @@ export default function PostFormat() {
 
 	const { postFormat, suggestedFormat, supportedFormats } = useSelect(
 		( select ) => {
-			const { getEditedPostAttribute, getSuggestedPostFormat } = select(
-				editorStore
-			);
+			const { getEditedPostAttribute, getSuggestedPostFormat } =
+				select( editorStore );
 			const _postFormat = getEditedPostAttribute( 'format' );
 			const themeSupports = select( coreStore ).getThemeSupports();
 			return {
@@ -82,24 +81,18 @@ export default function PostFormat() {
 	return (
 		<PostFormatCheck>
 			<div className="editor-post-format">
-				<div className="editor-post-format__content">
-					<label htmlFor={ postFormatSelectorId }>
-						{ __( 'Post Format' ) }
-					</label>
-					<SelectControl
-						value={ postFormat }
-						onChange={ ( format ) => onUpdatePostFormat( format ) }
-						id={ postFormatSelectorId }
-						options={ formats.map( ( format ) => ( {
-							label: format.caption,
-							value: format.id,
-						} ) ) }
-					/>
-				</div>
-
+				<SelectControl
+					label={ __( 'Post Format' ) }
+					value={ postFormat }
+					onChange={ ( format ) => onUpdatePostFormat( format ) }
+					id={ postFormatSelectorId }
+					options={ formats.map( ( format ) => ( {
+						label: format.caption,
+						value: format.id,
+					} ) ) }
+				/>
 				{ suggestion && suggestion.id !== postFormat && (
-					<div className="editor-post-format__suggestion">
-						{ __( 'Suggestion:' ) }{ ' ' }
+					<p className="editor-post-format__suggestion">
 						<Button
 							variant="link"
 							onClick={ () =>
@@ -108,11 +101,11 @@ export default function PostFormat() {
 						>
 							{ sprintf(
 								/* translators: %s: post format */
-								__( 'Apply format: %s' ),
+								__( 'Apply suggested format: %s' ),
 								suggestion.caption
 							) }
 						</Button>
-					</div>
+					</p>
 				) }
 			</div>
 		</PostFormatCheck>

package/src/components/post-format/style.scss

@@ -1,18 +1,3 @@
-.editor-post-format {
-	flex-direction: column;
-	align-items: stretch;
-	width: 100%;
-}
-
-.editor-post-format__content {
-	display: inline-flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-}
-
-.editor-post-format__suggestion {
-	padding: $grid-unit-15 * 0.5;
-	text-align: right;
-	font-size: $default-font-size;
+[class].editor-post-format__suggestion {
+	margin: $grid-unit-05 0 0 0;
 }

package/src/components/post-last-revision/check.js

@@ -26,10 +26,8 @@ export function PostLastRevisionCheck( {
 }
 
 export default withSelect( ( select ) => {
-	const {
-		getCurrentPostLastRevisionId,
-		getCurrentPostRevisionsCount,
-	} = select( editorStore );
+	const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
+		select( editorStore );
 	return {
 		lastRevisionId: getCurrentPostLastRevisionId(),
 		revisionsCount: getCurrentPostRevisionsCount(),

package/src/components/post-last-revision/index.js

@@ -35,10 +35,8 @@ function LastRevision( { lastRevisionId, revisionsCount } ) {
 }
 
 export default withSelect( ( select ) => {
-	const {
-		getCurrentPostLastRevisionId,
-		getCurrentPostRevisionsCount,
-	} = select( editorStore );
+	const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
+		select( editorStore );
 	return {
 		lastRevisionId: getCurrentPostLastRevisionId(),
 		revisionsCount: getCurrentPostRevisionsCount(),

package/src/components/post-pending-status/check.js

@@ -28,11 +28,8 @@ export function PostPendingStatusCheck( {
 
 export default compose(
 	withSelect( ( select ) => {
-		const {
-			isCurrentPostPublished,
-			getCurrentPostType,
-			getCurrentPost,
-		} = select( editorStore );
+		const { isCurrentPostPublished, getCurrentPostType, getCurrentPost } =
+			select( editorStore );
 		return {
 			hasPublishAction: get(
 				getCurrentPost(),

package/src/components/post-pingbacks/index.js

@@ -29,9 +29,8 @@ function PostPingbacks( { pingStatus = 'open', ...props } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			pingStatus: select( editorStore ).getEditedPostAttribute(
-				'ping_status'
-			),
+			pingStatus:
+				select( editorStore ).getEditedPostAttribute( 'ping_status' ),
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {