Add the sticky notice when previewing a theme #82629

okmttdhr · 2023-10-05T05:39:38Z

Proposed Changes

Add the sticky notice when previewing a theme. See Live Preview: Add the sticky notice when editing #82218.

This is done with GB's notice list. Sample implementation in Calyoso:

wp-calypso/apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js

Line 164 in 2a55443

createWarningNotice(
I tried to add this feature to Jetpack (see Add TypeScript build for mu-wpcom jetpack#33459 and Add the sticky notice when previewing a theme jetpack#33461). Since we want to release Live Preview next week and this PR's solution is somewhat interim, I implemented it here wpcom-block-editor.

Testing Instructions

Patch this PR to your sandbox with cd apps/wpcom-block-editor/ && yarn dev --sync
Sandbox widgets.wp.com and your site
Open https://horizon.wordpress.com
Go to Appearance -> Editor. Verify that the modal is NOT shown because we're not live-previewing anything.
Go to the Theme Detail page of a free theme
Click the Preview & Customize
See the sticky notice

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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-10-05T05:39:52Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-10-05T05:42:41Z

This PR modifies the release build for wpcom-block-editor

To test your changes on WordPress.com, run install-plugin.sh wpcom-block-editor add/live-preview-stickey-notice on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-l4k-p2

matticbot · 2023-10-05T05:53:22Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

apps/wpcom-block-editor/src/wpcom/features/live-preview.tsx

miksansegundo

👍 LGTM and works as expected.

We should use Back to themes rather than Back to Themes to be consistent with other screens.

About the copy of the notice

I wonder if we can still make the copy of the notice more helpful for users. Some suggestions:

Use "previewing" rather than "live-previewing" because the button doesn't mention "Live" and users might not get the meaning of "live" in this context.
I think users will appreciate to read that changes done while previewing won't affect their site.
Maybe we can use the word "customize" in some way?

How can we make this copy more helpful? cc: @Automattic/lego

Current: "You are currently live-previewing the Smithland theme."
Suggestion: "You are currently previewing the Smithland theme on your site. You can customize it without affecting your site."

Here is a demo:

fushar · 2023-10-05T07:16:53Z

Current: "You are currently live-previewing the Smithland theme."
Suggestion: "You are currently previewing the Smithland theme on your site. You can customize it without affecting your site."

This is a bit tricky, because we can add new pages which does affect the site :')

Maybe:

"You are currently previewing the Smithland theme on your site. You can try customizing the styles without affecting your site."

okmttdhr · 2023-10-05T07:40:46Z

Current: "You are currently live-previewing the Smithland theme."
Suggestion: "You are currently previewing the Smithland theme on your site. You can customize it without affecting your site."

This is a bit tricky, because we can add new pages which does affect the site :')

Just to add some context, it is related to WordPress/gutenberg#53935. 📝

"You are currently previewing the Smithland theme on your site. You can try customizing the styles without affecting your site."

@fushar @miksansegundo CC: @Automattic/lego
This looks good to me!
I feel a little guilty about saying "without affecting your site" currently, but it should be fine (with adding "try") in most cases because users can't Save without Activate anyway (#81119).

fushar · 2023-10-05T14:36:58Z

apps/wpcom-block-editor/src/wpcom/features/live-preview.tsx

+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const theme = ( select( 'core' ) as any ).getTheme( currentlyPreviewingTheme() );
+		return {
+			previewingTheme: theme?.name?.rendered || 'new',


Should || 'new' be || currentlyPreviewingTheme() ?

apps/wpcom-block-editor/src/wpcom/features/live-preview.tsx

fushar · 2023-10-05T15:49:27Z

@okmttdhr Just confirming, have we tested this on Atomic sites 😄

autumnfjeld · 2023-10-05T18:00:45Z

Nice work thinking through copy ideas everyone!!! I did a little adaptation of the suggestions:

You are previewing the {theme_name} theme. You can try out your own style customizations, which will only be saved if you activate this theme.

okmttdhr · 2023-10-06T01:46:59Z

@okmttdhr Just confirming, have we tested this on Atomic sites 😄

Yes! Sandboxing widgets.wp.com worked on Atomic sites, too.

fushar

Working very well 😄 🚢

a8ci18n · 2023-10-06T04:19:04Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/9245807

Thank you @okmttdhr for including a screenshot in the description! This is really helpful for our translators.

This reverts commit a6d1837.

a8ci18n · 2023-10-17T16:30:47Z

Translation for this Pull Request has now been finished.

Add the sticky notice when previewing a theme

2a55443

okmttdhr mentioned this pull request Oct 5, 2023

Add the sticky notice when previewing a theme Automattic/jetpack#33461

Closed

3 tasks

okmttdhr self-assigned this Oct 5, 2023

okmttdhr marked this pull request as ready for review October 5, 2023 05:47

okmttdhr requested a review from a team October 5, 2023 05:48

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

okmttdhr mentioned this pull request Oct 5, 2023

Live Preview: Add the sticky notice when editing #82218

Closed

1 task

fushar reviewed Oct 5, 2023

View reviewed changes

miksansegundo approved these changes Oct 5, 2023

View reviewed changes

fushar reviewed Oct 5, 2023

View reviewed changes

apps/wpcom-block-editor/src/wpcom/features/live-preview.tsx Outdated Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

okmttdhr added 2 commits October 6, 2023 09:40

Copy improvements

1b1332e

Lower "Back to themes" priority than "Activate"

93bde59

fushar approved these changes Oct 6, 2023

View reviewed changes

okmttdhr merged commit a6d1837 into trunk Oct 6, 2023
3 checks passed

okmttdhr deleted the add/live-preview-stickey-notice branch October 6, 2023 02:09

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 Oct 6, 2023

worldomonation added a commit that referenced this pull request Oct 6, 2023

Revert "Add the sticky notice when previewing a theme (#82629)"

b173ae5

This reverts commit a6d1837.

worldomonation mentioned this pull request Oct 6, 2023

Revert "Add the sticky notice when previewing a theme" #82694

Merged

fushar pushed a commit that referenced this pull request Oct 6, 2023

Revert "Add the sticky notice when previewing a theme (#82629)" (#82694)

171b5a2

This reverts commit a6d1837.

worldomonation added the Reverted This was removed after being merged. label Oct 6, 2023

This was referenced Oct 6, 2023

[2nd challenge] Add the sticky notice when previewing a theme #82698

Merged

Change the live preview preparing copy #82696

Merged

okmttdhr mentioned this pull request Nov 2, 2023

Live Preview: Add the upgrade notice for Premium and Woo themes #83630

Merged

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add the sticky notice when previewing a theme #82629

Add the sticky notice when previewing a theme #82629

okmttdhr commented Oct 5, 2023 •

edited

Loading

github-actions bot commented Oct 5, 2023 •

edited by matticbot

Loading

matticbot commented Oct 5, 2023

matticbot commented Oct 5, 2023

miksansegundo left a comment

fushar commented Oct 5, 2023

okmttdhr commented Oct 5, 2023

fushar Oct 5, 2023

fushar commented Oct 5, 2023

This comment was marked as resolved.

autumnfjeld commented Oct 5, 2023 •

edited

Loading

okmttdhr commented Oct 6, 2023

fushar left a comment •

edited by okmttdhr

Loading

a8ci18n commented Oct 6, 2023

a8ci18n commented Oct 17, 2023

Add the sticky notice when previewing a theme #82629

Add the sticky notice when previewing a theme #82629

Conversation

okmttdhr commented Oct 5, 2023 • edited Loading

Proposed Changes

Related

Testing Instructions

Pre-merge Checklist

github-actions bot commented Oct 5, 2023 • edited by matticbot Loading

matticbot commented Oct 5, 2023

matticbot commented Oct 5, 2023

miksansegundo left a comment

Choose a reason for hiding this comment

About the copy of the notice

fushar commented Oct 5, 2023

okmttdhr commented Oct 5, 2023

fushar Oct 5, 2023

Choose a reason for hiding this comment

fushar commented Oct 5, 2023

This comment was marked as resolved.

autumnfjeld commented Oct 5, 2023 • edited Loading

okmttdhr commented Oct 6, 2023

fushar left a comment • edited by okmttdhr Loading

Choose a reason for hiding this comment

a8ci18n commented Oct 6, 2023

a8ci18n commented Oct 17, 2023

okmttdhr commented Oct 5, 2023 •

edited

Loading

github-actions bot commented Oct 5, 2023 •

edited by matticbot

Loading

autumnfjeld commented Oct 5, 2023 •

edited

Loading

fushar left a comment •

edited by okmttdhr

Loading