Block Refinement: Price Block [draft]

assets/js/atomic/blocks/index.js

@@ -3,6 +3,7 @@
  */
 import './product-elements/title';
 import './product-elements/price';
+import './product-elements/price-v2';
 import './product-elements/image';
 import './product-elements/rating';
 import './product-elements/rating-stars';

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

@@ -0,0 +1,48 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "woocommerce/product-price-v2",
+	"title": "Price",
+	"keywords": [ "WooCommerce" ],
+	"category": "woocommerce-product-elements",
+	"textdomain": "woo-gutenberg-products-block",
+	"description": "Display the price of a product, including any discounts.",
+	"supports": {
+		"layout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"default": { "type": "flex" }
+		},
+		"html": false
+	},
+	"usesContext": [ "queryId", "postId" ],
+	"providesContext": {
+		"woocommerce/isDescendentOfSingleProductTemplate":
+			"isDescendentOfSingleProductTemplate",
+		"woocommerce/isDescendentOfSingleProductBlock":
+			"isDescendentOfSingleProductBlock",
+		"woocommerce/withSuperScriptStyle": "withSuperScriptStyle"
+	},
+	"attributes": {
+		"isDescendentOfSingleProductTemplate": {
+			"type": "boolean",
+			"default": false
+		},
+		"isDescendentOfSingleProductBlock": {
+			"type": "boolean",
+			"default": false
+		},
+		"productId": {
+			"type": "number",
+			"default": 0
+		},
+		"withSuperScriptStyle": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"styles": [
+		{ "name": "default", "label": "Default", "isDefault": true },
+		{ "name": "price-super", "label": "Superscript", "isDefault": false }
+	]
+  }

assets/js/atomic/blocks/product-elements/price-v2/constants.tsx

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { currencyDollar, Icon } from '@wordpress/icons';
+
+export const BLOCK_ICON: JSX.Element = (
+	<Icon
+		icon={ currencyDollar }
+		className="wc-block-editor-components-block-icon"
+	/>
+);

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

@@ -0,0 +1,181 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { useEffect, useMemo } 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 { BLOCK_NAME as priceDiscountName } from './inner-blocks/discount';
+import { BLOCK_NAME as originalPriceName } from './inner-blocks/original-price';
+import { BLOCK_NAME as currentPriceName } from './inner-blocks/current-price';
+import { TEMPLATE } from './template';
+import './editor.scss';
+
+interface Attributes {
+	isDescendentOfSingleProductBlock: boolean;
+	isDescendentOfSingleProductTemplate: boolean;
+	withSuperScriptStyle: 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 deriveSuperScriptFromClass = ( className: string ): boolean => {
+	if ( className ) {
+		const classList = className.split( ' ' );
+		return classList.includes( 'is-style-price-super' );
+	}
+	return false;
+};
+
+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 & { withSuperScript: boolean } ): 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,
+	withSuperScript,
+}: Props & { withSuperScript: boolean } ): JSX.Element => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	return (
+		<DerivedProductDataContextProvider
+			context={ context }
+			attributes={ attributes }
+			setAttributes={ setAttributes }
+			withSuperScript={ withSuperScript }
+		>
+			<div className={ parentClassName }>
+				<InnerBlocks
+					allowedBlocks={ [
+						originalPriceName,
+						currentPriceName,
+						priceDiscountName,
+					] }
+					// todo add template for initial price layout
+					template={ TEMPLATE }
+				/>
+			</div>
+		</DerivedProductDataContextProvider>
+	);
+};
+
+const Edit = ( {
+	setAttributes,
+	attributes,
+	...props
+}: Props ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const withSuperScript = useMemo(
+		() => deriveSuperScriptFromClass( blockProps.className ),
+		[ blockProps.className ]
+	);
+	useEffect( () => {
+		setAttributes( { withSuperScriptStyle: withSuperScript } );
+	}, [ withSuperScript, setAttributes ] );
+	return (
+		<div { ...blockProps }>
+			<InnerBlockLayoutContextProvider
+				parentName={ 'woocommerce/price-block' }
+				parentClassName={ 'wc-block-price-element' }
+			>
+				<EditBlock
+					{ ...props }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+				/>
+			</InnerBlockLayoutContextProvider>
+		</div>
+	);
+};
+
+export default Edit;

assets/js/atomic/blocks/product-elements/price-v2/editor.scss

@@ -0,0 +1,12 @@
+.wc-block-price-element {
+	.block-editor-inner-blocks {
+		.block-editor-block-list__layout {
+			display: flex;
+
+			.wp-block-woocommerce-original-price,
+			.wp-block-woocommerce-current-price {
+				margin-right: $gap-smaller;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import { supports } from './supports';
+import metadata from './block.json';
+import { BLOCK_ICON as icon } from './constants';
+import './inner-blocks';
+
+const blockConfig = {
+	...metadata,
+	icon: { src: icon },
+	supports: { ...supports, ...metadata.supports },
+	edit,
+	save,
+};
+
+registerBlockType( metadata.name, blockConfig );

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

@@ -0,0 +1,19 @@
+{
+	"name": "woocommerce/current-price",
+	"version": "1.0.0",
+	"icon": "info",
+	"title": "Current Price",
+	"description": "Display the current price for the product",
+	"supports": {
+		"color": {
+			"background": true,
+			"text": true
+		}
+	},
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"usesContext": ["woocommerce/withSuperScriptStyle", "woocommerce/isDescendentOfSingleProductTemplate", "postId"],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

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

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import type { HTMLAttributes } from 'react';
+import classnames from 'classnames';
+import { useStyleProps } from '@woocommerce/base-hooks';
+import { useInnerBlockLayoutContext } from '@woocommerce/shared-context';
+import ProductPrice from '@woocommerce/base-components/product-price';
+
+/**
+ * Internal dependencies
+ */
+import type { PriceProps } from '../../types';
+
+type Props = PriceProps & HTMLAttributes< HTMLDivElement >;
+
+const Block = ( {
+	attributes,
+	context,
+	rawPrice,
+	minPrice,
+	maxPrice,
+	currency,
+	isDescendentOfSingleProductTemplate,
+}: Props ): JSX.Element | null => {
+	const { className } = attributes;
+	const { className: stylesClassName, style } = useStyleProps( attributes );
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const wrapperClassName = classnames(
+		className,
+		{
+			[ `${ parentClassName }__product-price` ]: parentClassName,
+		},
+		stylesClassName
+	);
+	if ( ! rawPrice && ! isDescendentOfSingleProductTemplate ) {
+		return <ProductPrice className={ wrapperClassName } />;
+	}
+
+	const pricePreview = '3000';
+	const priceClassName = classnames( {
+		[ `${ parentClassName }__product-current-price__value` ]:
+			parentClassName,
+	} );
+
+	return (
+		<ProductPrice
+			className={ wrapperClassName }
+			style={ style }
+			priceClassName={ priceClassName }
+			currency={ currency }
+			withSuperScript={ context?.[ 'woocommerce/withSuperScriptStyle' ] }
+			price={
+				isDescendentOfSingleProductTemplate ? pricePreview : rawPrice
+			}
+			minPrice={ minPrice }
+			maxPrice={ maxPrice }
+		/>
+	);
+};
+
+export default Block;