Customizer: Wrapped labels should align to start of label, not checkbox

[melchoyce]

When you have a long label (for example, "Automatically add new top-level pages to this menu"), the label wraps onto a new line and aligns with the checkbox, rather than aligning with the start of the label. This breaks up the flow of the label and looks pretty bad. The second line should align with start of the label text.

[bordoni]

The following patch would solve the reported issue, but I'm not sure if the applying rules to .customize-control-nav_menu_auto_add is the best solution, instead of adding a class to the element to mark it as a checkbox.

[bordoni]

Possible solution to what was reported.

[westonruter]

@bordoni I think we should scope these style changes to checkbox controls that appear under the .customize-control-nav_menu element. This will ensure the .customize-control-checkbox styles don't apply to any checkbox in the Customizer, which may introduce an unexpected regression.

Also, could you add a screenshot that shows how the style changes impact long labels that appear under Menu Locations as well as Menu Options?

[bordoni]

Screenshot:

My only question is, shouldn't this behavior for the Checkbox be standard across the whole customizer? At least that was what I understood from the ticket.

Like on this one:

[westonruter]

Replying to bordoni:

My only question is, shouldn't this behavior for the Checkbox be standard across the whole customizer? At least that was what I understood from the ticket.

Oh! I didn't catch that. I incorrectly thought this was specifically regarding menus.

@melchoyce Thoughts on @bordoni's patch to apply generally for all checkboxes in the Customizer?

[melchoyce]

Haven't looked at the patch, but I agree it should apply to all checkboxes in the Customizer.

[westonruter]

In 35608:

Customize: Prevent multi-line checkbox control labels from wrapping under checkbox.

Props bordoni.
Fixes #34607.

[afercia]

On small screens, the checkboxes size is different (at least in Chrome, Firefox doesn't allow to fully restyle checkboxes) so the label text won't be perfectly aligned. It would be great to tweak a bit the styling in the proper media query.
Also, thinking this should probably apply to radio buttons too, see screenshot below:

[bordoni]

Great catch @afercia I will create a new patch to solve that mobile issue.

@melchoyce what do you think about applying the styles to Radio Input?

[melchoyce]

Replying to bordoni:

Great catch @afercia I will create a new patch to solve that mobile issue.

@melchoyce what do you think about applying the styles to Radio Input?

Yup, radios should get the styling too.

[bordoni]

On the Patch.1 I've applied the changes to the Radio buttons and fixed what @afercia noted in his comment.

Also, while I was testing the responsive, I also found that the widgets the checkboxes didn't have enough space.

So I've patched that too. ;)

[bordoni]

Fixes to responsive problems + radio

[westonruter]

@afercia @melchoyce please review.

[delawski]

​https://github.com/xwp/wordpress-develop/commit/ff1866203198636bcde3447f431ce88212cb7be7

[delawski]

In 34607.2.diff​:

Extend Customizer checkbox patch on radios and fix minor media breakpoint glitch

• I've extended the fix to checkboxes in Customizer by @bordoni so that it is applied to radios as well
• I've unified the media query breakpoint value for small screens so that it is 782 px for all cases

[bordoni]

Hi @delawski,

Why the change from 780 to 782? Really curious on that one =D

[delawski]

Replying to bordoni:

Hi @delawski,

Why the change from 780 to 782? Really curious on that one =D

Hi @bordoni,

In almost all media queries used in Customizer's stylesheets the value of 782px is used. Using 780px in that single location caused inconsistencies when the screen width was passing through one of the two breakpoints. The screencast shows the issue:

​https://cloudup.com/cSCQdxdwmNg

[westonruter]

I'll commit this later today unless there is any more feedback.

[bordoni]

Thanks for the answer @delawski.

[westonruter]

In 35643:

Customize: Ensure multi-line label alignment for checkbox/radio inputs on both desktop and mobile.

Follow-up to [35608].

Props bordoni, delawski.
Fixes #34607.