Featured Category block: Add support for global style #4965

Featured Category block: Add support for global style
woocommerce · Jan 11, 2022 · 8e2f0dc · 8e2f0dc
1 parent a17ca36
commit 8e2f0dc
Show file tree

Hide file tree

Showing 7 changed files with 251 additions and 45 deletions.
diff --git a/assets/js/blocks/featured-category/block.js b/assets/js/blocks/featured-category/block.js
@@ -8,8 +8,6 @@ import {
 	InnerBlocks,
 	InspectorControls,
 	MediaReplaceFlow,
-	PanelColorSettings,
-	withColors,
 	RichText,
 } from '@wordpress/block-editor';
 import {
@@ -56,8 +54,6 @@ import { withCategory } from '../../hocs';
  * @param {function(any):any} props.getCategory Function for getting category details.
  * @param {boolean} props.isLoading Whether loading or not.
  * @param {Object} props.category The product category object.
- * @param {Object} props.overlayColor Overlay color object for content.
- * @param {function(any):any} props.setOverlayColor Setter for overlay color.
  * @param {function(any):any} props.debouncedSpeak Function for delayed speak.
  * @param {function():void} props.triggerUrlUpdate Function to update Shop now button Url.
  */
@@ -69,8 +65,6 @@ const FeaturedCategory = ( {
 	getCategory,
 	isLoading,
 	category,
-	overlayColor,
-	setOverlayColor,
 	debouncedSpeak,
 	triggerUrlUpdate = () => void null,
 } ) => {
@@ -148,21 +142,14 @@ const FeaturedCategory = ( {
 						}
 					/>
 				</PanelBody>
-				<PanelColorSettings
-					title={ __( 'Overlay', 'woo-gutenberg-products-block' ) }
-					colorSettings={ [
-						{
-							value: overlayColor.color,
-							onChange: setOverlayColor,
-							label: __(
-								'Overlay Color',
+				{ !! url && (
+					<>
+						<PanelBody
+							title={ __(
+								'Overlay',
 								'woo-gutenberg-products-block'
-							),
-						},
-					] }
-				>
-					{ !! url && (
-						<>
+							) }
+						>
 							<RangeControl
 								label={ __(
 									'Background Opacity',
@@ -189,9 +176,9 @@ const FeaturedCategory = ( {
 									}
 								/>
 							) }
-						</>
-					) }
-				</PanelColorSettings>
+						</PanelBody>
+					</>
+				) }
 			</InspectorControls>
 		);
 	};
@@ -288,13 +275,13 @@ const FeaturedCategory = ( {
 
 	const renderCategory = () => {
 		const {
-			className,
 			contentAlign,
 			dimRatio,
 			focalPoint,
 			height,
 			showDesc,
 		} = attributes;
+
 		const classes = classnames(
 			'wc-block-featured-category',
 			{
@@ -304,14 +291,10 @@ const FeaturedCategory = ( {
 				'has-background-dim': dimRatio !== 0,
 			},
 			dimRatioToClass( dimRatio ),
-			contentAlign !== 'center' && `has-${ contentAlign }-content`,
-			className
+			contentAlign !== 'center' && `has-${ contentAlign }-content`
 		);
 		const mediaSrc = attributes.mediaSrc || getCategoryImageSrc( category );
 		const style = !! category ? getBackgroundImageStyles( mediaSrc ) : {};
-		if ( overlayColor.color ) {
-			style.backgroundColor = overlayColor.color;
-		}
 		if ( focalPoint ) {
 			const bgPosX = focalPoint.x * 100;
 			const bgPosY = focalPoint.y * 100;
@@ -416,17 +399,13 @@ FeaturedCategory.propTypes = {
 		description: PropTypes.node,
 		permalink: PropTypes.string,
 	} ),
-	// from withColors
-	overlayColor: PropTypes.object,
-	setOverlayColor: PropTypes.func.isRequired,
 	// from withSpokenMessages
 	debouncedSpeak: PropTypes.func.isRequired,
 	triggerUrlUpdate: PropTypes.func,
 };
 
 export default compose( [
 	withCategory,
-	withColors( { overlayColor: 'background-color' } ),
 	withSpokenMessages,
 	withSelect( ( select, { clientId }, { dispatch } ) => {
 		const Block = select( 'core/block-editor' ).getBlock( clientId );

diff --git a/assets/js/blocks/featured-category/edit.tsx b/assets/js/blocks/featured-category/edit.tsx
@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( props: unknown ) => {
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Block { ...props } />
+		</div>
+	);
+};
diff --git a/assets/js/blocks/featured-category/index.js b/assets/js/blocks/featured-category/index.js
@@ -6,19 +6,21 @@ import { InnerBlocks } from '@wordpress/block-editor';
 import { registerBlockType } from '@wordpress/blocks';
 import { getSetting } from '@woocommerce/settings';
 import { Icon, folderStarred } from '@woocommerce/icons';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import './editor.scss';
-import Block from './block';
 import { example } from './example';
+import { Edit } from './edit';
 
 /**
  * Register and run the "Featured Category" block.
  */
 registerBlockType( 'woocommerce/featured-category', {
+	apiVersion: 2,
 	title: __( 'Featured Category', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: (
@@ -37,6 +39,21 @@ registerBlockType( 'woocommerce/featured-category', {
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,
+		color: {
+			text: true,
+			background: true,
+		},
+		typography: {
+			fontSize: true,
+		},
+		...( isFeaturePluginBuild() && {
+			__experimentalBorder: {
+				color: true,
+				radius: true,
+				width: true,
+				__experimentalSkipSerialization: false,
+			},
+		} ),
 	},
 	example,
 	attributes: {
@@ -139,21 +156,23 @@ registerBlockType( 'woocommerce/featured-category', {
 			type: 'object',
 			default: null,
 		},
+		backgroundColor: {
+			type: 'string',
+			default: 'black',
+		},
+		textColor: {
+			type: 'string',
+			default: 'white',
+		},
 	},
 
 	/**
 	 * Renders and manages the block.
 	 *
 	 * @param {Object} props Props to pass to block.
 	 */
-	edit( props ) {
-		return <Block { ...props } />;
-	},
-
-	/**
-	 * Block content is rendered in PHP, not via save function.
-	 */
-	save() {
+	edit: Edit,
+	save: () => {
 		return <InnerBlocks.Content />;
 	},
 } );
diff --git a/assets/js/blocks/featured-category/style.scss b/assets/js/blocks/featured-category/style.scss
@@ -1,10 +1,10 @@
 .wc-block-featured-category {
 	position: relative;
-	background-color: $gray-900;
+	background-color: inherit;
 	background-size: cover;
 	background-position: center center;
 	width: 100%;
-	margin: 0 0 1.5em 0;
+	margin: 0 0 0 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -63,6 +63,8 @@
 	.wc-block-featured-category__description,
 	.wc-block-featured-category__price,
 	.wc-block-featured-category__link {
+		color: inherit;
+		font-size: inherit;
 		width: 100%;
 		padding: 0 48px 16px 48px;
 		z-index: 1;
@@ -71,12 +73,19 @@
 	.wc-block-featured-category__title {
 		margin-top: 0;
 
+		div {
+			color: inherit;
+			font-size: inherit;
+		}
+
 		&::before {
 			display: none;
 		}
 	}
 
 	.wc-block-featured-category__description {
+		color: inherit;
+		font-size: inherit;
 		p {
 			margin: 0;
 		}
@@ -94,6 +103,7 @@
 		bottom: 0;
 		right: 0;
 		background-color: inherit;
+		border-radius: inherit;
 		opacity: 0.5;
 		z-index: 1;
 	}

diff --git a/assets/js/hooks/style-attributes.ts b/assets/js/hooks/style-attributes.ts
@@ -5,6 +5,7 @@
 import {
 	__experimentalUseColorProps,
 	__experimentalGetSpacingClassesAndStyles,
+	__experimentalUseBorderProps,
 } from '@wordpress/block-editor';
 
 /**
@@ -80,3 +81,19 @@ export const useColorProps = ( attributes: unknown ): WithStyle & WithClass => {
 
 	return __experimentalUseColorProps( { ...attributesObject, style } );
 };
+
+export const useBorderProps = (
+	attributes: unknown
+): WithStyle & WithClass => {
+	if ( ! isFeaturePluginBuild() ) {
+		return {
+			className: '',
+			style: {},
+		};
+	}
+
+	const attributesObject = isObject( attributes ) ? attributes : {};
+	const style = parseStyle( attributesObject.style );
+
+	return __experimentalUseBorderProps( { ...attributesObject, style } );
+};