Restyle pre-publish panel to have some extra breathing space.

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

@@ -63,21 +63,14 @@ class PostPublishPanel extends Component {
 
 	render() {
 		const { isScheduled, isPublishSidebarEnabled, onClose, onTogglePublishSidebar, forceIsDirty, forceIsSaving, PrePublishExtension, PostPublishExtension, ...additionalProps } = this.props;
-		const { loading, submitted } = this.state;
+		const { loading, submitted, hasPublishAction } = this.state;
 		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">
+						{ hasPublishAction ? __( 'Ready to submit for review?' ) : __( 'Ready to publish?' ) }
+					</strong>
+
 					<IconButton
 						aria-expanded={ true }
 						onClick={ onClose }
@@ -98,12 +91,18 @@ class PostPublishPanel extends Component {
 						</PostPublishPanelPostpublish>
 					) }
 				</div>
+
 				<div className="editor-post-publish-panel__footer">
-					<CheckboxControl
-						label={ __( 'Always show pre-publish checks.' ) }
-						checked={ isPublishSidebarEnabled }
-						onChange={ onTogglePublishSidebar }
-					/>
+					{ ! 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>
 		);

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

@@ -43,6 +43,7 @@ function PostPublishPanelPrepublish( {
 		<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,15 @@
+// Overall panel styles.
 .editor-post-publish-panel {
 	background: $white;
 	color: $dark-gray-500;
+	right: 0;
+	left: auto;
+	padding: 32px; // We're doubling standard padding to make it feel a bit more spacious.
+	width: 420px;
+	max-width: calc(100% - 20px);
 }
 
+// Loading spinner?
 .editor-post-publish-panel__content {
 	.components-spinner {
 		display: block;
@@ -11,77 +18,60 @@
 	}
 }
 
+// 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;
-}
-
-.editor-post-publish-panel__header-publish-button {
-	display: flex;
-	justify-content: flex-end;
-	flex-grow: 1;
-	text-align: right;
-	flex-wrap: nowrap;
+	justify-content: space-between;
+	color: $dark-gray-900;
 }
 
-.editor-post-publish-panel__header-published {
-	flex-grow: 1;
+.editor-post-publish-panel__title {
+	font-size: 15px;
 }
 
-.editor-post-publish-panel__footer {
-	padding: 16px;
-	position: absolute;
-	bottom: 0;
-}
-
-.components-button.editor-post-publish-panel__toggle.is-primary {
-	display: inline-flex;
-	align-items: center;
-
-	&.is-busy .dashicon {
-		display: none;
-	}
-
-	.dashicon {
-		margin-right: -4px;
-	}
+// 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__link {
-	color: $blue-medium-700;
+	color: $blue-dark-900;
 	font-weight: 400;
 	padding-left: 4px;
-	text-decoration: underline;
 }
 
-.editor-post-publish-panel__prepublish {
-	padding: 16px;
+.editor-post-publish-panel .components-panel__body {
+	border-top: 0;
+	padding: 0;
+}
 
-	strong {
-		color: $dark-gray-900;
-	}
+.editor-post-publish-panel .components-panel__body.is-opened {
+	padding-bottom: 16px;
+}
 
-	.components-panel__body {
-		background: $white;
-		margin-left: -16px;
-		margin-right: -16px;
-	}
+.editor-post-publish-panel .components-panel__body.is-opened > .components-panel__body-title {
+	margin: 0;
+}
 
-	.editor-post-visibility__dialog-legend {
-		display: none;
-	}
+// Panel footer (publish button)
+.editor-post-publish-panel__footer {
+	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 +94,21 @@
 	}
 }
 
+// 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 +117,3 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-
-.post-publish-panel__postpublish-header {
-	font-weight: 500;
-}
-
-.post-publish-panel__tip {
-	color: $alert-yellow;
-}