Components: Update control labels to the new uppercase styles

[mirka]

The control labels need to be updated to the new uppercase styles:

[carolinan]

I know there are different research results and opinions, but has there at least been a discussion about the use of all caps and readability impact before this proposed change is merged?

[mirka]

I know there are different research results and opinions, but has there at least been a discussion about the use of all caps and readability impact before this proposed change is merged?

Good question! First off, I assume the intent is to aid the user in perceiving the information hierarchy more easily by adding more visual differentiation. And labels are pretty short by nature, so I don't think it'll get to the point where readability is clearly harmed. Just my opinion though.

Given that we're decreasing the font-size to 11px, I would actually be more concerned about non-Latin characters, especially those that don't have uppercase. For example, readability issues can start to creep up with CJK characters earlier than uppercased Latin characters. But the codebase already contains a good number of label-like text at 11px (but no smaller), so I guess that's kind of like our de facto lower bound.

@pablohoneyhoney has been leading the redesign, I'll defer to him for more in-depth reasoning. (cc @WordPress/gutenberg-design)

[mirka]

It's been a week so we're going to be merging this for now. But if folks wants to continue this discussion, I just wanted to note that the label styles will be very easy to change moving forward, thanks to the refactor.

[bobbingwide]

I believe this change has caused a problem for the Jetpack Consent block.
bobbingwide/bobbingwide#77

[mirka]

@bobbingwide Hi there! I'm not sure what the Jetpack Consent block is, but based on the screenshot you posted in #34345 (comment), it looks like multiple things are wrong with the block's implementation. For example, the "By submitting your information..." text is too long and inappropriate for something to put in a label element. The checkbox label also seems to be nested within the original label, which is incorrect as well. Could you perhaps open an issue in the repo where the Jetpack Consent block lives? These are not merely visual issues but semantic issues as well, so they should definitely be addressed.

[bobbingwide]

@mirka The problem is that the text in the <label> is being uppercased by the block editor, which makes it fairly unusable as a text entry field.
Assuming no one else is going to attempt to answer @carolinan's concern, I still believe the CSS should be more appropriately targetted to the block editor's labels in the settings area.

BTW: I've since found more blocks that have been adversely affected by this change.

[mirka]

@mirka The problem is that the text in the <label> is being uppercased by the block editor, which makes it fairly unusable as a text entry field. Assuming no one else is going to attempt to answer @carolinan's concern, I still believe the CSS should be more appropriately targetted to the block editor's labels in the settings area.

Yes, the thing is that the component labels we uppercased are not intended to be used as text entry fields, and even when they are for some reason, those label elements probably shouldn't contain strings too long to be readable in all caps. And note that we did not uppercase the label for the CheckboxControl component, because that would indeed be unreadable. So if a block is using these components in such a manner, that needs to be addressed on the block's side.

BTW: I've since found more blocks that have been adversely affected by this change.

Good to know! If you could post some links to their code we could perhaps give better guidance on usage.