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>

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"
 }

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,
 						},
 					],
 				] }

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,
+	},
+];

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 (

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