Filter block previews (https://github.com/woocommerce/woocommerce-blocks/pull/1184)

* Enable preview for price filter block

Using the defaults works fine, so no options required.

* Attribute preview via block attribute

* Add sample content for preview

* remove unnecessary key

* remove unneeded export

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

@@ -28,10 +28,55 @@ import { updateAttributeFilter } from '../../utils/attributes-query';
  */
 const AttributeFilterBlock = ( {
 	attributes: blockAttributes,
-	isPreview = false,
+	isEditor = false,
 } ) => {
-	const [ displayedOptions, setDisplayedOptions ] = useState( [] );
-	const attributeObject = getAttributeFromID( blockAttributes.attributeId );
+	/**
+	 * Get the label for an attribute term filter.
+	 */
+	const getLabel = useCallback(
+		( name, count ) => {
+			return (
+				<Fragment>
+					{ name }
+					{ blockAttributes.showCounts && count !== null && (
+						<span className="wc-block-attribute-filter-list-count">
+							{ count }
+						</span>
+					) }
+				</Fragment>
+			);
+		},
+		[ blockAttributes ]
+	);
+
+	const attributeObject =
+		blockAttributes.isPreview && ! blockAttributes.attributeId
+			? {
+					id: 0,
+					name: 'preview',
+					taxonomy: 'preview',
+					label: 'Preview',
+			  }
+			: getAttributeFromID( blockAttributes.attributeId );
+	const [ displayedOptions, setDisplayedOptions ] = useState(
+		blockAttributes.isPreview && ! blockAttributes.attributeId
+			? [
+					{
+						key: 'preview-1',
+						label: getLabel( 'Blue', 3 ),
+					},
+					{
+						key: 'preview-2',
+						label: getLabel( 'Green', 3 ),
+					},
+					{
+						key: 'preview-3',
+						label: getLabel( 'Red', 2 ),
+					},
+			  ]
+			: []
+	);
+
 	const [ queryState ] = useQueryStateByContext();
 	const [
 		productAttributesQuery,
@@ -80,6 +125,7 @@ const AttributeFilterBlock = ( {
 		namespace: '/wc/store',
 		resourceName: 'products/attributes/terms',
 		resourceValues: [ attributeObject.id ],
+		shouldSelect: blockAttributes.attributeId > 0,
 	} );
 
 	const {
@@ -89,27 +135,9 @@ const AttributeFilterBlock = ( {
 		namespace: '/wc/store',
 		resourceName: 'products/collection-data',
 		query: filteredCountsQueryState,
+		shouldSelect: blockAttributes.attributeId > 0,
 	} );
 
-	/**
-	 * Get the label for an attribute term filter.
-	 */
-	const getLabel = useCallback(
-		( name, count ) => {
-			return (
-				<Fragment key="label">
-					{ name }
-					{ blockAttributes.showCounts && count !== null && (
-						<span className="wc-block-attribute-filter-list-count">
-							{ count }
-						</span>
-					) }
-				</Fragment>
-			);
-		},
-		[ blockAttributes ]
-	);
-
 	/**
 	 * Get count data about a given term by ID.
 	 */
@@ -212,10 +240,7 @@ const AttributeFilterBlock = ( {
 		]
 	);
 
-	if (
-		! attributeObject ||
-		( displayedOptions.length === 0 && ! attributeTermsLoading )
-	) {
+	if ( displayedOptions.length === 0 && ! attributeTermsLoading ) {
 		return null;
 	}
 
@@ -223,7 +248,7 @@ const AttributeFilterBlock = ( {
 
 	return (
 		<BlockErrorBoundary>
-			{ ! isPreview && blockAttributes.heading && (
+			{ ! isEditor && blockAttributes.heading && (
 				<TagName>{ blockAttributes.heading }</TagName>
 			) }
 			<div className="wc-block-attribute-filter">
@@ -232,8 +257,12 @@ const AttributeFilterBlock = ( {
 					options={ displayedOptions }
 					checked={ checked }
 					onChange={ onChange }
-					isLoading={ attributeTermsLoading }
-					isDisabled={ filteredCountsLoading }
+					isLoading={
+						! blockAttributes.isPreview && attributeTermsLoading
+					}
+					isDisabled={
+						! blockAttributes.isPreview && filteredCountsLoading
+					}
 				/>
 			</div>
 		</BlockErrorBoundary>

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

@@ -33,7 +33,9 @@ import { IconExternal } from '../../components/icons';
 import ToggleButtonControl from '../../components/toggle-button-control';
 
 const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
-	const [ isEditing, setIsEditing ] = useState( ! attributes.attributeId );
+	const [ isEditing, setIsEditing ] = useState(
+		! attributes.attributeId && ! attributes.isPreview
+	);
 
 	const getBlockControls = () => {
 		return (
@@ -335,7 +337,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 						/>
 					</TagName>
 					<Disabled>
-						<Block attributes={ attributes } isPreview />
+						<Block attributes={ attributes } isEditor />
 					</Disabled>
 				</Fragment>
 			) }

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

@@ -23,6 +23,11 @@ registerBlockType( 'woocommerce/attribute-filter', {
 		'woo-gutenberg-products-block'
 	),
 	supports: {},
+	example: {
+		attributes: {
+			isPreview: true,
+		},
+	},
 	attributes: {
 		attributeId: {
 			type: 'number',
@@ -47,6 +52,13 @@ registerBlockType( 'woocommerce/attribute-filter', {
 			type: 'number',
 			default: 3,
 		},
+		/**
+		 * Are we previewing?
+		 */
+		isPreview: {
+			type: 'boolean',
+			default: false,
+		},
 	},
 	edit,
 	/**

plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.js

@@ -23,6 +23,7 @@ registerBlockType( 'woocommerce/price-filter', {
 		'woo-gutenberg-products-block'
 	),
 	supports: {},
+	example: {},
 	attributes: {
 		showInputFields: {
 			type: 'boolean',