From 5f8719934dd25529673c9d96764eb27b9c88e729 Mon Sep 17 00:00:00 2001 From: thisissandip Date: Thu, 8 Jul 2021 02:47:07 +0530 Subject: [PATCH 1/7] Add a new page/post button on publish panel --- .../post-publish-panel/postpublish.js | 64 +++++++++++++------ .../components/post-publish-panel/style.scss | 42 +++++++++++- 2 files changed, 87 insertions(+), 19 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js index b7d7179d024bc3..d73920fc044f7f 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'; @@ -50,6 +50,11 @@ function CopyButton( { text, onCopy, children } ) { ); } +function ConvertToSentenceCase( string ) { + const sentence = string.toLowerCase(); + return sentence.charAt( 0 ).toUpperCase() + sentence.slice( 1 ); +} + class PostPublishPanelPostpublish extends Component { constructor() { super( ...arguments ); @@ -91,9 +96,18 @@ class PostPublishPanelPostpublish extends Component { render() { const { children, isScheduled, post, postType } = this.props; const postLabel = get( postType, [ 'labels', 'singular_name' ] ); - const viewPostLabel = get( postType, [ 'labels', 'view_item' ] ); + const viewPostLabel = ConvertToSentenceCase( + get( postType, [ 'labels', 'view_item' ] ) + ); + const addNewPostLabel = ConvertToSentenceCase( + 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 dashboardLink = addQueryArgs( 'index.php', {} ); const postPublishNonLinkHeader = isScheduled ? ( <> @@ -116,28 +130,42 @@ 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 24d1269e2ebc3d..42584cbba7a506 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__button-wrap { + flex-shrink: 0; + margin-left: 0 !important; + + .components-button { + height: 38px; + } +} + + .post-publish-panel__postpublish-header { font-weight: 500; } @@ -173,3 +194,22 @@ .post-publish-panel__tip { color: $alert-yellow; } + +.post-publish-panel__dashboard-link { + margin-top: $grid-unit-15; + display: flex; + justify-content: center; + + .components-button { + color: inherit; + text-decoration: none; + } +} + +@media screen and (max-width: 782px) { + .post-publish-panel__postpublish-post-address__button-wrap { + .components-button { + height: 40px; + } + } +} From bd7ca66048bc5f8c805363753ebdf501a878144b Mon Sep 17 00:00:00 2001 From: thisissandip Date: Thu, 8 Jul 2021 16:08:46 +0530 Subject: [PATCH 2/7] Remove Back to Dashboard button --- .../src/components/post-publish-panel/postpublish.js | 6 ------ .../src/components/post-publish-panel/style.scss | 11 ----------- 2 files changed, 17 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js index d73920fc044f7f..2be0c652219eb6 100644 --- a/packages/editor/src/components/post-publish-panel/postpublish.js +++ b/packages/editor/src/components/post-publish-panel/postpublish.js @@ -107,7 +107,6 @@ class PostPublishPanelPostpublish extends Component { const addLink = addQueryArgs( 'post-new.php', { post_type: post.type, } ); - const dashboardLink = addQueryArgs( 'index.php', {} ); const postPublishNonLinkHeader = isScheduled ? ( <> @@ -162,11 +161,6 @@ class PostPublishPanelPostpublish extends Component { { addNewPostLabel } -
- -
{ children } diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index 42584cbba7a506..03b8bb3e377410 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -195,17 +195,6 @@ color: $alert-yellow; } -.post-publish-panel__dashboard-link { - margin-top: $grid-unit-15; - display: flex; - justify-content: center; - - .components-button { - color: inherit; - text-decoration: none; - } -} - @media screen and (max-width: 782px) { .post-publish-panel__postpublish-post-address__button-wrap { .components-button { From 5a98ff13e83ef162c337b0ebac3bf7f04fd39eb8 Mon Sep 17 00:00:00 2001 From: thisissandip Date: Thu, 15 Jul 2021 02:19:08 +0530 Subject: [PATCH 3/7] Add margin left to copy button --- packages/editor/src/components/post-publish-panel/style.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index 03b8bb3e377410..33a9fea4d3541f 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -175,8 +175,7 @@ .post-publish-panel__postpublish-post-address__button-wrap { flex-shrink: 0; - margin-left: 0 !important; - + margin-left: 8px; .components-button { height: 38px; } From a3fcc94299e7963a992af16ace700c906a0e1751 Mon Sep 17 00:00:00 2001 From: thisissandip Date: Sat, 17 Jul 2021 02:39:00 +0530 Subject: [PATCH 4/7] Remove sentence case and add css comments --- .../components/post-publish-panel/postpublish.js | 15 +++------------ .../src/components/post-publish-panel/style.scss | 8 +++++--- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js index 2be0c652219eb6..ae2ac0eac1c31f 100644 --- a/packages/editor/src/components/post-publish-panel/postpublish.js +++ b/packages/editor/src/components/post-publish-panel/postpublish.js @@ -50,11 +50,6 @@ function CopyButton( { text, onCopy, children } ) { ); } -function ConvertToSentenceCase( string ) { - const sentence = string.toLowerCase(); - return sentence.charAt( 0 ).toUpperCase() + sentence.slice( 1 ); -} - class PostPublishPanelPostpublish extends Component { constructor() { super( ...arguments ); @@ -96,12 +91,8 @@ class PostPublishPanelPostpublish extends Component { render() { const { children, isScheduled, post, postType } = this.props; const postLabel = get( postType, [ 'labels', 'singular_name' ] ); - const viewPostLabel = ConvertToSentenceCase( - get( postType, [ 'labels', 'view_item' ] ) - ); - const addNewPostLabel = ConvertToSentenceCase( - get( postType, [ 'labels', 'add_new_item' ] ) - ); + 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', { @@ -142,7 +133,7 @@ class PostPublishPanelPostpublish extends Component { onFocus={ this.onSelectInput } /> -
+
{ this.state.showCopyConfirmation ? __( 'Copied!' ) diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index 33a9fea4d3541f..b98dd9bf2ab3ad 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -173,15 +173,16 @@ } } -.post-publish-panel__postpublish-post-address__button-wrap { +.post-publish-panel__postpublish-post-address__copy-button-wrap { flex-shrink: 0; - margin-left: 8px; + 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; } @@ -196,6 +197,7 @@ @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; } From da7003468f0d633e0fb75248c240aca74aa5f7ec Mon Sep 17 00:00:00 2001 From: thisissandip Date: Sat, 17 Jul 2021 02:51:00 +0530 Subject: [PATCH 5/7] Rename Add new post_type to Add Item --- .../editor/src/components/post-publish-panel/postpublish.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js index ae2ac0eac1c31f..45e918d7b23ea4 100644 --- a/packages/editor/src/components/post-publish-panel/postpublish.js +++ b/packages/editor/src/components/post-publish-panel/postpublish.js @@ -92,7 +92,6 @@ 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', { @@ -149,7 +148,7 @@ class PostPublishPanelPostpublish extends Component { ) }
From 3abaebfc50217562afcbec11672ec0021b544556 Mon Sep 17 00:00:00 2001 From: thisissandip Date: Thu, 22 Jul 2021 12:39:23 +0530 Subject: [PATCH 6/7] use post type label --- .../editor/src/components/post-publish-panel/postpublish.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js index 45e918d7b23ea4..ae2ac0eac1c31f 100644 --- a/packages/editor/src/components/post-publish-panel/postpublish.js +++ b/packages/editor/src/components/post-publish-panel/postpublish.js @@ -92,6 +92,7 @@ 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', { @@ -148,7 +149,7 @@ class PostPublishPanelPostpublish extends Component { ) }
From 121e399837436df1de481cbe0c0715e52ab0bbc6 Mon Sep 17 00:00:00 2001 From: thisissandip Date: Fri, 23 Jul 2021 17:24:31 +0530 Subject: [PATCH 7/7] Add classes to primary action buttons --- .../src/components/post-publish-panel/postpublish.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js index ae2ac0eac1c31f..aaa7de20400caf 100644 --- a/packages/editor/src/components/post-publish-panel/postpublish.js +++ b/packages/editor/src/components/post-publish-panel/postpublish.js @@ -144,11 +144,14 @@ class PostPublishPanelPostpublish extends Component {
{ ! isScheduled && ( - ) } -