Update text and styling of pre-publish section of publishing modal

WordPress · Aug 23, 2019 · d6abe21 · d6abe21
1 parent 97a9fb5
commit d6abe21
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/packages/editor/src/components/post-publish-modal/index.js b/packages/editor/src/components/post-publish-modal/index.js
@@ -14,6 +14,7 @@ import {
 	withFocusReturn,
 	withConstrainedTabbing,
 	Modal,
+	Button,
 } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -72,14 +73,14 @@ export class PostPublishModal extends Component {
 			modalTitle = isScheduled ? __( 'Scheduling' ) : __( 'Publishing' );
 		} else if ( isPrePublish ) {
 			if ( ! hasPublishAction ) {
-				modalTitle = __( 'Are you ready to submit for review?' );
+				modalTitle = __( 'Ready to submit for review?' );
 			} else if ( isBeingScheduled ) {
-				modalTitle = __( 'Are you ready to schedule?' );
+				modalTitle = __( 'Ready to schedule?' );
 			} else {
-				modalTitle = __( 'Are you ready to publish?' );
+				modalTitle = __( 'Ready to publish?' );
 			}
 		} else {
-			modalTitle = isScheduled ? __( 'Scheduled' ) : __( 'Published' );
+			modalTitle = isScheduled ? __( 'Post Scheduled' ) : __( 'Post Published!' ); //TODO: update Post with Post/Page/Custom type
 		}
 		return (
 			<Modal
@@ -111,8 +112,11 @@ export class PostPublishModal extends Component {
 					) }
 
 					{ ! isPostPublish && (
-						<div className="editor-post-publish-modal__header-publish-button">
-							<PostPublishButton focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
+						<div className="editor-post-publish-modal__content-publish-controls">
+							<Button isLink isLarge className="editor-post-publish-modal__content-cancel-button">
+								{ __( 'Cancel' ) }
+							</Button>
+							<PostPublishButton className="editor-post-publish-modal__content-cancel-button" focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
 							<span className="editor-post-publish-modal__spacer"></span>
 						</div>
 					) }

diff --git a/packages/editor/src/components/post-publish-modal/prepublish.js b/packages/editor/src/components/post-publish-modal/prepublish.js
@@ -35,7 +35,7 @@ function PostPublishModalPrepublish( {
 	if ( ! hasPublishAction ) {
 		prePublishBodyText = __( 'When you’re ready, submit your work for review, and an Editor will be able to approve it for you.' );
 	} else {
-		prePublishBodyText = __( 'Double-check your settings before publishing.' );
+		prePublishBodyText = __( 'Double-check your settings, then publish your post.' );
 	}
 
 	if ( isFloating ) {
@@ -55,24 +55,24 @@ function PostPublishModalPrepublish( {
 				<>
 					<div className="editor-post-publish-modal-panel">
 						<div className="editor-post-publish-modal-panel__heading">
-							{ __( 'Visibility:' ) }
+							{ __( 'Publish:' ) }
 						</div>
 						<div className="editor-post-publish-modal-panel__value">
-							<PostVisibilityLabel />
+							<PostScheduleLabel />
 						</div>
 						<div className="editor-post-publish-modal__detail">
-							{ getVisibilityInfo( visibility ) }
+							{ prePublishDateText }
 						</div>
 					</div>
 					<div className="editor-post-publish-modal-panel">
 						<div className="editor-post-publish-modal-panel__heading">
-							{ __( 'Publish:' ) }
+							{ __( 'Visibility:' ) }
 						</div>
 						<div className="editor-post-publish-modal-panel__value">
-							<PostScheduleLabel />
+							<PostVisibilityLabel />
 						</div>
 						<div className="editor-post-publish-modal__detail">
-							{ prePublishDateText }
+							{ getVisibilityInfo( visibility ) }
 						</div>
 					</div>
 					<div className="editor-post-publish-modal-panel">

diff --git a/packages/editor/src/components/post-publish-modal/style.scss b/packages/editor/src/components/post-publish-modal/style.scss
@@ -1,9 +1,24 @@
 .editor-post-publish-modal {
 	min-width: 600px;
 }
+
+.editor-post-publish-modal .components-modal__header {
+	border-bottom: none;
+	margin-bottom: 12px;
+}
+
+.editor-post-publish-modal .components-modal__header .components-modal__header-heading {
+	font-weight: 400;
+	font-size: 23px;
+	line-height: 18px;
+	text-align: center;
+	letter-spacing: -0.5px;
+}
+
 .editor-post-publish-modal-panel {
 	padding: 16px 0;
 }
+
 .editor-post-publish-modal-panel__heading {
 	font-size: 13px;
 	line-height: 18px;
@@ -31,3 +46,13 @@
 .post-publish-modal__postpublish-post-address .components-text-control__input {
 	width: 80%;
 }
+
+.editor-post-publish-modal__content-publish-controls {
+	text-align: right;
+}
+.editor-post-publish-modal__content-cancel-button {
+	margin: 0 3px 0 12px;
+}
+.editor-post-publish-modal__content-publish-button {
+	margin: 0 3px 0 12px;
+}