latest refactoring state (rolled back when I resume)

assets/js/atomic/blocks/product-elements/price/attributes-new.ts

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { BlockAttributes } from '@wordpress/blocks';
+
+export const blockAttributes: BlockAttributes = {
+	isDescendentOfSingleProductTemplate: {
+		type: 'boolean',
+		default: false,
+	},
+	isDescendentOfSingleProductBlock: {
+		type: 'boolean',
+		default: false,
+	},
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

assets/js/atomic/blocks/product-elements/price/block-new-edit.tsx

@@ -0,0 +1,146 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import {
+	InnerBlockLayoutContextProvider,
+	useInnerBlockLayoutContext,
+	ProductDataContextProvider,
+} from '@woocommerce/shared-context';
+import { useStoreProducts } from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { originalPriceName } from './inner-blocks';
+import { TEMPLATE } from './template';
+
+interface Attributes {
+	isDescendentOfSingleProductBlock: boolean;
+	isDescendentOfSingleProductTemplate: boolean;
+	productId?: number;
+}
+
+interface Context {
+	postId?: number;
+	queryId?: number;
+}
+
+interface Props {
+	context: Context;
+	attributes: Attributes;
+	setAttributes: ( attributes: Partial< Attributes > ) => void;
+}
+
+interface ContextProviderProps extends Props {
+	children: JSX.Element | JSX.Element[] | undefined;
+}
+
+type ProductIdProps = Partial< ContextProviderProps > & { productId: number };
+
+const ProviderFromAPI = ( {
+	productId,
+	children,
+}: ProductIdProps ): JSX.Element => {
+	// TODO: this would be good to derive from the WP entity store at some point.
+	const { products, productsLoading } = useStoreProducts( {
+		include: productId,
+	} );
+	let product = null;
+	if ( products.length > 0 ) {
+		product =
+			products.find(
+				( productIteration ) => productIteration.id === productId
+			) || null;
+	}
+
+	return (
+		<ProductDataContextProvider
+			product={ product }
+			isLoading={ productsLoading }
+		>
+			{ children }
+		</ProductDataContextProvider>
+	);
+};
+
+const DerivedProductDataContextProvider = ( {
+	context,
+	attributes,
+	setAttributes,
+	children,
+}: ContextProviderProps ): JSX.Element => {
+	const { queryId, postId } = context;
+	const { productId } = attributes;
+	const isDescendentOfQueryLoop = Number.isFinite( queryId );
+	const id = isDescendentOfQueryLoop ? postId : productId;
+	const isDescendentOfSingleProductTemplate = useSelect(
+		( select ) => {
+			const editSiteStore = select( 'core/edit-site' );
+			const editorPostId = editSiteStore?.getEditedPostId<
+				string | undefined
+			>();
+
+			return Boolean(
+				editorPostId?.includes( '//single-product' ) &&
+					! isDescendentOfQueryLoop
+			);
+		},
+		[ isDescendentOfQueryLoop ]
+	);
+
+	useEffect(
+		() =>
+			setAttributes( {
+				isDescendentOfSingleProductTemplate,
+			} ),
+		[ isDescendentOfSingleProductTemplate, setAttributes ]
+	);
+	if ( id && id > 0 ) {
+		return <ProviderFromAPI productId={ id }>{ children }</ProviderFromAPI>;
+	}
+	return (
+		<ProductDataContextProvider isLoading={ false }>
+			{ children }
+		</ProductDataContextProvider>
+	);
+};
+
+const EditBlock = ( {
+	context,
+	attributes,
+	setAttributes,
+}: Props ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const { parentClassName } = useInnerBlockLayoutContext();
+	return (
+		<DerivedProductDataContextProvider
+			context={ context }
+			attributes={ attributes }
+			setAttributes={ setAttributes }
+		>
+			<div { ...blockProps } className={ parentClassName }>
+				<InnerBlocks
+					allowedBlocks={ [ originalPriceName ] }
+					// todo add template for initial price layout
+					template={ TEMPLATE }
+				/>
+			</div>
+		</DerivedProductDataContextProvider>
+	);
+};
+
+const Edit = ( props: Props ): JSX.Element => {
+	return (
+		<InnerBlockLayoutContextProvider
+			parentName={ 'woocommerce/price-block' }
+			parentClassName={ 'wc-block-price-element' }
+		>
+			<EditBlock { ...props } />
+		</InnerBlockLayoutContextProvider>
+	);
+};
+
+export default Edit;

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

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import edit from './block-new-edit';
+import { save } from './save';
+import attributes from './attributes-new';
+import { supports } from './supports';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const { ancestor, ...configuration } = sharedConfig;
+
+const blockConfig = {
+	...configuration,
+	apiVersion: 2,
+	title,
+	description,
+	usesContext: [ 'postId', 'queryId' ],
+	providesContext: {
+		'woocommerce/isDescendentOfSingleProductTemplate':
+			'isDescendentOfSingleProductTemplate',
+		'woocommerce/isDescendentOfSingleProductBlock':
+			'isDescendentOfSingleProductBlock',
+	},
+	icon: { src: icon },
+	attributes,
+	supports,
+	edit,
+	save,
+};
+
+registerBlockType( 'woocommerce/product-price', blockConfig );

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

@@ -0,0 +1 @@
+export { Edit } from './edit';

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

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import './original-price/index.ts';
+
+export { BLOCK_NAME as originalPriceName } from './original-price/index';

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

@@ -0,0 +1,12 @@
+{
+	"name": "woocommerce/original-price",
+	"version": "1.0.0",
+	"icon": "info",
+	"title": "Original Price",
+	"description": "Display the original price for the product",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/atomic/blocks/product-elements/price/inner-blocks/original-price/block.tsx

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import type { HTMLAttributes } from 'react';
+import classnames from 'classnames';
+import {
+	useColorProps,
+	useSpacingProps,
+	useTypographyProps,
+} from '@woocommerce/base-hooks';
+import { useInnerBlockLayoutContext } from '@woocommerce/shared-context';
+
+/**
+ * Internal dependencies
+ */
+import type { PriceProps } from '../../types';
+import { ProductPrice } from '../../components/product-price';
+import './style.scss';
+
+type Props = PriceProps & HTMLAttributes< HTMLDivElement >;
+
+export const Block = ( {
+	attributes,
+	context,
+	rawPrice,
+	currency,
+}: Props ): JSX.Element | null => {
+	const { className } = attributes;
+	const { isDescendentOfSingleProductTemplate = false } = context || {};
+	const colorProps = useColorProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+	const typographyProps = useTypographyProps( attributes );
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const wrapperClassName = classnames(
+		'wc-block-product-price__original',
+		className,
+		{
+			[ `${ parentClassName }__product-price` ]: parentClassName,
+		},
+		colorProps.className,
+		typographyProps.className
+	);
+	if ( ! rawPrice && ! isDescendentOfSingleProductTemplate ) {
+		return <ProductPrice className={ wrapperClassName } />;
+	}
+
+	const style = {
+		...colorProps.style,
+		...typographyProps.style,
+	};
+	const spacingStyle = {
+		...spacingProps.style,
+	};
+
+	const pricePreview = '5000';
+	const priceClassName = classnames( {
+		[ `${ parentClassName }__product-original-price__value` ]:
+			parentClassName,
+	} );
+
+	return (
+		<ProductPrice
+			className={ wrapperClassName }
+			priceStyle={ style }
+			priceClassName={ priceClassName }
+			currency={ currency }
+			price={
+				isDescendentOfSingleProductTemplate ? pricePreview : rawPrice
+			}
+			spacingStyle={ spacingStyle }
+		/>
+	);
+};

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

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { BlockControls, useBlockProps } from '@wordpress/block-editor';
+import { useEffect, useSelect } from '@wordpress/element';
+import type { HTMLAttributes, CSSProperties } from 'react';
+import classnames from 'classnames';
+import {
+	useColorProps,
+	useSpacingProps,
+	useTypographyProps,
+} from '@woocommerce/base-hooks';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import ProductPrice from '@woocommerce/base-components/product-price';
+import { ProductResponseItem } from '@woocommerce/types';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+
+interface Attributes {
+	style: CSSProperties;
+}
+
+type Props = {
+	attributes: Attributes;
+	context?: { isDescendentOfSingleProductTemplate: boolean };
+} & HTMLAttributes< HTMLDivElement >;
+
+const OriginalPrice = ( { attributes, context }: Props ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const { product } = useProductDataContext();
+	const { isDescendentOfSingleProductTemplate = false } = context || {};
+	// todo refactor to new useStyleProps hook when available (see https://github.com/woocommerce/woocommerce-blocks/pull/9251/files).
+	const colorProps = useColorProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+	const typographyProps = useTypographyProps( attributes );
+	const originalPrice = product?.prices?.regular_price;
+	const currentPrice = product?.prices?.price;
+	const showPrice = originalPrice && currentPrice !== originalPrice;
+	const currency = isDescendentOfSingleProductTemplate
+		? getCurrencyFromPriceResponse()
+		: getCurrencyFromPriceResponse( product?.prices );
+	return (
+		<>
+			{ showPrice && (
+				<span
+					{ ...blockProps }
+					className={ classnames(
+						'wc-block-product-price__original',
+						colorProps.className,
+						spacingProps.className,
+						typographyProps.className
+					) }
+					style={ {
+						...colorProps.style,
+						...spacingProps.style,
+						...typographyProps.style,
+					} }
+				>
+					{ /* todo need to replace with ProductPrice component from a (block-new.tsx) implementation (see original price block) */ }
+					{ originalPrice }
+				</span>
+			) }
+		</>
+	);
+};
+
+export default OriginalPrice;