-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
PrePublishPanel: suggest tags and postformat (#8235)
- Loading branch information
Showing
5 changed files
with
153 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 74 additions & 0 deletions
74
packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 ); |
70 changes: 70 additions & 0 deletions
70
packages/editor/src/components/post-publish-panel/maybe-tags-panel.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters