[Data Views] User patterns: Use excerpt as description #60549
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
Enable excerpts on the w_block post type. On the Site Editor Pattern pages, use the excerpt as the description for user created patterns.
carolinan
added
[Type] Enhancement
|
Size Change: -853 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
|
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 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. |
|
This would be a great change to get in, thanks for working on it. It's working well for me in testing. It might also be good to announce the description in the inserter when a pattern is focused: And there are a couple of places it might be good to show it visually too, in the details sidebar in the site editor: And also in the block card in the inspector (though I think this one is low priority, and I'm not sure how easy it is): My feeling is that it might be nice to change the 'Excerpt' / 'Write an excerpt' labelling to 'Description', as I imagine it might be called that elsewhere (like in the table/grid view for patterns), but that could be something that's open to opinion, so would be good to discuss. |
|
I agree, I did not explore those cases because I wanted to keep the initial change small. |
|
I don't think it is ideal that the description is announced together with both the pattern name and the editing instructions. I found this confusing because it is not clear when the name, instructions, and description starts and ends. |
|
I changed the position of the description and the instructions and added an em dash. But there is still no pause between the pattern name and the description: Pattern name description —Press Enter to Edit, or Delete to delete the pattern., button, group |
Oh, I'm surprised that text is still there. I think it can be removed now as the pattern grid has been completely replaced. It was only present before because there was no way to use the keyboard to reach the delete button. These days you can tab through every focusable element in the list. In my testing, the delete key also no longer works, so there's that too. |
|
On the Editor > Patterns screen, patterns that are not created by users does not have their description announced to screen reader users, nor visibly through a tooltip or similar. The description should be announced in the same location on all types of pattern, because inconsistencies will make the pattern screens more difficult to use. Related to but not caused by #60653 I could open a separate issue, but since the description really should be in one consistent location, it could be fixed in this PR if we can agree on a better way to announce it. This PR would be blocked until that is solved... |
- Removes the instructions from `ariaDescribedBy`, since they were not working and are not needed anymore. - Because only one piece of content is added to `ariaDescribedBy`, the `ariaDescriptions` array and the `.map()` are not needed anymore, and are removed.
|
I don't know what has already been tried. Could we not use the button for all pattern types and parts and make sure the preview is always focusable, but disable the button with |
- Remove the condition that hides the item description on non user patterns. - Use the button for all pattern types and for parts. Disable the button for patterns that are not editable. - Add a title attribute on the non user patterns, to try to avoid confusion for sighted users that clicks the disabled button.
|
Thanks for the PR! I haven't checked the code yet, but I thought I'd share some first thoughts.
We are working towards removing the details sidebar, so we shouldn't be adding anything new there. The goal is to move things in the inspector controls sidebar and there are designs for excerpt too.
I think that's fine if the buttons is disabled properly. I'd do it separately though the style changes it needs are a lot (that's my impression).
I didn't know about that. Maybe remove it here, so it the announcement is not confusing? |
@ntsekouras, do you have a link to an issue or the design file referenced here? The pattern description is a request several of my clients have had, so I'm curious how it would appear without the details sidebar. |
Designs about the move of excerpt are here: #59689 |
|
When the pattern is not editable:
That different things happen when you click on different types of patterns is not a great experience. Things to consider:
|
ntsekouras
reviewed
Apr 19, 2024
ntsekouras
reviewed
Apr 19, 2024
ntsekouras
reviewed
Apr 19, 2024
ntsekouras
reviewed
Apr 19, 2024
There was a problem hiding this comment.
I've left a couple of small comments, but this looks good to me. With this PR and when the excerpt update PR lands, we'll also have the proper labelling (description).
A follow up could be to update the patterns list (Data Views) to add this field.
Rename blocks.php to post.php. Remove the title attribute from the button. Reset the cursor style to the default when the button is disabled.
ntsekouras
approved these changes
Apr 22, 2024
There was a problem hiding this comment.
LGTM, thanks!
An issue that I observed is the display of the preview in table view is different between the patterns that are editable and the ones that are not. This is on trunk too, so we could land this and follow up with that. I'll cc @jameskoster if he can come up with some quick css to handle that.
|
Good spot @ntsekouras, I pushed a fix. |
|
Trac ticket: https://core.trac.wordpress.org/ticket/61250 |
pento
referenced
this pull request
in WordPress/wordpress-develop
May 23, 2024
The purpose is to enable using the excerpt as a description for user-created patterns on the Site Editor Pattern screens. This commit backports the original PR from Gutenberg repository: * [[https://github.com/WordPress/gutenberg/pull/60549|#60549: [Data Views] User patterns: Use excerpt as description]] Reference: [[https://github.com/WordPress/gutenberg/issues/55244|#55244: Patterns: Add descriptions to user-created patterns]]. Follow-up to [44146], [44150], [50835], [56030]. Props poena, ntsekouras, krupalpanchal. Fixes #61250. git-svn-id: https://develop.svn.wordpress.org/trunk@58184 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
referenced
this pull request
in markjaquith/WordPress
May 23, 2024
The purpose is to enable using the excerpt as a description for user-created patterns on the Site Editor Pattern screens. This commit backports the original PR from Gutenberg repository: * [[https://github.com/WordPress/gutenberg/pull/60549|#60549: [Data Views] User patterns: Use excerpt as description]] Reference: [[https://github.com/WordPress/gutenberg/issues/55244|#55244: Patterns: Add descriptions to user-created patterns]]. Follow-up to [44146], [44150], [50835], [56030]. Props poena, ntsekouras, krupalpanchal. Fixes #61250. Built from https://develop.svn.wordpress.org/trunk@58184 git-svn-id: http://core.svn.wordpress.org/trunk@57647 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
referenced
this pull request
in gilzow/wordpress-performance
May 23, 2024
The purpose is to enable using the excerpt as a description for user-created patterns on the Site Editor Pattern screens. This commit backports the original PR from Gutenberg repository: * [[https://github.com/WordPress/gutenberg/pull/60549|#60549: [Data Views] User patterns: Use excerpt as description]] Reference: [[https://github.com/WordPress/gutenberg/issues/55244|#55244: Patterns: Add descriptions to user-created patterns]]. Follow-up to [44146], [44150], [50835], [56030]. Props poena, ntsekouras, krupalpanchal. Fixes #61250. Built from https://develop.svn.wordpress.org/trunk@58184 git-svn-id: https://core.svn.wordpress.org/trunk@57647 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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?
Enable descriptions for user created patterns by using the excerpt field.
Partial for #55244
Why?
User created patterns did not have an option to add descriptions. Text only descriptions are important for users who are unable to see or interpret the content in the pattern preview.
How?
This PR:
wp_blockpost type (This PHP change will eventually need a backport tocreate_initial_post_types()in wp-includes / post.php).convertPatternPostToItemand assigning it to the description.Todo:
The PR does not populate the excerpt field with the description when a theme or plugin pattern is duplicated into a user created pattern.
Testing Instructions
The excerpt field can be tested both with a classic theme and block theme, when creating a new pattern or editing an existing pattern. The field should show in the "Pattern" sidebar panel, below the categories.
The Site Editor Patterns page can only be tested with a block theme:
Activate a block theme.
Create a new pattern. (It doesn't matter if the pattern is synced or not)
Add an excerpt to the pattern, save.
Go to Editor > Patterns, select "My patterns".
If you have not already done so, activate your screen reader.
Navigate to the pattern that you just created: When you hear that the title of your pattern is announced, it should be followed by the excerpt.
You can also confirm that the excerpt text is output in the markup. It should be printed in a div inside another div with the class
dataviews-view-grid__mediaScreenshots or screencast