Cart and Checkout block transforms for classic shortcodes (#11228)

* Add transforms for checkout block

* Block to shortcode switcher in notice

* cart transforms

* Fix target block for switching

* Remove switcher UI for classic cart/checkout

* Set isPreview when generating block preview in switcher

* Onboarding task

* Action on click

* Focus on block after replacement

* Update notice styling and wording

* Undo functionality

* Look for woocommerce/classic-shortcode when determining if task list item should display

* Enable focus on the cart/checkout block when visiting from the task list

* Classic Cart/Checkout Updated Title

* Add missing translations

* Refactor modal content to avoid sprintf

* Improve pickBlockClientId

* Tracks events for switching to classic shortcode block

* TaskList support for non-block themes

* Updated placeholder to work on non-white page backgrounds

* Find blocks using findBlock utility

* Add TabbableContainer for buttons

* Add align to wrapper

* Update modal content

* Update modal usage

* Removed undo link when converting from classic shortcode

* Check if block was selected

* Revert "Removed undo link when converting from classic shortcode"

This reverts commit 2babbab.

* update snackbar text

Author: mikejolley

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

@@ -48,36 +48,62 @@ const withSidebarNotices = createHigherOrderComponent(
 			setIsIncompatibleExtensionsNoticeDismissed( isDismissed );
 		};
 
-		const { isCart, isCheckout, isPaymentMethodsBlock, hasPaymentMethods } =
-			useSelect( ( select ) => {
-				const { getBlockParentsByBlockName, getBlockName } =
-					select( blockEditorStore );
-				const parent = getBlockParentsByBlockName( clientId, [
-					'woocommerce/cart',
-					'woocommerce/checkout',
-				] ).map( getBlockName );
-				const currentBlockName = getBlockName( clientId );
-				return {
-					isCart:
-						parent.includes( 'woocommerce/cart' ) ||
-						currentBlockName === 'woocommerce/cart',
-					isCheckout:
-						parent.includes( 'woocommerce/checkout' ) ||
-						currentBlockName === 'woocommerce/checkout',
-					isPaymentMethodsBlock:
-						currentBlockName ===
-						'woocommerce/checkout-payment-block',
-					hasPaymentMethods:
-						select(
-							PAYMENT_STORE_KEY
-						).paymentMethodsInitialized() &&
-						Object.keys(
-							select(
-								PAYMENT_STORE_KEY
-							).getAvailablePaymentMethods()
-						).length > 0,
-				};
-			} );
+		const {
+			isCart,
+			isCheckout,
+			isPaymentMethodsBlock,
+			hasPaymentMethods,
+			parentId,
+		} = useSelect( ( select ) => {
+			const { getBlockParentsByBlockName, getBlockName } =
+				select( blockEditorStore );
+
+			const parents = getBlockParentsByBlockName( clientId, [
+				'woocommerce/cart',
+				'woocommerce/checkout',
+			] ).reduce(
+				(
+					accumulator: Record< string, string >,
+					parentClientId: string
+				) => {
+					const parentName = getBlockName( parentClientId );
+					accumulator[ parentName ] = parentClientId;
+					return accumulator;
+				},
+				{}
+			);
+
+			const currentBlockName = getBlockName( clientId );
+			const parentBlockIsCart =
+				Object.keys( parents ).includes( 'woocommerce/cart' );
+			const parentBlockIsCheckout = Object.keys( parents ).includes(
+				'woocommerce/checkout'
+			);
+			const currentBlockIsCart =
+				currentBlockName === 'woocommerce/cart' || parentBlockIsCart;
+			const currentBlockIsCheckout =
+				currentBlockName === 'woocommerce/checkout' ||
+				parentBlockIsCheckout;
+			const targetParentBlock = currentBlockIsCart
+				? 'woocommerce/cart'
+				: 'woocommerce/checkout';
+
+			return {
+				isCart: currentBlockIsCart,
+				isCheckout: currentBlockIsCheckout,
+				parentId:
+					currentBlockName === targetParentBlock
+						? clientId
+						: parents[ targetParentBlock ],
+				isPaymentMethodsBlock:
+					currentBlockName === 'woocommerce/checkout-payment-block',
+				hasPaymentMethods:
+					select( PAYMENT_STORE_KEY ).paymentMethodsInitialized() &&
+					Object.keys(
+						select( PAYMENT_STORE_KEY ).getAvailablePaymentMethods()
+					).length > 0,
+			};
+		} );
 
 		// Show sidebar notices only when a WooCommerce block is selected.
 		if (
@@ -96,10 +122,9 @@ const withSidebarNotices = createHigherOrderComponent(
 							toggleIncompatibleExtensionsNoticeDismissedStatus
 						}
 						block={
-							isCheckout
-								? 'woocommerce/checkout'
-								: 'woocommerce/cart'
+							isCart ? 'woocommerce/cart' : 'woocommerce/checkout'
 						}
+						clientId={ parentId }
 					/>
 
 					<DefaultNotice block={ isCheckout ? 'checkout' : 'cart' } />

assets/js/blocks/cart/edit.js

@@ -13,6 +13,9 @@ import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundar
 import { EditorProvider, CartProvider } from '@woocommerce/base-context';
 import { previewCart } from '@woocommerce/resource-previews';
 import { SlotFillProvider } from '@woocommerce/blocks-checkout';
+import { useEffect, useRef } from '@wordpress/element';
+import { getQueryArg } from '@wordpress/url';
+import { dispatch, select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -37,7 +40,7 @@ const ALLOWED_BLOCKS = [
 	'woocommerce/empty-cart-block',
 ];
 
-export const Edit = ( { className, attributes, setAttributes } ) => {
+export const Edit = ( { clientId, className, attributes, setAttributes } ) => {
 	const { hasDarkControls, currentView, isPreview = false } = attributes;
 	const defaultTemplate = [
 		[ 'woocommerce/filled-cart-block', {}, [] ],
@@ -49,6 +52,22 @@ export const Edit = ( { className, attributes, setAttributes } ) => {
 		} ),
 	} );
 
+	// This focuses on the block when a certain query param is found. This is used on the link from the task list.
+	const focus = useRef( getQueryArg( window.location.href, 'focus' ) );
+
+	useEffect( () => {
+		if (
+			focus.current === 'cart' &&
+			! select( 'core/block-editor' ).hasSelectedBlock()
+		) {
+			dispatch( 'core/block-editor' ).selectBlock( clientId );
+			dispatch( 'core/interface' ).enableComplementaryArea(
+				'core/edit-site',
+				'edit-site/block-inspector'
+			);
+		}
+	}, [ clientId ] );
+
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>

assets/js/blocks/cart/index.js

@@ -45,6 +45,24 @@ const settings = {
 	attributes: blockAttributes,
 	edit: Edit,
 	save: Save,
+	transforms: {
+		to: [
+			{
+				type: 'block',
+				blocks: [ 'woocommerce/classic-shortcode' ],
+				transform: ( attributes ) => {
+					return createBlock(
+						'woocommerce/classic-shortcode',
+						{
+							shortcode: 'cart',
+							align: attributes.align,
+						},
+						[]
+					);
+				},
+			},
+		],
+	},
 	// Migrates v1 to v2 checkout.
 	deprecated: [
 		{

assets/js/blocks/checkout/edit.tsx

@@ -21,6 +21,9 @@ import {
 } from '@wordpress/components';
 import { SlotFillProvider } from '@woocommerce/blocks-checkout';
 import type { TemplateArray } from '@wordpress/blocks';
+import { useEffect, useRef } from '@wordpress/element';
+import { getQueryArg } from '@wordpress/url';
+import { dispatch, select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -46,9 +49,11 @@ const ALLOWED_BLOCKS: string[] = [
 ];
 
 export const Edit = ( {
+	clientId,
 	attributes,
 	setAttributes,
 }: {
+	clientId: string;
 	attributes: Attributes;
 	setAttributes: ( attributes: Record< string, unknown > ) => undefined;
 } ): JSX.Element => {
@@ -66,6 +71,22 @@ export const Edit = ( {
 		isPreview = false,
 	} = attributes;
 
+	// This focuses on the block when a certain query param is found. This is used on the link from the task list.
+	const focus = useRef( getQueryArg( window.location.href, 'focus' ) );
+
+	useEffect( () => {
+		if (
+			focus.current === 'checkout' &&
+			! select( 'core/block-editor' ).hasSelectedBlock()
+		) {
+			dispatch( 'core/block-editor' ).selectBlock( clientId );
+			dispatch( 'core/interface' ).enableComplementaryArea(
+				'core/edit-site',
+				'edit-site/block-inspector'
+			);
+		}
+	}, [ clientId ] );
+
 	const defaultTemplate = [
 		[ 'woocommerce/checkout-fields-block', {}, [] ],
 		[ 'woocommerce/checkout-totals-block', {}, [] ],

assets/js/blocks/checkout/index.tsx

@@ -31,6 +31,24 @@ const settings = {
 	},
 	edit: Edit,
 	save: Save,
+	transforms: {
+		to: [
+			{
+				type: 'block',
+				blocks: [ 'woocommerce/classic-shortcode' ],
+				transform: ( attributes ) => {
+					return createBlock(
+						'woocommerce/classic-shortcode',
+						{
+							shortcode: 'checkout',
+							align: attributes.align,
+						},
+						[]
+					);
+				},
+			},
+		],
+	},
 	// Migrates v1 to v2 checkout.
 	deprecated: [
 		{

assets/js/blocks/classic-shortcode/block.json

@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/classic-shortcode",
+	"version": "1.0.0",
+	"title": "Classic Shortcode",
+	"description": "Renders classic WooCommerce shortcodes.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {
+		"align": true,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": true
+	},
+	"attributes": {
+		"shortcode": {
+			"type": "string",
+			"default": "cart",
+			"enum": [ "cart", "checkout" ]
+		},
+		"align": {
+			"type": "string",
+			"default": "wide"
+		}
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/blocks/classic-shortcode/cart.tsx

@@ -53,7 +53,7 @@ const onClickCallback = ( {
  * Title shown within the block itself.
  */
 const getTitle = () => {
-	return __( 'Cart Shortcode', 'woo-gutenberg-products-block' );
+	return __( 'Classic Cart', 'woo-gutenberg-products-block' );
 };
 
 /**

assets/js/blocks/classic-shortcode/checkout.tsx

@@ -50,7 +50,7 @@ const onClickCallback = ( {
 };
 
 const getTitle = () => {
-	return __( 'Checkout Shortcode', 'woo-gutenberg-products-block' );
+	return __( 'Classic Checkout', 'woo-gutenberg-products-block' );
 };
 
 const getDescription = () => {

assets/js/blocks/classic-shortcode/constants.ts

@@ -31,7 +31,7 @@ export const TEMPLATES: TemplateDetails = {
 	},
 	checkout: {
 		type: TYPES.checkout,
-		title: __( 'Checkout Shortcode', 'woo-gutenberg-products-block' ),
+		title: __( 'Checkout Cart', 'woo-gutenberg-products-block' ),
 		description: __(
 			'Renders the classic checkout shortcode.',
 			'woo-gutenberg-products-block'

assets/js/blocks/classic-shortcode/editor.scss

@@ -58,15 +58,19 @@
 	pointer-events: none;
 
 	// Image based placeholders should fill horizontal width.
-	> img {
+	> img,
+	> svg {
 		width: 100%;
+		height: auto;
+		color: $universal-border-light;
 	}
 }
 
 .wp-block-woocommerce-classic-shortcode {
 	.components-placeholder {
 		box-shadow: none;
 		padding: 0;
+		background-color: transparent;
 	}
 }
 
@@ -79,8 +83,8 @@
 		opacity: 0.5;
 
 		* {
-			color: $gray-200 !important;
-			border-color: $gray-200 !important;
+			color: $universal-border-light !important;
+			border-color: $universal-border-light !important;
 		}
 	}
 	.wp-block-woocommerce-classic-shortcode__placeholder-copy {