From 0f09ffef6705f02e84ad7f47a25822d17f337224 Mon Sep 17 00:00:00 2001 From: Darren Ethier Date: Mon, 5 Jun 2023 15:21:34 -0400 Subject: [PATCH] A bunch of styles support - switch to use spans instead of tag. - always render separator (but hide from visuals) - proper support for style (typography, colors etc). --- .../product-elements/price-v2/block.json | 7 +++- .../blocks/product-elements/price-v2/edit.tsx | 40 ++++++++++++++++--- .../inner-blocks/current-price/block.json | 1 + .../inner-blocks/current-price/block.tsx | 5 +-- .../inner-blocks/original-price/block.json | 1 + .../inner-blocks/original-price/block.tsx | 2 +- .../formatted-monetary-amount/index.tsx | 7 +++- .../formatted-monetary-amount/style.scss | 9 +++++ 8 files changed, 60 insertions(+), 12 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/price-v2/block.json b/assets/js/atomic/blocks/product-elements/price-v2/block.json index 09ec7d931e7..0653c0a4bd7 100644 --- a/assets/js/atomic/blocks/product-elements/price-v2/block.json +++ b/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": [ diff --git a/assets/js/atomic/blocks/product-elements/price-v2/edit.tsx b/assets/js/atomic/blocks/product-elements/price-v2/edit.tsx index 3f5b457bd15..0de6c441679 100644 --- a/assets/js/atomic/blocks/product-elements/price-v2/edit.tsx +++ b/assets/js/atomic/blocks/product-elements/price-v2/edit.tsx @@ -2,7 +2,7 @@ * 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, @@ -10,6 +10,7 @@ import { 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 (
{ - 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 (
- +
); diff --git a/assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/current-price/block.json b/assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/current-price/block.json index e97826d3822..f85de2bfc6d 100644 --- a/assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/current-price/block.json +++ b/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" diff --git a/assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/current-price/block.tsx b/assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/current-price/block.tsx index 1404200814f..de5f2d1b9d1 100644 --- a/assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/current-price/block.tsx +++ b/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 } diff --git a/assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/original-price/block.json b/assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/original-price/block.json index 97db17d5bd2..9257c638974 100644 --- a/assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/original-price/block.json +++ b/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" diff --git a/assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/original-price/block.tsx b/assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/original-price/block.tsx index 9104479f1c6..9c621b48681 100644 --- a/assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/original-price/block.tsx +++ b/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 } diff --git a/assets/js/base/components/formatted-monetary-amount/index.tsx b/assets/js/base/components/formatted-monetary-amount/index.tsx index 21426b94845..956b74f9950 100644 --- a/assets/js/base/components/formatted-monetary-amount/index.tsx +++ b/assets/js/base/components/formatted-monetary-amount/index.tsx @@ -44,7 +44,12 @@ const applySuperscript = return ( <> <>{ matches[ 1 ] } - { matches[ 3 ] } + + + ${ currency.decimalSeparator } + + { matches[ 3 ] } + ); }; diff --git a/assets/js/base/components/formatted-monetary-amount/style.scss b/assets/js/base/components/formatted-monetary-amount/style.scss index c8f02bd1bee..a7821118ea5 100644 --- a/assets/js/base/components/formatted-monetary-amount/style.scss +++ b/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(); +}