☂️ PT: Live Preview in Premium and WooCommerce Themes

[okmttdhr]

Description

As of Jul 11, 2023, we have a few themes (3 premium themes and 4 WooCommerce themes) that are compatible with Block Theme Previews. p1689054390618779/1689048800.285299-slack-CRWCHQGUB But we expect more premium or woo themes are coming.

So, we're to implement the flow for a premium and WooCommerce theme. We have a UI here pbxlJb-4QS-p2#design (c.f. discussion: https://github.com/Automattic/dotcom-forge/issues/2391#issuecomment-1620629654).

Project Thread: pbxlJb-4QS-p2

Testing Instructions

Live Preview in Premium and WooCommerce Themes

• Premium themes
  • Prepare a site with the Personal plan or lower plan.
  • Pick a Premium theme (e.g., Outland) and go to Live Preview by clicking the “Preview & Customize” button on the Theme Detail page (/theme/<theme-name>/<your-site>).
  • Verify the notices are displayed both on the sidebar and edit canvas.
    
    
  • Click any Upgrade now.
  • Verify the modal shows up.
    
  • Click Upgrade to activate.
  • Verify it opens the checkout page in a new tab.
  • Verify the Premium plan is in the cart and complete checkout.
  • Go back to the Site Editor.
  • Verify the plan is upgraded and ready to activate the theme.
  • Click Activate.
  • Verify the theme is activated.
• WooCommerce themes
  • Prepare a site with the Premium plan or lower plan.
  • Pick a WooCommerce theme (e.g., Tsubaki, Zaino, Tazza, Amulet) and go to Live Preview by clicking the “Preview & Customize” button on the Theme Detail page (/theme/<theme-name>/<your-site>).
  • Verify the notices are displayed both on the sidebar and edit canvas.
    
    
  • Click any Upgrade now.
  • Verify the modal shows up.
    
  • Click Upgrade to activate.
  • Verify it opens the checkout page in a new tab.
  • Verify the Business plan is in the cart and complete checkout.
  • Go back to the Site Editor.
  • Verify the plan is upgraded and ready to activate the theme.
  • Click Activate.
  • Verify the theme is activated.

Live Preview in Free Themes

• Go to the Theme Detail page of a free theme
• Click Preview & Customize
• Verify Live Preview functionality works (navigating templates, changing styles, editing blocks, ...)
• Verify the notice is shown in the Site Editor's edit mode
  
• Click Activate
• Verify the notice is dismissed
• Verify the theme is now activated on your site

Acceptance Criteria

• Users can live-preview and activate a premium and WooCommerce theme.

Dev Tasks

• Implement Upgrade-needed notices
  • A premium theme on Simple sites right now does not support Live Preview, but we do see nudges when customizing the Glonal Styles when previewing the theme. We should align UI with the existing upgrade nudge. See pdtkmj-1JP-p2#comment-3208 in more detail.
  • on the canvas Live Preview: Add the upgrade notice for Premium and Woo themes #83630
  • on the sidebar
    • Live Preview: Add the upgrade notice on the sidebar for Premium and Woo themes #84676
    • Render Global Style notice only when necessary  #84799
  • Redirect back to the Site Editor after users complete the upgrade flow Live Preview: Add the upgrade notice for Premium and Woo themes #83630
• Implement the Upsell modal for upgrade-needed themes
  • On the Gutenberg side, it is necessary to change the modal to be displayed when the “Activate” button is hit, I think we can do that by adding the right redux action and overwriting it. (c.f. p7H4VZ-4Ap-p2, pekYwv-1WD-p2#comment-1529)
  • Find a 'customization point' on the Guteberg side, and implement it
  • Customize showing the modal when the Activation button is hit
    • Make SaveButton extensible WordPress/gutenberg#56807
    • Apply Make SaveButton extensible WordPress/gutenberg#56807 on the Calypso side -> We decided not to do it this time.
    • Show the modal Live Preview: Introduce the upgrade modal in Premium and WooCommerce themes #85013
• Live preview: Ensure showing only one notice simultaneously by hiding the Global Style notice #84899
• Enable the "Preview & Customize" button for Premium and WooCommerce themes (on horizon) #85182
• [Live Preview in Premium/Woo themes] Add tracking events #85526
• Hide the warning banners until a user makes a change -> We decided that we won't do this. See p1703213676648069/1703156462.628259-slack-CRWCHQGUB
• Live Preview: The "Activate & Save modal" is opened unexpectedly #85682
• Live Preview: The Upgrade Flow in A New Tab #85771
• Live Preview: Fix the preview notice stuck after the activation (2nd try) #86105
• https://github.com/Automattic/dotcom-forge/issues/4959
• [Optional] Add unite tests for Live Preview: Add the upgrade notice for Premium and Woo themes #83630
  • Run wpcom-block-editor's tests with the yarn test-apps command #85601
• [Optional] Refactor the condition for checking the WooCommerce theme. Live Preview: Add the upgrade notice for Premium and Woo themes #83630 (comment)
• [Optional] Create a selector for isPreviewingTheme. See

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

  Line 11 in 335d8eb

  * FIXME: This is copied from Gutenberg; we should be creating a selector for the `core/edit-site` store.

• [Optional] Ideally, move everything into jetpack-mu-wpcom. Add Javascript and TypeScript build for jetpack-wpcom-mu jetpack#34158, p1700128708530349-slack-CDLH4C1UZ, p1697595074746459-slack-CDLH4C1UZ
• [Later] Support Bundle themes other than WooCommerce themes

Related

• Enhance WooCommerce Block Accessibility for Business Plan Users #84587
• Add the “Live Preview” button on the Theme Detail page #79218
• Add the “Live Preview” button on the Themes Showcase page #79219
• https://github.com/Automattic/dotcom-forge/issues/3072

[github-actions]

Support References

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

• pdtkmj-1JP-p2#comment-3208
• pekYwv-1WD-p2#comment-1529