List View: Explore Naming Blocks

[richtabor]

What problem does this address?

The list view is out of context from the block content area, making it very difficult to actually tell what each list item represents among a sea of blocks, unless its interacted with and the user identifies the corresponding block on the right.

While we do support having anchors within the List view, why don't we instead allow naming of these list items, essentially treating them like layers in Figma/Photoshop/Sketch/etc.

What is your proposed solution?

A simple interaction where one can double-click to rename a block within the list view. This would provide instant context to what that block/group consists of.

[karmatosed]

I really like this idea and I would add one more request to add also other functionality like deleting to the list view. I find myself often wanting to remove a block using this interface and having a true layer interaction space would be very useful in the editor.

[deborah86]

I like the new list view. I find myself intuitively wanting to go in and change the name of the groups, rearrange blocks, and name the groups. Having the ability to do this would make it more useful. I was about to request this feature and I see that someone already put in the work and included a beautiful graphic.

[CHEWX]

Great idea!

[dgwyer]

This would be great for productivity and page management.

[tomfinitely]

Providing the ability to name blocks seems like a forgone UX conclusion: it would be next-level helpful, especially for creating bespoke tutorials for clients. I'm VERY excited to see this added to the list view.

[JiveDig]

I very much support this. It seems like, if this is added, the same field/label should also be available in the block sidebar (outside of list view) so you can name (let’s call it “label”) them while writing/editing/creating content.

[critterverse]

Nice!

It seems like, if this is added, the same field/label should also be available in the block sidebar

^ Sharing a previous sketch that could potentially compliment this proposal 😀

113611590-bb445380-961c-11eb-92fe-5d699f679a6c.mov

[carolinan]

Maybe it should still show the block type? "Features area (Group)"

[dgwyer]

Maybe it should still show the block type? "Features area (Group)"

Or show block type when hovered over? It might add a lot of visual 'noise' displaying a custom label and the block type together?

[dgwyer]

Should a custom block label be a different color to the default block type label to indicate it has been changed? Or be italicized etc?

[heyjoecampbell]

#GreatIdea 👍🏽

[talldan]

This was previously proposed for group blocks - #16296, and there are some comments on that issue. It could be worth going back and closing that one as a duplicate if this issue gets more traction.

For some background, there have been some alternative ideas that have been explored along similar lines:

• Being able to edit parts of a block directly in List View, though I don't think is going to progress any further (Navigation menu block: allow editing of new menu items from the block inspector UI #20748, Allow editing of new menu items from the block inspector #22210)
• The navigation link and template part blocks display their 'labels' in List View and more block types could do this (Try setting a block display name for the Block Navigator. #17519)

Technically the name would probably have to be stored as an attribute on a block. I don't want to come across as being negative about the idea, but thinking realistically, that constraint might make it difficult to add this for all block types, but naming a group block could work. Some other blocks also already have names/titles, like the reusable block, and my understanding is the navigation block will also get a label in the future.

A simple interaction where one can double-click to rename a block within the list view.

This needs some thoughts around accessibility, and how keyboard interaction would work. There's been a lot of push back around introducing more controls in list view in the past (this is the article that's always cited - https://adrianroselli.com/2020/07/aria-grid-as-an-anti-pattern.html), which is why other functionality like block movers and settings are not exposed. As a first iteration, naming only in the inspector might be worth exploring. With the persistent list view it's easy to have the inspector open side-by-side with list view.

[amongthestones]

💯

[adamziel]

I wanted to surface a discussion I had with @draganescu. Andrei asked:

could we do some magic that makes the HTML Anchor attribute that all blocks have be human readable at all times but properly encoded at all times

To which I replied:

Let's see what HTML spec says...
https://html.spec.whatwg.org/multipage/browsers.html#scroll-to-fragid
To find a potential indicated element given a string fragment, run these steps:

1. If there is an element in the document tree that has an ID equal to fragment, then return the first such element in tree order.
2. If there is an a element in the document tree that has a name attribute whose value is equal to fragment, then return the first such element in tree order.
3. Return null.

Which then became a matter of having either a invisible <a name="Human readable name"/>, or using whitespaces in IDs.

According to developer.mozilla.com:

id’s value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID

Still, technically this worked:

[skorasaurus]

very similar/overlaps with #21452 which proposes to use a block's content as the name

[fwazeter]

Read the Full Discussion thread in slack..

General agreement is that this would enhance the editing experience in using gutenberg as a publishing platform. The proposed initial implementation would keep the renaming feature to the list view only.

Two versions of the idea were proposed: just renaming to anything the user set, or explicitly defining the block type, e.g. "About Section" vs. Group: "About Section" to remind the user of the type of block.

General resolution is that the existing block icon display is sufficient enough to remind user of the block type, and for now just keep it to be the user renamed label.

[dgwyer]

General resolution is that the existing block icon display is sufficient enough to remind user of the block type, and for now just keep it to be the user renamed label.

For core blocks this may be so, but not necessarily for 3rd party blocks? Perhaps showing the block type on icon hover would be prudent for consistent block type discovery, when using the list view?

Otherwise it might be a bit confusing when faced with a long list of (renamed) blocks and you just quickly want to know which block is which.

[getdave]

Having built a block theme over the weekend, in my opinion this is something we could/should be looking at implementing.

@gwwar has been working a lot on List View. I wonder if she has bandwidth to explore this?

[gwwar]

The UI for this is pretty straightforward, but the interesting part is where we decide to store the data. Have we given some thought to where we'd serialize this? For example is this a name attribute on a group block or something more generic like a named alias for any block (which might be stored as metadata).

I may free up later if I can help finish wrangling some perf/dragging issues.

[chrisbellboy]

Custom block labels in the List view is a must-have. It improves productivity and adds psychological order/control over the layout.

Personally, I think popovers should only be used for extra long edge-case custom labels as I imagine most labels will be 2-3 words max, which allows for:

Could even make the block type name smaller to provide bit extra space:

Edge case of a really long label:

On hover, perhaps show a popover:

[letasync]

After working on some patterns and templates I realised this is must.

[cthollaway]

This would be very helpful as we are moving towards building sites using only the block editor. I find it very easy to get lost when working with several covers and groups. Would love to see this come in a future update!

[paaljoachim]

I will post here in relation to testing: https://make.wordpress.org/test/2022/04/08/help-test-the-comments-blocks-for-wordpress-6-0

EDITING for clarity:
Switching out the Post Comments block with the Comments Query Loop block. Look at the the List view I see Group within Group within Group. Renaming the Group to Group Post Comments, Group Post Content, Group something would give a nice overview of what each Group contains. --> We should be able to rename the blocks in List view to whatever we choose.

[ockham]

@paaljoachim Are you suggesting that those Group blocks should infer those names automatically, or that the user should be able to rename them manually (as per this issue's original feature request)?

[paaljoachim]

Hey @ockham Bernie

"Are you suggesting that those Group blocks should infer those names automatically,..."

No. Those were just my own personal suggestion for renaming. As it would be a bit complex if we automatically added additional names to these.

"....or that the user should be able to rename them manually (as per this issue's original feature request)?"

Yes. It would be easier if the user themselves could rename especially the Group block.

[getdave]

I've started a PoC for custom labelling of blocks in the list view. Feedback welcome. Bear in mind it's an experiment.

[ghost]

It would be great to add a label at least for the group block as an attribute/prop like so:
<!-- wp:flynt/group {"name":"flynt/group","label":"My awesome pattern"} /-->

That way a pattern can be created with a group block as the top level block and easily be identified in the list view.
I create pattern for my clients and it is crucial that they can identify them.

[getdave]

Looking to pick this up again via #42605

[BrunoAHVincent]

Any updates on this yet, nearly 2024 soon!

[paaljoachim]

Hey @BrunoAHVincent

Check out this PR from @juanfra
Show the content of the paragraph and list items in the list view.
#50135

[ewerkstatt]

I second that. The list view is becoming confusing in real pages. Almost all well-known site builders (elementor, fusion, divi, etc.) allow to change the names, so why not also in the Block Editor?

[edwardpanas]

Just throwing this out there - Elementor has had this functionality in their plugin since before this thread started.

Interesting to see how conflated a simple request to label the blocks in list view has become in this discussion. Isn't software development an iterative process? Maybe add the simplest feature first (labelling blocks in list view) and then build on it (grouping blocks, using ID as the label, etc).

Yes, I realize that WordPress core and a page builder plugin aren't the same thing and I might be oversimplifying things, but this seems like a pretty straightforward fix to make Gutenberg a lot easier to use.

[richtabor]

@edwardpanas This actually should have been closed with the merging of #53735, which adds the functionality (in modal form for now) to the group block. Other blocks are being explored here: #54426

[edwardpanas]

@edwardpanas This actually should have been closed with the merging of #53735, which adds the functionality (in modal form for now) to the group block. Other blocks are being explored here: #54426

Thanks for the update. I'll check out the other issues.

[pavol-tuka]

What about using same name in bottom breadcrumbs?

@richtabor @edwardpanas