Make a more conversational post format

packages/editor/src/components/post-format/index.js

@@ -16,7 +16,7 @@ import { withInstanceId, compose } from '@wordpress/compose';
  */
 import PostFormatCheck from './check';
 
-const POST_FORMATS = [
+export const POST_FORMATS = [
 	{ id: 'aside', caption: __( 'Aside' ) },
 	{ id: 'gallery', caption: __( 'Gallery' ) },
 	{ id: 'link', caption: __( 'Link' ) },

packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js

@@ -1,17 +1,26 @@
+/**
+ * External dependencies
+ */
+import { find, get, includes, union } from 'lodash';
+
 /**
  * WordPress dependencies.
  */
 import { __ } from '@wordpress/i18n';
 import { ifCondition, compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-import { Dashicon, PanelBody } from '@wordpress/components';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { Button, Dashicon, PanelBody } from '@wordpress/components';
 
 /**
  * Internal dependencies.
  */
-import PostFormat from '../post-format';
+import { POST_FORMATS } from '../post-format';
+
+const PostFormatSuggested = ( { suggestion, onUpdatePostFormat } ) => <Button isLink onClick={ () => onUpdatePostFormat( suggestion.id ) }>
+	{ suggestion.caption }
+</Button>;
 
-const PostFormatPanel = ( ) =>	<PanelBody initialOpen={ false } title={ [
+const PostFormatPanel = ( { suggestion, onUpdatePostFormat } ) => <PanelBody initialOpen={ false } title={ [
 	<Dashicon
 		key={ 'dashicon-lightbulb' }
 		icon={ 'lightbulb' }
@@ -23,16 +32,30 @@ const PostFormatPanel = ( ) =>	<PanelBody initialOpen={ false } title={ [
 	}</span>,
 ] } >
 	<p>Post formats are used to display different types of content differently.</p>
-	<PostFormat />
+	<p>It looks like you may want to use the <PostFormatSuggested suggestion={ suggestion } onUpdatePostFormat={ onUpdatePostFormat } /> post format type for this post.</p>
 </PanelBody>;
 
 export default compose(
 	withSelect( ( select ) => {
 		const { getEditedPostAttribute, getSuggestedPostFormat } = select( 'core/editor' );
+		const suggestedPostFormat = getSuggestedPostFormat();
+		const currentPostFormat = getEditedPostAttribute( 'format' );
+		const themeSupports = select( 'core' ).getThemeSupports();
+		// Ensure current format is always in the set.
+		// The current format may not be a format supported by the theme.
+		const supportedFormats = union( [ currentPostFormat ], get( themeSupports, [ 'formats' ], [] ) );
+		const formats = POST_FORMATS.filter( ( format ) => includes( supportedFormats, format.id ) );
+		const suggestion = find( formats, ( format ) => format.id === suggestedPostFormat );
 		return {
-			suggestedPostFormat: getSuggestedPostFormat(),
-			currentPostFormat: getEditedPostAttribute( 'format' ),
+			currentPostFormat,
+			suggestedPostFormat,
+			suggestion,
 		};
 	} ),
+	withDispatch( ( dispatch ) => ( {
+		onUpdatePostFormat( postFormat ) {
+			dispatch( 'core/editor' ).editPost( { format: postFormat } );
+		},
+	} ) ),
 	ifCondition( ( { suggestedPostFormat, currentPostFormat } ) => suggestedPostFormat && suggestedPostFormat !== currentPostFormat ),
 )( PostFormatPanel );