From 35d4601f8f1aaf6e24495ac0ad402053aa53d773 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 25 Dec 2017 10:43:34 +0100 Subject: [PATCH 1/2] Chrome: Add a Post Publish Panel --- editor/components/post-publish-panel/index.js | 110 ++++++++++-------- .../post-publish-panel/postpublish.js | 84 +++++++++++++ .../post-publish-panel/prepublish.js | 36 ++++++ .../components/post-publish-panel/style.scss | 86 +++++++++++--- 4 files changed, 252 insertions(+), 64 deletions(-) create mode 100644 editor/components/post-publish-panel/postpublish.js create mode 100644 editor/components/post-publish-panel/prepublish.js diff --git a/editor/components/post-publish-panel/index.js b/editor/components/post-publish-panel/index.js index 6075809045eda8..49497486cc890a 100644 --- a/editor/components/post-publish-panel/index.js +++ b/editor/components/post-publish-panel/index.js @@ -2,75 +2,89 @@ * External dependencies */ import { connect } from 'react-redux'; +import { get } from 'lodash'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { compose } from '@wordpress/element'; -import { withAPIData, PanelBody, IconButton } from '@wordpress/components'; +import { compose, Component } from '@wordpress/element'; +import { withAPIData, IconButton, Spinner } from '@wordpress/components'; /** * Internal Dependencies */ import './style.scss'; -import PostVisibility from '../post-visibility'; -import PostVisibilityLabel from '../post-visibility/label'; -import PostSchedule from '../post-schedule'; -import PostScheduleLabel from '../post-schedule/label'; import PostPublishButton from '../post-publish-button'; -import { getCurrentPostType } from '../../store/selectors'; +import PostPublishPanelPrepublish from './prepublish'; +import PostPublishPanelPostpublish from './postpublish'; +import { getCurrentPostType, isCurrentPostPublished, isSavingPost } from '../../store/selectors'; -function PostPublishPanel( { onClose, user } ) { - const canPublish = user.data && user.data.capabilities.publish_posts; +class PostPublishPanel extends Component { + constructor() { + super( ...arguments ); + this.onPublish = this.onPublish.bind( this ); + this.state = { + loading: false, + published: false, + }; + } - return ( -
-
-
- -
- -
+ componentWillReceiveProps( newProps ) { + if ( + newProps.isPublished && + ! this.state.published && + ! newProps.isSaving + ) { + this.setState( { + published: true, + loading: false, + } ); + } + } + + onPublish() { + this.setState( { loading: true } ); + } -
-
{ __( 'Are you ready to publish?' ) }
-

{ __( 'Here, you can do a last-minute check up of your settings below, before you publish.' ) }

- { ! canPublish && -
- { __( 'Visibility' ) } - -
- } - { canPublish && - , - ] }> - - - } - { canPublish && - , - ] }> - - - } + render() { + const { onClose, user } = this.props; + const { loading, published } = this.state; + const canPublish = get( user.data, [ 'post_type_capabilities', 'publish_posts' ], false ); + + return ( +
+
+ { ! published && ( +
+ +
+ ) } + { published && ( +
{ __( 'Published' ) }
+ ) } + +
+
+ { canPublish && ! loading && ! published && } + { loading && ! published && } + { published && } +
-
- ); + ); + } } const applyConnect = connect( ( state ) => { return { postType: getCurrentPostType( state ), + isPublished: isCurrentPostPublished( state ), + isSaving: isSavingPost( state ), }; }, ); diff --git a/editor/components/post-publish-panel/postpublish.js b/editor/components/post-publish-panel/postpublish.js new file mode 100644 index 00000000000000..90e1095cfbbf87 --- /dev/null +++ b/editor/components/post-publish-panel/postpublish.js @@ -0,0 +1,84 @@ +/** + * External Dependencies + */ +import { connect } from 'react-redux'; + +/** + * WordPress Dependencies + */ +import { PanelBody, Button, ClipboardButton } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { Component } from '@wordpress/element'; + +/** + * Internal Dependencies + */ +import { getCurrentPost } from '../../store/selectors'; + +class PostPublishPanelPostpublish extends Component { + constructor() { + super( ...arguments ); + this.state = { + showCopyConfirmation: false, + }; + this.onCopy = this.onCopy.bind( this ); + this.onSelectInput = this.onSelectInput.bind( this ); + } + + componentWillUnmount() { + clearTimeout( this.dismissCopyConfirmation ); + } + + onCopy() { + this.setState( { + showCopyConfirmation: true, + } ); + + clearTimeout( this.dismissCopyConfirmation ); + this.dismissCopyConfirmation = setTimeout( () => { + this.setState( { + showCopyConfirmation: false, + } ); + }, 4000 ); + } + + onSelectInput( event ) { + event.target.select(); + } + + render() { + const { post } = this.props; + + return ( +
+ + { post.title || __( '(no title)' ) }{ __( ' is now live.' ) } + + +
{ __( 'What\'s next?' ) }
+ +
+ + + + { this.state.showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy Link' ) } + +
+ +
+ ); + } +} + +export default connect( + state => ( { + post: getCurrentPost( state ), + } ) +)( PostPublishPanelPostpublish ); diff --git a/editor/components/post-publish-panel/prepublish.js b/editor/components/post-publish-panel/prepublish.js new file mode 100644 index 00000000000000..ec48a249e0e3fd --- /dev/null +++ b/editor/components/post-publish-panel/prepublish.js @@ -0,0 +1,36 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { PanelBody } from '@wordpress/components'; + +/** + * Internal Dependencies + */ +import PostVisibility from '../post-visibility'; +import PostVisibilityLabel from '../post-visibility/label'; +import PostSchedule from '../post-schedule'; +import PostScheduleLabel from '../post-schedule/label'; + +function PostPublishPanelPrepublish() { + return ( +
+
{ __( 'Are you ready to publish?' ) }
+

{ __( 'Here, you can do a last-minute check up of your settings below, before you publish.' ) }

+ , + ] }> + + + , + ] }> + + +
+ ); +} + +export default PostPublishPanelPrepublish; diff --git a/editor/components/post-publish-panel/style.scss b/editor/components/post-publish-panel/style.scss index 43df306de9688e..87ffb0af337a5b 100644 --- a/editor/components/post-publish-panel/style.scss +++ b/editor/components/post-publish-panel/style.scss @@ -4,22 +4,10 @@ } .editor-post-publish-panel__content { - padding: 16px; - - .components-panel__body { - margin-left: -16px; - margin-right: -16px; - margin-bottom: -16px; - margin-top: 10px; - border: none; - - .components-panel__body-toggle { - font-weight: normal; - } - } - - .editor-post-visibility__dialog-legend { - display: none; + .spinner { + display: block; + float: none; + margin: 100px auto 0; } } @@ -37,6 +25,10 @@ text-align: right; } +.editor-post-publish-panel__header-published { + flex-grow: 1; +} + .wp-core-ui .editor-post-publish-panel__toggle.button-primary { display: inline-flex; align-items: center; @@ -54,3 +46,65 @@ color: $blue-medium-700; text-decoration: underline; } + +.editor-post-publish-panel__prepublish { + padding: 16px; + + .components-panel__body { + margin-left: -16px; + margin-right: -16px; + margin-bottom: -16px; + margin-top: 10px; + border: none; + + .components-panel__body-toggle { + font-weight: normal; + } + } + + .editor-post-visibility__dialog-legend { + display: none; + } +} + +.post-publish-panel__postpublish .components-panel__body { + border-bottom: 1px solid $light-gray-500; + border-top: none; +} + +.wp-core-ui .post-publish-panel__postpublish-buttons { + display: flex; + align-content: space-between; + + > * { + flex-grow: 1; + margin-right: 10px; + + &:last-child { + margin-right: 0; + } + } + + .components-button { + text-align: center; + } + + .components-clipboard-button { + width: 100%; + } +} + +.post-publish-panel__postpublish-link-input[readonly] { + width: 100%; + border: 1px solid $light-gray-500; + padding: 10px; + border-radius: $button-style__radius-roundrect; + margin: 15px 0; + background: $white; + overflow: hidden; + text-overflow: ellipsis; +} + +.post-publish-panel__postpublish-header { + font-weight: 500; +} From 55196f1692210504496881ddf55c8afdef305e5e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 4 Jan 2018 13:52:35 +0100 Subject: [PATCH 2/2] PostPublish Panel: Use a localized "View Post" label per CPT --- .../post-publish-panel/postpublish.js | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/editor/components/post-publish-panel/postpublish.js b/editor/components/post-publish-panel/postpublish.js index 90e1095cfbbf87..eead47a067ecee 100644 --- a/editor/components/post-publish-panel/postpublish.js +++ b/editor/components/post-publish-panel/postpublish.js @@ -1,19 +1,20 @@ /** * External Dependencies */ +import { get } from 'lodash'; import { connect } from 'react-redux'; /** * WordPress Dependencies */ -import { PanelBody, Button, ClipboardButton } from '@wordpress/components'; +import { PanelBody, Button, ClipboardButton, withAPIData } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; +import { Component, compose } from '@wordpress/element'; /** * Internal Dependencies */ -import { getCurrentPost } from '../../store/selectors'; +import { getCurrentPost, getCurrentPostType } from '../../store/selectors'; class PostPublishPanelPostpublish extends Component { constructor() { @@ -47,7 +48,8 @@ class PostPublishPanelPostpublish extends Component { } render() { - const { post } = this.props; + const { post, postType } = this.props; + const viewPostLabel = get( postType, [ 'data', 'labels', 'view_item' ] ); return (
@@ -64,7 +66,7 @@ class PostPublishPanelPostpublish extends Component { />
@@ -77,8 +79,24 @@ class PostPublishPanelPostpublish extends Component { } } -export default connect( - state => ( { - post: getCurrentPost( state ), - } ) -)( PostPublishPanelPostpublish ); +const applyConnect = connect( + ( state ) => { + return { + post: getCurrentPost( state ), + postTypeSlug: getCurrentPostType( state ), + }; + } +); + +const applyWithAPIData = withAPIData( ( props ) => { + const { postTypeSlug } = props; + + return { + postType: `/wp/v2/types/${ postTypeSlug }?context=edit`, + }; +} ); + +export default compose( [ + applyConnect, + applyWithAPIData, +] )( PostPublishPanelPostpublish );