Product Collection: Implement Preview Mode

plugins/woocommerce-blocks/assets/js/blocks/product-collection/block.json

@@ -38,14 +38,18 @@
 		"forcePageReload": {
 			"type": "boolean",
 			"default": false
+		},
+		"__privatePreviewState": {
+			"type": "object"
 		}
 	},
 	"providesContext": {
 		"queryId": "queryId",
 		"query": "query",
 		"displayLayout": "displayLayout",
 		"queryContextIncludes": "queryContextIncludes",
-		"collection": "collection"
+		"collection": "collection",
+		"__privateProductCollectionPreviewState": "__privatePreviewState"
 	},
 	"usesContext": [ "templateSlug" ],
 	"supports": {

plugins/woocommerce-blocks/assets/js/blocks/product-collection/collections/index.tsx

@@ -6,7 +6,6 @@ import {
 	// @ts-expect-error Type definition is missing
 	store as blocksStore,
 	type BlockVariation,
-	registerBlockVariation,
 	BlockAttributes,
 } from '@wordpress/blocks';
 
@@ -21,6 +20,7 @@ import topRated from './top-rated';
 import bestSellers from './best-sellers';
 import onSale from './on-sale';
 import featured from './featured';
+import registerProductCollection from './register-product-collection';
 
 const collections: BlockVariation[] = [
 	productCollection,
@@ -40,7 +40,7 @@ export const registerCollections = () => {
 			return blockAttrs.collection === variationAttributes.collection;
 		};
 
-		registerBlockVariation( blockJson.name, {
+		registerProductCollection( {
 			isActive,
 			...collection,
 		} );

plugins/woocommerce-blocks/assets/js/blocks/product-collection/collections/register-product-collection.tsx

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import { BlockVariation, registerBlockVariation } from '@wordpress/blocks';
+import { addFilter } from '@wordpress/hooks';
+import { EditorBlock } from '@woocommerce/types';
+import type { ElementType } from '@wordpress/element';
+import type { BlockEditProps } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import blockJson from '../block.json';
+import {
+	SetPreviewState,
+	PreviewState,
+	ProductCollectionAttributes,
+} from '../types';
+
+export interface ProductCollectionConfig extends BlockVariation {
+	preview?: {
+		setPreviewState?: SetPreviewState;
+		initialPreviewState?: PreviewState;
+	};
+}
+
+/**
+ * Register a new collection for the Product Collection block.
+ *
+ * @param {ProductCollectionConfig} blockVariationArgs The configuration of new collection.
+ */
+const registerProductCollection = ( {
+	preview: { setPreviewState, initialPreviewState } = {},
+	...blockVariationArgs
+}: ProductCollectionConfig ) => {
+	/**
+	 * If setPreviewState or initialPreviewState is provided, inject the setPreviewState & initialPreviewState props.
+	 * This is useful for handling preview mode in the editor.
+	 */
+	if ( setPreviewState || initialPreviewState ) {
+		const withSetPreviewState =
+			< T extends EditorBlock< T > >( BlockEdit: ElementType ) =>
+			( props: BlockEditProps< ProductCollectionAttributes > ) => {
+				// If collection name does not match, return the original BlockEdit component.
+				if ( props.attributes.collection !== blockVariationArgs.name ) {
+					return <BlockEdit { ...props } />;
+				}
+
+				// Otherwise, inject the setPreviewState & initialPreviewState props.
+				return (
+					<BlockEdit
+						{ ...props }
+						preview={ {
+							setPreviewState,
+							initialPreviewState,
+						} }
+					/>
+				);
+			};
+		addFilter(
+			'editor.BlockEdit',
+			blockVariationArgs.name,
+			withSetPreviewState
+		);
+	}
+
+	registerBlockVariation( blockJson.name, {
+		...blockVariationArgs,
+	} );
+};
+
+export default registerProductCollection;

plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts

@@ -63,7 +63,14 @@ export const DEFAULT_QUERY: ProductCollectionQuery = {
 	priceRange: undefined,
 };
 
-export const DEFAULT_ATTRIBUTES: Partial< ProductCollectionAttributes > = {
+export const DEFAULT_ATTRIBUTES: Pick<
+	ProductCollectionAttributes,
+	| 'query'
+	| 'tagName'
+	| 'displayLayout'
+	| 'queryContextIncludes'
+	| 'forcePageReload'
+> = {
 	query: DEFAULT_QUERY,
 	tagName: 'div',
 	displayLayout: {

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/editor.scss

@@ -1,8 +1,8 @@
 $max-columns: 3;
 $min-button-width: 250px;
-$gap-count: calc(#{ $max-columns } - 1);
-$total-gap-width: calc(#{ $gap-count } * #{ $gap-small });
-$max-button-width: calc((100% - #{ $total-gap-width }) / #{ $max-columns });
+$gap-count: calc(#{$max-columns} - 1);
+$total-gap-width: calc(#{$gap-count} * #{$gap-small});
+$max-button-width: calc((100% - #{$total-gap-width}) / #{$max-columns});
 
 .wc-block-editor-product-collection-inspector-toolspanel__filters {
 	.wc-block-editor-product-collection-inspector__taxonomy-control:not(:last-child) {
@@ -35,7 +35,7 @@ $max-button-width: calc((100% - #{ $total-gap-width }) / #{ $max-columns });
 
 	.wc-blocks-product-collection__collections-section {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(max(#{ $min-button-width }, #{ $max-button-width }), 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(max(#{$min-button-width}, #{$max-button-width}), 1fr));
 		grid-auto-rows: 1fr;
 		grid-gap: $gap-small;
 		margin: $gap-large auto;
@@ -102,3 +102,17 @@ $max-button-width: calc((100% - #{ $total-gap-width }) / #{ $max-columns });
 		pointer-events: none;
 	}
 }
+
+// Preview mode
+.wc-block-product-collection__preview-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	transform: translateY(-100%);
+	font-family: var(--wp--preset--font-family--system-sans-serif);
+
+	&.is-primary:focus:not(:disabled) {
+		outline: none;
+		box-shadow: none;
+	}
+}

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/index.tsx

@@ -2,20 +2,19 @@
  * External dependencies
  */
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { BlockEditProps } from '@wordpress/blocks';
 import { useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import type { ProductCollectionAttributes } from '../types';
+import type { ProductCollectionEditComponentProps } from '../types';
 import ProductCollectionPlaceholder from './product-collection-placeholder';
 import ProductCollectionContent from './product-collection-content';
 import CollectionSelectionModal from './collection-selection-modal';
 import './editor.scss';
 
-const Edit = ( props: BlockEditProps< ProductCollectionAttributes > ) => {
+const Edit = ( props: ProductCollectionEditComponentProps ) => {
 	const { clientId, attributes } = props;
 
 	const [ isSelectionModalOpen, setIsSelectionModalOpen ] = useState( false );

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-advanced-controls/index.tsx

@@ -10,7 +10,7 @@ import ForcePageReloadControl from './force-page-reload-control';
 import type { ProductCollectionEditComponentProps } from '../../types';
 
 export default function ProductCollectionAdvancedInspectorControls(
-	props: ProductCollectionEditComponentProps
+	props: Omit< ProductCollectionEditComponentProps, 'preview' >
 ) {
 	const { clientId, attributes, setAttributes } = props;
 	const { forcePageReload } = attributes;

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/product-collection-content.tsx

@@ -7,8 +7,10 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
+import { Button } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { useGetLocation } from '@woocommerce/blocks/product-template/utils';
 
 /**
  * Internal dependencies
@@ -19,15 +21,28 @@ import type {
 	ProductCollectionEditComponentProps,
 } from '../types';
 import { DEFAULT_ATTRIBUTES, INNER_BLOCKS_TEMPLATE } from '../constants';
-import { getDefaultValueOfInheritQueryFromTemplate } from '../utils';
+import {
+	getDefaultValueOfInheritQueryFromTemplate,
+	useSetPreviewState,
+} from '../utils';
 import InspectorControls from './inspector-controls';
 import InspectorAdvancedControls from './inspector-advanced-controls';
 import ToolbarControls from './toolbar-controls';
 
-const ProductCollectionContent = (
-	props: ProductCollectionEditComponentProps
-) => {
+const ProductCollectionContent = ( {
+	preview: { setPreviewState, initialPreviewState } = {},
+	...props
+}: ProductCollectionEditComponentProps ) => {
+	const isInitialAttributesSet = useRef( false );
 	const { clientId, attributes, setAttributes } = props;
+	const location = useGetLocation( props.context, props.clientId );
+
+	useSetPreviewState( {
+		setPreviewState,
+		setAttributes,
+		location,
+		attributes,
+	} );
 
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -75,13 +90,38 @@ const ProductCollectionContent = (
 				},
 				...( attributes as Partial< ProductCollectionAttributes > ),
 				queryId,
+				// If initialPreviewState is provided, set it as previewState.
+				...( !! attributes.collection && {
+					__privatePreviewState: initialPreviewState,
+				} ),
 			} );
+
+			isInitialAttributesSet.current = true;
 		},
 		// This hook is only needed on initialization and sets default attributes.
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[]
 	);
 
+	const isSelectedOrInnerBlockSelected = useSelect(
+		( select ) => {
+			const { getSelectedBlockClientId, hasSelectedInnerBlock } =
+				select( 'core/block-editor' );
+
+			// Check if the current block is selected.
+			const isSelected = getSelectedBlockClientId() === clientId;
+
+			// Check if any inner block of the current block is selected.
+			const isInnerBlockSelected = hasSelectedInnerBlock(
+				clientId,
+				true
+			);
+
+			return isSelected || isInnerBlockSelected;
+		},
+		[ clientId ]
+	);
+
 	/**
 	 * If inherit is not a boolean, then we haven't set default attributes yet.
 	 * We don't wanna render anything until default attributes are set.
@@ -91,8 +131,29 @@ const ProductCollectionContent = (
 		return null;
 	}
 
+	// Let's not render anything until default attributes are set.
+	if ( ! isInitialAttributesSet.current ) {
+		return null;
+	}
+
 	return (
 		<div { ...blockProps }>
+			{ attributes.__privatePreviewState?.isPreview &&
+				isSelectedOrInnerBlockSelected && (
+					<Button
+						variant="primary"
+						size="small"
+						showTooltip
+						label={
+							attributes.__privatePreviewState?.previewMessage
+						}
+						className="wc-block-product-collection__preview-button"
+						data-test-id="product-collection-preview-button"
+					>
+						Preview
+					</Button>
+				) }
+
 			<InspectorControls { ...props } />
 			<InspectorAdvancedControls { ...props } />
 			<ToolbarControls { ...props } />

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/toolbar-controls/index.tsx

@@ -14,7 +14,7 @@ import CollectionChooserToolbar from './collection-chooser-toolbar';
 import type { ProductCollectionEditComponentProps } from '../../types';
 
 export default function ToolbarControls(
-	props: ProductCollectionEditComponentProps
+	props: Omit< ProductCollectionEditComponentProps, 'preview' >
 ) {
 	const { attributes, openCollectionSelectionModal, setAttributes } = props;
 	const { query, displayLayout } = attributes;

plugins/woocommerce-blocks/assets/js/blocks/product-collection/types.ts

@@ -4,6 +4,11 @@
 import type { BlockEditProps } from '@wordpress/blocks';
 import { type AttributeMetadata } from '@woocommerce/types';
 
+/**
+ * Internal dependencies
+ */
+import { WooCommerceBlockLocation } from '../product-template/utils';
+
 export interface ProductCollectionAttributes {
 	query: ProductCollectionQuery;
 	queryId: number;
@@ -23,6 +28,8 @@ export interface ProductCollectionAttributes {
 	 */
 	queryContextIncludes: string[];
 	forcePageReload: boolean;
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	__privatePreviewState?: PreviewState;
 }
 
 export enum LayoutOptions {
@@ -91,6 +98,10 @@ export interface ProductCollectionQuery {
 export type ProductCollectionEditComponentProps =
 	BlockEditProps< ProductCollectionAttributes > & {
 		openCollectionSelectionModal: () => void;
+		preview: {
+			initialPreviewState?: PreviewState;
+			setPreviewState?: SetPreviewState;
+		};
 		context: {
 			templateSlug: string;
 		};
@@ -143,3 +154,14 @@ export enum CoreFilterNames {
 
 export type CollectionName = CoreCollectionNames | string;
 export type FilterName = CoreFilterNames | string;
+
+export interface PreviewState {
+	isPreview: boolean;
+	previewMessage: string;
+}
+
+export type SetPreviewState = ( args: {
+	setState: ( previewState: PreviewState ) => void;
+	location: WooCommerceBlockLocation;
+	attributes: ProductCollectionAttributes;
+} ) => void | ( () => void );