Custom labelling/naming of blocks in List View #42605
Closed
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
getdave
added
[Feature] List View
getdave
commented
Jul 21, 2022
getdave
requested review from
ellatrix,
ajitbohra,
ryanwelcher,
juanmaguitar and
fabiankaegy
as code owners
|
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.
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 |
|
Ok folks I've rebased this branch. Looks like there's a few tasks:
One done and working we can revisit the a11y side of things. |
getdave
added
[Type] Enhancement
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.
getdave
removed
the
[Feature] Block API
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. |
49 tasks
getdave
force-pushed
the
try/list-view-custom-group-labels
branch
from
279c583
to
6f6e51b
Compare
getdave
force-pushed
the
try/list-view-custom-group-labels
branch
from
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? |
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?
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.__experimentalLabelmethod on block settings to utilise thenameattribute 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
__experimentalLabelfunction on block settings if metadata support fornameis enabled on block.__experimentalMetadatato 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.jsto utilise metadata to retrieve the custom name. This will greatly expand the scope of the PR.hasBlockMetadataSupporthasBlockMetadataSupport__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:
metadataattribute to WP Core.Testing Instructions
ENTER.aliasattribute.Screenshots or screencast
Screen.Capture.on.2022-08-01.at.16-06-07.mov
Closes #33583
Co-authored-by: Alex Stine alex.stine@yourtechadvisors.com
Co-authored-by: Jorge Costa jorge.costa@developer.pt
Co-authored-by: Andrei Draganescu 107534+draganescu@users.noreply.github.com