Customizer: Consider natural-width media buttons

[melchoyce]

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.

[afercia]

+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.

[karmatosed]

+1 to this

[folletto]

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 :)

[melchoyce]

@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​.

[folletto]

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!

[melchoyce]

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 :)

👍

[westonruter]

See also ​https://github.com/xwp/wp-core-media-widgets/issues/49

[timmydcrawford]

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

[jbpaul17]

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

[joemcgill]

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.

[afercia]

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

[afercia]

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

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.

[westonruter]

@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?

[afercia]

@westonruter Same thought at the same time :)

[afercia]

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]

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

[afercia]

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

[melchoyce]

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

[afercia]

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.

[afercia]

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]

Misaligned buttons in site icon control

[westonruter]

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

[afercia]

@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.

[westonruter]

In 40671:

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

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