Use standard button variations for the Post featured image UI. #65747
Conversation
afercia
added
[Focus] Accessibility (a11y)
|
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. |
|
Size Change: -186 B (-0.01%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
|
cc @WordPress/gutenberg-design |
|
I agree that we should avoid ad hoc customisations of core components. However this doesn't feel like the right solution to me. Both buttons have way too much prominence given they're relatively infrequent actions. I don't love this, but sharing in case it inspires other ideas... of the existing patterns we might try a toolbar-like approach: 
|
Yea, I don't love this either. |
|
Thinking about this one a little more I think it might make sense to revisit once we've designed an accessible DropZone/Upload component. Ideally that could be used here without any modifications. There's some early discussion in #65333. |
I agree but that's the symptom, not the cause. Setting a featured image is infrequent, that's correct. It's usually an editing flow that is a 'do once and forget'. As such, the new design that moved the featured image at the top of the post Summary is far from ideal in the first place. As a user, I don't need to see the featured image each time I look at the settings panel in such a prominent position. The featured image as too much, unnecessary, prominence. I do think the root cause is in the new design and that should be changed. Additionally, the new design removed the heading that used to identify the Featured image section. Removing headings is far from ideal. Any section of content and settings should be identified with a clear, meaningful, heading. On top of that, when a featured image is set, there's really nothing to tell users what this image is. I'm planning to create a separate issue to change the whole design of the featured image UI. It is also worth noting that in other issues, direct feedback from users pointed out that the Status and Publish date should be the first things in the Post Summary. The featured image is certainly an important information but it's less important than Status and Publish date. To me, the new design didn't take into consideration functionality and usability and instead prioritized 'visual appearance' rather than a functional analysis. That's not the kind of design I'd love to see in WordPress. |
I agree. That's why teh featured image shouldn't be the first thing in the Post Summary in the first place, as I mentioned in my previous comment. |
@jameskoster the ongoing exploration in #65333 would certainly help. However, it is important to understand that the 'Replace' and 'Remove' buttons of the Featured Image UI aren't part of the drop zone component. As such, I'm not sure #65333 would solve the fundamental issue we're discussing here. I'd appreciate any alternative design as long as the buttons are always visible and use a standard variant. Thanks. |
|
This seems like multiple problems within problems. The first is hierarchy of information, the second is the featured Image needs a heading with actions having the right prominence. Fixing hierarchy first helps fix the other two. In the screenshot I've given the Featured Image a heading, moved it lower, and the actions are accessed from an ellipses. This allows us to not have to make a new button variant or make a new component entirely, and in the future if we ever wanted to have more actions like "Generate featured image using AI" or something, it would fit within the menu. This design decision does come with tradeoffs. The side panel becomes less overwhelmed with buttons, but it makes the actions one additional click to access.
|
|
If moving the featured image is on the table, and we feel it is too prominent, then we should also consider grouping it with all the other field rows. This PR is relevant. Edit: Sharing a design from the aforementioned issue. This is tailored more towards regular image fields, but could also be used for the Featured image. Edit 2: I should add that this is a pattern we could consider for componentisation so that it can be reused in other areas of the UI where users upload to the media library / set media fields / etc. For example setting the site logo / icon in settings. 
|
|
I'd agree tha tmoviing the featured image UI down in teh panel helps. But that's a more broader issue that applies to other settings as well. For example, the excerpt.
That's a broader issue related to the recent redesign of the Pos tsummary panel that, in my opnion, needs to be deeply revisited. I'd suggest to keep that separated and only address the featured image UI in this PR / issue. I'd also like to remiind everyone that some parts of the Post summary panel redesign have already been reverted (the trash button, the revisions link) and other ones will be likely reverted as well (the sticky setting) because they were hidden behing an ellipsis menu. As such, I'm not sure moving the Replace and Remove buttons into an ellipsis menu is the right direction because that's a pattern that direct user feedback reported as problematic and not discoverable. HIding things doesn't make an UI better usable. |
afercia
force-pushed
the
fix/featured-image-buttons
branch
from
4278b37 to
3860024
Compare
afercia
force-pushed
the
fix/featured-image-buttons
branch
from
3860024 to
11316ea
Compare
|
One more good reason to make the Replace and Remove buttons always visible is well explained in #66005. |
Addresses part of #62743
What?
Custom implementations and styling aren't great for the reasons explained in #62743.
This PR aims to use default button variants for the Post featured image buttons 'Replace' and 'Remove'.
Also, as reported several times, controls that appear and disappear are a problem for accessibility and should be avoided.
Lastly, controls for destructive actions in WordPress should be red.
Why?
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
Screenshots before and after: