Product SKU: Adds support for color, typography, and spacing

assets/js/atomic/blocks/product-elements/sku/attributes.ts

@@ -16,6 +16,10 @@ export const blockAttributes: BlockAttributes = {
 		type: 'boolean',
 		default: false,
 	},
+	isDescendantOfAllProducts: {
+		type: 'boolean',
+		default: false,
+	},
 	showProductSelector: {
 		type: 'boolean',
 		default: false,

assets/js/atomic/blocks/product-elements/sku/block.tsx

@@ -9,6 +9,11 @@ import {
 } from '@woocommerce/shared-context';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import type { HTMLAttributes } from 'react';
+import {
+	useColorProps,
+	useSpacingProps,
+	useTypographyProps,
+} from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -22,15 +27,18 @@ const Preview = ( {
 	parentClassName,
 	sku,
 	className,
+	style,
 }: {
 	parentClassName: string;
 	sku: string;
 	className?: string | undefined;
+	style?: React.CSSProperties | undefined;
 } ) => (
 	<div
-		className={ classnames( className, 'wc-block-components-product-sku', {
+		className={ classnames( className, {
 			[ `${ parentClassName }__product-sku` ]: parentClassName,
 		} ) }
+		style={ style }
 	>
 		{ __( 'SKU:', 'woo-gutenberg-products-block' ) }{ ' ' }
 		<strong>{ sku }</strong>
@@ -43,6 +51,10 @@ const Block = ( props: Props ): JSX.Element | null => {
 	const { product } = useProductDataContext();
 	const sku = product.sku;
 
+	const colorProps = useColorProps( props );
+	const typographyProps = useTypographyProps( props );
+	const spacingProps = useSpacingProps( props );
+
 	if ( props.isDescendentOfSingleProductTemplate ) {
 		return (
 			<Preview
@@ -62,6 +74,22 @@ const Block = ( props: Props ): JSX.Element | null => {
 			className={ className }
 			parentClassName={ parentClassName }
 			sku={ sku }
+			{ ...( props.isDescendantOfAllProducts && {
+				className: classnames(
+					className,
+					'wc-block-components-product-sku wp-block-woocommerce-product-sku',
+					{
+						[ colorProps.className ]: colorProps.className,
+						[ typographyProps.className ]:
+							typographyProps.className,
+					}
+				),
+				style: {
+					...colorProps.style,
+					...typographyProps.style,
+					...spacingProps.style,
+				},
+			} ) }
 		/>
 	);
 };

assets/js/atomic/blocks/product-elements/sku/edit.tsx

@@ -18,7 +18,10 @@ const Edit = ( {
 	setAttributes,
 	context,
 }: BlockEditProps< Attributes > & { context: Context } ): JSX.Element => {
-	const blockProps = useBlockProps();
+	const { style, ...blockProps } = useBlockProps( {
+		className:
+			'wc-block-components-product-sku wp-block-woocommerce-product-sku',
+	} );
 	const blockAttrs = {
 		...attributes,
 		...context,
@@ -31,10 +34,22 @@ const Edit = ( {
 	);
 
 	return (
-		<div { ...blockProps }>
+		<>
 			<EditProductLink />
-			<Block { ...blockAttrs } />
-		</div>
+			<div
+				{ ...blockProps }
+				/**
+				 * If block is decendant of the All Products block, we don't want to
+				 * apply style here because it will be applied inside Block using
+				 * useColors, useTypography, and useSpacing hooks.
+				 */
+				style={
+					attributes.isDescendantOfAllProducts ? undefined : style
+				}
+			>
+				<Block { ...blockAttrs } />
+			</div>
+		</>
 	);
 };
 

assets/js/atomic/blocks/product-elements/sku/index.tsx

@@ -10,6 +10,7 @@ import type { BlockConfiguration } from '@wordpress/blocks';
 import sharedConfig from '../shared/config';
 import attributes from './attributes';
 import edit from './edit';
+import { supports } from './supports';
 import {
 	BLOCK_TITLE as title,
 	BLOCK_ICON as icon,
@@ -33,6 +34,7 @@ const blockConfig: BlockConfiguration = {
 		'woocommerce/product-meta',
 	],
 	edit,
+	supports,
 };
 
 registerBlockType( 'woocommerce/product-sku', { ...blockConfig } );

assets/js/atomic/blocks/product-elements/sku/style.scss

@@ -2,4 +2,5 @@
 	display: block;
 	text-transform: uppercase;
 	@include font-size(small);
+	overflow-wrap: break-word;
 }

assets/js/atomic/blocks/product-elements/sku/supports.ts

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import {
+	// @ts-expect-error We check if this exists before using it.
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalGetSpacingClassesAndStyles,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+
+export const supports = {
+	...sharedConfig.supports,
+	color: {
+		text: true,
+		background: true,
+	},
+	typography: {
+		fontSize: true,
+		lineHeight: true,
+		...( isFeaturePluginBuild() && {
+			__experimentalFontWeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+		} ),
+	},
+	...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+	} ),
+};

assets/js/atomic/blocks/product-elements/sku/types.ts

@@ -3,4 +3,5 @@ export interface Attributes {
 	isDescendentOfQueryLoop: boolean;
 	isDescendentOfSingleProductTemplate: boolean;
 	showProductSelector: boolean;
+	isDescendantOfAllProducts: boolean;
 }

assets/js/blocks/products/base-utils.js

@@ -50,6 +50,11 @@ export const getProductLayoutConfig = ( innerBlocks ) => {
 							block.attributes?.width,
 					} ),
 				} ),
+				/**
+				 * For product elements, special handing is required if product
+				 * elements are used in the "All Products" block.
+				 */
+				isDescendantOfAllProducts: true,
 			},
 		];
 	} );

src/BlockTypes/ProductSKU.php

@@ -1,6 +1,8 @@
 <?php
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
 /**
  * ProductSKU class.
  */
@@ -65,11 +67,15 @@ protected function render( $attributes, $content, $block ) {
 			return '';
 		}
 
+		$styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+
 		return sprintf(
-			'<div class="wc-block-components-product-sku wc-block-grid__product-sku">
+			'<div class="wc-block-components-product-sku wc-block-grid__product-sku wp-block-woocommerce-product-sku %1$s" style="%2$s">
 				SKU:
-				<strong>%s</strong>
+				<strong>%3$s</strong>
 			</div>',
+			esc_attr( $styles_and_classes['classes'] ),
+			esc_attr( $styles_and_classes['styles'] ?? '' ),
 			$product_sku
 		);
 	}