Live Preview: Place “Preview & Customize” behind “Demo Site” button

[okmttdhr]

Details

Currently, the “Preview & Customize” button is available as a secondary action on the Theme Detail page for themes that support Live Preview.

Metrics suggest that introducing this button has decreased the overall theme activation rate. While this is expected, to potentially improve this, we propose placing the “Preview & Customize” button behind the “Demo site” button (users can see the “Preview & Customize” button only after opening the "Demo site" modal), allowing users to first quickly explore the theme and then proceed to customize it if they wish:

See pbxlJb-5HI-p2#possible-actions for more details.

Additionally, we can address #60623 simultaneously by adding it to the Theme Details page behind the “Demo site” button, similar to what we're trying to do for the “Preview & Customize” button.

Checklist

• On the first view of the Theme Details page, replace “Preview & Customize” button with "Demo site" button
• Ensure that the user can access “Preview & Customize” on the modal that opens when they click "Demo site"
• Ensure that the user can access “Try & Customize” on the modal that opens when they click "Demo site"

[taipeicoder]

Additionally, we can address #60623 simultaneously by adding it to the Theme Details page behind the “Demo site” button, similar to what we're trying to do for the “Preview & Customize” button.

Having it on the "Demo site" button panel feels hidden. I would prefer if the option is surfaced on the same level as we do for the "Preview & Customize" button, but then we will have three action buttons (four if you count Add Review) which is a lot.

[richtabor]

for themes that support Live Preview.

Is this still relevant? I'm not seeing this button, logged in or not (source):

only after opening the "Demo site" modal)

I say we just open the demo in a new link if they're wanting to preview it live—not the modal.

Preview & Customize

This is an odd action to introduce. I should be able to either click "Demo site" (which should be action oriented anyhow, like "View Demo Site") or I should be able to pick this theme ("Start With This Design").

"Try and Customize", or "Preview and Customize" is an odd in-between state.

[okmttdhr]

for themes that support Live Preview.

Is this still relevant? I'm not seeing this button, logged in or not (source):

There should be the button after selecting a site.

Screen.Recording.2024-09-09.at.17.16.48.mov

As for the Twenty Twenty theme, there’s a bug where the "Preview & Customize" button doesn’t appear... which is tracked here: #92198

Preview & Customize

This is an odd action to introduce. I should be able to either click "Demo site" (which should be action oriented anyhow, like "View Demo Site") or I should be able to pick this theme ("Start With This Design").

"Try and Customize", or "Preview and Customize" is an odd in-between state.

Are you suggesting to place all the buttons as actions? That feels like a bit too many buttons to me.

I’m brainstorming ways to simplify this; in Core, there are only 2 actions, both on /wp-admin/themes.php and /wp-admin/theme-install.php (which is nice!).

/wp-admin/themes.php (Your Installed themes = after installing a theme)	/wp-admin/theme-install.php (Add new themes = before installing a theme)

In Calypso, it’s trickier because themes on Simple sites are all pre-installed. There’s no clear distinction between "installing" and "activating." As a result, we need to show both "Preview" (which maps to "Demo site") and "Live Preview" (which maps to "Preview & Customize"). (The wordings are confusing when compared with Core, by the way, 😇. We chose "Preview & Customize" to avoid mixing it up with "Demo site," which was previously called "Preview Demo Site.")

There’s also a related issue in Core: WordPress/gutenberg#50749 about adding a "Live Preview" button in the Add New flow (so, currently, Calypso is "ahead" of Core). It might be good to align Calypso’s approach with the solution for this, especially regarding the placement of the "Live Preview" button.