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

thisissandip · 2021-07-08T06:50:16Z

Fixes #32099

Description

Adds a create "New Page/Post" button at the end of the publish check panel.

How has this been tested?

Create a New Post
Publish the post
Check the post publish panel

Screenshots

post_publish_button.mov

Types of changes

New nonbreaking feature

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.

paaljoachim · 2021-07-08T08:16:04Z

Hi @thisissandip Sandip

It looks great! Let's just remove the "Back to Dashboard" text link and it is done.
Similar to what I have done here: #32910 (comment)

We can then get a code review perhaps from @Mamaduka

thisissandip · 2021-07-08T10:42:05Z

Hey @paaljoachim!

I removed the Back to dashboard link. I guess it is ready for the code review! 😄

javierarce · 2021-07-14T14:53:01Z

Just a tiny detail: since the input field and the button are next to each other, could we set the border-radius of the adjacent sides to 0px?

javierarce · 2021-07-14T15:06:14Z

On second thought, I think it would be better to have some space between those two elements instead, because if they are together we'll end up having a state like this (and it doesn't look nice):

paaljoachim · 2021-07-14T15:15:48Z

We can go with what Joen suggested here: #32910 (comment) (Joen also suggested removing the "Back to dashboard" text link.)

As in giving space between the page address field and the Copy button.

thisissandip · 2021-07-14T20:51:40Z

Added the margin-left to the copy button. This is how the post publish panel looks now:

paaljoachim · 2021-07-14T20:56:42Z

Are we done? Any more design comments?
If not then we can remove the Needs Design feedback label @mtias added, and get a code review.
Thanks!

gwwar

Thanks for looking into this @thisissandip !

Some UX feedback here, moving the copy button up looks like it crowds the post address field. So in some cases we'll normally only see our site domain.

The width of the copy button can also change when the text label is updated from copy to copied!, which might be worse in other languages. This is more pronounced when we put this next to the post address field (there's less button padding).

Custom post types can have long names, so we might need to add a more generic label like "add item".

Before:

before.mp4

After:

after.mp4

Custom Post Type:

custom.post.type.mp4

To help move this forward, lets:

Drop sentence case changes in this PR (We can still pursue this in a more general follow up discussion). If possible it'd be great if we could avoid magic numbers in CSS styling too.
Get additional design feedback, cc maybe @kellychoffman or @jasmussen ?

gwwar · 2021-07-15T17:58:00Z

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

@@ -91,9 +96,17 @@ 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(


Let's drop the sentence case changes here for now.

This is part of a larger discussion, but instead of doing this in JS, I'm thinking we should converge on a standard for sentence case or title case, and update the i18n labels instead.

https://core.trac.wordpress.org/ticket/49616

cc @sixhours @swissspidy or anyone else interested in this.

Agreed. This function should be removed.

This only really works well in English but not necessarily in other languages.

javierarce · 2021-07-16T11:16:53Z

+1 to label the button "add item" for custom post types.

The width of the copy button can also change when the text label is updated from copy to copied!, which might be worse in other languages. This is more pronounced when we put this next to the post address field (there's less button padding).

That's a good point, @gwwar… could we solve this problem using a clipboard icon instead of the text? Or maybe just the tick icon when the action is done, like GitHub does when you grab the URL of a repo to clone it.

Another idea could be adding a message below the input field, like in the Pattern Directory.

thisissandip · 2021-07-16T21:23:18Z

@gwwar I have made the required changes let me know if this looks good! 😄

gwwar · 2021-07-20T21:56:22Z

This looks really close!

It's good to use "Add item" for custom post types, but it may be better to stick with named types like "post"/"page" for the built-ins. We'll end up with mixed label usage otherwise with: "View post/Add item"

known	cpt

Besides that, technically this looks fine to me. What's left is a +1 for Design approval ✅

That's a good point, @gwwar… could we solve this problem using a clipboard icon instead of the text?

@javierarce I think something like that could work ✨ Do you think we should leave that exploration for a follow up issue?

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

swissspidy · 2021-07-20T22:01:24Z

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

-								: __( 'Copy Link' ) }
-						</CopyButton>
+						<Button variant="secondary" href={ addLink }>
+							{ __( 'Add Item' ) }


This should be coming from the post type labels.

swissspidy · 2021-07-20T22:01:34Z

It's good to use "Add item" for custom post types, but it may be better to stick with named types like "post"/"page" for the built-ins.

Why should this be good? Using the correct post type label like was done before da70034 makes more sense.

If you need a new post type label you should just patch it / add it.

gwwar · 2021-07-20T22:12:49Z

Using the correct post type label like was done before da70034 makes more sense.

@swissspidy What I mean is the final output text. Eg existing behavior for known post types (using the post type label like before), "View post/Add post" and "View item/Add item" for cpts. I can of course defer to folks if y'all feel strongly, but what can happen is that labels are mismatched in the CPT case with "View item/Add new cpt name"

gwwar · 2021-07-20T22:32:58Z

Oh sorry, @swissspidy is right here with the label usage 👍. I must have some mixed label definitions with the plugin I was testing with.

Beside changing that back, this still needs a design +1

thisissandip · 2021-07-22T07:11:15Z

I have updated the code to use the correct post type label for the Add New button

javierarce · 2021-07-22T15:56:34Z

Ok, I think this is fine from a design perspective, but I have one final observation: I think we should make the view button the primary action to make the hierarchy of the actions more clear.

@javierarce I think something like that could work ✨ Do you think we should leave that exploration for a follow up issue?

@gwwar Yes, I'll create a new issue for that.

gwwar · 2021-07-22T16:58:15Z

@javierarce so to confirm the two screens: add an is-primary class when two buttons are present (publishing immediately). Should we also add a primary style when scheduling?

publish immediately	scheduled

javierarce · 2021-07-22T17:15:57Z

Should we also add a primary style when scheduling?

@gwwar oh, yes, sorry… in that case the "add new" button will be the primary action, so we need to add the class there too.

thisissandip · 2021-07-23T12:02:57Z

I have made the required changes for the primary action buttons.

This is how the post publish panel looks now -

When a post is published:

When a post is scheduled:

gwwar

Tests well for me @thisissandip! I'll leave this open for a day in case others had any other feedback. Will merge next week.

Thanks for the reviews @javierarce @swissspidy ✨

paaljoachim · 2021-07-24T09:24:14Z

Nice work @thisissandip Sandip! Thank you very much for testing @gwwar Kerry!
I look forward to getting this feature into the Gutenberg plugin!

I am testing on a local dev site of a client site that uses a CPT named Nettmagasin.
If not using a regular WP post or page but a CPT will it show up with "View Item" and "Add New Item" ?

One thing I noticed while reading Joen's comment here:
#32910 (comment)

"While this was titlecase before, we should actually be using sentence case everywhere, so since this PR touches those parts it might be nice to go in and fix that. So "View Post" → "View post", "Add New Post" → "Add new post"
(Go through Joen's comment and see if there is anything else that we missed or changed along the way.)

I noticed the title case is correct here:
#33276 (comment)

That's what I noticed.
Thanks!

swissspidy · 2021-07-26T07:36:17Z

If not using a regular WP post or page but a CPT will it show up with "View Item" and "Add New Item" ?

It will show up with whatever label the post types has been registered with.

gwwar · 2021-07-26T15:33:57Z

While this was titlecase before, we should actually be using sentence case everywhere, so since this PR touches those parts it might be nice to go in and fix that

If we'd like sentence case for English, this needs to be updated in the post labels themselves and also tested for other UI areas that also use them. Note that sentence case doesn't make sense for some i18n locales. See also: https://core.trac.wordpress.org/ticket/49616

gwwar · 2021-07-26T16:59:35Z

Since it looks like there's no major feedback, let's try to land. We can see if there's any additional feedback during the RC and address it in follow up PRs/issues.

simison · 2021-07-27T07:01:37Z

Neat change! I was looking at this and thought same as @gwwar:

Some UX feedback here, moving the copy button up looks like it crowds the post address field. So in some cases we'll normally only see our site domain.

It was the case already previously without copy button — in screenshot below showing the URL isn't helpful at all:

As a follow-up, have you considered some other format than input? Few ideas:

Omit domain (although it's helpful at re-assuring you posted at the right site)
Omit "https" part
Don't use input and use link instead, which basically doubles as "view" action and allows removing one button.

Super rough mock, doesn't look great but conveys the idea:

Also worth considering "Post name is now live" text kinda doubles as preview link already?

talldan · 2021-07-28T04:34:46Z

@gwwar @thisissandip Would be greatly appreciated if you could add [Type] and either [Feature] or [Package] labels to PRs—these are used for compiling the changelog and without them it results in a lot of manual work for the individual doing the release. Thanks.

gwwar · 2021-07-28T14:59:58Z

Would be greatly appreciated if you could add [Type] and either [Feature] or [Package] labels to PRs

Will do in the future! I forgot to check the labels.

Add a new page/post button on publish panel

5f87199

thisissandip mentioned this pull request Jul 8, 2021

fixed #32099 #32910

Closed

7 tasks

Remove Back to Dashboard button

bd7ca66

paaljoachim added the Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code label Jul 8, 2021

thisissandip requested a review from ellatrix July 10, 2021 14:54

paaljoachim mentioned this pull request Jul 14, 2021

New button #28010

Closed

mtias added the Needs Design Feedback Needs general design feedback. label Jul 14, 2021

Add margin left to copy button

5a98ff1

gwwar reviewed Jul 15, 2021

View reviewed changes

thisissandip added 2 commits July 17, 2021 02:39

Remove sentence case and add css comments

a3fcc94

Rename Add new post_type to Add Item

da70034

swissspidy reviewed Jul 20, 2021

View reviewed changes

packages/editor/src/components/post-publish-panel/postpublish.js Show resolved Hide resolved

swissspidy reviewed Jul 20, 2021

View reviewed changes

use post type label

3abaebf

javierarce mentioned this pull request Jul 23, 2021

Improve copy to clipboard interface #33644

Open

Add classes to primary action buttons

121e399

gwwar approved these changes Jul 23, 2021

View reviewed changes

gwwar merged commit 59530f3 into WordPress:trunk Jul 26, 2021

github-actions bot added this to the Gutenberg 11.2 milestone Jul 26, 2021

WunderBart mentioned this pull request Jul 27, 2021

Gutenberg: v11.2.x plugin upgrade Automattic/wp-calypso#54859

Closed

29 tasks

talldan added [Feature] Saving Related to saving functionality [Package] Editor /packages/editor [Type] Enhancement A suggestion for improvement. labels Jul 28, 2021

p-jackson mentioned this pull request Aug 13, 2021

Add tracks event for the "add new post" button post-publish Automattic/wp-calypso#55419

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

thisissandip commented Jul 8, 2021

paaljoachim commented Jul 8, 2021 •

edited

Loading

thisissandip commented Jul 8, 2021

javierarce commented Jul 14, 2021 •

edited

Loading

javierarce commented Jul 14, 2021

paaljoachim commented Jul 14, 2021

thisissandip commented Jul 14, 2021 •

edited

Loading

paaljoachim commented Jul 14, 2021 •

edited

Loading

gwwar left a comment •

edited

Loading

gwwar Jul 15, 2021

swissspidy Jul 15, 2021 •

edited

Loading

javierarce commented Jul 16, 2021 •

edited

Loading

thisissandip commented Jul 16, 2021

gwwar commented Jul 20, 2021

swissspidy Jul 20, 2021

swissspidy commented Jul 20, 2021

gwwar commented Jul 20, 2021

gwwar commented Jul 20, 2021

thisissandip commented Jul 22, 2021

javierarce commented Jul 22, 2021

gwwar commented Jul 22, 2021

javierarce commented Jul 22, 2021

thisissandip commented Jul 23, 2021

gwwar left a comment

paaljoachim commented Jul 24, 2021 •

edited

Loading

swissspidy commented Jul 26, 2021

gwwar commented Jul 26, 2021

gwwar commented Jul 26, 2021

simison commented Jul 27, 2021 •

edited

Loading

talldan commented Jul 28, 2021

gwwar commented Jul 28, 2021

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

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

Conversation

thisissandip commented Jul 8, 2021

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

paaljoachim commented Jul 8, 2021 • edited Loading

thisissandip commented Jul 8, 2021

javierarce commented Jul 14, 2021 • edited Loading

javierarce commented Jul 14, 2021

paaljoachim commented Jul 14, 2021

thisissandip commented Jul 14, 2021 • edited Loading

paaljoachim commented Jul 14, 2021 • edited Loading

gwwar left a comment • edited Loading

Choose a reason for hiding this comment

gwwar Jul 15, 2021

Choose a reason for hiding this comment

swissspidy Jul 15, 2021 • edited Loading

Choose a reason for hiding this comment

javierarce commented Jul 16, 2021 • edited Loading

thisissandip commented Jul 16, 2021

gwwar commented Jul 20, 2021

swissspidy Jul 20, 2021

Choose a reason for hiding this comment

swissspidy commented Jul 20, 2021

gwwar commented Jul 20, 2021

gwwar commented Jul 20, 2021

thisissandip commented Jul 22, 2021

javierarce commented Jul 22, 2021

gwwar commented Jul 22, 2021

javierarce commented Jul 22, 2021

thisissandip commented Jul 23, 2021

gwwar left a comment

Choose a reason for hiding this comment

paaljoachim commented Jul 24, 2021 • edited Loading

swissspidy commented Jul 26, 2021

gwwar commented Jul 26, 2021

gwwar commented Jul 26, 2021

simison commented Jul 27, 2021 • edited Loading

talldan commented Jul 28, 2021

gwwar commented Jul 28, 2021

paaljoachim commented Jul 8, 2021 •

edited

Loading

javierarce commented Jul 14, 2021 •

edited

Loading

thisissandip commented Jul 14, 2021 •

edited

Loading

paaljoachim commented Jul 14, 2021 •

edited

Loading

gwwar left a comment •

edited

Loading

swissspidy Jul 15, 2021 •

edited

Loading

javierarce commented Jul 16, 2021 •

edited

Loading

paaljoachim commented Jul 24, 2021 •

edited

Loading

simison commented Jul 27, 2021 •

edited

Loading