Skip to content

Commit

Permalink
PrePublishPanel: suggest tags and postformat (#8235)
Browse files Browse the repository at this point in the history
  • Loading branch information
nosolosw authored Aug 13, 2018
1 parent 0595c3e commit 28e00cd
Show file tree
Hide file tree
Showing 5 changed files with 153 additions and 1 deletion.
2 changes: 1 addition & 1 deletion packages/editor/src/components/post-format/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) },
Expand Down
Original file line number Diff line number Diff line change
@@ -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 );
Original file line number Diff line number Diff line change
@@ -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 );
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -41,6 +43,8 @@ function PostPublishPanelPrepublish( {
] }>
<PostSchedule />
</PanelBody>
<MaybePostFormatPanel />
<MaybeTagsPanel />
{ children }
</Fragment>
) }
Expand Down
4 changes: 4 additions & 0 deletions packages/editor/src/components/post-publish-panel/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -107,3 +107,7 @@
.post-publish-panel__postpublish-header {
font-weight: 500;
}

.post-publish-panel__tip {
color: $alert-yellow;
}

0 comments on commit 28e00cd

Please sign in to comment.