WordPress.org

Make WordPress Core

#40220 closed enhancement (fixed)

Customizer: Consider natural-width media buttons

Reported by: melchoyce Owned by: afercia
Milestone: 4.8 Priority: normal
Severity: normal Version:
Component: Customize Keywords: good-first-bug has-screenshots has-patch
Focuses: ui Cc:

Description

This came up in https://github.com/xwp/wp-core-media-widgets/pull/23.

We explored making the image widget buttons natural-width. I still think it's a good idea, but I'd like to explore it for all of the Customizer media control buttons, not just the image widget. Natural-width buttons are better for translations, and don't feel as overpowering as the half-width (and full-width) buttons.

Attaching examples.

Attachments (11)

1ef97fc8-09a8-11e7-99b6-bc2d5afeef7a.png (224.3 KB) - added by melchoyce 14 months ago.
22e1b4c0-09a8-11e7-9b25-3967b5003f9e.png (28.8 KB) - added by melchoyce 14 months ago.
a10f759c-0685-11e7-8616-9a622b546105.png (13.0 KB) - added by melchoyce 14 months ago.
40220.diff (1.3 KB) - added by timmydcrawford 14 months ago.
before-40220.png (215.5 KB) - added by timmydcrawford 14 months ago.
after-40220.png (215.6 KB) - added by timmydcrawford 14 months ago.
40220.2.diff (1.5 KB) - added by afercia 13 months ago.
40220.3.diff (2.4 KB) - added by afercia 13 months ago.
Firefox.png (272.6 KB) - added by melchoyce 13 months ago.
site-icon-buttons.png (109.5 KB) - added by westonruter 13 months ago.
Misaligned buttons in site icon control
40220.4.diff (4.0 KB) - added by afercia 13 months ago.

Download all attachments as: .zip

Change History (43)

#1 @afercia
14 months ago

+1 Quoting from the conversation on the GitHub PR:

Translators have to know the context and know the size of the string they choose. This could be indicated via the translators comment or via the $context parameter in the translation function. This is what we did for the “Hide Controls” label in #38762.

Even if translators pay attention to the context (and they often don't), in some languages this is simply not possible. As I see it, #38762 was a very special case to patch a design choice that wasn't so ideal in the first place and should be considered an exception.

#2 @karmatosed
14 months ago

+1 to this

#3 @folletto
14 months ago

natural-width

I've read both this and the other ticket, and I'm not 100% sure what the proposal is. Can we add some more details on what "natural-width" means, in which context? I've noticed the media buttons (i.e. Site Icon) use a 48% width for example.

Does this ticket means to review all the fixed width buttons to instead be variable width (i.e. text fit)?

If yes, what problem does it solve? I read the explanation for translation, but I'm not sure how natural-width buttons would be better: if a text is too long wouldn't the button simply drop? And wouldn't be the same with fixed-width ones (or just the button gets taller?

Sorry for the questions, I hope it helps bringing more clarity to the background of this ticket :)

#4 @melchoyce
14 months ago

@folletto:

I've read both this and the other ticket, and I'm not 100% sure what the proposal is. Can we add some more details on what "natural-width" means, in which context? I've noticed the media buttons (i.e. Site Icon) use a 48% width for example.

"Natural-width" means letting the button take up as much or little room as it needs, rather than constraining it to a particular width (like 48%). Compare ef97fc8-09a8-11e7-99b6-bc2d5afeef7a.png to the existing media buttons in the Customizer, like Site Icon.

What problem does it solve? I read the explanation for translation, but I'm not sure how natural-width buttons would be better: if a text is too long wouldn't the button simply drop?

Yup! That's the solution. This way, you can read the entire button, instead of the text being cut off.

And wouldn't be the same with fixed-width ones (or just the button gets taller?)

No. You can see what currently happens in a10f759c-0685-11e7-8616-9a622b546105.png.

#5 follow-up: @folletto
14 months ago

You can see what currently happens in a10f759c-0685-11e7-8616-9a622b546105.png​.

Ok. While we can fix that in order to break properly (the text should go on two lines in that instance), I agree it's not worth it if we – regardless of the issue – prefer natural-width buttons :)

Thanks for the details!

#6 in reply to: ↑ 5 @melchoyce
14 months ago

Replying to folletto:

Ok. While we can fix that in order to break properly (the text should go on two lines in that instance)...

Yeah, I thought about that, but if a word happens to be longer than the button (which is not likely but still a possibility), we still have an issue. 😕

... I agree it's not worth it if we – regardless of the issue – prefer natural-width buttons :)

👍

This ticket was mentioned in Slack in #core-customize by afercia. View the logs.


14 months ago

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.


14 months ago

#9 @westonruter
14 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.7.4

#11 @westonruter
14 months ago

  • Keywords good-first-bug added

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


14 months ago

#13 @swissspidy
14 months ago

  • Milestone changed from 4.7.4 to 4.7.5

#14 @timmydcrawford
14 months ago

  • Keywords has-patch has-screenshots added; needs-patch removed

40220.diff is a similar fix that we took in the media widgets ( https://github.com/xwp/wp-core-media-widgets/pull/85 )

Screen grabs of before this patch, and after can be seen above

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


13 months ago

#16 @jbpaul17
13 months ago

  • Keywords needs-testing added
  • Milestone changed from 4.7.5 to 4.8

Pulling into 4.8 as patch exists and just needs testing to confirm it's ready to land.

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


13 months ago

#18 @joemcgill
13 months ago

  • Keywords needs-testing removed

Tested 40220.diff and my only concern is with longer translation strings that force these buttons to wrap. We probably need a bit of vertical spacing between those buttons and it would be better to add right margin to the first button to make sure they align properly.

https://cldup.com/SpkNvnyW-0.png

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


13 months ago

@afercia
13 months ago

#20 @afercia
13 months ago

Refreshed. 40220.2.diff tries to standardize the margins above and between the buttons.

#21 @afercia
13 months ago

@joemcgill margin is now applied on the right side of the buttons so when wrapping, it will look like this:

https://cldup.com/qiEjW7-JXO.png

I haven't applied a bottom margin, need to check if that would affect the layout of following elements.

Notable exception are the buttons in the widgets panel, they inherit styles from the main widgets stylesheet but I'd say they're out of the scope of this ticket.

#22 @westonruter
13 months ago

  • Keywords needs-patch added; has-patch removed

@afercia I just realized the same thing needs to be done for media widgets as well. I see now why there was the margin-top on the buttons which was removed in https://github.com/xwp/wp-core-media-widgets/pull/155/commits/8ac4e8dac89a5854f66764ed6add350c0abc66e1

This was done initially because an issue where the margin between the placeholder and the buttons was not consistent with the space between the placeholder and the title field above, stemming from the difference between the margin for the buttons and the margin for p elements.

Can you apply your fix there as well?

#23 @afercia
13 months ago

@westonruter Same thought at the same time :)

@afercia
13 months ago

#24 @afercia
13 months ago

  • Keywords has-patch commit added; needs-patch removed
  • Owner set to afercia
  • Status changed from new to assigned

40220.3.diff adds top margin for all the buttons. Also, allows the widgets buttons text to wrap in a new line, as the other buttons do. See

	width: auto;
	height: auto;
	white-space: normal;

Not sure this works in all browsers, it does on webkit. If it doesn't work in some browsers, it won't harm anything.

@melchoyce
13 months ago

#25 @melchoyce
13 months ago

Looks good in Chrome and Safari. Some weirdness in Firefox, though. See Firefox.png.

#26 @afercia
13 months ago

@melchoyce that's intended? On the other controls (e.g. Header image) that CSS bit was already used to get exactly that effect :)

#27 @melchoyce
13 months ago

That's weird... do you know why we'd make it specifically different in only Firefox...?

#28 @afercia
13 months ago

Happens also in Chrome, depends on the length of the string you enter to trigger the wrapping, I guess. To clarify, this was implemented just on the Header media buttons. The latest patch adds the same CSS to the Widgets buttons.

#29 @afercia
13 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 40653:

Customize: Make the media control buttons natural-width.

Natural-width buttons are better for translations, and don't feel as
overpowering as the half-width (and full-width) buttons.

Props melchoyce, timmydcrawford, afercia.
Fixes #40220.

@westonruter
13 months ago

Misaligned buttons in site icon control

#30 @westonruter
13 months ago

  • Keywords needs-patch added; has-patch commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

The buttons in the site icon control are not aligned properly now. See site-icon-buttons.png.

@afercia
13 months ago

#31 @afercia
13 months ago

  • Keywords has-patch added; needs-patch removed

@westonruter thanks. 40220.4.diff should fix those buttons:

  • uses wp-clearfix to contain floated elements in the site icon control
  • removes some <div style="clear:both"></div>, no more needed since the buttons aren't floated any longer
  • removes descender space from the site icon browser-preview image

Please do feel free to commit if everything looks good.

#32 @westonruter
12 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 40671:

Customize: Fix alignment of natural-width media buttons in site icon control.

Amends [40653].
Props afercia.
Fixes #40220.

Note: See TracTickets for help on using tickets.