Add/attributes filter count display toggle (https://github.com/woocommerce/woocommerce-blocks/pull/9833)

* Default show product counts to false for filter by attributes block

* Default show product counts to false for filter by stock block

* Default show product counts to false for filter by rating block

* Refactor deprecation

* Refactor deprecation

* Refactor deprecation

plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.json

@@ -25,7 +25,7 @@
 		},
 		"showCounts": {
 			"type": "boolean",
-			"default": true
+			"default": false
 		},
 		"queryType": {
 			"type": "string",

plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/deprecated.tsx

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import type { BlockAttributes } from './types';
+import { blockAttributes } from './attributes';
+import metadata from './block.json';
+
+const v1 = {
+	supports: {
+		...metadata.supports,
+		...( isFeaturePluginBuild() && {
+			__experimentalBorder: {
+				radius: false,
+				color: true,
+				width: false,
+			},
+		} ),
+	},
+	attributes: {
+		...metadata.attributes,
+		showCounts: {
+			type: 'boolean',
+			default: true,
+		},
+		...blockAttributes,
+	},
+	save: ( { attributes }: { attributes: BlockAttributes } ) => {
+		const {
+			className,
+			showCounts,
+			queryType,
+			attributeId,
+			heading,
+			headingLevel,
+			displayStyle,
+			showFilterButton,
+			selectType,
+		} = attributes;
+		const data: Record< string, unknown > = {
+			'data-attribute-id': attributeId,
+			'data-show-counts': showCounts,
+			'data-query-type': queryType,
+			'data-heading': heading,
+			'data-heading-level': headingLevel,
+		};
+		if ( displayStyle !== 'list' ) {
+			data[ 'data-display-style' ] = displayStyle;
+		}
+		if ( showFilterButton ) {
+			data[ 'data-show-filter-button' ] = showFilterButton;
+		}
+		if ( selectType === 'single' ) {
+			data[ 'data-select-type' ] = selectType;
+		}
+		return (
+			<div
+				{ ...useBlockProps.save( {
+					className: classNames( 'is-loading', className ),
+				} ) }
+				{ ...data }
+			>
+				<span
+					aria-hidden
+					className="wc-block-product-attribute-filter__placeholder"
+				/>
+			</div>
+		);
+	},
+};
+
+const deprecated = [ v1 ];
+
+export default deprecated;

plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.tsx

@@ -14,6 +14,7 @@ import edit from './edit';
 import type { BlockAttributes } from './types';
 import { blockAttributes } from './attributes';
 import metadata from './block.json';
+import deprecated from './deprecated';
 
 registerBlockType( metadata, {
 	icon: {
@@ -41,39 +42,13 @@ registerBlockType( metadata, {
 	edit,
 	// Save the props to post content.
 	save( { attributes }: { attributes: BlockAttributes } ) {
-		const {
-			className,
-			showCounts,
-			queryType,
-			attributeId,
-			heading,
-			headingLevel,
-			displayStyle,
-			showFilterButton,
-			selectType,
-		} = attributes;
-		const data: Record< string, unknown > = {
-			'data-attribute-id': attributeId,
-			'data-show-counts': showCounts,
-			'data-query-type': queryType,
-			'data-heading': heading,
-			'data-heading-level': headingLevel,
-		};
-		if ( displayStyle !== 'list' ) {
-			data[ 'data-display-style' ] = displayStyle;
-		}
-		if ( showFilterButton ) {
-			data[ 'data-show-filter-button' ] = showFilterButton;
-		}
-		if ( selectType === 'single' ) {
-			data[ 'data-select-type' ] = selectType;
-		}
+		const { className } = attributes;
+
 		return (
 			<div
 				{ ...useBlockProps.save( {
 					className: classNames( 'is-loading', className ),
 				} ) }
-				{ ...data }
 			>
 				<span
 					aria-hidden
@@ -82,4 +57,5 @@ registerBlockType( metadata, {
 			</div>
 		);
 	},
+	deprecated,
 } );

plugins/woocommerce-blocks/assets/js/blocks/rating-filter/block.json

@@ -19,7 +19,7 @@
 		},
 		"showCounts": {
 			"type": "boolean",
-			"default": true
+			"default": false
 		},
 		"displayStyle": {
 			"type": "string",

plugins/woocommerce-blocks/assets/js/blocks/rating-filter/deprecated.tsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import type { Attributes } from './types';
+
+const v1 = {
+	attributes: {
+		...metadata.attributes,
+		showCounts: {
+			type: 'boolean',
+			default: true,
+		},
+	},
+	save: ( { attributes }: { attributes: Attributes } ) => {
+		const { className, showCounts } = attributes;
+		const data: Record< string, unknown > = {
+			'data-show-counts': showCounts,
+		};
+		return (
+			<div
+				{ ...useBlockProps.save( {
+					className: classNames( 'is-loading', className ),
+				} ) }
+				{ ...data }
+			>
+				<span
+					aria-hidden
+					className="wc-block-product-rating-filter__placeholder"
+				/>
+			</div>
+		);
+	},
+};
+
+const deprecated = [ v1 ];
+
+export default deprecated;

plugins/woocommerce-blocks/assets/js/blocks/rating-filter/index.tsx

@@ -12,6 +12,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 import edit from './edit';
 import metadata from './block.json';
 import type { Attributes } from './types';
+import deprecated from './deprecated';
 
 registerBlockType( metadata, {
 	icon: {
@@ -28,16 +29,13 @@ registerBlockType( metadata, {
 	edit,
 	// Save the props to post content.
 	save( { attributes }: { attributes: Attributes } ) {
-		const { className, showCounts } = attributes;
-		const data: Record< string, unknown > = {
-			'data-show-counts': showCounts,
-		};
+		const { className } = attributes;
+
 		return (
 			<div
 				{ ...useBlockProps.save( {
 					className: classNames( 'is-loading', className ),
 				} ) }
-				{ ...data }
 			>
 				<span
 					aria-hidden
@@ -46,4 +44,5 @@ registerBlockType( metadata, {
 			</div>
 		);
 	},
+	deprecated,
 } );

plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.json

@@ -23,7 +23,7 @@
 		},
 		"showCounts": {
 			"type": "boolean",
-			"default": true
+			"default": false
 		},
 		"showFilterButton": {
 			"type": "boolean",

plugins/woocommerce-blocks/assets/js/blocks/stock-filter/deprecated.tsx

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import { blockAttributes } from './attributes';
+import type { Attributes } from './types';
+
+const v1 = {
+	attributes: {
+		...metadata.attributes,
+		showCounts: {
+			type: 'boolean',
+			default: true,
+		},
+		...blockAttributes,
+	},
+	save: ( { attributes }: { attributes: Attributes } ) => {
+		const {
+			className,
+			showCounts,
+			heading,
+			headingLevel,
+			showFilterButton,
+		} = attributes;
+		const data: Record< string, unknown > = {
+			'data-show-counts': showCounts,
+			'data-heading': heading,
+			'data-heading-level': headingLevel,
+		};
+		if ( showFilterButton ) {
+			data[ 'data-show-filter-button' ] = showFilterButton;
+		}
+		return (
+			<div
+				{ ...useBlockProps.save( {
+					className: classNames( 'is-loading', className ),
+				} ) }
+				{ ...data }
+			>
+				<span
+					aria-hidden
+					className="wc-block-product-stock-filter__placeholder"
+				/>
+			</div>
+		);
+	},
+};
+
+const deprecated = [ v1 ];
+
+export default deprecated;

plugins/woocommerce-blocks/assets/js/blocks/stock-filter/index.tsx

@@ -13,6 +13,7 @@ import edit from './edit';
 import metadata from './block.json';
 import { blockAttributes } from './attributes';
 import type { Attributes } from './types';
+import deprecated from './deprecated';
 
 registerBlockType( metadata, {
 	icon: {
@@ -30,27 +31,13 @@ registerBlockType( metadata, {
 	edit,
 	// Save the props to post content.
 	save( { attributes }: { attributes: Attributes } ) {
-		const {
-			className,
-			showCounts,
-			heading,
-			headingLevel,
-			showFilterButton,
-		} = attributes;
-		const data: Record< string, unknown > = {
-			'data-show-counts': showCounts,
-			'data-heading': heading,
-			'data-heading-level': headingLevel,
-		};
-		if ( showFilterButton ) {
-			data[ 'data-show-filter-button' ] = showFilterButton;
-		}
+		const { className } = attributes;
+
 		return (
 			<div
 				{ ...useBlockProps.save( {
 					className: classNames( 'is-loading', className ),
 				} ) }
-				{ ...data }
 			>
 				<span
 					aria-hidden
@@ -59,4 +46,5 @@ registerBlockType( metadata, {
 			</div>
 		);
 	},
+	deprecated,
 } );