-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Custom labelling/naming of blocks in List View #42605
Conversation
Size Change: +845 B (0%) Total Size: 1.51 MB
ℹ️ View Unchanged
|
This excellent, but how do I implement this for testing? |
This has the added benefit of allowing a block to have a unique identifier that can be accessed via code as well. AFAIK, there is currently no way for blocks for one block to save a reference to another block instance. This might address that issue as well. |
Took it for a spin and seems to work well! A couple notes:
Screen recordingCleanShot.2022-07-21.at.11.59.45.mp4 |
Hey @BrunoAHVincent I use this approach for testing a PR: https://make.wordpress.org/design/2021/03/03/testing-a-gutenberg-pull-request-pr/ Thank you very much for working on this PR @getdave ! |
Thank you so much for starting this @getdave. On top of @richtabor's suggestions, I'll add: it would be nice if the alias was automatically selected/highlighted when entering the edit state. |
Let's do some thinking about this for keyboard users. How would they edit as double clicking is not possible? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for picking this one up @getdave, I'm very excited to see you exploring an implementation here! Just left a couple of comments from some thoughts I'd had about how we might store the data in block attributes, and whether we should consider the future possibility of other metadata-like values that wouldn't be used on the site frontend.
nice feature 👍 Can we take the name and make it the element's ID and/or class as well? |
Screen.Capture.on.2022-07-22.at.12-38-43.movThanks for the feedback everyone. I've made some changes:
✅ This now works as suggested.
✅ @richtabor I'd love some further input on whether you think this works better now I've tweaked it?
✅ This is now implemented. Some other elements I haven't managed to address (yet):
@alexstine I was thinking perhaps we'd have a button next to the label which you could "click" to activate editing mode. This could be visually hidden (or not as required). However, the problem is that this would mean we'd have a button within a button because the whole list view "node" is a button. What can we do here? Can anyone see a workaround that might work? What other types of interaction have you come across for something like this? |
Adding a 'rename' item to the ellipsis menu could assist general discovery and keyboard usability of this feature. Ideally there should be a quicker way to invoke edit mode though. I think it might be good to reflect the custom name in the Inspector. Do we need the block-type suffix? It's adding quite a bit of noise 🤔 It's not working for template parts: template.part.mp4 |
This comment was marked as resolved.
This comment was marked as resolved.
1 similar comment
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as outdated.
This comment was marked as outdated.
Circling back here; is there a blocker here? |
No blocker. The next steps are as per #42605 (comment). I've been away and just dealing with some urgent pings before circling back to this PR. |
279c583
to
6f6e51b
Compare
6f6e51b
to
7f6f77f
Compare
I cannot test this for accessibility until the rename option is added to the block options menu in the list view. There is no easy way to simulate a double click using the keyboard. |
I wonder if it is OK that we're building the inline edit component into the list view. Should we not have it in the components package and reuse it across the list view, the inspector and the block toolbar? I think this would also work to have this sort of UI interaction properly accessible (announcements, labeling, marup wise). |
@alexstine This PR has become rather stale and was proving hard to refactor to marry up with the changes in @draganescu I think that's a great suggestion. Thanks for raising it. I wonder whether it would be best to first use a simple component in this PR and then when more use cases become evident extract a reusable component? |
What?
In #33583 we learnt that many people want to be able to give blocks in the List View a custom name/label.
This PR
is an experiment toexplores how this might work. Currently it works for Group blocks only and allows you to double click on the block name and provide an alternative label for the block.Why?
It's an important feature to allow users to distinguish between blocks in the List View. Given that they are currently all labelled by the block name it can be difficult to distinguish between them.
How?
This builds upon the great work in #41855 and now also from #40393.
In short it:
adds Block Supports definitions fordone separately in Adds block supports for metadata #43986__experimentalMetadata
.__experimentalLabel
method on block settings to utilise thename
attribute if it is set.The approach of using a block attribute to store this alias is up for debate. I favour it because , by virtue of it being a block attribute, it is portable between editors/posts...etc. This may not be desirable however and we may prefer to store this information in the editor settings on a per editor basis.Solution shipped in #43986.Todo
__experimentalLabel
function on block settings if metadata support forname
is enabled on block.__experimentalMetadata
to bring into line with Try: Add metadata attribute to blocks allowing section naming and future semantic meta information #40393packages/block-editor/src/components/block-title/use-block-display-title.js
to utilise metadata to retrieve the custom name. This will greatly expand the scope of the PR.hasBlockMetadataSupport
hasBlockMetadataSupport
__experimental
.ENTER
- currently returns to canvas.Potential followup features
The following features probably won't make the cut for this PR but could/should be considered for future:
metadata
attribute to WP Core.Testing Instructions
ENTER
.alias
attribute.Screenshots or screencast
Screen.Capture.on.2022-08-01.at.16-06-07.mov
Closes #33583
Co-authored-by: Alex Stine [email protected]
Co-authored-by: Jorge Costa [email protected]
Co-authored-by: Andrei Draganescu [email protected]