Sale Product Block: Enable global style (#5565)

* Product title: add support global style #4965

* add specific type

* add custom save function

* move hooks in a specific folder

* fix crash on WP 5.8

* Featured Category block: Add support for global style #4965

Featured Category block: Add support for global style

* fix border color

* Sale Product block: enable global style #4965

Sale Product block: enable global style #4965

* add comment

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

@@ -15,6 +15,12 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
  * Internal dependencies
  */
 import './style.scss';
+import {
+	useBorderProps,
+	useColorProps,
+	useSpacingProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
 
 /**
  * Product Sale Badge Block Component.
@@ -24,9 +30,15 @@ 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;
@@ -45,8 +57,16 @@ const Block = ( { className, align } ) => {
 				alignClass,
 				{
 					[ `${ parentClassName }__product-onsale` ]: parentClassName,
-				}
+				},
+				colorProps.className,
+				borderProps.className
 			) }
+			style={ {
+				...colorProps.style,
+				...borderProps.style,
+				...typographyProps.style,
+				...spacingProps.style,
+			} }
 		>
 			<Label
 				label={ __( 'Sale', 'woo-gutenberg-products-block' ) }

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -11,7 +12,12 @@ import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 
 const Edit = ( { attributes } ) => {
-	return <Block { ...attributes } />;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Block { ...attributes } />
+		</div>
+	);
 };
 
 export default withProductSelector( {

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

@@ -14,16 +14,40 @@ import {
 	BLOCK_ICON as icon,
 	BLOCK_DESCRIPTION as description,
 } from './constants';
+import { Save } from './save';
 
 const blockConfig = {
 	title,
 	description,
 	icon: { src: icon },
+	apiVersion: 2,
 	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,
+	save: Save,
 };
 
 registerBlockType( 'woocommerce/product-sale-badge', {

assets/js/atomic/blocks/product-elements/sale-badge/save.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+type Props = {
+	attributes: Record< string, unknown > & {
+		className?: string;
+	};
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className ),
+			} ) }
+		/>
+	);
+};

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/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

@@ -153,6 +153,7 @@ public function hide_legacy_widgets_with_block_equivalent( $widget_types ) {
 	protected function get_block_types() {
 		global $wp_version, $pagenow;
 
+		// @todo Add a comment why some atomic blocks are included in this array.
 		$block_types = [
 			'AllReviews',
 			'FeaturedCategory',
@@ -178,6 +179,7 @@ protected function get_block_types() {
 			'ProductTitle',
 			'ProductSummary',
 			'ProductStockIndicator',
+			'ProductSaleBadge',
 		];
 
 		if ( Package::feature()->is_feature_plugin_build() ) {
@@ -233,7 +235,6 @@ protected function get_atomic_blocks() {
 			'product-image',
 			'product-price',
 			'product-rating',
-			'product-sale-badge',
 			'product-sku',
 			'product-category-list',
 			'product-tag-list',