Summary Product block: Add support for global style (#5524)

* Product title: add support global style #4965

* add specific type

* add custom save function

* Summary Product block: add support for global style #4965

Summary Product block: add support for global style

* add color global style under feature flag

* fix import after merge

* fix typo

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

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Summary from '@woocommerce/base-components/summary';
 import { blocksConfig } from '@woocommerce/block-settings';
+
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
@@ -15,6 +16,10 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
  * Internal dependencies
  */
 import './style.scss';
+import {
+	useColorProps,
+	useTypographyProps,
+} from '../../../../hooks/style-attributes';
 
 /**
  * Product Summary Block Component.
@@ -23,9 +28,13 @@ import './style.scss';
  * @param {string} [props.className] CSS Class name for the component.
  * @return {*} The component.
  */
-const Block = ( { className } ) => {
+const Block = ( props ) => {
+	const { className } = props;
+
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
+	const colorProps = useColorProps( props );
+	const typographyProps = useTypographyProps( props );
 
 	if ( ! product ) {
 		return (
@@ -53,6 +62,7 @@ const Block = ( { className } ) => {
 		<Summary
 			className={ classnames(
 				className,
+				colorProps.className,
 				`wc-block-components-product-summary`,
 				{
 					[ `${ parentClassName }__product-summary` ]: parentClassName,
@@ -61,6 +71,10 @@ const Block = ( { className } ) => {
 			source={ source }
 			maxLength={ 150 }
 			countType={ blocksConfig.wordCountType || 'words' }
+			style={ {
+				...colorProps.style,
+				...typographyProps.style,
+			} }
 		/>
 	);
 };

assets/js/atomic/blocks/product-elements/summary/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/summary/index.js

@@ -9,18 +9,23 @@ import { registerBlockType } 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,
 	BLOCK_DESCRIPTION as description,
 } from './constants';
+import { Save } from './save';
 
 const blockConfig = {
+	apiVersion: 2,
 	title,
 	description,
 	icon: { src: icon },
 	attributes,
+	supports,
 	edit,
+	save: Save,
 };
 
 registerBlockType( 'woocommerce/product-summary', {

assets/js/atomic/blocks/product-elements/summary/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/summary/supports.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+export const supports = {
+	...( isFeaturePluginBuild() && {
+		color: {
+			text: true,
+			background: false,
+			link: false,
+		},
+	} ),
+	typography: {
+		fontSize: true,
+	},
+};

assets/js/base/components/summary/index.tsx

@@ -3,6 +3,7 @@
  */
 import { RawHTML, useMemo } from '@wordpress/element';
 import { WordCountType } from '@woocommerce/block-settings';
+import { CSSProperties } from 'react';
 
 /**
  * Internal dependencies
@@ -14,6 +15,7 @@ interface SummaryProps {
 	source: string;
 	maxLength?: number;
 	countType?: WordCountType;
+	style?: CSSProperties;
 }
 /**
  * Summary component.
@@ -23,18 +25,25 @@ interface SummaryProps {
  * @param {number} props.maxLength Max length of the summary, using countType.
  * @param {string} props.countType One of words, characters_excluding_spaces, or characters_including_spaces.
  * @param {string} props.className Class name for rendered component.
+ * @param {CSSProperties} props.style Style Object for rendered component.
+ *
  */
 export const Summary = ( {
 	source,
 	maxLength = 15,
 	countType = 'words',
 	className = '',
+	style = {},
 }: SummaryProps ): JSX.Element => {
 	const summaryText = useMemo( () => {
 		return generateSummary( source, maxLength, countType );
 	}, [ source, maxLength, countType ] );
 
-	return <RawHTML className={ className }>{ summaryText }</RawHTML>;
+	return (
+		<RawHTML style={ style } className={ className }>
+			{ summaryText }
+		</RawHTML>
+	);
 };
 
 export default Summary;