Featured Product: Enable global style (https://github.com/woocommerce/woocommerce-blocks/pull/5555)

* Product title: add support global style woocommerce/woocommerce-blocks#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 woocommerce/woocommerce-blocks#4965

Featured Category block: Add support for global style

* fix border color

* Featured Product block: enable global style woocommerce/woocommerce-blocks#4965

Featured Product block: enable global style

* fix border color

* fix eslint error

* fix opacity

* fix border radius

* fix opacity

* disable font-size support

* restore height for featured product and featured category

plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js

@@ -274,7 +274,13 @@ const FeaturedCategory = ( {
 	};
 
 	const renderCategory = () => {
-		const { contentAlign, dimRatio, focalPoint, showDesc } = attributes;
+		const {
+			height,
+			contentAlign,
+			dimRatio,
+			focalPoint,
+			showDesc,
+		} = attributes;
 
 		const classes = classnames(
 			'wc-block-featured-category',
@@ -302,10 +308,7 @@ const FeaturedCategory = ( {
 		return (
 			<ResizableBox
 				className={ classes }
-				size={ {
+				size={ { height } }
-					height: '',
-					width: '',
-				} }
 				minHeight={ getSetting( 'min_height', 500 ) }
 				enable={ { bottom: true } }
 				onResizeStop={ onResizeStop }

plugins/woocommerce-blocks/assets/js/blocks/featured-category/style.scss

@@ -10,7 +10,7 @@
 	background-size: cover;
 	background-position: center center;
 	width: 100%;
-	margin: 0 0 0 0;
+	margin: 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;

plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js

@@ -8,8 +8,6 @@ import {
 	InnerBlocks,
 	InspectorControls,
 	MediaReplaceFlow,
-	PanelColorSettings,
-	withColors,
 	RichText,
 } from '@wordpress/block-editor';
 import { withSelect } from '@wordpress/data';
@@ -55,10 +53,8 @@ import {
  * @param {function(any):any} props.getProduct Function for getting the product.
  * @param {boolean} props.isLoading Whether product is loading or not.
  * @param {boolean} props.isSelected Whether block is selected or not.
- * @param {Object} props.overlayColor Overlay color object.
  * @param {Object} props.product Product object.
  * @param {function(any):any} props.setAttributes Setter for attributes.
- * @param {function(any):any} props.setOverlayColor Setter for overlay color.
  * @param {function():any} props.triggerUrlUpdate Function for triggering a url update for product.
  */
 const FeaturedProduct = ( {
@@ -68,10 +64,8 @@ const FeaturedProduct = ( {
 	getProduct,
 	isLoading,
 	isSelected,
-	overlayColor,
 	product,
 	setAttributes,
-	setOverlayColor,
 	triggerUrlUpdate = () => void null,
 } ) => {
 	const renderApiError = () => (
@@ -210,21 +204,14 @@ const FeaturedProduct = ( {
 						}
 					/>
 				</PanelBody>
-				<PanelColorSettings
-					title={ __( 'Overlay', 'woo-gutenberg-products-block' ) }
-					colorSettings={ [
-						{
-							value: overlayColor.color,
-							onChange: setOverlayColor,
-							label: __(
-								'Overlay Color',
-								'woo-gutenberg-products-block'
-							),
-						},
-					] }
-				>
 				{ !! url && (
 					<>
+						<PanelBody
+							title={ __(
+								'Overlay',
+								'woo-gutenberg-products-block'
+							) }
+						>
 							<RangeControl
 								label={ __(
 									'Background Opacity',
@@ -251,16 +238,15 @@ const FeaturedProduct = ( {
 									}
 								/>
 							) }
+						</PanelBody>
 					</>
 				) }
-				</PanelColorSettings>
 			</InspectorControls>
 		);
 	};
 
 	const renderProduct = () => {
 		const {
-			className,
 			contentAlign,
 			dimRatio,
 			focalPoint,
@@ -277,17 +263,13 @@ const FeaturedProduct = ( {
 				'has-background-dim': dimRatio !== 0,
 			},
 			dimRatioToClass( dimRatio ),
-			contentAlign !== 'center' && `has-${ contentAlign }-content`,
+			contentAlign !== 'center' && `has-${ contentAlign }-content`
-			className
 		);
 
 		const style = getBackgroundImageStyles(
 			attributes.mediaSrc || product
 		);
 
-		if ( overlayColor.color ) {
-			style.backgroundColor = overlayColor.color;
-		}
 		if ( focalPoint ) {
 			const bgPosX = focalPoint.x * 100;
 			const bgPosY = focalPoint.y * 100;
@@ -451,9 +433,6 @@ FeaturedProduct.propTypes = {
 		price_html: PropTypes.node,
 		permalink: PropTypes.string,
 	} ),
-	// from withColors
-	overlayColor: PropTypes.object,
-	setOverlayColor: PropTypes.func.isRequired,
 	// from withSpokenMessages
 	debouncedSpeak: PropTypes.func.isRequired,
 	triggerUrlUpdate: PropTypes.func,
@@ -461,7 +440,6 @@ FeaturedProduct.propTypes = {
 
 export default compose( [
 	withProduct,
-	withColors( { overlayColor: 'background-color' } ),
 	withSpokenMessages,
 	withSelect( ( select, { clientId }, { dispatch } ) => {
 		const Block = select( 'core/block-editor' ).getBlock( clientId );

plugins/woocommerce-blocks/assets/js/blocks/featured-product/edit.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import './editor.scss';
+
+export const Edit = ( props: unknown ): JSX.Element => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<Block { ...props } />
+		</div>
+	);
+};

plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss

@@ -1,4 +1,6 @@
 .wc-block-featured-product {
+	background-color: inherit;
+
 	.components-resizable-box__handle {
 		z-index: 10;
 	}

plugins/woocommerce-blocks/assets/js/blocks/featured-product/index.js

@@ -6,19 +6,20 @@ import { InnerBlocks } from '@wordpress/block-editor';
 import { registerBlockType } from '@wordpress/blocks';
 import { getSetting } from '@woocommerce/settings';
 import { Icon, star } from '@woocommerce/icons';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import './editor.scss';
 import { example } from './example';
-import Block from './block';
+import { Edit } from './edit';
 
 /**
  * Register and run the "Featured Product" block.
  */
 registerBlockType( 'woocommerce/featured-product', {
+	apiVersion: 2,
 	title: __( 'Featured Product', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: (
@@ -37,6 +38,15 @@ registerBlockType( 'woocommerce/featured-product', {
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,
+		color: true,
+		...( isFeaturePluginBuild() && {
+			__experimentalBorder: {
+				color: true,
+				radius: true,
+				width: true,
+				__experimentalSkipSerialization: false,
+			},
+		} ),
 	},
 	example,
 	attributes: {
@@ -154,9 +164,7 @@ registerBlockType( 'woocommerce/featured-product', {
 	 *
 	 * @param {Object} props Props to pass to block.
 	 */
-	edit( props ) {
+	edit: Edit,
-		return <Block { ...props } />;
-	},
 
 	/**
 	 * Block content is rendered in PHP, not via save function.

plugins/woocommerce-blocks/assets/js/blocks/featured-product/style.scss

@@ -1,10 +1,16 @@
+.wp-block-woocommerce-featured-product {
+	background-color: $gray-900;
+	border-color: transparent;
+	color: #fff;
+	overflow: hidden;
+}
+
 .wc-block-featured-product {
 	position: relative;
-	background-color: $gray-900;
 	background-size: cover;
 	background-position: center center;
 	width: 100%;
-	margin: 0 0 1.5em 0;
+	margin: 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -49,10 +55,10 @@
 	.wc-block-featured-product__variation,
 	.wc-block-featured-product__description,
 	.wc-block-featured-product__price {
-		color: $white;
 		line-height: 1.25;
 		margin-bottom: 0;
 		text-align: center;
+		color: inherit;
 
 		a,
 		a:hover,

plugins/woocommerce-blocks/src/BlockTypes/FeaturedProduct.php

@@ -1,6 +1,8 @@
 <?php
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
 /**
  * FeaturedProduct class.
  */
@@ -29,6 +31,13 @@ class FeaturedProduct extends AbstractDynamicBlock {
 		'showPrice'    => true,
 	);
 
+	/**
+	 * Global style enabled for this block.
+	 *
+	 * @var array
+	 */
+	protected $global_style_wrapper = array( 'text_color', 'font_size', 'border_color', 'border_radius', 'border_width', 'background_color', 'text_color' );
+
 	/**
 	 * Render the Featured Product block.
 	 *
@@ -68,7 +77,10 @@ class FeaturedProduct extends AbstractDynamicBlock {
 			wp_kses_post( $product->get_price_html() )
 		);
 
-		$output  = sprintf( '<div class="%1$s" style="%2$s">', esc_attr( $this->get_classes( $attributes ) ), esc_attr( $this->get_styles( $attributes, $product ) ) );
+		$styles  = $this->get_styles( $attributes, $product );
+		$classes = $this->get_classes( $attributes );
+
+		$output  = sprintf( '<div class="%1$s wp-block-woocommerce-featured-product" style="%2$s">', esc_attr( trim( $classes ) ), esc_attr( $styles ) );
 		$output .= '<div class="wc-block-featured-product__wrapper">';
 		$output .= $title;
 		if ( $attributes['showDesc'] ) {
@@ -118,12 +130,15 @@ class FeaturedProduct extends AbstractDynamicBlock {
 
 		if ( is_array( $attributes['focalPoint'] ) && 2 === count( $attributes['focalPoint'] ) ) {
 			$style .= sprintf(
-				'background-position: %s%% %s%%',
+				'background-position: %s%% %s%%;',
 				$attributes['focalPoint']['x'] * 100,
 				$attributes['focalPoint']['y'] * 100
 			);
 		}
 
+		$global_style_style = StyleAttributesUtils::get_styles_by_attributes( $attributes, $this->global_style_wrapper );
+		$style             .= $global_style_style;
+
 		return $style;
 	}
 
@@ -152,14 +167,13 @@ class FeaturedProduct extends AbstractDynamicBlock {
 			$classes[] = "has-{$attributes['contentAlign']}-content";
 		}
 
-		if ( isset( $attributes['overlayColor'] ) ) {
-			$classes[] = "has-{$attributes['overlayColor']}-background-color";
-		}
-
 		if ( isset( $attributes['className'] ) ) {
 			$classes[] = $attributes['className'];
 		}
 
+		$global_style_classes = StyleAttributesUtils::get_classes_by_attributes( $attributes, $this->global_style_wrapper );
+		$classes[]            = $global_style_classes;
+
 		return implode( ' ', $classes );
 	}