diff --git a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts index db975f84b41..4f60d279c67 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts @@ -2,14 +2,66 @@ * External dependencies */ import { __, sprintf } from '@wordpress/i18n'; +import { isWpVersion } from '@woocommerce/settings'; +import { BlockInstance, createBlock } from '@wordpress/blocks'; +import { VARIATION_NAME as PRODUCT_TITLE_VARIATION_NAME } from '@woocommerce/blocks/product-query/variations/elements/product-title'; +import { VARIATION_NAME as PRODUCT_SUMMARY_VARIATION_NAME } from '@woocommerce/blocks/product-query/variations/elements/product-summary'; -// TODO: Provide the blockified template for the single product page and adjust -// other functions accordingly. -const getBlockifiedTemplate = () => []; +const getBlockifiedTemplate = () => + [ + createBlock( 'woocommerce/breadcrumbs' ), + createBlock( + 'core/columns', + { + align: 'wide', + }, + [ + createBlock( + 'core/column', + { + type: 'constrained', + justifyContent: 'right', + }, + [ createBlock( 'woocommerce/product-image-gallery' ) ] + ), + createBlock( 'core/column', {}, [ + createBlock( 'core/post-title', { + __woocommerceNamespace: PRODUCT_TITLE_VARIATION_NAME, + } ), + createBlock( 'woocommerce/product-price', { + fontSize: 'large', + } ), + createBlock( 'core/post-excerpt', { + __woocommerceNamespace: PRODUCT_SUMMARY_VARIATION_NAME, + } ), + createBlock( 'woocommerce/add-to-cart-form' ), + createBlock( 'woocommerce/product-meta' ), + ] ), + ] + ), + createBlock( 'woocommerce/product-details', { + align: 'wide', + } ), + createBlock( 'woocommerce/related-products', { + align: 'wide', + } ), + ].filter( Boolean ) as BlockInstance[]; -const isConversionPossible = () => false; +const isConversionPossible = () => { + // Blockification is possible for the WP version 6.1 and above, + // which are the versions the Products block supports. + return isWpVersion( '6.1', '>=' ); +}; -const getDescriptionAllowingConversion = () => ''; +const getDescriptionAllowingConversion = ( templateTitle: string ) => + sprintf( + /* translators: %s is the template title */ + __( + "This block serves as a placeholder for your %s. We recommend upgrading to the Single Products block for more features to edit your products visually. Don't worry, you can always revert back.", + 'woo-gutenberg-products-block' + ), + templateTitle + ); const getDescriptionDisallowingConversion = ( templateTitle: string ) => sprintf( @@ -23,13 +75,17 @@ const getDescriptionDisallowingConversion = ( templateTitle: string ) => const getDescription = ( templateTitle: string, canConvert: boolean ) => { if ( canConvert ) { - return getDescriptionAllowingConversion(); + return getDescriptionAllowingConversion( templateTitle ); } return getDescriptionDisallowingConversion( templateTitle ); }; -const getButtonLabel = () => ''; +const getButtonLabel = () => + __( + 'Upgrade to Blockified Single Product template', + 'woo-gutenberg-products-block' + ); export { getBlockifiedTemplate, diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-query/variations/related-products.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-query/variations/related-products.tsx index 54bed80e29b..2cc212a23d4 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-query/variations/related-products.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-query/variations/related-products.tsx @@ -52,7 +52,7 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [ 'core/heading', { level: 2, - content: __( 'Related products.', 'woo-gutenberg-products-block' ), + content: __( 'Related products', 'woo-gutenberg-products-block' ), }, ], [