Show visual label for Categories block in dropdown mode #56364
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
carolinan
added
[Block] Categories
|
Size Change: +262 B (+0.01%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
carolinan
requested review from
ajitbohra,
ryanwelcher,
juanmaguitar,
fabiankaegy and
ndiego
as code owners
|
Flaky tests detected in 86bd7d3. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9168478256
|
afercia
reviewed
Jan 2, 2024
afercia
reviewed
Jan 2, 2024
afercia
reviewed
Jan 2, 2024
afercia
reviewed
Jan 2, 2024
|
Overall, it looks a great improvement to me. It fixes a clear accessibility issue and an inconsistency with similar blocks e.g. the Archives block.
I'd think these two blocks should work in the same way for users, and hteir controls should be placed consistently. Of course, it can be done in a follow-up.
|
|
The editor uses two different options for toggling the display of labels:
Because this is option is conditional; only available when the drop down option is enabled, it makes sense to move it to the sidebar. |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @tofumatt. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Nice one. The only thing that stands out to me is this one: The fact that the label field appears and disappears like that is a little bit confusing, because it is mixed in visually with the other toggles. One small thing you could do is indent it, to indicate that it's a toggle that's dependant on the parent:
Whatever left padding those checkboxes have, if you can appy that to the label toggle, it'd arguably help. Another option is to do that, but also permanently show the indented label toggle — just show it grayed when the parent is untoggled. Something to consider. |
|
If we want to use this design, should it be implemented on all controls that show conditionally depending on the state of a "parent" ? 
|
|
This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress. If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged. If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack. Thank you! ❤️ View changed files❔ packages/block-library/src/categories/index.php |
Do you mean we should have guidelines that should be followed in similar contexts? If so, I agree. |
|
Great, I do think there are some inconsistencies. A separate tracking issue may be needed to solve them. Does this PR need any other changes? |
|
This would work for me, but unfortunately I won't have time to check the code otherwise: 
|
Closed
|
So, do I need to change the design back to what it was? @jasmussen |
|
I have hid the "Show label" control unless the "Display as dropdown" option is enabled, and kept the indentation. |
jasmussen
approved these changes
Jul 15, 2024
scruffian
pushed a commit
that referenced
this pull request
Jul 15, 2024
Categories: Add an option for making the label for the select element visible, and make the label editable. Unlinked contributors: tofumatt. Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Jul 18, 2024
6 tasks
gziolo
reviewed
Sep 20, 2024
| $wrapper_markup = '<div %1$s><label class="screen-reader-text" for="' . esc_attr( $id ) . '">' . __( 'Categories' ) . '</label>%2$s</div>'; | ||
| $show_label = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : ''; | ||
| $default_label = __( 'Categories' ); | ||
| $label_text = ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; |
There was a problem hiding this comment.
See comment from @peterwilsoncc while syncing packages to WordPress core:
Escaping label text
There was a problem hiding this comment.
I will create a PR for this and add the backport to beta label.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Updated January 3 2024.
Right now the Categories block in dropdown mode does not show a visual label.
This pull request makes the label text customizable and visible by default if the block's dropdown option is enabled.
Closes #11003
Why?
A label is required because the select list is a form element.
The label is always present in the markup, but before the PR, it was not editable.
So even if the user kept the label visually hidden, they were unable to edit the label based on context.
There was no way to differentiate the blocks if multiple of them were placed together.
There was no visible label in the editor, and no option to show the label on the front.
How?
Adds two new block attributes to the categories block: label and showLabel.
Replaces the hard coded label with richText so that users can change the text.
Adds a toggle button in the block sidebar that toggles the visibility of the label. This option is only available when dropdown option is enabled.
Testing Instructions
Testing Instructions for Keyboard
I tested this with VoiceOver on Chrome, mac.
Create a new post or page
Insert a categories list block.
Navigate to the block settings sidebar. Navigate past the tab selection until you reach the Settings tab-panel.
The first option in the settings tab-panel is the "Display as dropdown". This is a tickbox. Pressing space or enter should change the state from unticked to ticked.
Navigate back to the block in the editor canvas.
When the block is selected, the block name is announced.
Press the down arrow key. The screen-reader should announce that you are on a label element and that the text can be edited. It should read the current label text, and that the inserter is at the end of the text.
Editing the text should read out the individual letters.
Save, and continue testing the block on the front.
Navigate to the menu-popup in the content. Confirm that the text you entered in the block's label is announced when the select list is focused.
Screenshots or screencast
In the video, I add a categories block and enable the option "Display as dropdown". Then I click on the visible label and i enter a custom text "Cats". Then I select the text and make the text bold by clicking on the option in the toolbar.
I view the block on the front of the website. Then I go back to the editor, turn off the "Show label" option, save, and go to the front of the website. Here I use the browser developer tools to check that the label is present, but visually hidden.
categories-2024-01-03.mp4