Include a notice to redirect user to template editor (#9508)

assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx

@@ -12,10 +12,13 @@ import { CartCheckoutSidebarCompatibilityNotice } from '@woocommerce/editor-comp
 import { NoPaymentMethodsNotice } from '@woocommerce/editor-components/no-payment-methods-notice';
 import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
 import { DefaultNotice } from '@woocommerce/editor-components/default-notice';
+import { TemplateNotice } from '@woocommerce/editor-components/template-notice';
 import { IncompatiblePaymentGatewaysNotice } from '@woocommerce/editor-components/incompatible-payment-gateways-notice';
 import { useSelect } from '@wordpress/data';
 import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
 import { useState } from '@wordpress/element';
+import { getSetting } from '@woocommerce/settings';
+
 declare module '@wordpress/editor' {
 	let store: StoreDescriptor;
 }
@@ -36,6 +39,8 @@ const withSidebarNotices = createHigherOrderComponent(
 			isSelected: isBlockSelected,
 		} = props;
 
+		const isBlockTheme = getSetting( 'isBlockTheme' );
+
 		const [
 			isIncompatiblePaymentGatewaysNoticeDismissed,
 			setIsIncompatiblePaymentGatewaysNoticeDismissed,
@@ -101,15 +106,20 @@ const withSidebarNotices = createHigherOrderComponent(
 						}
 					/>
 
+					{ isBlockTheme ? (
+						<TemplateNotice
+							block={ isCheckout ? 'checkout' : 'cart' }
+						/>
+					) : (
+						<DefaultNotice
+							block={ isCheckout ? 'checkout' : 'cart' }
+						/>
+					) }
+
 					{ isIncompatiblePaymentGatewaysNoticeDismissed ? (
-						<>
-							<DefaultNotice
-								block={ isCheckout ? 'checkout' : 'cart' }
-							/>
-							<CartCheckoutSidebarCompatibilityNotice
-								block={ isCheckout ? 'checkout' : 'cart' }
-							/>
-						</>
+						<CartCheckoutSidebarCompatibilityNotice
+							block={ isCheckout ? 'checkout' : 'cart' }
+						/>
 					) : null }
 
 					{ isPaymentMethodsBlock && ! hasPaymentMethods && (

assets/js/editor-components/template-notice/editor.scss

@@ -0,0 +1,14 @@
+.wc-default-template-notice.is-dismissible {
+	margin: 0;
+	padding-right: 16px;
+	.components-notice__dismiss {
+		min-width: 24px;
+	}
+	.components-notice__content {
+		margin: 4px 0;
+	}
+	svg {
+		width: 16px;
+		height: 16px;
+	}
+}

assets/js/editor-components/template-notice/index.tsx

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Notice, Button } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { isSiteEditorPage } from '@woocommerce/utils';
+import { select } from '@wordpress/data';
+import { getSetting } from '@woocommerce/settings';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+export function TemplateNotice( { block }: { block: string } ) {
+	const [ settingStatus, setStatus ] = useState( 'pristine' );
+	const store = select( 'core/edit-site' );
+
+	if ( settingStatus === 'dismissed' || isSiteEditorPage( store ) ) {
+		return null;
+	}
+
+	const editUrl = `${ getSetting(
+		'adminUrl'
+	) }site-editor.php?postType=wp_template&postId=woocommerce%2Fwoocommerce%2F%2F${ block }`;
+
+	const noticeContent = sprintf(
+		// translators: %s: cart or checkout page name.
+		__(
+			'The default %s can be customized in the Site Editor',
+			'woo-gutenberg-products-block'
+		),
+		block === 'checkout'
+			? __( 'checkout', 'woo-gutenberg-products-block' )
+			: __( 'cart', 'woo-gutenberg-products-block' )
+	);
+
+	return (
+		<Notice
+			className="wc-default-template-notice"
+			status={ 'warning' }
+			onRemove={ () => setStatus( 'dismissed' ) }
+			spokenMessage={ noticeContent }
+		>
+			<>
+				<p>{ noticeContent }</p>
+				<Button href={ editUrl } variant="secondary" isSmall={ true }>
+					{ __( 'Edit template', 'woo-gutenberg-products-block' ) }
+				</Button>
+			</>
+		</Notice>
+	);
+}

src/BlockTypes/Cart.php

@@ -169,6 +169,7 @@ protected function enqueue_data( array $attributes = [] ) {
 		$this->asset_data_registry->add( 'shippingEnabled', wc_shipping_enabled(), true );
 		$this->asset_data_registry->add( 'hasDarkEditorStyleSupport', current_theme_supports( 'dark-editor-style' ), true );
 		$this->asset_data_registry->register_page_id( isset( $attributes['checkoutPageId'] ) ? $attributes['checkoutPageId'] : 0 );
+		$this->asset_data_registry->add( 'isBlockTheme', wc_current_theme_is_fse_theme(), true );
 
 		$pickup_location_settings = get_option( 'woocommerce_pickup_location_settings', [] );
 		$this->asset_data_registry->add( 'localPickupEnabled', wc_string_to_bool( $pickup_location_settings['enabled'] ?? 'no' ), true );

src/BlockTypes/Checkout.php

@@ -212,6 +212,7 @@ protected function enqueue_data( array $attributes = [] ) {
 		$this->asset_data_registry->add( 'shippingEnabled', wc_shipping_enabled(), true );
 		$this->asset_data_registry->add( 'hasDarkEditorStyleSupport', current_theme_supports( 'dark-editor-style' ), true );
 		$this->asset_data_registry->register_page_id( isset( $attributes['cartPageId'] ) ? $attributes['cartPageId'] : 0 );
+		$this->asset_data_registry->add( 'isBlockTheme', wc_current_theme_is_fse_theme(), true );
 
 		$pickup_location_settings = get_option( 'woocommerce_pickup_location_settings', [] );
 		$this->asset_data_registry->add( 'localPickupEnabled', wc_string_to_bool( $pickup_location_settings['enabled'] ?? 'no' ), true );