diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js index baa86daeeb7d1..3d063ff3b1813 100644 --- a/packages/editor/src/components/post-format/index.js +++ b/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' ) }, 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 new file mode 100644 index 0000000000000..81e89698b4bf9 --- /dev/null +++ b/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 } ) => ( + +); + +const PostFormatPanel = ( { suggestion, onUpdatePostFormat } ) => { + const panelBodyTitle = [ + __( 'Suggestion:' ), + ( + + { __( 'Use a post format' ) } + + ), + ]; + + return ( + +

+ { __( 'Your theme uses post formats to highlight different kinds of content, like images or videos. Apply a post format to see this special styling.' ) } +

+

+ +

+
+ ); +}; + +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 ); diff --git a/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js b/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js new file mode 100644 index 0000000000000..1006a83243e1e --- /dev/null +++ b/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:' ), + ( + + { __( 'Add tags' ) } + + ), + ]; + + return ( + +

+ { __( 'Tags help users and search engines navigate your site and find your content. Add a few keywords to describe your post.' ) } +

+ +
+ ); +}; + +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 ; + } + + 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 ); diff --git a/packages/editor/src/components/post-publish-panel/prepublish.js b/packages/editor/src/components/post-publish-panel/prepublish.js index 9e7b52f1cd0f9..4f8066534bc0c 100644 --- a/packages/editor/src/components/post-publish-panel/prepublish.js +++ b/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( { ] }> + + { children } ) } diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index 884ec28d5c8cc..65125a08b5e77 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/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; +}