Try: allow replacing a template part from patterns & parts shown in the inspector #45285
Conversation
oandregal
added
[Feature] Patterns
|
Size Change: +16 B (0%) Total Size: 1.28 MB
ℹ️ View Unchanged
|
The original plan was only to show patterns, and only when editing a template part in focus mode, where it is obvious that the 'replacement' will update the template part you're editing. This PR is actually jumping ahead a bit by surfacing replacements in the Inspector outside of focus mode. In that respect there's a nuance to consider: does selecting a pattern from the "replacements" area update the existing template part, or create a new one entirely? In the replace flow (via ellipsis icon in the toolbar) selecting a pattern would create a new template part. But that feels counter-intuitive in this flow, probably because the UI appears in the block inspector. I'd love to hear thoughts from @WordPress/gutenberg-design and @WordPress/theme-team on that. Related to this, it would be excellent to fix issue #42154 before implementing the work here. |
|
When I saw the above short video from Andre I went straight to cool now we can easily replace the current Header or Footer! As I have been working on a site using Twenty Twenty Two. I had not noticed that I could replace the current Header by clicking the 3 dot contexual menu and select Replace Header (Posted about it in the FSE Slack channel). So I went to the in Block inserter and added a new header and manually deleted the current header to get it replaced by the one I had added to the canvas.
The right sidebar Header block contains very little information. Added a quick mockup Replace Header closed panel in the sidebar.
|
|
Here's a quick video of the current state of this PR: replace.mp4Switching between existing template parts feels pretty good in terms of flow, but the placement of this affordance in the UI feels conceptually awkward because typically Inspector panels are for block settings. This isn't really a setting, it's more of a transform akin to block variations (like group/row/stack). So I wonder if we might place the thumbnails in that location instead (excuse the missing previews, the dev tools failed to copy them):
Replacing with a Pattern feels a bit confusing. The thumbnail list seems to jump around on click, and I'm left unsure as to whether I just updated the existing template part or created a new one. There's no hint in the UI to indicate the affected behaviour. Extending the idea above, we might include a "New header" link beneath the existing ones like so:
Clicking this would reveal the patterns (either in a modal or an accordion), and selecting one would create a new template part. It would probably be good to include a "Start blank" option here as well. What do y'all think? |
|
Did the thumbnails move from the Template tab to the Block tab? I think one of the strengths of the original concept was to leverage that free space of the currently very empty Template tab. Your thought is valid, of course, but to me that mainly begs the question: why does a template part have a template tab? (Perhaps best solved separately.) Otherwise, I can't tell if it's better to have these transforms available outside of focus mode. It may be fine? Otherwise, can we limit them to just focus mode? |
|
@jasmussen there are two considerations:
My comments above are related to that second consideration. |
Hey, I wasn't aware we wanted to only show this in the "edit the template part" view. I can look into that. |
|
Though, the fact that I did not understand it that way can also be telling of what my struggle was: that the inspector behaves differently depending on the context (edit template part vs general view). |
|
@oandregal It's no problem, I think we want both so no need to abandon the work here! The context is quite different between editing template part in isolation / editing template, with the latter being more nuanced. In that respect I think the concepts in #45285 (comment) are still worth a try.
@jasmussen on this note in particular, when you're editing a template, the Template tab should eventually surface patterns in the same way, but there you will find ones that are associated with the template (e.g. 404, search, archive) rather than the Header/Footer. |
Right, but couldn't it be the same tab? Would you ever have access to both? |
Yes, when editing a template. Hopefully this diagram helps:
|
|
Hey folks! It's been a few weeks since this PR was opened. How is work progressing? What's needed here and what resources can I bring in to shake this loose? |
|
If we pursue the PR in its current scope, I think it would be good to try the designs from #45285 (comment). Alternatively we spin up another PR that concentrates only on the template part focus mode to begin with. As discussed I think we need both, so it is mostly a question of @oandregal's bandwidth :) |
I lean towards this approach. Basically bring the replace flow modal to the "Block" sidebar, when in the template part focus mode. It should work the same fashion as well. I like that you'd be able to click "Edit" on a template part (opening focus mode), and see the available template parts you can employ. Whereas in today's flow, you can't get back to those alternate parts in focus mode. |
|
@jameskoster @richtabor I've created a different PR for the focus mode at #47507 |
|
It's been a few months since I worked on this. Going to close it for now and free the issue at #44582 for anyone to take. I may be able to come back at this in a couple of weeks if I manage to wrap up other things in my queue. |
What?
Closes #44582
How?
Reuses the existing
TemplatePartSelectionModalwith all its components: search, list of template parts, list of patterns. This is a bit different from the mockup, and brings up a few questions / TODO items:Testing Instructions
Gravacao.de.ecra.a.partir.de.25-10-2022.17.46.40.webm