Product Categories List: Add the links into the rendered block (https://github.com/woocommerce/woocommerce-blocks/pull/637)

* Add `isPreview` prop to be used when in editor preview

* Add product category link to the categories object

* Add the link to the `a` if we're not in the preview mode

plugins/woocommerce-blocks/assets/js/blocks/product-categories/block.js

@@ -23,7 +23,7 @@ function getCategories( { hasEmpty, isDropdown, isHierarchical } ) {
 /**
  * Component displaying the categories as dropdown or list.
  */
-const ProductCategoriesBlock = ( { attributes } ) => {
+const ProductCategoriesBlock = ( { attributes, isPreview = false } ) => {
 	const { hasCount, isDropdown } = attributes;
 	const categories = getCategories( attributes );
 	const parentKey = 'parent-' + categories[ 0 ].term_id;
@@ -33,10 +33,10 @@ const ProductCategoriesBlock = ( { attributes } ) => {
 			{ items.map( ( cat ) => {
 				const count = hasCount ? <span>({ cat.count })</span> : null;
 				return [
-					<li key={ cat.term_id }><a>{ cat.name }</a> { count }</li>, // eslint-disable-line
-					!! cat.children &&
-						!! cat.children.length &&
-						renderList( cat.children ),
+					<li key={ cat.term_id }>
+						<a href={ isPreview ? null : cat.link }>{ cat.name }</a> { count } { /* eslint-disable-line */ }
+					</li>,
+					!! cat.children && !! cat.children.length && renderList( cat.children ),
 				];
 			} ) }
 		</ul>
@@ -65,6 +65,10 @@ ProductCategoriesBlock.propTypes = {
 	 * The attributes for this block
 	 */
 	attributes: PropTypes.object.isRequired,
+	/**
+	 * Whether this is the block preview or frontend display.
+	 */
+	isPreview: PropTypes.bool,
 };
 
 export default ProductCategoriesBlock;

plugins/woocommerce-blocks/assets/js/blocks/product-categories/edit.js

@@ -66,7 +66,7 @@ export default function( { attributes, setAttributes } ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<Block attributes={ attributes } />
+			<Block attributes={ attributes } isPreview />
 		</Fragment>
 	);
 }

plugins/woocommerce-blocks/assets/php/class-wgpb-block-library.php

@@ -197,6 +197,10 @@ class WGPB_Block_Library {
 				'pad_counts' => true,
 			)
 		);
+		foreach ( $product_categories as &$category ) {
+			$category->link = get_term_link( $category->term_id, 'product_cat' );
+		}
+
 		// Global settings used in each block.
 		$block_settings = array(
 			'min_columns'       => wc_get_theme_support( 'product_blocks::min_columns', 1 ),