Header and footer patterns not working as expected in 6.6

[westnz]

Description

Header and footer patterns in WordPress are not functioning as expected. When you select a header or footer on a Page and select Replace, you can't replace it with a pattern - only existing template parts show up. Additionally, when you select a header or footer within a template, you can Replace it by choosing from patterns in the Settings sidebar. However, when you click on the three vertical dots in the List View and select "Replace," only existing template parts are displayed—patterns are not shown as expected, contrary to how we have taught users.

In both cases, Patterns should appear below Existing template parts.

Step-by-step reproduction instructions

1. Go to the Site Editor
2. Choose a header or footer within a page or template.
3. Click on the three vertical dots.
4. Select 'Replace'
5. You will only see existing template parts - no patterns

Screenshots, screen recording, code snippet

Screen.Recording.2024-08-01.at.9.55.03.PM.mov

Environment info

• I am using WordPress 6.6.1
• I am using Chrome

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[westnz]

Good day, folks. I just wanted to highlight that in all our training videos we have taught users that they can replace a pattern by clicking on the three vertical dots.

[miminari]

Thank you for the reporting. I was testing this.
The issue is that the patterns in the list of designs on the right Block tab don't appear in the Replace menu, right? This Replace function strictly replaces the template itself, whereas the Design tab's function replaces its contents.
While I'm not certain if this is a bug, it's a matter that definitely needs our attention. The potential confusion it could cause to users makes it all the more important that we address this issue promptly.

[westnz]

The issue is that the patterns in the list of designs on the right Block tab don't appear in the Replace menu, right?

Correct. The patterns in the list of designs should also appear below 'Existing template parts' when you click on Replace.

The potential confusion it could cause to users makes it all the more important that we address this issue promptly.

Agreed, thank you. We have already received queries about this.

As mentioned, our resources on Learn.WordPress.org also teach folks this method of replacing a template part pattern.

[t-hamano]

After investigating this issue, we discovered that the current behavior is intentional, and that #60203 changed the behavior. The purpose of this PR seems to be to clearly separate replacing template parts from selecting new patterns.

That said, I can't deny that the current behavior causes confusion for users.

@WordPress/gutenberg-design @scruffian Do you have any feedback on this?

[jameskoster]

Yes this is intentional, and I understand how it's confusing. There's a lot of conceptual overlap but these are separate flows... to clarify:

• The 'Design' panel in the Inspector allows users to replace all the blocks inside the selected template part with available patterns.
• The 'Replace' flow allows users to replace the entire template part with another from the same 'area'. Patterns do not appear because they are not created as template parts yet.

---

I don't think it helps that editing template parts is a different experience depending on context:

• In the post/page editor template parts are inert. They can be selected, but not edited.
• In the template editor you can directly manipulate all blocks in the template part, and the Design panel surfaces patterns.
• When editing the template part in isolation you can manipulate all the blocks, but there's no Design panel.

I would like to see the post/page editor experience applied in the template editor too. IE when you're editing a template:

• Template parts should be selectable, movable, and replaceable
  • The replace flow surfaces available template parts. 'Replace' might not be the best word... 'Swap'?
  • In the future the replace flow could also surface patterns, and if one is selected a new template part is automatically created
• Template part child blocks should not be selectable/editable
• There shouldn't be a Design panel in the block Inspector

Only when editing the template part in isolation should the Design panel appear. This (hopefully) makes it clear that the options therein apply specifically to the template part.

What do y'all think?

[t-hamano]

Thank you for the detailed feedback!

The replace flow surfaces available template parts. 'Replace' might not be the best word... 'Swap'?

My sense is that the word "Replace" is fine as is, but I find it a little confusing what modal means:

What about this?

Only when editing the template part in isolation should the Design panel appear. This (hopefully) makes it clear that the options therein apply specifically to the template part.

I don’t have a strong opinion on what context the Design panel should appear in, but to me, the panel itself seems a bit too abstract.

Since the only information provided to the user is the title "Design" and pattern previews, it may not be immediately clear that this panel "updates the blocks in the template part with the selected block pattern".

Therefore, I thought it might be useful to add some help description.

[jameskoster]

Both good suggestions, and small tweaks we can make in the near-term to patch up some shortcomings 👍

[t-hamano]

Related to this issue, the Design panel may need a visible pattern label.

• Patterns in the Site Editor Design panel should have visible names #64632