WIP: Try new publishing flow

edit-post/components/layout/style.scss

@@ -101,43 +101,24 @@
 	}
 }
 
+// Pre-publish panel. Should perhaps be shifted to the post-publish-panel component?
 .edit-post-layout .editor-post-publish-panel {
 	position: fixed;
 	z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
 	top: $admin-bar-height-big;
 	bottom: 0;
 	right: 0;
-	left: 0;
+	left: auto;
 	overflow: auto;
+	border-left: $border-width solid $light-gray-500;
+	@include slide_in_right;
 
 	body.is-fullscreen-mode & {
 		top: 0;
 	}
 
 	@include break-medium() {
 		top: $admin-bar-height;
-		left: auto;
-		width: $sidebar-width;
-		border-left: $border-width solid $light-gray-500;
-		@include slide_in_right;
-
-		body.is-fullscreen-mode & {
-			top: 0;
-		}
-	}
-}
-
-.edit-post-layout .editor-post-publish-panel__header-publish-button {
-	// Match the size of the Publish... button.
-	.components-button.is-large {
-		height: 33px;
-		line-height: 32px;
-	}
-
-	// Size the spacer flexibly to allow for different button lengths.
-	.editor-post-publish-panel__spacer {
-		display: inline-flex;
-		flex: 0 1 52px; // This number is approximative to keep the publish button at the same position when opening the panel
 	}
 }
 

packages/editor/src/components/post-publish-panel/index.js

@@ -62,22 +62,24 @@ class PostPublishPanel extends Component {
 	}
 
 	render() {
-		const { isScheduled, isPublishSidebarEnabled, onClose, onTogglePublishSidebar, forceIsDirty, forceIsSaving, PrePublishExtension, PostPublishExtension, ...additionalProps } = this.props;
+		const { hasPublishAction, isScheduled, isBeingScheduled, isPublishSidebarEnabled, onClose, onTogglePublishSidebar, forceIsDirty, forceIsSaving, PrePublishExtension, PostPublishExtension, ...additionalProps } = this.props;
 		const { loading, submitted } = this.state;
+		let prePublishTitle;
+
+		if ( ! hasPublishAction ) {
+			prePublishTitle = __( 'Ready to submit for review?' );
+		} else if ( isBeingScheduled ) {
+			prePublishTitle = __( 'Ready to schedule?' );
+		} else {
+			prePublishTitle = __( 'Ready to publish?' );
+		}
 		return (
 			<div className="editor-post-publish-panel" { ...additionalProps }>
 				<div className="editor-post-publish-panel__header">
-					{ ! submitted && (
-						<div className="editor-post-publish-panel__header-publish-button">
-							<PostPublishButton focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
-							<span className="editor-post-publish-panel__spacer"></span>
-						</div>
-					) }
-					{ submitted && (
-						<div className="editor-post-publish-panel__header-published">
-							{ isScheduled ? __( 'Scheduled' ) : __( 'Published' ) }
-						</div>
-					) }
+					<strong className="editor-post-publish-panel__title">
+						{ prePublishTitle }
+					</strong>
+
 					<IconButton
 						aria-expanded={ true }
 						onClick={ onClose }
@@ -98,13 +100,28 @@ class PostPublishPanel extends Component {
 						</PostPublishPanelPostpublish>
 					) }
 				</div>
-				<div className="editor-post-publish-panel__footer">
+
+				<div className="editor-post-publish-panel__action-buttons">
+					{ ! submitted && (
+						<div className="editor-post-publish-panel__header-publish-button">
+							<PostPublishButton focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
+						</div>
+					) }
+					{ submitted && (
+						<div className="editor-post-publish-panel__header-published">
+							{ isScheduled ? __( 'Scheduled' ) : __( 'Published' ) }
+						</div>
+					) }
+				</div>
+
+				<div className="editor-post-publish-panel__disable-check">
 					<CheckboxControl
 						label={ __( 'Always show pre-publish checks.' ) }
 						checked={ isPublishSidebarEnabled }
 						onChange={ onTogglePublishSidebar }
 					/>
 				</div>
+
 			</div>
 		);
 	}
@@ -117,6 +134,7 @@ export default compose( [
 			getCurrentPostType,
 			isCurrentPostPublished,
 			isCurrentPostScheduled,
+			isEditedPostBeingScheduled,
 			isSavingPost,
 			isEditedPostDirty,
 		} = select( 'core/editor' );
@@ -126,6 +144,7 @@ export default compose( [
 			hasPublishAction: get( getCurrentPost(), [ '_links', 'wp:action-publish' ], false ),
 			isPublished: isCurrentPostPublished(),
 			isScheduled: isCurrentPostScheduled(),
+			isBeingScheduled: isEditedPostBeingScheduled(),
 			isSaving: isSavingPost(),
 			isDirty: isEditedPostDirty(),
 			isPublishSidebarEnabled: isPublishSidebarEnabled(),

packages/editor/src/components/post-publish-panel/prepublish.js

@@ -26,23 +26,20 @@ function PostPublishPanelPrepublish( {
 	isBeingScheduled,
 	children,
 } ) {
-	let prePublishTitle, prePublishBodyText;
+	let prePublishBodyText;
 
 	if ( ! hasPublishAction ) {
-		prePublishTitle = __( 'Are you ready to submit for review?' );
 		prePublishBodyText = __( 'When you’re ready, submit your work for review, and an Editor will be able to approve it for you.' );
 	} else if ( isBeingScheduled ) {
-		prePublishTitle = __( 'Are you ready to schedule?' );
 		prePublishBodyText = __( 'Your post will be published at the specified date and time.' );
 	} else {
-		prePublishTitle = __( 'Are you ready to publish?' );
 		prePublishBodyText = __( 'Double-check your settings, then use the button to publish your post.' );
 	}
 
 	return (
 		<div className="editor-post-publish-panel__prepublish">
-			<div><strong>{ prePublishTitle }</strong></div>
 			<p>{ prePublishBodyText }</p>
+
 			{ hasPublishAction && (
 				<Fragment>
 					<PanelBody initialOpen={ false } title={ [

packages/editor/src/components/post-publish-panel/style.scss

@@ -1,8 +1,18 @@
+// Overall panel styles.
 .editor-post-publish-panel {
 	background: $white;
 	color: $dark-gray-500;
+	right: 0;
+	left: auto;
+	padding: 32px 32px 18px; // We're doubling standard padding to make it feel a bit more spacious.
+	width: 420px;
+	max-width: calc(100% - 20px);
+	display: flex;
+	flex-direction: column;
+	justify-content: normal;
 }
 
+// Spinner shows whilst publishing. Maybe we should change it.
 .editor-post-publish-panel__content {
 	.components-spinner {
 		display: block;
@@ -11,77 +21,87 @@
 	}
 }
 
+// Panel header.
 .editor-post-publish-panel__header {
-	background: $white;
-	padding-left: 16px;
-	height: $header-height;
-	border-bottom: $border-width solid $light-gray-500;
 	display: flex;
 	align-items: center;
-	align-content: space-between;
+	justify-content: space-between;
+	color: $dark-gray-900;
 }
 
-.editor-post-publish-panel__header-publish-button {
-	display: flex;
-	justify-content: flex-end;
-	flex-grow: 1;
-	text-align: right;
-	flex-wrap: nowrap;
+.editor-post-publish-panel__title {
+	font-size: 15px;
 }
 
-.editor-post-publish-panel__header-published {
-	flex-grow: 1;
+// Individual sub-panels, mostly resetting a bunch of things here to simplify styling.
+.editor-post-publish-panel .components-panel__body-toggle.components-button {
+	padding: 20px 0;
 }
 
-.editor-post-publish-panel__footer {
-	padding: 16px;
-	position: absolute;
-	bottom: 0;
+.editor-post-publish-panel__link {
+	color: $blue-dark-900;
+	font-weight: 400;
+	padding-left: 4px;
 }
 
-.components-button.editor-post-publish-panel__toggle.is-primary {
-	display: inline-flex;
-	align-items: center;
-
-	&.is-busy .dashicon {
-		display: none;
-	}
+.editor-post-publish-panel .components-panel__body {
+	border-top: 0;
+	border-bottom: 0;
+	padding: 0;
+}
 
-	.dashicon {
-		margin-right: -4px;
-	}
+.editor-post-publish-panel .components-panel__body.is-opened {
+	padding-bottom: 16px;
 }
 
-.editor-post-publish-panel__link {
-	color: $blue-medium-700;
-	font-weight: 400;
-	padding-left: 4px;
-	text-decoration: underline;
+.editor-post-publish-panel .components-panel__body.is-opened > .components-panel__body-title {
+	margin: 0;
 }
 
 .editor-post-publish-panel__prepublish {
-	padding: 16px;
-
 	strong {
 		color: $dark-gray-900;
 	}
 
-	.components-panel__body {
-		background: $white;
-		margin-left: -16px;
-		margin-right: -16px;
-	}
-
 	.editor-post-visibility__dialog-legend {
 		display: none;
 	}
+
+	.editor-post-visibility__choice input[type="radio"] {
+		margin-right: 4px;
+	}
+
+	.editor-post-visibility__choice input[type="radio"] + label {
+		vertical-align: top;
+	}
+
+	.editor-post-visibility__choice {
+		padding-bottom: 8px;
+	}
+
+	.editor-post-visibility__dialog-info {
+		margin-top: 0.5em;
+	}
+}
+
+// Action buttons (used for publishing button and flow)
+.editor-post-publish-panel__action-buttons {
+	padding: 32px;
+	text-align: center;
 }
 
-.post-publish-panel__postpublish .components-panel__body {
-	border-bottom: $border-width solid $light-gray-500;
-	border-top: none;
+.components-button.editor-post-publish-button {
+	justify-content: center;
+	padding: 6px 32px;
+	height: auto;
+	font-size: 15px;
+	text-shadow: none;
+	box-shadow: none;
+	border-radius: 6px;
+	background: $blue-dark-900;
 }
 
+// Buttons that appear in post-publish panel. (Probably will move to their own component.)
 .post-publish-panel__postpublish-buttons {
 	display: flex;
 	align-content: space-between;
@@ -104,6 +124,26 @@
 	}
 }
 
+// Checkbox to disable pre-publish panel.
+.editor-post-publish-panel__disable-check {
+	margin-top: auto; // Since our parent container uses flexbox, this floats the checkmark to the bottom of the screen.
+}
+
+// A toggle of some sort? May not be needed anymore.
+.components-button.editor-post-publish-panel__toggle.is-primary {
+	display: inline-flex;
+	align-items: center;
+
+	&.is-busy .dashicon {
+		display: none;
+	}
+
+	.dashicon {
+		margin-right: -4px;
+	}
+}
+
+// MYSTERY.
 .post-publish-panel__postpublish-link-input[readonly] {
 	width: 100%;
 	padding: 10px;
@@ -112,11 +152,3 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-
-.post-publish-panel__postpublish-header {
-	font-weight: 500;
-}
-
-.post-publish-panel__tip {
-	color: $alert-yellow;
-}