Create selectors for the Live Preview feature #80017

okmttdhr · 2023-07-31T06:38:05Z

Related to #79219, #79218, #79775

Proposed Changes

Extract functions added in #79775 into selectors. This allows us to reuse functions between #79219 and #79218.

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).~~ -> I am not yet sure how to patch it to make BTP work (c.f. https://github.com/Automattic/dotcom-forge/issues/3322). We can just check if the "Live Preview" button exists or not.
- 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.
I don't think we should go through everything in this PR since I just extracted some functions from #79219.

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)?

github-actions · 2023-07-31T06:38:19Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-07-31T06:51:44Z

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

Sections (~13 bytes removed 📉 [gzipped])

name    parsed_size           gzip_size
theme        -406 B  (-0.1%)      -13 B  (-0.0%)
themes        +21 B  (+0.0%)      +10 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.

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.

arthur791004

Nice refactor! Leave minor feedback but they're not blockers 🙂

client/state/themes/selectors/is-live-preview-supported.js

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

client/my-sites/theme/main.jsx

taipeicoder · 2023-08-01T08:48:51Z

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

Not a blocker, but I'd like to encourage you to use Typescript for new files and components introduced in this PR, if possible!

Will create a follow up PR 😄

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

client/my-sites/theme/main.jsx

client/state/themes/selectors/is-live-preview-supported.js

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

taipeicoder · 2023-08-02T06:09:39Z

@okmttdhr could you confirm that the livePreviewUrl is correct? This is what I'm seeing on my end:

Always use siteId to get the URL. And use sourceSiteId when it prevents Layout Shift.

okmttdhr · 2023-08-02T07:08:18Z

could you confirm that the livePreviewUrl is correct? This is what I'm seeing on my end:

Thanks for pointing that out. I addressed it in c204113.

okmttdhr · 2023-08-02T07:18:32Z

I'm merging this PR!

taipeicoder · 2023-08-02T07:30:37Z

client/state/themes/selectors/get-is-live-preview-supported.js

+
+	// Block Theme Previews need the theme installed on Atomic sites.
+	const isAtomic = isSiteAutomatedTransfer( state, siteId );
+	const isThemeInstalledOnAtomicSite = isAtomic && !! getTheme( state, sourceSiteId, themeId );


I think we need to use siteId instead of sourceSiteId here. I'm getting the following error message on Atomic sites:

Let's open a follow-up PR 🙂

I'll take a look. Where did you see this error? Maybe on the Block Theme Previews page (= Site Editor)?

@taipeicoder One more question, on which theme did you see the error, as an example? Thanks! 🙏

I've opened the issue #80133 to track this 🙂

okmttdhr mentioned this pull request Jul 28, 2023

Add the “Live Preview” button on the Themes Showcase page #79219

Closed

7 tasks

okmttdhr force-pushed the add/btp-theme-showcase-prepare branch from bb39fae to 2f4cd9a Compare August 1, 2023 04:57

okmttdhr changed the title ~~Add the “Live Preview” button on the Themes Showcase page~~ Create selectors for the Live Preview feature Aug 1, 2023

okmttdhr mentioned this pull request Aug 1, 2023

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

Merged

7 tasks

okmttdhr force-pushed the add/btp-theme-showcase-prepare branch from 2f4cd9a to a66c3fd Compare August 1, 2023 05:19

okmttdhr marked this pull request as ready for review August 1, 2023 06:41

okmttdhr requested a review from a team August 1, 2023 07:07

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 1, 2023

okmttdhr self-assigned this Aug 1, 2023

arthur791004 approved these changes Aug 1, 2023

View reviewed changes

client/state/themes/selectors/is-live-preview-supported.js Outdated Show resolved Hide resolved

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

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

taipeicoder reviewed Aug 1, 2023

View reviewed changes

arthur791004 reviewed Aug 2, 2023

View reviewed changes

client/my-sites/theme/live-preview-button/index.jsx Outdated Show resolved Hide resolved

arthur791004 approved these changes Aug 2, 2023

View reviewed changes

okmttdhr added 9 commits August 2, 2023 14:37

Add isLivePreviewSupported

730d956

Use isLivePreviewSupported function

2aa01f7

Extract getLivePreviewUrl

765a9c6

Avoid using flags in multiple places

e56d6f4

Move selectors inside the child

9d0c56d

Accept siteId for isFullSiteEditingTheme

ad4df0c

Remove unnecessary <QueryTheme/>

7da0526

Use useSelector

8dad318

Avoid LivePreviewButton appearing a moment later

058c7fe

okmttdhr force-pushed the add/btp-theme-showcase-prepare branch from ebea88e to 058c7fe Compare August 2, 2023 05:37

okmttdhr added 2 commits August 2, 2023 14:49

Hide the Live Preview when a user is not logged in

ef7481c

Sort props alphabetically

f5a15fd

okmttdhr added 2 commits August 2, 2023 15:24

Rename a file according to a function name

8c7e91b

Fix the wrong Live Preview URL

c204113

Always use siteId to get the URL. And use sourceSiteId when it prevents Layout Shift.

okmttdhr merged commit 40b689a into trunk Aug 2, 2023

okmttdhr deleted the add/btp-theme-showcase-prepare branch August 2, 2023 07:18

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 Aug 2, 2023

taipeicoder reviewed Aug 2, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create selectors for the Live Preview feature #80017

Create selectors for the Live Preview feature #80017

okmttdhr commented Jul 31, 2023 •

edited

Loading

github-actions bot commented Jul 31, 2023 •

edited by matticbot

Loading

matticbot commented Jul 31, 2023 •

edited

Loading

arthur791004 left a comment

taipeicoder Aug 1, 2023

okmttdhr Aug 2, 2023

taipeicoder commented Aug 2, 2023

okmttdhr commented Aug 2, 2023

okmttdhr commented Aug 2, 2023

taipeicoder Aug 2, 2023

taipeicoder Aug 2, 2023

okmttdhr Aug 2, 2023

taipeicoder Aug 2, 2023

okmttdhr Aug 2, 2023 •

edited

Loading

taipeicoder Aug 2, 2023

Create selectors for the Live Preview feature #80017

Create selectors for the Live Preview feature #80017

Conversation

okmttdhr commented Jul 31, 2023 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jul 31, 2023 • edited by matticbot Loading

matticbot commented Jul 31, 2023 • edited Loading

arthur791004 left a comment

Choose a reason for hiding this comment

taipeicoder Aug 1, 2023

Choose a reason for hiding this comment

okmttdhr Aug 2, 2023

Choose a reason for hiding this comment

taipeicoder commented Aug 2, 2023

okmttdhr commented Aug 2, 2023

okmttdhr commented Aug 2, 2023

taipeicoder Aug 2, 2023

Choose a reason for hiding this comment

taipeicoder Aug 2, 2023

Choose a reason for hiding this comment

okmttdhr Aug 2, 2023

Choose a reason for hiding this comment

taipeicoder Aug 2, 2023

Choose a reason for hiding this comment

okmttdhr Aug 2, 2023 • edited Loading

Choose a reason for hiding this comment

taipeicoder Aug 2, 2023

Choose a reason for hiding this comment

okmttdhr commented Jul 31, 2023 •

edited

Loading

github-actions bot commented Jul 31, 2023 •

edited by matticbot

Loading

matticbot commented Jul 31, 2023 •

edited

Loading

okmttdhr Aug 2, 2023 •

edited

Loading