Product Image block: Enable global style (#5562)

* 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

* Product Image block: enable global style #4965

Product Image block: enable global style #4965

* fix test

assets/js/atomic/blocks/product-elements/image/block.js

@@ -18,6 +18,10 @@ import { useStoreEvents } from '@woocommerce/base-context/hooks';
  */
 import ProductSaleBadge from './../sale-badge/block';
 import './style.scss';
+import {
+	useBorderProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
 
 /**
  * Product Image Block Component.
@@ -30,18 +34,23 @@ import './style.scss';
  * @param {string} [props.saleBadgeAlign] How should the sale badge be aligned if displayed.
  * @return {*} The component.
  */
-export const Block = ( {
-	className,
-	imageSizing = 'full-size',
-	showProductLink = true,
-	showSaleBadge,
-	saleBadgeAlign = 'right',
-} ) => {
+export const Block = ( props ) => {
+	const {
+		className,
+		imageSizing = 'full-size',
+		showProductLink = true,
+		showSaleBadge,
+		saleBadgeAlign = 'right',
+	} = props;
+
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const [ imageLoaded, setImageLoaded ] = useState( false );
 	const { dispatchStoreEvent } = useStoreEvents();
 
+	const typographyProps = useTypographyProps( props );
+	const borderProps = useBorderProps( props );
+
 	if ( ! product.id ) {
 		return (
 			<div
@@ -84,8 +93,10 @@ export const Block = ( {
 				'wc-block-components-product-image',
 				{
 					[ `${ parentClassName }__product-image` ]: parentClassName,
-				}
+				},
+				borderProps.className
 			) }
+			style={ { ...typographyProps.style, ...borderProps.style } }
 		>
 			<ParentComponent { ...( showProductLink && anchorProps ) }>
 				{ !! showSaleBadge && (

assets/js/atomic/blocks/product-elements/image/edit.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { createInterpolateElement } from '@wordpress/element';
 import ToggleButtonControl from '@woocommerce/editor-components/toggle-button-control';
 import { getAdminLink } from '@woocommerce/settings';
@@ -14,6 +14,7 @@ import { getAdminLink } from '@woocommerce/settings';
 import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+import './editor.scss';
 
 const Edit = ( { attributes, setAttributes } ) => {
 	const {
@@ -23,8 +24,10 @@ const Edit = ( { attributes, setAttributes } ) => {
 		saleBadgeAlign,
 	} = attributes;
 
+	const blockProps = useBlockProps();
+
 	return (
-		<>
+		<div { ...blockProps }>
 			<InspectorControls>
 				<PanelBody
 					title={ __( 'Content', 'woo-gutenberg-products-block' ) }
@@ -145,7 +148,7 @@ const Edit = ( { attributes, setAttributes } ) => {
 			<Disabled>
 				<Block { ...attributes } />
 			</Disabled>
-		</>
+		</div>
 	);
 };
 

assets/js/atomic/blocks/product-elements/image/editor.scss

@@ -0,0 +1,5 @@
+.wp-block-woocommerce-product-image {
+	.components-disabled {
+		border-radius: inherit;
+	}
+}

assets/js/atomic/blocks/product-elements/image/index.js

@@ -8,6 +8,8 @@ import { registerBlockType } from '@wordpress/blocks';
  */
 import sharedConfig from '../shared/config';
 import attributes from './attributes';
+import { supports } from './supports';
+import { Save } from './save';
 import edit from './edit';
 import {
 	BLOCK_TITLE as title,
@@ -16,11 +18,14 @@ import {
 } from './constants';
 
 const blockConfig = {
+	apiVersion: 2,
 	title,
 	description,
 	icon: { src: icon },
 	attributes,
 	edit,
+	supports,
+	save: Save,
 };
 
 registerBlockType( 'woocommerce/product-image', {

assets/js/atomic/blocks/product-elements/image/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/image/style.scss

@@ -5,15 +5,18 @@
 	text-decoration: none;
 	display: block;
 	position: relative;
+	border-radius: inherit;
 
 	a {
+		border-radius: inherit;
 		text-decoration: none;
 		border: 0;
 		outline: 0;
 		box-shadow: none;
 	}
 
 	img {
+		border-radius: inherit;
 		vertical-align: middle;
 		width: 100%;
 

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

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+export const supports = {
+	...( isFeaturePluginBuild() && {
+		__experimentalBorder: {
+			radius: true,
+		},
+	} ),
+	typography: {
+		fontSize: true,
+	},
+};

assets/js/atomic/blocks/product-elements/image/test/block.test.js

@@ -14,6 +14,17 @@ jest.mock( '@woocommerce/block-settings', () => ( {
 	PLACEHOLDER_IMG_SRC: 'placeholder.jpg',
 } ) );
 
+jest.mock( '../../../../../hooks/style-attributes', () => ( {
+	__esModule: true,
+	useBorderProps: jest.fn( () => ( {
+		className: '',
+		style: {},
+	} ) ),
+	useTypographyProps: jest.fn( () => ( {
+		style: {},
+	} ) ),
+} ) );
+
 const productWithoutImages = {
 	name: 'Test product',
 	id: 1,