diff --git a/editor/components/post-publish-panel/index.js b/editor/components/post-publish-panel/index.js index 0d64c3dac1539..978a6fec66b70 100644 --- a/editor/components/post-publish-panel/index.js +++ b/editor/components/post-publish-panel/index.js @@ -2,80 +2,90 @@ * 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 PostSwitchToDraftButton from '../post-switch-to-draft-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, + } ); + } + } -
-
{ __( 'All ready to go?' ) }
-

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

- { ! canPublish && -
- { __( 'Visibility' ) } - -
- } - { canPublish && - , - ] }> - - - } - { canPublish && - , - ] }> - - - } -
+ onPublish() { + this.setState( { loading: true } ); + } -
- + 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 0000000000000..efc045b577e64 --- /dev/null +++ b/editor/components/post-publish-panel/postpublish.js @@ -0,0 +1,85 @@ +/** + * 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 0000000000000..d233060cdb9b0 --- /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 ( +
+
{ __( 'All ready to go?' ) }
+

{ __( '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 d2c5774fd84d8..c1f690363d98d 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; +} + .editor-post-publish-panel__footer { padding: 16px; } @@ -59,3 +51,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-bottom: 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; +}