PrePublishPanel: suggest tags and postformat (#8235)

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

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { find, get, includes } from 'lodash';
+
+/**
+ * WordPress dependencies.
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { ifCondition, compose } from '@wordpress/compose';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { Button, PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies.
+ */
+import { POST_FORMATS } from '../post-format';
+
+const PostFormatSuggestion = ( { suggestedPostFormat, suggestionText, onUpdatePostFormat } ) => (
+	<Button isLink onClick={ () => onUpdatePostFormat( suggestedPostFormat ) }>
+		{ suggestionText }
+	</Button>
+);
+
+const PostFormatPanel = ( { suggestion, onUpdatePostFormat } ) => {
+	const panelBodyTitle = [
+		__( 'Suggestion:' ),
+		(
+			<span className="editor-post-publish-panel__link" key="label">
+				{ __( 'Use a post format' ) }
+			</span>
+		),
+	];
+
+	return (
+		<PanelBody initialOpen={ false } title={ panelBodyTitle } >
+			<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 }
+					suggestionText={ sprintf(
+						__( 'Apply the "%1$s" format.' ),
+						suggestion.caption
+					) }
+				/>
+			</p>
+		</PanelBody>
+	);
+};
+
+const getSuggestion = ( supportedFormats, suggestedPostFormat ) => {
+	const formats = POST_FORMATS.filter( ( format ) => includes( supportedFormats, format.id ) );
+	return find( formats, ( format ) => format.id === suggestedPostFormat );
+};
+
+export default compose(
+	withSelect( ( select ) => {
+		const { getEditedPostAttribute, getSuggestedPostFormat } = select( 'core/editor' );
+		const supportedFormats = get( select( 'core' ).getThemeSupports(), [ 'formats' ], [] );
+		return {
+			currentPostFormat: getEditedPostAttribute( 'format' ),
+			suggestion: getSuggestion( supportedFormats, getSuggestedPostFormat() ),
+		};
+	} ),
+	withDispatch( ( dispatch ) => ( {
+		onUpdatePostFormat( postFormat ) {
+			dispatch( 'core/editor' ).editPost( { format: postFormat } );
+		},
+	} ) ),
+	ifCondition( ( { suggestion, currentPostFormat } ) => suggestion && suggestion.id !== currentPostFormat ),
+)( PostFormatPanel );

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

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { compose, ifCondition } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+import { PanelBody } from '@wordpress/components';
+
+import FlatTermSelector from '../post-taxonomies/flat-term-selector';
+
+const TagsPanel = () => {
+	const panelBodyTitle = [
+		__( 'Suggestion:' ),
+		(
+			<span className="editor-post-publish-panel__link" key="label">
+				{ __( 'Add tags' ) }
+			</span>
+		),
+	];
+
+	return (
+		<PanelBody initialOpen={ false } title={ panelBodyTitle }>
+			<p>
+				{ __( 'Tags help users and search engines navigate your site and find your content. Add a few keywords to describe your post.' ) }
+			</p>
+			<FlatTermSelector slug={ 'post_tag' } />
+		</PanelBody>
+	);
+};
+
+class MaybeTagsPanel extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {
+			hadTagsWhenOpeningThePanel: props.hasTags,
+		};
+	}
+
+	/*
+	 * We only want to show the tag panel if the post didn't have
+	 * any tags when the user hit the Publish button.
+	 *
+	 * We can't use the prop.hasTags because it'll change to true
+	 * if the user adds a new tag within the pre-publish panel.
+	 * This would force a re-render and a new prop.hasTags check,
+	 * hiding this panel and keeping the user from adding
+	 * more than one tag.
+	 */
+	render() {
+		if ( ! this.state.hadTagsWhenOpeningThePanel ) {
+			return <TagsPanel />;
+		}
+
+		return null;
+	}
+}
+
+export default compose(
+	withSelect( ( select ) => {
+		const postType = select( 'core/editor' ).getCurrentPostType();
+		const tagsTaxonomy = select( 'core' ).getTaxonomy( 'post_tag' );
+		return {
+			areTagsFetched: tagsTaxonomy !== undefined,
+			isPostTypeSupported: tagsTaxonomy && tagsTaxonomy.types.some( ( type ) => type === postType ),
+			hasTags: tagsTaxonomy && select( 'core/editor' ).getEditedPostAttribute( tagsTaxonomy.rest_base ).length,
+		};
+	} ),
+	ifCondition( ( { areTagsFetched, isPostTypeSupported } ) => isPostTypeSupported && areTagsFetched ),
+)( MaybeTagsPanel );

packages/editor/src/components/post-publish-panel/prepublish.js

@@ -18,6 +18,8 @@ import PostVisibility from '../post-visibility';
 import PostVisibilityLabel from '../post-visibility/label';
 import PostSchedule from '../post-schedule';
 import PostScheduleLabel from '../post-schedule/label';
+import MaybeTagsPanel from './maybe-tags-panel';
+import MaybePostFormatPanel from './maybe-post-format-panel';
 
 function PostPublishPanelPrepublish( {
 	hasPublishAction,
@@ -41,6 +43,8 @@ function PostPublishPanelPrepublish( {
 					] }>
 						<PostSchedule />
 					</PanelBody>
+					<MaybePostFormatPanel />
+					<MaybeTagsPanel />
 					{ children }
 				</Fragment>
 			) }

packages/editor/src/components/post-publish-panel/style.scss

@@ -107,3 +107,7 @@
 .post-publish-panel__postpublish-header {
 	font-weight: 500;
 }
+
+.post-publish-panel__tip {
+	color: $alert-yellow;
+}