Live Preview with Bundle Themes

[okmttdhr]

Description

Lego shipped Live Preview in Premium and WooCommerce themes, as detailed in #79223. However, it is currently limited to Premium and Woo themes, while it should be expanded to all Bundle themes that are coming (See #85182 (comment), p6rkRX-75y-p2).

Several changes are required at this moment to facilitate this transition to Bundle themes-applicable. Here are some key areas to consider:

• The logic to decide if the site has the feature to use the theme:

  • wp-calypso/apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-can-preview-but-need-upgrade.ts

    Lines 44 to 47 in 7d5dd4f

    	const canUseWooCommerceTheme =
    	previewingThemeType === WOOCOMMERCE_THEME &&
    	[ WPCOM_FEATURES_PREMIUM_THEMES, FEATURE_WOOP, WPCOM_FEATURES_ATOMIC ].every( ( feature ) =>
    	activeFeatures.includes( feature )

  • Is this condition the same for all Bundle themes?
• The plan they need:

  • wp-calypso/apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-can-preview-but-need-upgrade.ts

    Lines 222 to 230 in 7d5dd4f

    	case WOOCOMMERCE_THEME:
    	link = generateCheckoutUrl( PLAN_BUSINESS );
    	break;
    	// For a Premium theme, the users should have the Premium plan or higher.
    	case PREMIUM_THEME:
    	link = generateCheckoutUrl( PLAN_PREMIUM );
    	break;
    	case PERSONAL_THEME:
    	link = generateCheckoutUrl( PLAN_PERSONAL );

  • Is this condition the same for all Bundle themes?
• The display name of a theme type:

  • wp-calypso/apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts

    Lines 76 to 77 in 7d5dd4f

    	const previewingThemeTypeDisplay =
    	previewingThemeType === WOOCOMMERCE_THEME ? 'WooCommerce' : 'Premium';

  • Can this be retrieved by useBundleSettings?

Aligning with the Theme Tiers project paYJgx-4mO-p2 might be necessary, as I saw some code comments. However, I haven't fully explored this aspect yet. Relevant code segments include:

• wp-calypso/apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-can-preview-but-need-upgrade.ts

  Lines 36 to 39 in 7d5dd4f

  	// @TODO Replace all the logic below with the following code once Theme Tiers is live.
  	if ( requiredFeature ) {
  	return ! activeFeatures.includes( requiredFeature );
  	}

• wp-calypso/apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts

  Lines 25 to 28 in 7d5dd4f

  	// @TODO Replace all the logic above with the following code once Theme Tiers is live.
  	if ( config.isEnabled( 'themes/tiers' ) ) {
  	return theme?.theme_tier?.slug ?? undefined;
  	}

• wp-calypso/apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts

  Lines 38 to 41 in 7d5dd4f

  	// @TODO Once theme tiers is live we'll need to refactor use-can-preview-but-need-upgrade's checkNeedUpgrade function.
  	if ( config.isEnabled( 'themes/tiers' ) ) {
  	return theme?.theme_tier?.feature ?? undefined;
  	}

Acceptance Criteria

• Users are able to live-preview all Bundle themes not limited to Woo themes.

Dev Tasks

TBD

Testing

TBD

Related

• PT: Live Preview in Premium and WooCommerce themes pbxlJb-4QS-p2

CC: @Automattic/lego @renatho @Automattic/t-rex

[dsas]

wrt to bundled themes:

For the canUseWooCommerceTheme logic, then no it's not always the same. Only Woo requires the FEATURE_WOOP feature. WOOP is perhaps badly named, I think it means Woo-on-Plans.

For the checkout link - yes, they all need the business plan or higher - "bundled" means "installing this theme will also install some plugins", and plugins are all on the business plan

[dsas]

For theme tiers, then use of theme tiers will simplify/genericise some of this logic, we can just check "the lowest plan necessary to use a theme of this tier", for example.

We're still some weeks away from releasing to customers though and as the live preview is part of the block-editor package it makes it hard to use feature flags inside of the live preview itself.

@rcrdortiz has been doing the work of updating the live preview to work with tiers.

[okmttdhr]

Thank you for providing helpful info, @dsas!

@Automattic/lego
For more context on Bundle themes, please refer to p6rkRX-75y-p2 and #85182 (comment).
This issue is not something that is a top priority, but I believe it'd be beneficial to expand Live Preview with some tweaks.

We're still some weeks away from releasing to customers though and as the live preview is part of the block-editor package it makes it hard to use feature flags inside of the live preview itself.

In light of this, I have decided to move this issue to the Backlog for the time being.

Other resources;

• p6rkRX-769-p2
• p6rkRX-76z-p2