Cart and Checkout block transforms for classic shortcodes

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 } from '@wordpress/element';
+import { getQueryArg } from '@wordpress/url';
+import { dispatch } 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,19 @@ 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 = getQueryArg( window.location.href, 'focus' );
+
+	useEffect( () => {
+		if ( focus === 'cart' ) {
+			dispatch( 'core/block-editor' ).selectBlock( clientId );
+			dispatch( 'core/interface' ).enableComplementaryArea(
+				'core/edit-site',
+				'edit-site/block-inspector'
+			);
+		}
+	}, [ clientId, focus ] );
+
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>

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 } from '@wordpress/element';
+import { getQueryArg } from '@wordpress/url';
+import { dispatch } 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,19 @@ 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 = getQueryArg( window.location.href, 'focus' );
+
+	useEffect( () => {
+		if ( focus === 'checkout' ) {
+			dispatch( 'core/block-editor' ).selectBlock( clientId );
+			dispatch( 'core/interface' ).enableComplementaryArea(
+				'core/edit-site',
+				'edit-site/block-inspector'
+			);
+		}
+	}, [ clientId, focus ] );
+
 	const defaultTemplate = [
 		[ 'woocommerce/checkout-fields-block', {}, [] ],
 		[ 'woocommerce/checkout-totals-block', {}, [] ],

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 Checkout', 'woo-gutenberg-products-block' );
+	return __( 'Classic Checkout', 'woo-gutenberg-products-block' );
 };
 
 const getDescription = () => {

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 {

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

@@ -1,13 +1,8 @@
 /**
  * External dependencies
  */
-import {
-	BlockInstance,
-	createBlock,
-	registerBlockType,
-} from '@wordpress/blocks';
+import { registerBlockType } from '@wordpress/blocks';
 import type { BlockEditProps } from '@wordpress/blocks';
-import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
 import {
 	useBlockProps,
 	BlockPreview,
@@ -18,6 +13,7 @@ import {
 	Placeholder,
 	Popover,
 	ExternalLink,
+	TabbableContainer,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { shortcode, Icon } from '@wordpress/icons';
@@ -31,6 +27,7 @@ import { woo } from '@woocommerce/icons';
  */
 import './editor.scss';
 import './style.scss';
+import { CartPlaceholder, CheckoutPlaceholder } from './placeholder';
 import { TEMPLATES, TYPES } from './constants';
 import { getTemplateDetailsBySlug } from './utils';
 import * as blockifiedCheckout from './checkout';
@@ -56,29 +53,6 @@ const conversionConfig: { [ key: string ]: BlockifiedTemplateConfig } = {
 	fallback: blockifiedFallbackConfig,
 };
 
-const pickBlockClientId = ( blocks: Array< BlockInstance > ) => {
-	const groupBlock = blocks.find(
-		( block ) =>
-			block.name === 'core/group' &&
-			block.innerBlocks.some(
-				( innerBlock ) =>
-					innerBlock.name === 'woocommerce/cart' ||
-					innerBlock.name === 'woocommerce/checkout'
-			)
-	);
-
-	if ( groupBlock ) {
-		return (
-			groupBlock.innerBlocks.find( ( block ) => {
-				return (
-					block.name === 'woocommerce/cart' ||
-					block.name === 'woocommerce/checkout'
-				);
-			} )?.clientId || ''
-		);
-	}
-};
-
 const ConvertTemplate = ( { blockifyConfig, clientId, attributes } ) => {
 	const { getButtonLabel, onClickCallback, getBlockifiedTemplate } =
 		blockifyConfig;
@@ -95,7 +69,7 @@ const ConvertTemplate = ( { blockifyConfig, clientId, attributes } ) => {
 	}, [] );
 
 	return (
-		<div className="wp-block-woocommerce-classic-shortcode__placeholder-migration-button-container">
+		<TabbableContainer className="wp-block-woocommerce-classic-shortcode__placeholder-migration-button-container">
 			<Button
 				variant="primary"
 				onClick={ () => {
@@ -112,36 +86,14 @@ const ConvertTemplate = ( { blockifyConfig, clientId, attributes } ) => {
 							'woo-gutenberg-products-block'
 						),
 						{
-							actions: [
-								{
-									label: __(
-										'Undo',
-										'woo-gutenberg-products-block'
-									),
-									onClick: () => {
-										const blockClientId = pickBlockClientId(
-											getBlocks()
-										);
-										replaceBlock(
-											blockClientId,
-											createBlock(
-												'woocommerce/classic-shortcode',
-												{
-													shortcode:
-														attributes.shortcode,
-												}
-											)
-										);
-									},
-								},
-							],
 							type: 'snackbar',
 						}
 					);
 				} }
 				onMouseEnter={ () => setIsPopoverOpen( true ) }
 				onMouseLeave={ () => setIsPopoverOpen( false ) }
 				text={ getButtonLabel ? getButtonLabel() : '' }
+				tabIndex={ 0 }
 			>
 				{ isPopoverOpen && (
 					<Popover resize={ false } placement="right-end">
@@ -176,13 +128,13 @@ const ConvertTemplate = ( { blockifyConfig, clientId, attributes } ) => {
 				variant="secondary"
 				href="https://woocommerce.com/document/cart-checkout-blocks-support-status/"
 				target="_blank"
+				tabIndex={ 0 }
 			>
 				{ __( 'Learn more', 'woo-gutenberg-products-block' ) }
 			</Button>
-		</div>
+		</TabbableContainer>
 	);
 };
-
 const Edit = ( { clientId, attributes }: BlockEditProps< Attributes > ) => {
 	const blockProps = useBlockProps();
 
@@ -191,7 +143,7 @@ const Edit = ( { clientId, attributes }: BlockEditProps< Attributes > ) => {
 		TEMPLATES
 	);
 	const templateTitle = attributes.shortcode;
-	const templatePlaceholder = templateDetails?.placeholder ?? 'fallback';
+	const templatePlaceholder = templateDetails?.placeholder ?? 'cart';
 	const templateType = templateDetails?.type ?? 'fallback';
 
 	const { isConversionPossible, getDescription, getTitle, blockifyConfig } =
@@ -221,11 +173,11 @@ const Edit = ( { clientId, attributes }: BlockEditProps< Attributes > ) => {
 		<div { ...blockProps }>
 			<Placeholder className="wp-block-woocommerce-classic-shortcode__placeholder">
 				<div className="wp-block-woocommerce-classic-shortcode__placeholder-wireframe">
-					<img
-						className="wp-block-woocommerce-classic-shortcode__placeholder-image"
-						src={ `${ WC_BLOCKS_IMAGE_URL }template-placeholders/${ templatePlaceholder }.svg` }
-						alt={ templateTitle }
-					/>
+					{ templatePlaceholder === 'cart' ? (
+						<CartPlaceholder />
+					) : (
+						<CheckoutPlaceholder />
+					) }
 				</div>
 				<div className="wp-block-woocommerce-classic-shortcode__placeholder-copy">
 					<div className="wp-block-woocommerce-classic-shortcode__placeholder-copy__icon-container">

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

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { Rect, SVG, G } from '@wordpress/primitives';
+
+export const CartPlaceholder = () => (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 892 516">
+		<G fill="currentColor" transform="translate(-1)">
+			<Rect width="100" height="20" x="1" rx="2" />
+			<Rect width="100" height="20" x="421" rx="2" />
+			<Rect width="100" height="20" x="793" rx="2" />
+			<Rect width="150" height="24" x="125" y="48" rx="2" />
+			<Rect width="50" height="24" x="125" y="86" rx="2" />
+			<Rect width="50" height="24" x="457" y="48" rx="2" />
+			<Rect width="100" height="100" x="15" y="48" rx="2" />
+			<Rect width="150" height="150" x="1" y="318" rx="2" />
+			<Rect width="150" height="150" x="373" y="318" rx="2" />
+			<Rect width="150" height="150" x="187" y="318" rx="2" />
+			<Rect width="150" height="24" x="125" y="178" rx="2" />
+			<Rect width="50" height="24" x="125" y="216" rx="2" />
+			<Rect width="50" height="24" x="457" y="178" rx="2" />
+			<Rect width="100" height="100" x="15" y="178" rx="2" />
+			<Rect width="304" height="359" x="588" y="34" rx="2" />
+			<Rect width="520" height="1" x="1" y="34" rx=".5" />
+			<Rect width="520" height="1" y="162" rx=".5" />
+			<Rect width="520" height="1" x="1" y="292" rx=".5" />
+			<Rect width="304" height="64" x="589" y="407" rx="2" />
+			<Rect width="100" height="38" x="26" y="478" rx="2" />
+			<Rect width="100" height="38" x="212" y="478" rx="2" />
+			<Rect width="100" height="38" x="398" y="478" rx="2" />
+		</G>
+	</SVG>
+);
+
+export const CheckoutPlaceholder = () => (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 892 726">
+		<G fill="currentColor" transform="translate(-1)">
+			<Rect width="203" height="38" x="1" rx="2" />
+			<Rect width="434" height="38" x="1" y="62" rx="2" />
+			<Rect width="434" height="38" y="124" rx="2" />
+			<Rect width="434" height="38" x="1" y="186" rx="2" />
+			<Rect width="434" height="38" x="2" y="248" rx="2" />
+			<Rect width="434" height="38" x="3" y="310" rx="2" />
+			<Rect width="434" height="38" x="3" y="372" rx="2" />
+			<Rect width="892" height="204" x="2" y="434" rx="2" />
+			<Rect width="203" height="38" x="231" rx="2" />
+			<Rect width="203" height="38" x="514" rx="2" />
+			<Rect width="427" height="100" x="466" y="62" rx="2" />
+			<Rect width="304" height="64" x="588" y="662" rx="2" />
+			<Rect width="38" height="38" x="466" rx="2" />
+			<Rect width="203" height="38" x="48" y="662" rx="2" />
+			<Rect width="38" height="38" y="662" rx="2" />
+		</G>
+	</SVG>
+);

assets/js/blocks/product-gallery/utils.tsx

@@ -3,6 +3,7 @@
  */
 import { BlockAttributes, BlockInstance } from '@wordpress/blocks';
 import { select, dispatch } from '@wordpress/data';
+import { findBlock } from '@woocommerce/utils';
 
 /**
  * Internal dependencies
@@ -100,37 +101,6 @@ const controlBlocksLockAttribute = ( {
 	}
 };
 
-/**
- * Recursively searches through an array of `BlockInstance` objects and their nested `innerBlocks` arrays to find a block that matches a given condition.
- *
- * @param { { blocks: BlockInstance[], findCondition: Function } } parameters Parameters containing an array of `BlockInstance` objects to search through and a function that takes a `BlockInstance` object as its argument and returns a boolean indicating whether the block matches the desired condition.
- * @return If a matching block is found, the function returns the `BlockInstance` object. If no matching block is found, the function returns `undefined`.
- */
-const findBlock = ( {
-	blocks,
-	findCondition,
-}: {
-	blocks: BlockInstance[];
-	findCondition: ( block: BlockInstance ) => boolean;
-} ): BlockInstance | undefined => {
-	for ( const block of blocks ) {
-		if ( findCondition( block ) ) {
-			return block;
-		}
-		if ( block.innerBlocks ) {
-			const largeImageParentBlock = findBlock( {
-				blocks: block.innerBlocks,
-				findCondition,
-			} );
-			if ( largeImageParentBlock ) {
-				return largeImageParentBlock;
-			}
-		}
-	}
-
-	return undefined;
-};
-
 /**
  * Sets the layout of group block based on the thumbnails' position.
  *