diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js index b7d7179d024bc..aaa7de20400ca 100644 --- 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 {

{ __( 'What’s next?' ) }

- +
+ + +
+ + { this.state.showCopyConfirmation + ? __( 'Copied!' ) + : __( 'Copy' ) } + +
+
+
{ ! isScheduled && ( - ) } - - { this.state.showCopyConfirmation - ? __( 'Copied!' ) - : __( 'Copy Link' ) } - +
{ children } diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index 24d1269e2ebc3..b98dd9bf2ab3a 100644 --- 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; + } + } +}