Merge pull request #864 from WordPress/add/suggested-format

Editor: add suggestedPostFormat selector.

editor/selectors.js

@@ -147,3 +147,24 @@ export function didPostSaveRequestFail( state ) {
 export function isSavingNewPost( state ) {
 	return state.saving.isNew;
 }
+
+export function getSuggestedPostFormat( state ) {
+	const blocks = state.editor.blockOrder;
+
+	let type;
+	// If there is only one block in the content of the post grab its
+	// `blockType` name so we can derive a suitable post format from it.
+	if ( blocks.length === 1 ) {
+		type = state.editor.blocksByUid[ blocks[ 0 ] ].blockType;
+	}
+
+	// We only convert to default post formats in core.
+	switch ( type ) {
+		case 'core/image':
+			return 'Image';
+		case 'core/quote':
+			return 'Quote';
+		default:
+			return false;
+	}
+}

editor/sidebar/post-status/index.js

@@ -15,15 +15,19 @@ import FormToggle from 'components/form-toggle';
  */
 import './style.scss';
 import PostVisibility from '../post-visibility';
-import { getEditedPostStatus } from '../../selectors';
+import { getEditedPostStatus, getSuggestedPostFormat } from '../../selectors';
 import { editPost } from '../../actions';
 
-function PostStatus( { status, onUpdateStatus } ) {
+function PostStatus( { status, onUpdateStatus, suggestedFormat } ) {
 	const onToggle = () => {
 		const updatedStatus = status === 'pending' ? 'draft' : 'pending';
 		onUpdateStatus( updatedStatus );
 	};
 
+	// Use the suggested post format based on the blocks content of the post
+	// or the default post format setting for the site.
+	const format = suggestedFormat || __( 'Standard' );
+
 	// Disable Reason: The input is inside the label, we shouldn't need the htmlFor
 	/* eslint-disable jsx-a11y/label-has-for */
 	return (
@@ -35,10 +39,13 @@ function PostStatus( { status, onUpdateStatus } ) {
 					onChange={ onToggle }
 				/>
 			</label>
-
 			<div className="editor-post-status__row">
 				<PostVisibility />
 			</div>
+			<div className="editor-post-status__row">
+				<span>{ __( 'Post Format' ) }</span>
+				<span>{ format }</span>
+			</div>
 		</PanelBody>
 	);
 	/* eslint-enable jsx-a11y/label-has-for */
@@ -47,6 +54,7 @@ function PostStatus( { status, onUpdateStatus } ) {
 export default connect(
 	( state ) => ( {
 		status: getEditedPostStatus( state ),
+		suggestedFormat: getSuggestedPostFormat( state ),
 	} ),
 	( dispatch ) => {
 		return {