Implement discount as inner blocks

This allows for being able to edit the text portion of the discount rendering as its own entity.

Author: nerrad

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/block.json

@@ -7,6 +7,15 @@
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"textdomain": "woo-gutenberg-products-block",
+	"supports": {
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"default": { "type": "flex" }
+		},
+		"html": false
+
+	},
 	"apiVersion": 2,
 	"$schema": "https://schemas.wp.org/trunk/block.json"
 }

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/edit.tsx

@@ -1,51 +1,49 @@
 /**
  * External dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
-import type { HTMLAttributes, CSSProperties } from 'react';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { useProductDataContext } from '@woocommerce/shared-context';
-import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStyleProps } from '@woocommerce/base-hooks';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import DiscountBlock from './block';
+import { discountAmountName } from './inner-blocks';
+import { TEMPLATE } from './template';
 
-interface Attributes {
-	style: CSSProperties;
-}
-
-type Props = {
-	attributes: Attributes;
-	context?: { isDescendentOfSingleProductTemplate: boolean };
-} & HTMLAttributes< HTMLDivElement >;
-
-const DiscountEdit = ( { attributes, context }: Props ): JSX.Element => {
-	const blockProps = useBlockProps();
+export const Edit = ( { attributes, setAttributes } ): JSX.Element => {
+	const { style, className } = useStyleProps( attributes );
 	const { product } = useProductDataContext();
-	const { isDescendentOfSingleProductTemplate = false } = context || {};
 	const originalPrice = product?.prices?.regular_price;
 	const currentPrice = product?.prices?.price;
 	const showPrice = originalPrice && currentPrice !== originalPrice;
-	const currency = isDescendentOfSingleProductTemplate
-		? getCurrencyFromPriceResponse()
-		: getCurrencyFromPriceResponse( product?.prices );
-	const blockAttrs = {
-		attributes,
-		currency,
-		context,
-		originalPrice,
-		currentPrice,
-	};
+	useEffect( () => {
+		if ( ! attributes?.style ) {
+			setAttributes( { style: { spacing: { blockGap: '0' } } } );
+		}
+	}, [ attributes, setAttributes ] );
 	return (
 		<>
 			{ showPrice && (
-				<div { ...blockProps }>
-					<DiscountBlock { ...blockAttrs } />
+				<div className={ className } style={ style }>
+					<InnerBlocks
+						allowedBlocks={ [
+							discountAmountName,
+							'core/paragraph',
+						] }
+						template={ TEMPLATE }
+					/>
 				</div>
 			) }
 		</>
 	);
 };
 
-export default DiscountEdit;
+export const Save = (): JSX.Element => {
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
+};

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/index.ts

@@ -6,20 +6,22 @@ import { registerBlockType } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import edit from './edit';
+import { Edit as edit, Save as save } from './edit';
 import sharedConfig from '../../../shared/config';
+import { supports } from '../../supports';
 import metadata from './block.json';
 
 const { ancestor, ...configuration } = sharedConfig;
 
 const blockConfig = {
 	...configuration,
 	...metadata,
-	edit,
 	supports: {
-		...configuration.supports,
-		context: '',
+		...supports,
+		...metadata.supports,
 	},
+	edit,
+	save,
 };
 
 registerBlockType( metadata.name, blockConfig );

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/inner-blocks/discount-amount/block.json

@@ -0,0 +1,14 @@
+{
+	"name": "woocommerce/discount-amount",
+	"version": "1.0.0",
+	"icon": "info",
+	"title": "Discount Amount",
+	"description": "Display the discounted amount value.",
+	"category": "woocommerce",
+	"usesContext": ["woocommerce/isDescendantOfSingleProductTemplate"],
+	"keywords": [ "WooCommerce" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"ancestor": "woocommerce/discount",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/block.tsx renamed to assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/inner-blocks/discount-amount/block.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import type { HTMLAttributes, CSSProperties } from 'react';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+
+/**
+ * Internal dependencies
+ */
+import DiscountBlock from './block';
+
+interface Attributes {
+	style: CSSProperties;
+}
+
+type Props = {
+	attributes: Attributes;
+	context?: { isDescendentOfSingleProductTemplate: boolean };
+} & HTMLAttributes< HTMLDivElement >;
+
+const DiscountEdit = ( { attributes, context }: Props ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const { product } = useProductDataContext();
+	const { isDescendentOfSingleProductTemplate = false } = context || {};
+	const originalPrice = product?.prices?.regular_price;
+	const currentPrice = product?.prices?.price;
+	const showPrice = originalPrice && currentPrice !== originalPrice;
+	const currency = isDescendentOfSingleProductTemplate
+		? getCurrencyFromPriceResponse()
+		: getCurrencyFromPriceResponse( product?.prices );
+	const blockAttrs = {
+		attributes,
+		currency,
+		context,
+		originalPrice,
+		currentPrice,
+	};
+	return (
+		<>
+			{ showPrice && (
+				<div { ...blockProps }>
+					<DiscountBlock { ...blockAttrs } />
+				</div>
+			) }
+		</>
+	);
+};
+
+export default DiscountEdit;

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/inner-blocks/discount-amount/edit.tsx

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import sharedConfig from '../../../../../shared/config';
+import metadata from './block.json';
+
+const { ancestor, ...configuration } = sharedConfig;
+
+const blockConfig = {
+	...configuration,
+	...metadata,
+	edit,
+	supports: {
+		...configuration.supports,
+		context: '',
+	},
+};
+
+registerBlockType( metadata.name, blockConfig );
+
+export const BLOCK_NAME = metadata.name;

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/inner-blocks/discount-amount/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import './discount-amount/index.ts';
+
+export { BLOCK_NAME as discountAmountName } from './discount-amount/index';

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/inner-blocks/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { InnerBlockTemplate } from '@wordpress/blocks';
+import { _x, sprintf } from '@wordpress/i18n';
+
+// Some hackery to both make translation clearer and to allow for RTL languages
+// in default template layout.
+const translatedContent = sprintf(
+	// translators: %s: discount amount. The rendered value will only allow for placeholder at beginning or end of string.
+	_x(
+		'%s off',
+		'post text next to discount amount',
+		'woo-gutenberg-products-block'
+	),
+	':placeholder:'
+);
+
+const templateContent = translatedContent.replace( ':placeholder:', '' );
+
+const RTLtemplate: InnerBlockTemplate[] = [
+	[ 'core/paragraph', { content: templateContent }, [] ],
+	[ 'woocommerce/discount-amount', {}, [] ],
+];
+
+const LTRtemplate: InnerBlockTemplate[] = [
+	[ 'woocommerce/discount-amount', {}, [] ],
+	[ 'core/paragraph', { content: templateContent }, [] ],
+];
+
+export const TEMPLATE: InnerBlockTemplate[] =
+	translatedContent.indexOf( ':placeholder:' ) === 0
+		? LTRtemplate
+		: RTLtemplate;