The "Update" flow for entities and templates should allow creating variations

[mtias]

Related to #19259.

When editing a page template we should take into account the possibility to branch from the master page template into a page template variation for the current page.

This could fit well in the entities / template saving flow, as it can tell the user whether to create a new page template or update the master one.

This could be extrapolated to other contexts (specific categories, etc).

[MichaelArestad]

Here's my first exploration on this. Check out the very minimal prototype.

Screenshot

I don't know that I want to go this route. Even though there is some familiarity with other product flows (Save as...), it feels out of place connected to the save button.

I'm also iffy on it being part of pre-publish or the current modal as I don't think the modal is even necessary right now (though it has been handy for testing). I suspect most folks would be hindered more than helped by asking which parts of their work they want to save/publish.

What do you think?

[karmatosed]

There is some merit in this as it uses existing patterns, for example the Customizer has a similar 'save and click for options'. That said in using this I wasn't aware initially that save had other options. It threw me a bit seeing 'Save' and then 'Save'. Perhaps there is some copy to iterate there where you could have a lead into the options.

I'm also iffy on it being part of pre-publish or the current modal as I don't think the modal is even necessary right now (though it has been handy for testing). I suspect most folks would be hindered more than helped by asking which parts of their work they want to save/publish.

I think this could be a valid theory. My gut says duplication is going to be common as a need, I am not sure this needs a full flow though as much as option when in that experience.

[shaunandrews]

Maybe we add a "Save as..." option in the modal?

[MichaelArestad]

Maybe we add a "Save as..." option in the modal?

@shaunandrews I like that idea if we keep that modal around (or a modal for pre publish)

[mtias]

I think we need some more hierarchy there. The most important piece is the root template being modified. I'd separate that from the rest a bit. That's also the one I think should allow creating "save as...".

[karmatosed]

I think we need some more hierarchy there.

I wonder if we can repeat the block navigator styling?

[shaunandrews]

Here I split up the current template from the other changes. Clicking on an item opens a side panel that shows a preview and lets you "save as" and undo changes one-by-one:

[MichaelArestad]

Another iteration (riffing off @shaunandrews) that utilizes a sidebar (notably not pre-publish).

Try out the Prototype.

Screenshots

Notes

• Can highlight the content on desktop at full size. On mobile will likely need to resort to something similar to the template preview.
• Similar to the default save flow (is not pre-publish)
• Is a good path to save specific part changes, duplicate template parts, discard changes

Source Figma document

[karmatosed]

I kind of prefer this as a panel. I think there's something to be said for the way mobile settings work, maybe bringing in almost full-width layers here.

[paaljoachim]

We discussed this issue during the Gutenberg Design Triage:
https://wordpress.slack.com/archives/C02S78ZAL/p1594745226118600

We really liked Michael's sidebar pre-save panel. Which made us think about the regular Pre-Publish panel used in Gutenberg. This could be an improvement to the regular pre-publish screen we are used to today.
This FSE sidebar pre-save panel can be extended for developers so one can add areas that are required before saving.
We are looking forward to seeing the first version in place.

That means a Pre-save panel for Full Site Editing.
and a Pre-publish panel for regular Gutenberg layout (content creation).

We also need to look at how the terms save and publish is handled.
Draft -> Publish -> Then updates/saves. Should we rename "update" -> "save"?

There are likely also other methods being developed for FSE that can be used for the content creation area of Gutenberg. This should be looked at closer. So that we can have a consistency going from FSE <-> content creation.

[noahshrader]

Sharing another iteration of this, using some of the panel-based direction from earlier concepts.

You can try out the prototype.

Save

The initial state of the panel when you go to save your changes would be kept minimal as to not overburden. As the user, you have the option to quickly proceed with the save, or you can review the changes more specifically.

If you click "Review changes", the itemized list of changes are shown, organized by the type of change. The current page template is shown with the ability to create a new template based on the current one. Below the template are the other areas that have been affected by the changes.

You can hover items that are discoverable, indicating that you're able to click them. Doing so will spotlight the specific item on the page. Each item also has a horizontal ellipses menu that when opened, displays two options to either create a new version of that item, or discard the changes made to it.

Also shown here is a very rudimentary idea of saving a new template based on the current one. We'll want to add better communication (and possibly a different experience) once the user chooses to go down this path.

Save & Publish

Here are a couple of screenshots that show the exact same experience combined with the Publish action, for scenarios where the page hasn't yet been published:

Pre-Publish Checks

Additionally, here's a simple idea from our conversation the other day around pre-publish checks. This would give WP and/or developers a section to hook in their own rules. I would anticipate cases where this section could get really full, really fast so it likely needs more thought.

Exploring further:

1. When saving new templates, are users clear where those are being stored and managed?
2. Another review of the new template creation process.
3. What does the experience of creating new versions of changes (template parts, for example) look like?

[shaunandrews]

Why does the template only have the "Save as new..." while template parts have the ellipsis button? It seems this means you can't discard a template update.

Also, I think it could probably be reduced down to "Save as..." — I'm not sure the "new" bit is necessary or helpful.

--

When seeing these together, I wonder why the "review changes" toggle is different from the accordion toggles above for Visibility and Publish Date?

[noahshrader]

It seems this means you can't discard a template update.

Forgot to update after shifting direction. You should be able to.

I'm not sure the "new" bit is necessary or helpful.

Agreed. I think we can remove the new and it still be obvious. “Save as...” is common for this action.

I wonder why the "review changes" toggle is different from the accordion toggles above

Probably needs another go for the combined, but I didn’t go accordion because inside are more accordion toggles. Perhaps it might make more sense to make that an accordion, and remove the inner accordions?

[mapk]

👋 Nice work!

• Hiding the changes behind a toggle is much less intimidating. If I want to know more, I can jump into them.
• I think Shaun's comment about the "review changes" item looking like an accordion is good. Going that route, i agree with removing the accordions within that section and just list out the changes, but grouped as you have it.
• Next to the "Review your changes" accordion item, we could show the number of changes too. Maybe it's displayed similarly to the number of improvements you've got there.
• Try moving the descriptions for both the "Review your changes" and the "Improve your content" to the inside of each accordion.

Exploring further:

• I don't think users are clear where new templates get saved, but that might be okay here.
• How do we communicate to the user that a new template has been created? Should we use the same notification styling we have when a post is published?
• What happens if a user wants to save out their changes as a new template, but they had Header and Footer template part changes too? Does saving a new template also create new template parts? Or do those template parts get propagated across to the other pages too? How do we communicate all this to the user?

[noahshrader]

Another iteration of the above. Here is a link to the prototype.

Flows

Saving a new template

Saving a new template part

Notes

Template “Save As”

• Works like it does in most cases. Changes only apply to the newly created template. The old/prior template remains saved and in tact, with no changes applied.
• If there are template parts that have changes, the changes update the current template parts. No new template parts are created.

Template parts “Save As”

• When a template is saved/cloned as a new template part, changes only apply to that template part. The old/prior template part remains saved and in tact, with no changes applied.