WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 6 months ago

Last modified 6 months ago

#20842 closed defect (bug) (invalid)

Buttons are not on the same line when saving a post as pending (RTL)

Reported by: rasheed Owned by: SergeyBiryukov
Milestone: Priority: normal
Severity: normal Version: 3.4
Component: I18N Keywords: ui-feedback needs-patch
Focuses: ui Cc:

Description

Please check attachment.

Attachments (4)

save-as-pending.gif (16.7 KB) - added by rasheed 5 years ago.
20842.ru_RU.png (13.3 KB) - added by SergeyBiryukov 5 years ago.
20842.ru_RU.2.png (12.8 KB) - added by SergeyBiryukov 5 years ago.
publish-preview-button.png (31.6 KB) - added by juanfra 2 years ago.
This is how the preview button with icon and tooltip look like. This may be an option. Another option could be moving the preview button out of the "Publish" box, for example where the "Add New" button is, in the "Edit Post" form. In that place would be really visible and the preview button shouldn't be strictly related to the "Publish" box.

Download all attachments as: .zip

Change History (28)

#1 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 3.4

#2 @SergeyBiryukov
5 years ago

  • Component changed from RTL to I18N
  • Milestone changed from 3.4 to Awaiting Review

The string is too long. Could probably remove some padding.

It's actually even worse in ru_RU (20842.ru_RU.png), and removing the padding won't help there. Should probably come up with a shorter string, but can't think of one at the moment.

Moving back from 3.4, as it's not a regression.

#3 follow-up: @ocean90
5 years ago

@Sergey

Is this still an issue with the new button style?

#4 in reply to: ↑ 3 @SergeyBiryukov
5 years ago

Replying to ocean90:

Is this still an issue with the new button style?

Yep: 20842.ru_RU.2.png.

#5 @chriscct7
3 years ago

  • Focuses ui added
  • Keywords ui-feedback needs-patch added

#7 @wonderboymusic
2 years ago

  • Keywords good-first-bug added
  • Milestone changed from Awaiting Review to 4.4

#8 @Rynald0s
2 years ago

  • Keywords has-patch added; needs-patch removed

Updated on #32111

#9 @helen
2 years ago

What are we proposing core do here short of an overhaul, if anything?

#10 @SergeyBiryukov
2 years ago

  • Keywords has-patch removed

#11 @SergeyBiryukov
2 years ago

#32111 was marked as a duplicate.

#12 @ramonjosegn
2 years ago

Why not put only a button with a EYE ICON?

I think is universal, and should be very small for showing.

A tooltip can show the text...

Last edited 2 years ago by ramonjosegn (previous) (diff)

#13 @juanfra
2 years ago

Nice idea! I thought about it before. The problem I saw is that, it is the same icon used for the "visibility" state, a few pixels below.

Perhaps using the "external" button with a tooltip? https://developer.wordpress.org/resource/dashicons/#external

#14 follow-up: @Rynald0s
2 years ago

@SergeyBiryukov

Regarding #32111: thanks so much for clearing things up for me. I clearly missed the user role part. However, I have double checked a clean installation (4.3) under Russian language (all user roles) and can't seem to find the "Сохранить для утверждения" string. They all show up as "Сохранить." Perhaps I am missing something (which is most likely the case).?

If I am missing something, I would agree with you on replacing the string and making it shorter. The problem however, is finding a suitable one.

This ticket was mentioned in Slack in #core by sergey. View the logs.


2 years ago

#16 in reply to: ↑ 14 @SergeyBiryukov
2 years ago

  • Keywords needs-patch added; good-first-bug removed
  • Owner set to SergeyBiryukov
  • Status changed from new to accepted

Replying to Rynald0s:

However, I have double checked a clean installation (4.3) under Russian language (all user roles) and can't seem to find the "Сохранить для утверждения" string. They all show up as "Сохранить."

I was a bit wrong in comment:17:ticket:32111, it's displayed not for users with Contributor role, but for posts with pending status (when edited by an Editor or Administrator).

We could probably make it look better by adjusting some margins/padding, and it looks like removing some horizontal margin from the spinner will solve the issues in #32111 as well.

Last edited 2 years ago by SergeyBiryukov (previous) (diff)

#17 @SergeyBiryukov
2 years ago

  • Milestone changed from 4.4 to Future Release

#18 follow-up: @juanfra
2 years ago

@SergeyBiryukov would it be too messy if we add a locale class to the body class within admin (besides rtl) so we can have some special css rules for this type of cases?

Last edited 2 years ago by juanfra (previous) (diff)

@juanfra
2 years ago

This is how the preview button with icon and tooltip look like. This may be an option. Another option could be moving the preview button out of the "Publish" box, for example where the "Add New" button is, in the "Edit Post" form. In that place would be really visible and the preview button shouldn't be strictly related to the "Publish" box.

#19 in reply to: ↑ 18 @SergeyBiryukov
2 years ago

Replying to juanfra:

@SergeyBiryukov would it be too messy if we add a locale class to the body class within admin (besides rtl) so we can have some special css rules for this type of cases?

We already have a locale class there: tags/4.4/src/wp-admin/admin-header.php?marks=160#L157.

#20 @juanfra
2 years ago

@SergeyBiryukov Oh Nice! Thanks for pointing that out. I wasn't aware about it.

Well I guess we have a couple options here, at least these are the ones I could think of:

1) Create a small preview button (with an icon, like the one in the image I've sent).

2) For the languages in which the text is too long, like Russian, apply some special styles. So, that way we can organize the buttons and put them on two lines, something in order to get it tidier. The problem here is that we'll be treating exceptions, and I'm not a big fan of that. Similar problems can come up and patches like these can end up bloating the codebase.

3) Move the "Preview Changes"/"Preview" button. For example: above the title input. (It'll be a bit tricky for the user because it'll be outside the "Publish" box).

Is this the appropriate space to discuss about ui and take decisions like this one?

#21 @karmatosed
14 months ago

I understand the issues, but I am concerned with adding an icon for this action. My concern is that we are needing people to understand the meaning here and icons are tricky for that. I'd be keen on a solution that means we don't go for an icon. This entire box does need some iteration, but perhaps we can begin by thinking around that.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


6 months ago

#23 @karmatosed
6 months ago

  • Milestone Future Release deleted
  • Resolution set to invalid
  • Status changed from accepted to closed

With our focus on Gutenberg (the new editor), this area will have different interactions. As a result, from today's triage discussion, lets close this. You can test and if a problem there create an issue here: https://github.com/WordPress/gutenberg/issues

#24 @ocean90
6 months ago

#40914 was marked as a duplicate.

Note: See TracTickets for help on using tickets.