Fix template part area variation matching

[talldan]

What?

Fixes #45935

Ensures template part semantic variations are shown correctly.

Why?

This was a regression

How?

Template parts have two different categories of variations. Area variations and instance variations.

The problem was that both area and instance variations can have the same name ('header' or 'footer'), and the name for block variations should be unique. When registering the variations, the first 'header' area variation was being registered correctly, but the 'header' instance variation failed to be registered due to an existing variation with that name.

The variation match function then failed because it prioritises matching by an instance's slug (since #45672), and the 'header' instance variation failed to be registered.

The fix is to add unique names for area template part variations and instance template part variations, so they can peacefully co-exist.

After feedback, this PR now also avoids showing the area variation in the inserter when a matching instance variation exists.

Testing Instructions

1. Open the site editor
2. Select a header or footer template part
3. Ensure it has the 'header' or 'footer' semantic area set (check the Advanced panel in the Inspector)
4. Observe the icon, and block name in the Inspector

Screenshots or screencast

[talldan]

@jameskoster Unfortunately this does introduce a separate issue. Now that the variations work correctly this situation can occur in the block inserter:

Here you have 'Header' and 'Footer' variations for inserting new empty template parts for those areas. There are also 'Header' and 'Footer' template parts for inserting existing template parts with those names.

Some possibilities for resolving this:

• Hide the inserter items for new empty Header/Footer template parts when an existing template part exists (assuming the user is more likely to insert the existing template part.
• Differentiate the 'instance' template part variations from the others by using different icons or moving them to the 'reusable' tab.

[github-actions]

Flaky tests detected in 7f785ba.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4616504085
📝 Reported issues:

• [Flaky Test] prevent the removal of locked column block from the column count change UI #49534 in /test/e2e/specs/editor/blocks/columns.spec.js

[jameskoster]

Thanks for the PR 🙏

Good spot with that duplication issue in the Inserter.

or moving them to the 'reusable' tab.

I suspect something like this may happen naturally as we explore #48458 in more detail, but that's a little way off.

Hide the inserter items for new empty Header/Footer template parts when an existing template part exists (assuming the user is more likely to insert the existing template part.

This seems like the better short-term approach to me.

Otherwise this is working as expected:

Before

After

[jasmussen]

Just referencing #35453, which may need to be closed as wontfix as a result of this one. Which is probably fine, for simplicity, it seems okay to move this forward. The purple has helped a lot in making the reusable pieces feel as such.

[ntsekouras]

Differentiate the 'instance' template part variations from the others by using different icons

I think that's a better approach, given the insertion flow for these variations with targeted patterns etc..

[jameskoster]

I think that gets a bit tricky. A user is unlikely to understand the difference between two blocks called "Header", even if they have different icons.

I'd also say that once you've created a header or two, it's much more likely you'd want to insert one of those directly, rather than inserting the empty instance and selecting from there. IE the value of the empty Header template part goes down quite a bit.

The only reason I can think to insert the empty instances would be to create a new template part from scratch. If this is the route we want to go down, then I think it might be better to repurpose those blocks to be more about creating new template parts. This was proposed a little while ago in #31746. The designs are a bit out-of-date, but it communicates the idea.

[talldan]

I've updated the PR to hide the inserter variations for areas when a matching instance is found for that area.

This was proposed a little while ago in #31746. The designs are a bit out-of-date, but it communicates the idea.

Oh yeah, forgot about that one, I never did get it working in a satisfactory way. I'll remove my assignment myself for now, but it'd be worth taking a look at it with fresh eyes.