Live Preview: Save & Activate button separation

[okmttdhr]

Description

Currently, saving changes and activating the theme cannot be done separately during the Live Preview, they must be done at the same time. So, it’d be good to have the Save and Activate separation.

There was some feedback about this;

• pbxlJb-4Px-p2#save-activate-button-separation
• I found the “Save” button when I changed an element on the site (in this case, I deleted a menu item,) confusing. I was apprehensive about clicking it because I thought it would activate the theme, and I got worried when I saw the “Site updated” notification. pekYwv-1WD-p2#comment-1505
• I find this button “Activate and Save” strange. What if I just want to save the style changes, play some more, save some more. And then later decide to actually Activate the theme. pekYwv-250-p2
• The button “Activate & Save” on the top right corner and “Save” on the sidebar are seemingly “contradictory” while they actually complement each other pdtkmj-1JP-p2#comment-3206
• If, during this customization trial (let’s call it that) I actually create an element I like and want to keep, it would be great if I could choose to save it somehow even if I decide not to apply the theme in the end. pekYwv-3ut-p2

Acceptance Criteria

• Users can save the previewing theme without activating it.

Dev Tasks

• Decide on UI
  • We might need further conversation to finalize the specifications.
    We have already covered this topic in https://github.com/Automattic/dotcom-forge/issues/2391#issuecomment-1624765146, and I personally think the following specification is sufficient.
    
• Implement it

Related

• Live Preview: The Upgrade Flow in A New Tab #85683
• Live Preview: Introduce the upgrade modal in Premium and WooCommerce themes #85013 (comment)

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• pekYwv-1WD-p2#comment-1505
• pdtkmj-1JP-p2#comment-3206
• pdtkmj-1JP-p2#comment-3235

[autumnfjeld]

See slack discussion p1701229602194299-slack-CRWCHQGUB, there are some quite complex product decisions that need to be made around this issue.

[fushar]

Summarizing the concerns of potential complexities:

1. While previewing a theme in the Site Editor, a user can also update the site content (e.g. page title), in addition to the previewed theme templates / global styles. Therefore, the semantics of the separated "Save" button will be a bit confusing: what happens when it is clicked? Should we "save" only theme customizations, or also the site content? How should we even communicate this?
2. We will need to provide a "Reset your customizations" button, so that a user can live-preview a theme from scratch again.
3. Are the "Activate" and "Save" buttons independent? Can we activate without saving, or should we disable the Activate button until the Save button is saved? Either way, the behavior might not be super clear to the user.

Based on the above points, I'd propose we deprioritize this issue. The current behavior is already clear, if we think the BTP as a truly "Preview" experience (quoting @autumnfjeld's words). We also have communicated this behavior clearly in two places:

1. In the sticky banner,
   

2. and in the sidebar when we click Activate & Save:
   

[okmttdhr]

While previewing a theme in the Site Editor, a user can also update the site content (e.g. page title), in addition to the previewed theme templates / global styles. Therefore, the semantics of the separated "Save" button will be a bit confusing: what happens when it is clicked? Should we "save" only theme customizations, or also the site content? How should we even communicate this?

In relation to our current discussion, I'm sharing @tanjoymor's insight about "saving without activating", which comes with caveats that are a big learning curve. Understanding these aspects might be essential as we consider implementing or refining it in the future.

---

pdtkmj-1JP-p2#comment-3235
Common questions: "Can I see what my site will look like with the new theme before activating it?" And "Can I work on redesigning my site without affecting the live site?"

The preview allows them to see it, but it may not look entirely right without some adjustments. Making adjustments can be slow for some users and they will want to save and continue later. It would be excellent if we can answer and explain:

"Yes you can! With the Live Preview you can view your site using different themes, with a few caveats, and you can save your changes to come back to it later. So long as you save without activating, your live site won't be affected."

This really is a game changer in the realm of switching themes.

But it might worth noting that the caveats are kinda big and important, albeit mostly educational, and I'm not sure what thoughts there have been on these:

• The homepage will be the new theme's default homepage that they'll need to edit to add their own content. That likely won't be intuitive for many users.
• They can preview published pages to see how they look 'as-is'. Things might not look exactly the way they want at first.
• They can't preview posts (yet).
• They can adjust the templates and styles in the Live Preview to best suit their content. (This is good and doesn't affect the live site.)
• Template changes are applied per theme, so they need to remember the name of the theme if they plan to save and come back later.
• Biggest one: Previewing a "page" and then accessing the editor will put them in the "page content". If they edit that "content" it will affect their live site. They need to switch to the template for the page to make template changes. This won't be intuitive. Some also won't understand that editing the template for one page is affecting the template for other pages. This is especially true for users coming from a Classic theme and are very new to the Site Editor (could be their first time seeing it).

The three key points here are:

• accidentally changing live page content
• understanding the homepage
• and not being able to preview posts
  Overall, these are mostly the same issues that users have with Block themes and Templates in general, they're not all unique to the Live Preview. But users will muck this up, get confused, and probably inadvertently change their live site without realizing it.

It's an educational issue more than anything. I don't think any of it is a blocker for the feature. But I do think they're points that we should all be aware of, try to mitigate as much as we can, and make sure HEs are broadly aware.

One other piece for a future project (maybe core?) is to be able to transfer "template parts" between themes. So that when someone does have a custom designed header/footer they want to keep, they don't have to fiddle with trying to copy it over or redesigning it.

[miksansegundo]

I think separating the save and activate actions will complicate it more.

Maybe we could try the following to simplify and unify the UX:

• Rename the topbar button from "Save & Activate" to just "Activate" because the right sidebar that opens after users click on it already explains that changes will be saved.
• Rename the left sidebar button from "Save" to "Activate" and ensure the user gets a confirmation message explaining that changes will be saved and the theme is activated .

[fushar]

@miksansegundo Actually, right now all buttons are already unified as "Activate & Save":

• in the left sidebar
• in the topbar
• in the right sidebar (after clicking the button in the topbar)

So I think we're fine now 😄

[fushar]

(And they are just "Activate" if there user has not done any customization.)

[miksansegundo]

I still think that the "Save" part in "Activate & Save" sounds redundant and less clear than just "Activate", because that's the goal of the feature. Anyways, just an opinion 🙂

Another thing, I remember reading feedback saying that "Save & Activate" makes more sense than "Activate & Save". I agree with this too.