Add visual cue for Group block HTML Elements (Header & Footer) to List view

[richtabor]

What problem does this address?

There's no visual for which HTML element is chosen for Group blocks. The only way to know if by navigating to the block and opening the Advanced panel. This would help add understanding to the List view, highlighting the different HTML elements on the page. This initial proposal is around Header an Footer elements, but we could extend either of the ideas below to the others.

What is your proposed solution?

I have two ideas; we could do one — or maybe both even:

Proposal 1: Perhaps adapting the block icon within the List view to be relative to the HTML element, as least for Header and Footer, using the template part header/footer icons:

Proposal 2: When changing the HTML element to, update the block alias to that HTML element (if it is not set yet):

If we did both: Setting the HTML element to "Header" would update the List view as such (I lean towards this):

[richtabor]

Related https://github.com/WordPress/gutenberg/issues/33583

[annezazu]

@WordPress/gutenberg-design for extra thoughts!

[jameskoster]

I'm kind of torn on this, somewhat due to https://github.com/WordPress/gutenberg/issues/33583. But also because the clarity-add seems to be skewed quite heavily towards the original author (where it is arguably less useful).

If I know I set a group as a header then I have the context required to interpret list view. Otherwise it kind of looks like another type of block which could cause some confusion.

Do you think the strength of this change is watered down if folks can simply assign custom name to their blocks?

[richtabor]

Do you think the strength of this change is watered down if folks can simply assign custom name to their blocks?

I like the alias adjustment as then you wouldn't need to set a custom label per the HTML element chosen, unless you wanted to further. It's more clear what you have, without requiring you to act first to make it clear.

If I know I set a group as a header then I have the context required to interpret list view. Otherwise it kind of looks like another type of block which could cause some confusion.

But it looks like another type of block (a standard Group block) — without that HTML element context. Perhaps adding an icon and an alias is a bit far (as it does look like the Header Template Part block) but then again, it basically is the header template part block, just without header replacement.

I suppose that leads into another question of how different the models should be between a formal header/footer template part block and a group block with header/footer— but that's another issue I think :)

[jameskoster]

Heh, we're getting back into that discussion around whether template parts should be placed inside content :D

it basically is the header template part block, just without header replacement.

I think this is where I get tripped up. Something like an article header feels conceptually different to a site header. I don't know that folks would group the two together, so if they have the same appearance it could be confusing.

cc @WordPress/gutenberg-design 👀

[paaljoachim]

I have not used the Advanced HTML element drop down yet. So I am testing it right now and sharing thoughts as they come up.

Changing the HTML element to define a specific area of the site or page/post should be reflected visually in some way or another.

If I define the HTML element as a header, main, section, article, aside or footer. How would that affect the site in relation to corresponding areas?

Let's say that I add HTML element header or footer. Should it make any changes to the toolbar and sidebar settings of the Group block? Making it a hybrid header/footer template part and Group block.

Comparing Group block HTML element header/footer vs header/footer template part it seems that I could just use Group blocks and turn these into a header and footer to get more tools in the toolbar and sidebar setting options. Giving a nice benefit compared to standard header and footer template parts.

Does this mean that template parts (which in a sense is just a hidden Group block) should have the same toolbar and sidebar setting options as a Group block?

---

Now let's say that in List view that I would see a header icon because I changed the HTML element to reflect that it is now a header. It would have the same header icon as the default header template part. I believe for now there are lot's of questions that we need to solve before we begin with adding a visual cue. The biggest question would perhaps be the last question just above. --> Should template parts have the same toolbar and sidebar settings as a Group block?

[talldan]

There's potentially some overlap between this issue and https://github.com/WordPress/gutenberg/issues/20719 (which I unceremoniously closed 😄), in terms of having a better understanding of the document outline through List View.

If this change were made I would personally lean towards the second option (providing a better default for the alias), but without changing the block icon. I think those are already symbolic of template parts because of the way they're used in the inserter.

Something to consider is that the information architecture in List View is definitely getting a little complicated. Some blocks can have names (reusable, template parts, navigation, and soon groups) and use that for the block label. Some blocks show their content (headers, navigation links but there are plenty more that might benefit like button text, media captions etc.). Blocks also show their active variation title as the label and some show HTML anchor text beside the label.

The group block is a good example because it also has a variation 'Row' that can be made a <header> or <footer>, and it also could be nameable, so there needs to be a level of precedence in what's displayed in List View.

[jameskoster]

Could we use something similar to the anchor UI for this? 🤔

Edit: IE do something like this:

[paaljoachim]

Interesting idea @jameskoster Perhaps the Anchor field area could be a way to show different properties that should be visible. Such as the Group block defined as a Header or Footer etc.

[mtias]

I'm not sure this needs to be necessarily exposed in the list view. I would also avoid a capitalized Header, which is very confusing in the context of template parts, and favor presenting it as <header> instead.

[BE-Webdesign]

Here is a PR that explores this idea. Let me know whatever tweaks should be made. https://github.com/WordPress/gutenberg/pull/43040

[carolinan]

As a developer having the element visible in the list view would absolutely help me work faster. And not least, it would help me see if a page has a main element when reviewing the accessibility. For it to be useful it would need to be visible for all blocks that can have a different tag than its default, not only group. For example in Twenty Twenty-Two the main is the query block, not a group or template part.

I think it should only be available as a user preference, because I think it can be very confusing for some users.

[carolinan]

Do we still want to implement this, and if so does the design need to be refreshed?

Copied from the linked PR: