Gutenberg Contributors Experiment with Custom Labeling of Blocks in List View

It’s easy to get lost among a sea of Cover, Group, and Paragraph blocks while navigating the block editor’s List View. Clicking around wildly will generally surface the block you’re seeking, but it’s not efficient or intuitive. Gutenberg contributors have some ideas and prototypes aimed at giving the List View more context.

Rich Tabor proposed a solution where users can double-click to rename a block within the list, giving it a unique identifier. Gutenberg developer Dave Smith created an experimental PR that adds custom labeling/naming of blocks in the List View. It currently works for Group blocks only. Tabor posted a demo to Twitter and the response was overwhelmingly positive.

“Custom block labels in the List view is a must-have,” Chris Bell commented on the original proposal. “It improves productivity and adds psychological order/control over the layout.

“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.” He posted an example of what that might look like.

Extra long labels would simply be truncated to maintain the width of the List View:

Smith posted a list of questions regarding the technical implementation he proposed:

  • Is alias attribute the best place to store the data?
  • Should the custom label be local to the editor or should it be attached to the block?
  • Can we add a means to “reset” the custom label and go back to the standard label?
  • Do we need a “submit” button as well as the ENTER-to-submit mechanic?

Contributors are currently testing and weighing in on these questions. Smith recommended progress on the feature wait to align with the solution in another active ticket that seeks to add a metadata attribute to blocks, allowing section naming and future semantic meta information. Once that is resolved, custom labeling for blocks in the List View will have a more straightforward technical solution.

In the meantime, Gutenberg 13.7 added a related update as a first step that improves navigation in the List View. It will now automatically display Heading content for the button label text when available.

If you are using the Gutenberg plugin, this is available right now in the most recent update. Custom labels will be coming next to provide a clearer overview of other types of blocks and make page building/editing much easier.


5 responses to “Gutenberg Contributors Experiment with Custom Labeling of Blocks in List View”

  1. While I believe that it is a no-brainer, that one should be able to label Elements in the list view, I also think it must remain optional. That heading and elements by default show the text of the heading might work for some people, for others maybe not (I, for example, find it rather annoying). One must be able to choose to keep the labels generic — what is so hard with adding an option in the editor preferences?

    However, I really hope the option to individually label any list element you want will come soon, I totally miss it, every day (anyone knows if there is a plugin out there for this, in the meantime?)

  2. This feels too much like a balloon grab.

    For example, client renames a block and then at some point needs support – either from the dev / agency or from a co-worker (who have renamed the block something else). The client and reference their renamed name. Who else is going to understand them?

    Yes, this is a solution. Unfortunately, it creates fragmentation, rather than unification. It doesn’t solve the problem, just adds a band-aid.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: