Attribute Filter block: Enable global style

assets/js/base/components/dropdown-selector/index.js

@@ -23,6 +23,7 @@ import './style.scss';
  * @param {Object} props Incoming props for the component.
  * @param {string} props.attributeLabel Label for the attributes.
  * @param {string} props.className CSS class used.
+ * @param {Object} props.style CSS style object used.
  * @param {Array} props.checked Which items are checked.
  * @param {string} props.inputLabel Label used for the input.
  * @param {boolean} props.isDisabled Whether the input is disabled or not.
@@ -34,6 +35,7 @@ import './style.scss';
 const DropdownSelector = ( {
 	attributeLabel = '',
 	className,
+	style = {},
 	checked = [],
 	inputLabel = '',
 	isDisabled = false,
@@ -105,6 +107,7 @@ const DropdownSelector = ( {
 						'has-checked': checked.length > 0,
 						'is-open': isOpen,
 					} ) }
+					style={ style }
 				>
 					{ /* eslint-disable-next-line jsx-a11y/label-has-for */ }
 					<label

assets/js/blocks/attribute-filter/block.js

@@ -18,13 +18,15 @@ import FilterSubmitButton from '@woocommerce/base-components/filter-submit-butto
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Notice } from '@wordpress/components';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import { getAttributeFromID } from '../../utils/attributes';
 import { updateAttributeFilter } from '../../utils/attributes-query';
 import { previewAttributeObject, previewOptions } from './preview';
+import { useBorderProps } from '../../hooks/style-attributes';
 import './style.scss';
 
 /**
@@ -50,6 +52,8 @@ const AttributeFilterBlock = ( {
 			: []
 	);
 
+	const borderProps = useBorderProps( blockAttributes );
+
 	const [ queryState ] = useQueryStateByContext();
 	const [
 		productAttributesQuery,
@@ -381,7 +385,11 @@ const AttributeFilterBlock = ( {
 					<DropdownSelector
 						attributeLabel={ attributeObject.label }
 						checked={ checked }
-						className={ 'wc-block-attribute-filter-dropdown' }
+						className={ classNames(
+							'wc-block-attribute-filter-dropdown',
+							borderProps.className
+						) }
+						style={ { ...borderProps.style, borderStyle: 'none' } }
 						inputLabel={ blockAttributes.heading }
 						isLoading={ isLoading }
 						multiple={ multiple }

assets/js/blocks/attribute-filter/edit.js

@@ -3,7 +3,11 @@
  */
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { InspectorControls, BlockControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
 import {
 	Placeholder,
 	Disabled,
@@ -47,6 +51,8 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 		! attributeId && ! isPreview
 	);
 
+	const blockProps = useBlockProps();
+
 	const getBlockControls = () => {
 		return (
 			<BlockControls>
@@ -379,7 +385,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 	return Object.keys( ATTRIBUTES ).length === 0 ? (
 		noAttributesPlaceholder()
 	) : (
-		<>
+		<div { ...blockProps }>
 			{ getBlockControls() }
 			{ getInspectorControls() }
 			{ isEditing ? (
@@ -404,7 +410,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 					</Disabled>
 				</div>
 			) }
-		</>
+		</div>
 	);
 };
 

assets/js/blocks/attribute-filter/editor.scss

@@ -1,3 +1,8 @@
+.editor-styles-wrapper .wp-block-woocommerce-attribute-filter {
+	border-style: none !important;
+}
+
+
 .wc-block-attribute-filter {
 	.components-placeholder__instructions {
 		border-bottom: 1px solid #e0e2e6;
@@ -33,4 +38,10 @@
 		display: block;
 		margin-bottom: 1em;
 	}
+
+	.components-disabled {
+		border-radius: inherit;
+		border-color: inherit;
+	}
+
 }

assets/js/blocks/attribute-filter/index.js

@@ -4,6 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 import { Icon, server } from '@woocommerce/icons';
+import { useBlockProps } from '@wordpress/block-editor';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import classNames from 'classnames';
 
 /**
@@ -12,6 +14,7 @@ import classNames from 'classnames';
 import edit from './edit.js';
 
 registerBlockType( 'woocommerce/attribute-filter', {
+	apiVersion: 2,
 	title: __( 'Filter Products by Attribute', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: (
@@ -29,6 +32,17 @@ registerBlockType( 'woocommerce/attribute-filter', {
 	),
 	supports: {
 		html: false,
+		color: {
+			text: true,
+			background: false,
+		},
+		...( isFeaturePluginBuild() && {
+			__experimentalBorder: {
+				radius: true,
+				color: true,
+				width: false,
+			},
+		} ),
 	},
 	example: {
 		attributes: {
@@ -103,7 +117,9 @@ registerBlockType( 'woocommerce/attribute-filter', {
 		}
 		return (
 			<div
-				className={ classNames( 'is-loading', className ) }
+				{ ...useBlockProps.save( {
+					className: classNames( 'is-loading', className ),
+				} ) }
 				{ ...data }
 			>
 				<span

assets/js/blocks/attribute-filter/style.scss

@@ -1,9 +1,17 @@
+.wp-block-woocommerce-attribute-filter {
+	border-style: none !important;
+}
+
 .wc-block-attribute-filter {
 	margin-bottom: $gap-large;
+	border-radius: inherit;
+	border-color: inherit;
 
 	&.style-dropdown {
 		display: flex;
 		gap: $gap;
+		border-radius: inherit;
+		border-color: inherit;
 	}
 
 	.wc-block-attribute-filter-list {
@@ -26,6 +34,8 @@
 		flex-grow: 1;
 		max-width: unset;
 		width: 0;
+		border-radius: inherit;
+		border-color: inherit;
 	}
 
 	.is-single .wc-block-attribute-filter-list-count,
@@ -35,5 +45,7 @@
 
 	.wc-block-components-dropdown-selector__input-wrapper {
 		height: 100%;
+		border-radius: inherit;
+		border-color: inherit;
 	}
 }

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>
 		);
 	};
@@ -287,14 +274,8 @@ const FeaturedCategory = ( {
 	};
 
 	const renderCategory = () => {
-		const {
-			className,
-			contentAlign,
-			dimRatio,
-			focalPoint,
-			height,
-			showDesc,
-		} = attributes;
+		const { contentAlign, dimRatio, focalPoint, showDesc } = attributes;
+
 		const classes = classnames(
 			'wc-block-featured-category',
 			{
@@ -304,14 +285,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;
@@ -325,7 +302,10 @@ const FeaturedCategory = ( {
 		return (
 			<ResizableBox
 				className={ classes }
-				size={ { height } }
+				size={ {
+					height: '',
+					width: '',
+				} }
 				minHeight={ getSetting( 'min_height', 500 ) }
 				enable={ { bottom: true } }
 				onResizeStop={ onResizeStop }
@@ -416,17 +396,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 );

assets/js/blocks/featured-category/edit.tsx

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( props: unknown ): JSX.Element => {
+	const blockProps = useBlockProps();
+
+	// The useBlockProps function returns the style with the `color`.
+	// We need to remove it to avoid the block to be styled with the color.
+	const { color, ...styles } = blockProps.style;
+
+	return (
+		<div { ...blockProps } style={ styles }>
+			<Block { ...props } />
+		</div>
+	);
+};