Add the “Live Preview” button on the Theme Detail page #79775

okmttdhr · 2023-07-24T06:30:44Z

Proposed Changes

This PR adds the “Live Preview” button on the Theme Detail page.

This PR focuses on adding the new button. I'll take care of other UI changes, such as hiding the "Open live demo" into three-dot and changing the copy of the "Open live demo".
This PR is part of Add the “Live Preview” button on the Theme Detail page #79218. After finishing Add the “Live Preview” button on the Theme Detail page #79218, I'll address Add the “Live Preview” button on the Themes Showcase page #79219.

before	after

Testing Instructions

Simple sites

Patch D117384-code into your sandbox.
Go to the Theme Showcase page.
Click any theme and go to the Theme Detail page.
See if clicking the "Live Preview" button redirects you to the Site Editor (Block Theme Previews).
- You will not see the button when a theme is;
  - your active theme
  - is not FullSiteEditing compatible
  - a theme with a static page as a homepage
  - a 3rd party theme
  - a premium theme
  - a woocommerce theme

Atomic sites

Go to the Theme Showcase page.
Click any theme and go to the Theme Detail page.
You must install a theme before using the Live Preview on Atomic sites. pbxlJb-3Uv-p2#known-issues
- When you're using Calypso, activate it once and then reactivate the original theme.
- When you're using the classic view, just install it.
See if clicking the "Live Preview" button redirects you to the Site Editor (Block Theme Previews).
- You will not see the button when a theme is;
  - your active theme
  - is not FullSiteEditing compatible
  - a theme with a static page as a homepage
  - not installed (not listed in "My Themes")

Please see pbxlJb-3Uv-p2#known-issues about unsupported themes.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

matticbot · 2023-07-24T06:31:54Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-75528

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-75528&env=jetpack

matticbot · 2023-07-24T06:43:14Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~795 bytes added 📈 [gzipped])

name                parsed_size           gzip_size
theme                   +2462 B  (+0.4%)     +717 B  (+0.4%)
themes                   +478 B  (+0.1%)      +61 B  (+0.0%)
update-design-flow       +261 B  (+0.0%)      +38 B  (+0.0%)
site-setup-flow          +261 B  (+0.0%)      +38 B  (+0.0%)
import-flow              +261 B  (+0.0%)      +38 B  (+0.0%)
free-flow                +261 B  (+0.0%)      +38 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~40 bytes added 📈 [gzipped])

name                                     parsed_size           gzip_size
async-load-signup-steps-theme-selection       +261 B  (+0.2%)      +40 B  (+0.1%)
async-load-design-blocks                      +261 B  (+0.0%)      +40 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

okmttdhr · 2023-07-27T02:44:08Z

client/my-sites/theme/live-preview-button/index.jsx

+	}
+
+	// A theme should be FullSiteEditing compatible to use Block Theme Previews.
+	if ( ! isFullSiteEditingTheme ) {


I did not use showTryAndCustomize here as showTryAndCustomize = true does not mean it's not FullSiteEditing compatible. I thought it'd be nice to show the Live Preview button anytime in cases Block Theme Previews is available.

taipeicoder · 2023-07-27T04:32:35Z

client/my-sites/theme/live-preview-button/index.jsx

+	 *
+	 * @see pekYwv-284-p2#background
+	 */
+	if ( isNotCompatibleThemes( stylesheet ) ) {


Do we need to account for Atomic site here? Or just Simple sites? Asking because the theme slugs on Atomic sites probably won't be prefixed with /pub or /premium CMIIW

stylesheet includes prefixes (pub/, premium/) even on Atomic sites!

This is the reason I switch themePath depending on if it's Atomic or Simple here. https://github.com/Automattic/wp-calypso/pull/79775/files/ac6c6b80c7ed9a71ab8d736db5254a1e8ce4eceb#diff-6535b936322e5679c10cdf1adeac00cda6c355312582892d7a634c4e2d6fbd64R120-R124

Let me know if I did not answer your comment 🙏

client/my-sites/theme/live-preview-button/index.jsx

client/my-sites/theme/main.jsx

client/state/themes/selectors/is-full-site-editing-theme.ts

okmttdhr · 2023-07-28T07:30:39Z

I might find the flaw in #79775 (comment). Let me check for a moment... 🔄

I thought it was a bug on my side since BTP did not load, but it was caused by the core change.
I temporarily created a diff D117384-code, and added testing instruction that we need to patch it.

taipeicoder

Works as intended, LGTM! 🎉

taipeicoder · 2023-07-31T04:31:50Z

A minor detail, the Live Preview button should have border-radius: 4px.

client/my-sites/theme/main.jsx

okmttdhr force-pushed the add/btp-theme-page branch from 8fec8f3 to cf1b020 Compare July 25, 2023 07:32

okmttdhr marked this pull request as ready for review July 27, 2023 02:32

okmttdhr requested review from valterlorran and kangzj July 27, 2023 02:32

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jul 27, 2023

okmttdhr requested a review from a team July 27, 2023 02:32

okmttdhr self-assigned this Jul 27, 2023

okmttdhr added [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging and removed [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging labels Jul 27, 2023

okmttdhr commented Jul 27, 2023

View reviewed changes

okmttdhr mentioned this pull request Jul 27, 2023

Add the “Live Preview” button on the Theme Detail page #79218

Closed

6 tasks

taipeicoder reviewed Jul 27, 2023

View reviewed changes

okmttdhr requested review from taipeicoder, fushar and a team July 28, 2023 02:24

This comment was marked as outdated.

Sign in to view

okmttdhr marked this pull request as draft July 28, 2023 02:49

This comment was marked as resolved.

Sign in to view

okmttdhr force-pushed the add/btp-theme-page branch from d8c1c21 to 2fe123f Compare July 28, 2023 07:26

okmttdhr marked this pull request as ready for review July 28, 2023 07:30

taipeicoder approved these changes Jul 31, 2023

View reviewed changes

taipeicoder reviewed Jul 31, 2023

View reviewed changes

client/my-sites/theme/main.jsx Outdated Show resolved Hide resolved

okmttdhr added 3 commits July 31, 2023 14:21

Move LivePreviewButton in to a file

1595bfc

Remove the block-theme-previews-poc flag

865a7ef

Describe when to hide the Live Preview button

c1c9317

okmttdhr added 9 commits July 31, 2023 14:21

Implement the show/hide logic

c0a84a6

BTP should be available when it's FullSiteEditing compatible

abbfc19

Add not compatible themes

5e9cd06

Use translate for string

7e5bdf0

Remove unnecessary themeType

5ccfb76

Early exit for isAtomic && ! isThemeInstalledOnAtomicSite

38741b0

Add a comment about scenarios where the Live Preview does not work

4861010

The parameter order was wrong

78d709e

Add border to the Live Preview button

ad9376f

okmttdhr force-pushed the add/btp-theme-page branch from 2fe123f to ad9376f Compare July 31, 2023 05:21

okmttdhr merged commit 3205b9b into trunk Jul 31, 2023

okmttdhr deleted the add/btp-theme-page branch July 31, 2023 05:43

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 31, 2023

This was referenced Jul 31, 2023

Create selectors for the Live Preview feature #80017

Merged

Add the “Live Preview” option on the Themes Showcase page #80071

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add the “Live Preview” button on the Theme Detail page #79775

Add the “Live Preview” button on the Theme Detail page #79775

okmttdhr commented Jul 24, 2023 •

edited

Loading

matticbot commented Jul 24, 2023 •

edited

Loading

matticbot commented Jul 24, 2023 •

edited

Loading

okmttdhr Jul 27, 2023

taipeicoder Jul 27, 2023

okmttdhr Jul 28, 2023 •

edited

Loading

This comment was marked as outdated.

This comment was marked as resolved.

okmttdhr commented Jul 28, 2023

taipeicoder left a comment

taipeicoder commented Jul 31, 2023

Add the “Live Preview” button on the Theme Detail page #79775

Add the “Live Preview” button on the Theme Detail page #79775

Conversation

okmttdhr commented Jul 24, 2023 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

matticbot commented Jul 24, 2023 • edited Loading

matticbot commented Jul 24, 2023 • edited Loading

okmttdhr Jul 27, 2023

Choose a reason for hiding this comment

taipeicoder Jul 27, 2023

Choose a reason for hiding this comment

okmttdhr Jul 28, 2023 • edited Loading

Choose a reason for hiding this comment

This comment was marked as outdated.

This comment was marked as resolved.

okmttdhr commented Jul 28, 2023

taipeicoder left a comment

Choose a reason for hiding this comment

taipeicoder commented Jul 31, 2023

okmttdhr commented Jul 24, 2023 •

edited

Loading

matticbot commented Jul 24, 2023 •

edited

Loading

matticbot commented Jul 24, 2023 •

edited

Loading

okmttdhr Jul 28, 2023 •

edited

Loading