Update: Post publish buttons and alignment. #22390

juanfra · 2020-05-15T19:37:21Z

👋 Hello gutenfriends,

Description

I have implemented the changes proposed in this issue: #19175

The idea is to have a more clean and clear layout for the publish panel.

How has this been tested?

I have tested the changes by opening the page editor, and trying to publish a page. Checking that the buttons respond as they should, and that the changes represent the decisions taken in the issue. I have also ran tests, and update snapshots.

Tested:

Opened the page editor.
Added title and text block.
Hit "Publish" button.
Confirm that there's two buttons: "Publish" and "Cancel". Hitting "Publish" will indeed publish the page and open the confirmation panel, with the "Close" button. Hitting "Cancel" will close the panel.
I have also tested scheduling the page.

Screenshots

Types of changes

Updated block code to use the button without icon.
Updated the block code to act as the designs proposed in the issue.
Updated the code CSS to make that section look as the designs. Also removed the block code that is irrelevant due to these new changes.
Updated snapshots.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

Updating the post publish panel buttons to match the designs proposed on WordPress#19175

paaljoachim · 2020-05-19T19:24:01Z

Great work @juanfra !
I checked the PR at gutenberg.run

Here is an animated gif of what it looks like:

folletto · 2020-05-20T11:38:00Z

Nice work.
Unfortunately the screenshot doesn't seem to load, can you update it?

From the gif it seems the buttons aren't aligned to the content tho:

Can we make sure the left and right margins are aligned with the text below?

juanfra · 2020-05-20T15:23:44Z

Thank you both for taking the time to look at this!

It seems that the gif I initially posted was too heavy for GitHub, sorry for that. I'm adding a new one now.

With regards to the alignment, great catch! that was the original padding for the panel header. Adjusted that to have the same as the other elements of the panel.

folletto · 2020-05-20T15:44:07Z

Looks good to me now 👍

paaljoachim · 2020-05-29T08:57:20Z

An update.
I mentioned the PR for Andrei @draganescu and he told me that the testing needs to be fixed in relation to the changes. @juanfra let us know if you need help with this part. This is Juanfra's first contribution to Gutenberg! Yayy! Which also means he might need some extra help.

juanfra · 2020-05-29T19:19:49Z

Thanks @paaljoachim! Started checking the code of the project a couple weeks ago and I'm excited to contribute if possible.

Yes, at first I wasn't aware of the e2e tests so I only ran the basic npm test, updated snapshots and committed the proposed changes.

Then, once the PR was in place and I saw the results from travis I found out there were more. But, as the failing tests are part of the experiments folder, related to full site editing and multi entity saving I thought they weren't related to my changes (But I haven't had the time to check the entire codebase to see if the saving panel for the editor is being used elsewhere).

So Today I had a free hour and I tried to debug a bit further, but when I run e2e tests locally, there are a ton failing. So I guess I'm probably missing something. Any recommendations @draganescu?

juanfra · 2020-05-29T21:58:31Z

Update: Used some time from my free hour to check this out, and it should be good to go now.

Thank you both!

kirilzh · 2020-06-22T17:16:38Z

Nice work. The new buttons look really good. 🎉

Approved your PR. @juanfra please resolve the any conflicts that have arisen.

juanfra · 2020-06-22T21:55:12Z

thank you @kirilzh! Seems that we should wait on this #23370

paaljoachim · 2020-06-25T14:42:26Z

Hey @juanfra and @kirilzh #23370 has now been merged.
Lets get this PR merged as well..:)

juanfra · 2020-06-25T14:57:33Z

Hi @paaljoachim!

Thanks for the follow-up. Yes, I merged the changes to this branch once it was merged. Everything is passing now, I'm waiting for a new approval + merge from @kirilzh

Thank you both :)

github-actions · 2020-06-25T15:03:30Z

Congratulations on your first merged pull request, @juanfra! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

paaljoachim · 2020-06-25T15:13:06Z

Congratulations @juanfra !

MichaelArestad · 2020-06-25T15:15:33Z

Nice job! It's a bit odd at specific screen sizes because the buttons stretch pretty wide. You can see that here:

This issue could be resolved by adding a max-width like this:

juanfra · 2020-06-25T15:29:47Z

Thanks @MichaelArestad,

Yeah, I agree, I could add that for viewports between $break-medium and $break-mobile. What number would you set as max-width? Not sure how long these words can get on different languages.

I'd be happy to push this fix :)

MichaelArestad · 2020-06-25T15:40:32Z

Yeah, I agree, I could add that for viewports between $break-medium and $break-mobile. What number would you set as max-width? Not sure how long these words can get on different languages.

@juanfra Good question. I quickly picked an arbitrary number of 160px that looked about right and it's a multiple of 8. That might be good enough.

juanfra · 2020-06-25T19:57:37Z

Thanks @MichaelArestad! Added a new PR with the changes #23487

See WordPress/gutenberg#22390 See WordPress/gutenberg@e318033

* Change selector to match updated classes See WordPress/gutenberg#22390 See WordPress/gutenberg@e318033 * Use nth-of-type (element has moved)

juanfra added 2 commits May 15, 2020 16:18

Update post publish panel block

0a54252

Updating the post publish panel buttons to match the designs proposed on WordPress#19175

Update snapshots.

b74a532

paaljoachim mentioned this pull request May 19, 2020

Align publish button #19175

Closed

Fix header padding to match the other elements of the panel.

2fb87bc

Use variables for the padding of the header buttons.

c175f52

paaljoachim mentioned this pull request May 29, 2020

Update buttons and icons buttons size and consistency #19058

Merged

juanfra added 2 commits May 29, 2020 15:56

Revert close button label.

887ba04

Update snapshots.

e963787

juanfra added 2 commits May 29, 2020 17:48

Merge branch 'master' into fix/post-publish-panel-buttons

aed2015

Update button label.

ba76d08

paaljoachim mentioned this pull request Jun 10, 2020

Make Preview and Save Draft buttons use the same style #21192

Merged

6 tasks

noisysocks added [Type] Enhancement A suggestion for improvement. General Interface Parts of the UI which don't fall neatly under other labels. Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code labels Jun 22, 2020

kirilzh approved these changes Jun 22, 2020

View reviewed changes

Merge branch 'master' into fix/post-publish-panel-buttons

3287b4d

Merge branch 'master' into fix/post-publish-panel-buttons

815ccea

juanfra requested a review from kirilzh June 23, 2020 14:16

kirilzh approved these changes Jun 25, 2020

View reviewed changes

kirilzh merged commit e318033 into WordPress:master Jun 25, 2020

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jun 25, 2020

github-actions bot added this to the Gutenberg 8.5 milestone Jun 25, 2020

juanfra deleted the fix/post-publish-panel-buttons branch June 25, 2020 15:21

juanfra mentioned this pull request Jun 25, 2020

Add max-width for the post publish panel buttons. #23487

Merged

6 tasks

sirreal added a commit to Automattic/wp-calypso that referenced this pull request Jul 27, 2020

Change selector to match updated classes

6bad94a

See WordPress/gutenberg#22390 See WordPress/gutenberg@e318033

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update: Post publish buttons and alignment. #22390

Update: Post publish buttons and alignment. #22390

juanfra commented May 15, 2020 •

edited

Loading

paaljoachim commented May 19, 2020 •

edited

Loading

folletto commented May 20, 2020

juanfra commented May 20, 2020

folletto commented May 20, 2020

paaljoachim commented May 29, 2020 •

edited

Loading

juanfra commented May 29, 2020 •

edited

Loading

juanfra commented May 29, 2020 •

edited

Loading

kirilzh commented Jun 22, 2020

juanfra commented Jun 22, 2020 •

edited

Loading

paaljoachim commented Jun 25, 2020

juanfra commented Jun 25, 2020

github-actions bot commented Jun 25, 2020

paaljoachim commented Jun 25, 2020

MichaelArestad commented Jun 25, 2020

juanfra commented Jun 25, 2020

MichaelArestad commented Jun 25, 2020

juanfra commented Jun 25, 2020 •

edited

Loading

Update: Post publish buttons and alignment. #22390

Update: Post publish buttons and alignment. #22390

Conversation

juanfra commented May 15, 2020 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

paaljoachim commented May 19, 2020 • edited Loading

folletto commented May 20, 2020

juanfra commented May 20, 2020

folletto commented May 20, 2020

paaljoachim commented May 29, 2020 • edited Loading

juanfra commented May 29, 2020 • edited Loading

juanfra commented May 29, 2020 • edited Loading

kirilzh commented Jun 22, 2020

juanfra commented Jun 22, 2020 • edited Loading

paaljoachim commented Jun 25, 2020

juanfra commented Jun 25, 2020

github-actions bot commented Jun 25, 2020

paaljoachim commented Jun 25, 2020

MichaelArestad commented Jun 25, 2020

juanfra commented Jun 25, 2020

MichaelArestad commented Jun 25, 2020

juanfra commented Jun 25, 2020 • edited Loading

juanfra commented May 15, 2020 •

edited

Loading

paaljoachim commented May 19, 2020 •

edited

Loading

paaljoachim commented May 29, 2020 •

edited

Loading

juanfra commented May 29, 2020 •

edited

Loading

juanfra commented May 29, 2020 •

edited

Loading

juanfra commented Jun 22, 2020 •

edited

Loading

juanfra commented Jun 25, 2020 •

edited

Loading