Chrome: Add a Post Publish Panel

WordPress · Dec 25, 2017 · 0c97780 · 0c97780
1 parent 79a74be
commit 0c97780
Show file tree

Hide file tree

Showing 4 changed files with 253 additions and 68 deletions.
diff --git 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 (
-		<div className="editor-post-publish-panel">
-			<div className="editor-post-publish-panel__header">
-				<div className="editor-post-publish-panel__header-publish-button">
-					<PostPublishButton onSubmit={ onClose } />
-				</div>
-				<IconButton
-					onClick={ onClose }
-					icon="no-alt"
-					label={ __( 'Close Publish Panel' ) }
-				/>
-			</div>
+	componentWillReceiveProps( newProps ) {
+		if (
+			newProps.isPublished &&
+			! this.state.published &&
+			! newProps.isSaving
+		) {
+			this.setState( {
+				published: true,
+				loading: false,
+			} );
+		}
+	}
 
-			<div className="editor-post-publish-panel__content">
-				<div><strong>{ __( 'All ready to go?' ) }</strong></div>
-				<p>{ __( 'Here, you can do a last-minute check up of your settings below, before you publish.' ) }</p>
-				{ ! canPublish &&
-					<div>
-						<span>{ __( 'Visibility' ) }</span>
-						<span><PostVisibilityLabel /></span>
-					</div>
-				}
-				{ canPublish &&
-					<PanelBody initialOpen={ false } title={ [
-						__( 'Visibility: ' ),
-						<span className="editor-post-publish-panel__link" key="label"><PostVisibilityLabel /></span>,
-					] }>
-						<PostVisibility />
-					</PanelBody>
-				}
-				{ canPublish &&
-					<PanelBody initialOpen={ false } title={ [
-						__( 'Publish: ' ),
-						<span className="editor-post-publish-panel__link" key="label"><PostScheduleLabel /></span>,
-					] }>
-						<PostSchedule />
-					</PanelBody>
-				}
-			</div>
+	onPublish() {
+		this.setState( { loading: true } );
+	}
 
-			<div className="editor-post-publish-panel__footer">
-				<PostSwitchToDraftButton />
+	render() {
+		const { onClose, user } = this.props;
+		const { loading, published } = this.state;
+		const canPublish = get( user.data, [ 'post_type_capabilities', 'publish_posts' ], false );
+
+		return (
+			<div className="editor-post-publish-panel">
+				<div className="editor-post-publish-panel__header">
+					{ ! published && (
+						<div className="editor-post-publish-panel__header-publish-button">
+							<PostPublishButton onSubmit={ this.onPublish } />
+						</div>
+					) }
+					{ published && (
+						<div className="editor-post-publish-panel__header-published">{ __( 'Published' ) }</div>
+					) }
+					<IconButton
+						onClick={ onClose }
+						icon="no-alt"
+						label={ __( 'Close Publish Panel' ) }
+					/>
+				</div>
+
+				<div className="editor-post-publish-panel__content">
+					{ canPublish && ! loading && ! published && <PostPublishPanelPrepublish /> }
+					{ loading && ! published && <Spinner /> }
+					{ published && <PostPublishPanelPostpublish /> }
+				</div>
 			</div>
-		</div>
-	);
+		);
+	}
 }
 
 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
@@ -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 (
+			<div className="post-publish-panel__postpublish">
+				<PanelBody className="post-publish-panel__postpublish-header">
+					<a href={ post.link }>{ post.title || __( '(no title)' ) }</a>{ __( ' is now live.' ) }
+				</PanelBody>
+				<PanelBody>
+					<div><strong>{ __( 'What\'s next?' ) }</strong></div>
+					<input
+						className="post-publish-panel__postpublish-link-input"
+						type="text"
+						readOnly
+						value={ post.link }
+						onClick={ this.onSelectInput }
+					/>
+					<div className="post-publish-panel__postpublish-buttons">
+						<Button className="button" href={ post.link }>
+							{ __( 'View Post' ) }
+						</Button>
+
+						<ClipboardButton className="button" text={ post.link } onCopy={ this.onCopy }>
+							{ this.state.showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy Link' ) }
+						</ClipboardButton>
+					</div>
+				</PanelBody>
+			</div>
+		);
+	}
+}
+
+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
@@ -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 (
+		<div className="editor-post-publish-panel__prepublish">
+			<div><strong>{ __( 'All ready to go?' ) }</strong></div>
+			<p>{ __( 'Here, you can do a last-minute check up of your settings below, before you publish.' ) }</p>
+			<PanelBody initialOpen={ false } title={ [
+				__( 'Visibility: ' ),
+				<span className="editor-post-publish-panel__link" key="label"><PostVisibilityLabel /></span>,
+			] }>
+				<PostVisibility />
+			</PanelBody>
+			<PanelBody initialOpen={ false } title={ [
+				__( 'Publish: ' ),
+				<span className="editor-post-publish-panel__link" key="label"><PostScheduleLabel /></span>,
+			] }>
+				<PostSchedule />
+			</PanelBody>
+		</div>
+	);
+}
+
+export default PostPublishPanelPrepublish;
diff --git 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;
+}