Library view: Adjust controls for all template parts and reusable blocks

[richtabor]

@WordPress/gutenberg-design What do you think about using the same treatment as the MenuItems do in the Library panel for the Reusable / Template Parts controls?

*Or even prepend "All" to both, i.e. "All template parts"

[jasmussen]

On isolation for just this case, I think it can work.

I think we need to still find a design that works for sections that do not have icons, because we'll have a lot. Though important to consider #51144 which looks likely to land.

[richtabor]

I think we need to still find a design that works for sections that do not have icons

Perhaps just an empty space would work fine; though not if the whole group does not have icons.

[paaljoachim]

I mentioned this in another issue as well.
When I see the sidebar arrows > I think drill down or previewing a part as if it was a pattern.

As the > gives an indication of drilling down or previewing.

[Ren2049]

Something I always wanted to ask: why isn't there a "main" template part between header and footer? It could contain post-content and post-meta and simplify things.

[jameskoster]

For me the biggest issue is that there's nothing about the design of these items that indicates the difference in behavior. One is a drilldown, and the other sends you to wp-admin which is quite jarring. It feels like they should have subtly different appearance.

One idea could be to:

• Design a 'manage' menu item for the in-editor drilldowns
• Design a 'manage' menu item for the items that send you to wp-admin

A quick mockup:

Using the same decorative icon (cog) shows that both links are conceptually related. The chevron indicates a drilldown (consistent with other menu items in the sidebar). The external icon indicates you'll be sent elsewhere. The cog and external icons are just examples, there are likely better options.

Totally agree the labels should be consistent. It's a bit strange how we have a mixture of "Manage..." and "Manage all...".

[richtabor]

For me the biggest issue is that there's nothing about the design of these items that indicates the difference in behavior. One is a drilldown, and the other sends you to wp-admin which is quite jarring. It feels like they should have subtly different appearance.

Yea I was thinking that too. The extenalLink feels a bit odd - as it's not a new tab. But what about if we had a small arrow up right? Or is that the same thing ha?

[jasmussen]

I don't think the cogs work, and furthermore once we get extensibility here, there are going to be tons of legitimate use cases for not having an icon, so I really think we need a design where not having a main icon on the left works.

[jameskoster]

I really think we need a design where not having a main icon on the left works.

Don't we already have this? This icon on the left is optional.

I can take or leave the left icons in this particular case, but indicating the behavior – drilldown vs link to wp-admin – is important. The chevron works fine for the latter. Maybe the absence of an icon is adequate for the former:

[jasmussen]

Yep, I think that can work, perhaps the question is whether it would look weirder if the text was indented past the missing icon or not. Main challenge is that the icon footprint doesn't perfectly align with the text, so we might want to have at least, say, a 4px left padding for text-only items so it feels like it kinda lines up.

[jameskoster]

icon footprint doesn't perfectly align with the text, so we might want to have at least, say, a 4px left padding for text-only items so it feels like it kinda lines up.

Ah I see. The trade-off there is that the labels wouldn't align with the panel descriptions as they do now:

It would also look a little strange when the panel contains only menu items with no icons:

---

The alignment issue caused by icon footprints is coming up quite a bit, and I'm not sure it's really sustainable to have ad hoc solutions sprinkled across the app. I don't have a good idea how to do it (and it's definitely separate to this issue), but it feels like the solution should be applied to the icons/icon component if at all possible. One to keep on the back burner I suppose.

[jasmussen]

Right, another solution is to adjust the left padding of the icon button to optically match.

[jameskoster]

I don't think we should do that tbh:

The alignment issue caused by icon footprints is coming up quite a bit, and I'm not sure it's really sustainable to have ad hoc solutions sprinkled across the app. I don't have a good idea how to do it (and it's definitely separate to this issue), but it feels like the solution should be applied to the icons/icon component if at all possible. One to keep on the back burner I suppose.