Polish editor PostFormat and PostFormatPanel components.

WordPress · Oct 21, 2020 · 2f4de98 · 2f4de98
1 parent 9ce9380
commit 2f4de98
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 73 deletions.
diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js
@@ -1,15 +1,15 @@
 /**
  * External dependencies
  */
-import { find, get, includes, union } from 'lodash';
+import { union } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Button, SelectControl } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -45,38 +45,51 @@ export default function PostFormat() {
 	const instanceId = useInstanceId( PostFormat );
 	const postFormatSelectorId = `post-format-selector-${ instanceId }`;
 
-	const { postFormat, suggestedFormat, supportedFormats } = useSelect(
+	const { currentFormatId, listedFormats, suggestedFormat } = useSelect(
 		( select ) => {
+			const supportedFormatIds =
+				select( 'core' ).getThemeSupports().formats ?? [];
 			const { getEditedPostAttribute, getSuggestedPostFormat } = select(
 				'core/editor'
 			);
-			const _postFormat = getEditedPostAttribute( 'format' );
-			const themeSupports = select( 'core' ).getThemeSupports();
+			const _currentFormatId =
+				getEditedPostAttribute( 'format' ) ?? 'standard';
+
+			const potentialSuggestedFormatId = getSuggestedPostFormat();
+
+			// If the suggested format isn't null, isn't already applied, and is
+			// supported by the theme, return it. Otherwise, return null.
+			const suggestionIsValid =
+				potentialSuggestedFormatId &&
+				potentialSuggestedFormatId !== _currentFormatId &&
+				supportedFormatIds.includes( potentialSuggestedFormatId );
+
+			// The current format may not be supported by the theme.
+			// Ensure it is always shown in the select control.
+			const currentOrSupportedFormatIds = union(
+				[ _currentFormatId ],
+				supportedFormatIds
+			);
+
 			return {
-				postFormat: _postFormat ?? 'standard',
-				suggestedFormat: getSuggestedPostFormat(),
-				// Ensure current format is always in the set.
-				// The current format may not be a format supported by the theme.
-				supportedFormats: union(
-					[ _postFormat ],
-					get( themeSupports, [ 'formats' ], [] )
+				currentFormatId: _currentFormatId,
+				// Filter out invalid formats not included in POST_FORMATS.
+				listedFormats: POST_FORMATS.filter( ( { id } ) =>
+					currentOrSupportedFormatIds.includes( id )
 				),
+				suggestedFormat: suggestionIsValid
+					? POST_FORMATS.find(
+							( { id } ) => id === potentialSuggestedFormatId
+					  )
+					: null,
 			};
 		},
 		[]
 	);
 
-	const formats = POST_FORMATS.filter( ( format ) =>
-		includes( supportedFormats, format.id )
-	);
-	const suggestion = find(
-		formats,
-		( format ) => format.id === suggestedFormat
-	);
-
 	const { editPost } = useDispatch( 'core/editor' );
 
-	const onUpdatePostFormat = ( format ) => editPost( { format } );
+	const updatePostFormat = ( formatId ) => editPost( { format: formatId } );
 
 	return (
 		<PostFormatCheck>
@@ -86,26 +99,26 @@ export default function PostFormat() {
 						{ __( 'Post Format' ) }
 					</label>
 					<SelectControl
-						value={ postFormat }
-						onChange={ ( format ) => onUpdatePostFormat( format ) }
+						value={ currentFormatId }
+						onChange={ updatePostFormat }
 						id={ postFormatSelectorId }
-						options={ formats.map( ( format ) => ( {
+						options={ listedFormats.map( ( format ) => ( {
 							label: format.caption,
 							value: format.id,
 						} ) ) }
 					/>
 				</div>
 
-				{ suggestion && suggestion.id !== postFormat && (
+				{ suggestedFormat && (
 					<div className="editor-post-format__suggestion">
 						{ __( 'Suggestion:' ) }{ ' ' }
 						<Button
 							isLink
 							onClick={ () =>
-								onUpdatePostFormat( suggestion.id )
+								updatePostFormat( suggestedFormat.id )
 							}
 						>
-							{ suggestion.caption }
+							{ suggestedFormat.caption }
 						</Button>
 					</div>
 				) }

diff --git a/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js b/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find, get, includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -15,72 +10,67 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { POST_FORMATS } from '../post-format';
 
-const getSuggestion = ( supportedFormats, suggestedPostFormat ) => {
-	const formats = POST_FORMATS.filter( ( format ) =>
-		includes( supportedFormats, format.id )
-	);
-	return find( formats, ( format ) => format.id === suggestedPostFormat );
-};
-
-const PostFormatSuggestion = ( {
-	suggestedPostFormat,
-	suggestionText,
-	onUpdatePostFormat,
-} ) => (
-	<Button isLink onClick={ () => onUpdatePostFormat( suggestedPostFormat ) }>
+const PostFormatSuggestion = ( { onApplySuggestion, suggestionText } ) => (
+	<Button isLink onClick={ onApplySuggestion }>
 		{ suggestionText }
 	</Button>
 );
 
 export default function PostFormatPanel() {
-	const { currentPostFormat, suggestion } = useSelect( ( select ) => {
+	const suggestedFormat = useSelect( ( select ) => {
 		const { getEditedPostAttribute, getSuggestedPostFormat } = select(
 			'core/editor'
 		);
-		const supportedFormats = get(
-			select( 'core' ).getThemeSupports(),
-			[ 'formats' ],
-			[]
-		);
-		return {
-			currentPostFormat: getEditedPostAttribute( 'format' ),
-			suggestion: getSuggestion(
-				supportedFormats,
-				getSuggestedPostFormat()
-			),
-		};
+		const potentialSuggestedFormatId = getSuggestedPostFormat();
+
+		// If the suggested format isn't null, isn't already applied, and is
+		// supported by the theme, return it. Otherwise, return null.
+		if (
+			potentialSuggestedFormatId &&
+			potentialSuggestedFormatId !== getEditedPostAttribute( 'format' ) &&
+			( select( 'core' ).getThemeSupports().formats ?? [] ).includes(
+				potentialSuggestedFormatId
+			)
+		) {
+			return POST_FORMATS.find(
+				( { id } ) => id === potentialSuggestedFormatId
+			);
+		}
+		return null;
 	}, [] );
 
 	const { editPost } = useDispatch( 'core/editor' );
 
-	const onUpdatePostFormat = ( format ) => editPost( { format } );
-
-	const panelBodyTitle = [
-		__( 'Suggestion:' ),
-		<span className="editor-post-publish-panel__link" key="label">
-			{ __( 'Use a post format' ) }
-		</span>,
-	];
-
-	if ( ! suggestion || suggestion.id === currentPostFormat ) {
+	if ( ! suggestedFormat ) {
 		return null;
 	}
 
 	return (
-		<PanelBody initialOpen={ false } title={ panelBodyTitle }>
+		<PanelBody
+			initialOpen={ false }
+			title={
+				<>
+					{ __( 'Suggestion:' ) }
+					<span className="editor-post-publish-panel__link">
+						{ __( 'Use a post format' ) }
+					</span>
+				</>
+			}
+		>
 			<p>
 				{ __(
 					'Your theme uses post formats to highlight different kinds of content, like images or videos. Apply a post format to see this special styling.'
 				) }
 			</p>
 			<p>
 				<PostFormatSuggestion
-					onUpdatePostFormat={ onUpdatePostFormat }
-					suggestedPostFormat={ suggestion.id }
+					onApplySuggestion={ () => {
+						editPost( { format: suggestedFormat.id } );
+					} }
 					suggestionText={ sprintf(
 						/* translators: %s: post format */
 						__( 'Apply the "%1$s" format.' ),
-						suggestion.caption
+						suggestedFormat.caption
 					) }
 				/>
 			</p>