A bunch of styles support

- switch to use spans instead of <sup> tag.
- always render separator (but hide from visuals)
- proper support for style (typography, colors etc).

Author: nerrad

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

@@ -21,7 +21,8 @@
 		"woocommerce/isDescendentOfSingleProductTemplate":
 			"isDescendentOfSingleProductTemplate",
 		"woocommerce/isDescendentOfSingleProductBlock":
-			"woocommerce/isDescendentOfSingleProductBlock"
+			"isDescendentOfSingleProductBlock",
+		"woocommerce/withSuperScriptStyle": "withSuperScriptStyle"
 	},
 	"attributes": {
 		"isDescendentOfSingleProductTemplate": {
@@ -35,6 +36,10 @@
 		"productId": {
 			"type": "number",
 			"default": 0
+		},
+		"withSuperScriptStyle": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"styles": [

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

@@ -2,14 +2,15 @@
  * External dependencies
  */
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+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';
+import { useStyleProps } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -20,6 +21,7 @@ import { TEMPLATE } from './template';
 interface Attributes {
 	isDescendentOfSingleProductBlock: boolean;
 	isDescendentOfSingleProductTemplate: boolean;
+	withSuperScriptStyle: boolean;
 	productId?: number;
 }
 
@@ -40,6 +42,14 @@ interface ContextProviderProps extends Props {
 
 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,
@@ -71,7 +81,7 @@ const DerivedProductDataContextProvider = ( {
 	attributes,
 	setAttributes,
 	children,
-}: ContextProviderProps ): JSX.Element => {
+}: ContextProviderProps & { withSuperScript: boolean } ): JSX.Element => {
 	const { queryId, postId } = context;
 	const { productId } = attributes;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
@@ -112,13 +122,15 @@ const EditBlock = ( {
 	context,
 	attributes,
 	setAttributes,
-}: Props ): JSX.Element => {
+	withSuperScript,
+}: Props & { withSuperScript: boolean } ): JSX.Element => {
 	const { parentClassName } = useInnerBlockLayoutContext();
 	return (
 		<DerivedProductDataContextProvider
 			context={ context }
 			attributes={ attributes }
 			setAttributes={ setAttributes }
+			withSuperScript={ withSuperScript }
 		>
 			<div className={ parentClassName }>
 				<InnerBlocks
@@ -131,15 +143,31 @@ const EditBlock = ( {
 	);
 };
 
-const Edit = ( props: Props ): JSX.Element => {
-	const blockProps = useBlockProps();
+const Edit = ( {
+	setAttributes,
+	attributes,
+	...props
+}: Props ): JSX.Element => {
+	const { style, className } = useStyleProps( attributes );
+	const blockProps = useBlockProps( { style, className } );
+	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 } />
+				<EditBlock
+					{ ...props }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+				/>
 			</InnerBlockLayoutContextProvider>
 		</div>
 	);

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

@@ -6,6 +6,7 @@
 	"description": "Display the current price for the product",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
+	"usesContext": ["woocommerce/withSuperScriptStyle"],
 	"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

@@ -25,7 +25,6 @@ const Block = ( {
 	const { className: stylesClassName, style } = useStyleProps( attributes );
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const wrapperClassName = classnames(
-		'wc-block-product-price__original',
 		className,
 		{
 			[ `${ parentClassName }__product-price` ]: parentClassName,
@@ -38,7 +37,7 @@ const Block = ( {
 
 	const pricePreview = '5000';
 	const priceClassName = classnames( {
-		[ `${ parentClassName }__product-original-price__value` ]:
+		[ `${ parentClassName }__product-current-price__value` ]:
 			parentClassName,
 	} );
 
@@ -49,7 +48,7 @@ const Block = ( {
 			priceStyle={ style }
 			priceClassName={ priceClassName }
 			currency={ currency }
-			withSuperScript={ true }
+			withSuperScript={ context[ 'woocommerce/withSuperScriptStyle' ] }
 			price={
 				isDescendentOfSingleProductTemplate ? pricePreview : rawPrice
 			}

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

@@ -6,6 +6,7 @@
 	"description": "Display the original price for the product",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
+	"usesContext": ["woocommerce/withSuperScriptStyle"],
 	"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/original-price/block.tsx

@@ -26,7 +26,6 @@ const Block = ( {
 	const { className: stylesClassName, style } = useStyleProps( attributes );
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const wrapperClassName = classnames(
-		'wc-block-product-price__original',
 		className,
 		{
 			[ `${ parentClassName }__product-price` ]: parentClassName,
@@ -50,6 +49,7 @@ const Block = ( {
 			priceStyle={ style }
 			priceClassName={ priceClassName }
 			currency={ currency }
+			withSuperScript={ context[ 'woocommerce/withSuperScriptStyle' ] }
 			price={
 				isDescendentOfSingleProductTemplate ? pricePreview : rawPrice
 			}

assets/js/base/components/formatted-monetary-amount/index.tsx

@@ -44,7 +44,12 @@ const applySuperscript =
 		return (
 			<>
 				<>{ matches[ 1 ] }</>
-				<sup>{ matches[ 3 ] }</sup>
+				<span className="formatted-money-amount-superscript">
+					<span className="formatted-money-amount-separator">
+						${ currency.decimalSeparator }
+					</span>
+					{ matches[ 3 ] }
+				</span>
 			</>
 		);
 	};

assets/js/base/components/formatted-monetary-amount/style.scss

@@ -1,3 +1,12 @@
 .wc-block-components-formatted-money-amount {
 	white-space: nowrap;
 }
+
+.formatted-money-amount-superscript {
+	vertical-align: super;
+	font-size: .5em;
+}
+
+.formatted-money-amount-separator {
+	@include visually-hidden();
+}