Add a new page/post button on publish panel (#33276)

* Add a new page/post button on publish panel * Remove Back to Dashboard button * Add margin left to copy button * Remove sentence case and add css comments * Rename Add new post_type to Add Item * use post type label * Add classes to primary action buttons
WordPress · Jul 26, 2021 · 59530f3 · 59530f3
1 parent 26a9c45
commit 59530f3
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 19 deletions.
diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js
@@ -10,7 +10,7 @@ import { PanelBody, Button, TextControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
-import { safeDecodeURIComponent } from '@wordpress/url';
+import { addQueryArgs, safeDecodeURIComponent } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
@@ -92,8 +92,12 @@ class PostPublishPanelPostpublish extends Component {
 		const { children, isScheduled, post, postType } = this.props;
 		const postLabel = get( postType, [ 'labels', 'singular_name' ] );
 		const viewPostLabel = get( postType, [ 'labels', 'view_item' ] );
+		const addNewPostLabel = get( postType, [ 'labels', 'add_new_item' ] );
 		const link =
 			post.status === 'future' ? getFuturePostUrl( post ) : post.link;
+		const addLink = addQueryArgs( 'post-new.php', {
+			post_type: post.type,
+		} );
 
 		const postPublishNonLinkHeader = isScheduled ? (
 			<>
@@ -116,28 +120,40 @@ class PostPublishPanelPostpublish extends Component {
 					<p className="post-publish-panel__postpublish-subheader">
 						<strong>{ __( 'What’s next?' ) }</strong>
 					</p>
-					<TextControl
-						className="post-publish-panel__postpublish-post-address"
-						readOnly
-						label={ sprintf(
-							/* translators: %s: post type singular name */
-							__( '%s address' ),
-							postLabel
-						) }
-						value={ safeDecodeURIComponent( link ) }
-						onFocus={ this.onSelectInput }
-					/>
+					<div className="post-publish-panel__postpublish-post-address-container">
+						<TextControl
+							className="post-publish-panel__postpublish-post-address"
+							readOnly
+							label={ sprintf(
+								/* translators: %s: post type singular name */
+								__( '%s address' ),
+								postLabel
+							) }
+							value={ safeDecodeURIComponent( link ) }
+							onFocus={ this.onSelectInput }
+						/>
+
+						<div className="post-publish-panel__postpublish-post-address__copy-button-wrap">
+							<CopyButton text={ link } onCopy={ this.onCopy }>
+								{ this.state.showCopyConfirmation
+									? __( 'Copied!' )
+									: __( 'Copy' ) }
+							</CopyButton>
+						</div>
+					</div>
+
 					<div className="post-publish-panel__postpublish-buttons">
 						{ ! isScheduled && (
-							<Button variant="secondary" href={ link }>
+							<Button variant="primary" href={ link }>
 								{ viewPostLabel }
 							</Button>
 						) }
-						<CopyButton text={ link } onCopy={ this.onCopy }>
-							{ this.state.showCopyConfirmation
-								? __( 'Copied!' )
-								: __( 'Copy Link' ) }
-						</CopyButton>
+						<Button
+							variant={ isScheduled ? 'primary' : 'secondary' }
+							href={ addLink }
+						>
+							{ addNewPostLabel }
+						</Button>
 					</div>
 				</PanelBody>
 				{ children }

diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
@@ -141,6 +141,7 @@
 		height: auto;
 		justify-content: center;
 		padding: 3px 10px 4px;
+		flex: 1;
 		line-height: 1.6;
 		text-align: center;
 		white-space: normal;
@@ -151,9 +152,19 @@
 	}
 }
 
-.post-publish-panel__postpublish-post-address {
+.post-publish-panel__postpublish-post-address-container {
+	display: flex;
+	align-items: flex-end;
 	margin-bottom: $grid-unit-20;
 
+	.components-base-control__field {
+		margin-bottom: 0;
+	}
+
+	.post-publish-panel__postpublish-post-address {
+		flex: 1;
+	}
+
 	input[readonly] {
 		padding: 10px;
 		background: $gray-300;
@@ -162,6 +173,16 @@
 	}
 }
 
+.post-publish-panel__postpublish-post-address__copy-button-wrap {
+	flex-shrink: 0;
+	margin-left: 8px; // margin left for copy button
+
+	// match copy button height to the address field height
+	.components-button {
+		height: 38px;
+	}
+}
+
 .post-publish-panel__postpublish-header {
 	font-weight: 500;
 }
@@ -173,3 +194,12 @@
 .post-publish-panel__tip {
 	color: $alert-yellow;
 }
+
+@media screen and (max-width: 782px) {
+	.post-publish-panel__postpublish-post-address__button-wrap {
+		// match copy button height to the address field height in smaller screens
+		.components-button {
+			height: 40px;
+		}
+	}
+}