From 0ce47baeca3d10a68954bcfd780d8f0f420c9e79 Mon Sep 17 00:00:00 2001 From: Zebulan Stanphill Date: Tue, 20 Oct 2020 09:50:02 -0500 Subject: [PATCH] Polish editor PostFormat and PostFormatPanel components. --- .../src/components/post-format/index.js | 69 +++++++++------- .../maybe-post-format-panel.js | 80 ++++++++----------- 2 files changed, 76 insertions(+), 73 deletions(-) diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js index 57620a32b9025e..4265080022efd9 100644 --- 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 ( @@ -86,26 +99,26 @@ export default function PostFormat() { { __( 'Post Format' ) } onUpdatePostFormat( format ) } + value={ currentFormatId } + onChange={ updatePostFormat } id={ postFormatSelectorId } - options={ formats.map( ( format ) => ( { + options={ listedFormats.map( ( format ) => ( { label: format.caption, value: format.id, } ) ) } /> - { suggestion && suggestion.id !== postFormat && ( + { suggestedFormat && (
{ __( 'Suggestion:' ) }{ ' ' }
) } 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 index 270d11fe749525..80aa084901093c 100644 --- 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,59 +10,53 @@ 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, -} ) => ( - ); 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:' ), - - { __( 'Use a post format' ) } - , - ]; - - if ( ! suggestion || suggestion.id === currentPostFormat ) { + if ( ! suggestedFormat ) { return null; } return ( - + + { __( 'Suggestion:' ) } + + { __( 'Use a post format' ) } + + + } + >

{ __( 'Your theme uses post formats to highlight different kinds of content, like images or videos. Apply a post format to see this special styling.' @@ -75,12 +64,13 @@ export default function PostFormatPanel() {

{ + editPost( { format: suggestedFormat.id } ); + } } suggestionText={ sprintf( /* translators: %s: post format */ __( 'Apply the "%1$s" format.' ), - suggestion.caption + suggestedFormat.caption ) } />