Sale Product block: enable global style #4965

Sale Product block: enable global style #4965

assets/js/atomic/blocks/product-elements/sale-badge/block.js

@@ -10,11 +10,18 @@ import {
 	useProductDataContext,
 } from '@woocommerce/shared-context';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
+import { isString } from '@woocommerce/types';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import {
+	useBorderProps,
+	useColorProps,
+	useSpacingProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
 
 /**
  * Product Sale Badge Block Component.
@@ -24,9 +31,14 @@ import './style.scss';
  * @param {string} [props.align]     Alignment of the badge.
  * @return {*} The component.
  */
-const Block = ( { className, align } ) => {
+const Block = ( props ) => {
+	const { className, align } = props;
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
+	const borderProps = useBorderProps( props );
+	const colorProps = useColorProps( props );
+	const typographyProps = useTypographyProps( props );
+	const spacingProps = useSpacingProps( props );
 
 	if ( ! product.id || ! product.on_sale ) {
 		return null;
@@ -47,6 +59,32 @@ const Block = ( { className, align } ) => {
 					[ `${ parentClassName }__product-onsale` ]: parentClassName,
 				}
 			) }
+			ref={ ( el ) => {
+				if ( ! el ) {
+					return null;
+				}
+
+				if ( isString( colorProps.style?.color ) ) {
+					el.style.setProperty(
+						'color',
+						colorProps.style?.color,
+						'important'
+					);
+				}
+
+				if ( isString( colorProps.style?.background ) ) {
+					el.style.setProperty(
+						'background',
+						colorProps.style?.background,
+						'important'
+					);
+				}
+			} }
+			style={ {
+				...borderProps.style,
+				...typographyProps.style,
+				...spacingProps.style,
+			} }
 		>
 			<Label
 				label={ __( 'Sale', 'woo-gutenberg-products-block' ) }

assets/js/atomic/blocks/product-elements/sale-badge/index.js

@@ -21,6 +21,27 @@ const blockConfig = {
 	icon: { src: icon },
 	supports: {
 		html: false,
+		color: {
+			gradients: true,
+			background: true,
+			link: false,
+			__experimentalSkipSerialization: true,
+		},
+		typography: {
+			fontSize: true,
+			__experimentalSkipSerialization: true,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+		},
+		spacing: {
+			padding: true,
+			__experimentalSkipSerialization: true,
+		},
+		__experimentalSelector: '.wc-block-components-product-sale-badge',
 	},
 	attributes,
 	edit,

assets/js/atomic/blocks/product-elements/sale-badge/style.scss

@@ -13,4 +13,10 @@
 	font-weight: 600;
 	z-index: 9;
 	position: static;
+
+	span {
+		color: inherit;
+		background-color: inherit;
+	}
+
 }

src/BlockTypes/AbstractBlock.php

@@ -186,6 +186,8 @@ protected function register_block_type() {
 		];
 
 		if ( isset( $this->api_version ) && '2' === $this->api_version ) {
+			do_action( 'qm/debug', $this->block_name );
+
 			$block_settings['api_version'] = 2;
 		}
 

src/BlockTypes/ProductSaleBadge.php

@@ -0,0 +1,56 @@
+<?php
+namespace Automattic\WooCommerce\Blocks\BlockTypes;
+
+/**
+ * ProductTag class.
+ */
+class ProductSaleBadge extends AbstractBlock {
+
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'product-sale-badge';
+
+	/**
+	 * API version name.
+	 *
+	 * @var string
+	 */
+	protected $api_version = '2';
+
+	/**
+	 * Get block attributes.
+	 *
+	 * @return array
+	 */
+	protected function get_block_type_supports() {
+		return array(
+			'color'                  =>
+			array(
+				'gradients'  => true,
+				'background' => true,
+				'link'       => true,
+			),
+			'typography'             =>
+			array(
+				'fontSize'   => true,
+				'lineHeight' => true,
+			),
+			'__experimentalBorder'   =>
+			array(
+				'color'  => true,
+				'radius' => true,
+				'width'  => true,
+			),
+			'spacing'                =>
+			array(
+				'padding'                         => true,
+				'__experimentalSkipSerialization' => true,
+			),
+			'__experimentalSelector' => '.wc-block-components-product-sale-badge',
+		);
+	}
+
+}

src/BlockTypesController.php

@@ -175,6 +175,7 @@ protected function get_block_types() {
 			'StockFilter',
 			'ActiveFilters',
 			'LegacyTemplate',
+			'ProductSaleBadge',
 		];
 
 		if ( Package::feature()->is_feature_plugin_build() ) {
@@ -221,7 +222,6 @@ protected function get_atomic_blocks() {
 			'product-image',
 			'product-price',
 			'product-rating',
-			'product-sale-badge',
 			'product-summary',
 			'product-sku',
 			'product-category-list',