From 85ec4a8cc1d0fae4ddbe7e0952a3fc8acf8b04ed Mon Sep 17 00:00:00 2001
From: Alexandre Lara <allexandrelara@gmail.com>
Date: Fri, 15 Mar 2024 16:27:01 -0300
Subject: [PATCH] Product Filter: Attribute (Beta) block - Fix block preview
 (#45558)

* Pass isPreview prop to inner blocks of the Product Filter block

* Add logic to render preview block when in Preview mode

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 .../js/blocks/product-filter/block.json       | 12 ++++-
 .../assets/js/blocks/product-filter/edit.tsx  |  7 ++-
 .../attribute-filter/constants.ts             | 47 +++++++++++++++++++
 .../inner-blocks/attribute-filter/edit.tsx    | 18 +++++++
 ...ect-product-filter-attribute-block-preview |  4 ++
 5 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/attribute-filter/constants.ts
 create mode 100644 plugins/woocommerce/changelog/45558-fix-45491-incorrect-product-filter-attribute-block-preview

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/block.json b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/block.json
index b701f5d18d3f..94b211323024 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/block.json
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/block.json
@@ -17,9 +17,17 @@
 		},
 		"heading": {
 			"type": "string"
+		},
+		"isPreview": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"example": {
+		"attributes": {
+			"isPreview": true
 		}
 	},
 	"apiVersion": 2,
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"example": {}
+	"$schema": "https://schemas.wp.org/trunk/block.json"
 }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/edit.tsx
index 009ccf3bdc18..44d009ddc4aa 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/edit.tsx
@@ -17,7 +17,11 @@ import type { FilterType } from './types';
 const Edit = ( {
 	attributes,
 	clientId,
-}: BlockEditProps< { heading: string; filterType: FilterType } > ) => {
+}: BlockEditProps< {
+	heading: string;
+	filterType: FilterType;
+	isPreview: boolean;
+} > ) => {
 	const blockProps = useBlockProps();
 
 	const isNested = useSelect( ( select ) => {
@@ -50,6 +54,7 @@ const Edit = ( {
 							lock: {
 								remove: true,
 							},
+							isPreview: attributes.isPreview,
 						},
 					],
 				] }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/attribute-filter/constants.ts b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/attribute-filter/constants.ts
new file mode 100644
index 000000000000..f5114d59ea69
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/attribute-filter/constants.ts
@@ -0,0 +1,47 @@
+export const attributeOptionsPreview = [
+	{
+		id: 23,
+		name: 'Blue',
+		slug: 'blue',
+		attr_slug: 'blue',
+		description: '',
+		parent: 0,
+		count: 4,
+	},
+	{
+		id: 29,
+		name: 'Gray',
+		slug: 'gray',
+		attr_slug: 'gray',
+		description: '',
+		parent: 0,
+		count: 3,
+	},
+	{
+		id: 24,
+		name: 'Green',
+		slug: 'green',
+		attr_slug: 'green',
+		description: '',
+		parent: 0,
+		count: 3,
+	},
+	{
+		id: 25,
+		name: 'Red',
+		slug: 'red',
+		attr_slug: 'red',
+		description: '',
+		parent: 0,
+		count: 4,
+	},
+	{
+		id: 30,
+		name: 'Yellow',
+		slug: 'yellow',
+		attr_slug: 'yellow',
+		description: '',
+		parent: 0,
+		count: 1,
+	},
+];
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/attribute-filter/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/attribute-filter/edit.tsx
index 2be98d1ecdc7..e53e5e258bdd 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/attribute-filter/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/attribute-filter/edit.tsx
@@ -35,6 +35,7 @@ import { getAttributeFromId } from './utils';
 import { Inspector } from './components/inspector-controls';
 import { AttributeCheckboxList } from './components/attribute-checkbox-list';
 import { AttributeDropdown } from './components/attribute-dropdown';
+import { attributeOptionsPreview } from './constants';
 import './style.scss';
 
 const ATTRIBUTES = getSetting< AttributeSetting[] >( 'attributes', [] );
@@ -178,6 +179,23 @@ const Edit = ( props: EditProps ) => {
 		setIsEditing( ! isEditing );
 	}, [ isEditing ] );
 
+	if ( isPreview ) {
+		return (
+			<Wrapper
+				onClickToolbarEdit={ toggleEditing }
+				isEditing={ isEditing }
+				blockProps={ blockProps }
+			>
+				<Disabled>
+					<AttributeCheckboxList
+						showCounts={ showCounts }
+						attributeTerms={ attributeOptionsPreview }
+					/>
+				</Disabled>
+			</Wrapper>
+		);
+	}
+
 	// Block rendering starts.
 	if ( Object.keys( ATTRIBUTES ).length === 0 )
 		return (
diff --git a/plugins/woocommerce/changelog/45558-fix-45491-incorrect-product-filter-attribute-block-preview b/plugins/woocommerce/changelog/45558-fix-45491-incorrect-product-filter-attribute-block-preview
new file mode 100644
index 000000000000..35cff44f86f2
--- /dev/null
+++ b/plugins/woocommerce/changelog/45558-fix-45491-incorrect-product-filter-attribute-block-preview
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Add block preview to Product Filter: Attribute (Beta) block
\ No newline at end of file