Add basic product archive block template

assets/js/blocks/legacy-template/constants.ts

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const TEMPLATE_TITLES: Record< string, string > = {
+	'single-product': __(
+		'WooCommerce Single Product Template',
+		'woo-gutenberg-products-block'
+	),
+	'archive-product': __(
+		'WooCommerce Product Archive Template',
+		'woo-gutenberg-products-block'
+	),
+};

assets/js/blocks/legacy-template/editor.scss

@@ -0,0 +1,25 @@
+.wp-block-woocommerce-legacy-template__placeholder-copy {
+	max-width: 900px;
+	margin-bottom: 30px;
+}
+
+.wp-block-woocommerce-legacy-template__placeholder-wireframe {
+	width: 100%;
+	height: 250px;
+	background: #e5e5e5;
+
+	@media only screen and (min-width: 768px) {
+		height: auto;
+		background: transparent;
+	}
+}
+
+.wp-block-woocommerce-legacy-template__placeholder-image {
+	display: none;
+	width: 100%;
+	height: auto;
+
+	@media only screen and (min-width: 768px) {
+		display: block;
+	}
+}

assets/js/blocks/legacy-template/index.tsx

@@ -1,10 +1,20 @@
 /**
  * External dependencies
  */
-import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+import {
+	registerExperimentalBlockType,
+	WC_BLOCKS_IMAGE_URL,
+} from '@woocommerce/block-settings';
 import { useBlockProps } from '@wordpress/block-editor';
 import { Placeholder } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+import { page } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import { TEMPLATE_TITLES } from './constants';
 
 interface Props {
 	attributes: {
@@ -14,18 +24,33 @@ interface Props {
 
 const Edit = ( { attributes }: Props ) => {
 	const blockProps = useBlockProps();
+	const templateTitle =
+		TEMPLATE_TITLES[ attributes.template ] ?? attributes.template;
 	return (
 		<div { ...blockProps }>
 			<Placeholder
-				label={ sprintf(
-					/* translators: %s is the template name */
-					__(
-						'Wireframe template for %s will be rendered here.',
-						'woo-gutenberg-products-block'
-					),
-					attributes.template
-				) }
-			/>
+				icon={ page }
+				label={ templateTitle }
+				className="wp-block-woocommerce-legacy-template__placeholder"
+			>
+				<div className="wp-block-woocommerce-legacy-template__placeholder-copy">
+					{ sprintf(
+						/* translators: %s is the template title */
+						__(
+							'This is an editor placeholder for the %s. On your store this will be replaced by the template and display with your product image(s), title, price, etc. You can move this placeholder around and add further blocks around it to extend the template.',
+							'woo-gutenberg-products-block'
+						),
+						templateTitle
+					) }
+				</div>
+				<div className="wp-block-woocommerce-legacy-template__placeholder-wireframe">
+					<img
+						className="wp-block-woocommerce-legacy-template__placeholder-image"
+						src={ `${ WC_BLOCKS_IMAGE_URL }template-placeholders/${ attributes.template }.svg` }
+						alt={ templateTitle }
+					/>
+				</div>
+			</Placeholder>
 		</div>
 	);
 };

src/BlockTypes/LegacyTemplate.php

@@ -36,6 +36,8 @@ protected function render( $attributes, $content ) {
 
 		if ( 'single-product' === $attributes['template'] ) {
 			return $this->render_single_product();
+		} elseif ( 'archive-product' === $attributes['template'] ) {
+			return $this->render_archive_product();
 		} else {
 			ob_start();
 
@@ -59,4 +61,99 @@ protected function render_single_product() {
 		wp_reset_postdata();
 		return ob_get_clean();
 	}
+
+	/**
+	 * Render method for the archive product template and parts.
+	 *
+	 * @return string Rendered block type output.
+	 */
+	protected function render_archive_product() {
+		ob_start();
+
+		/**
+		 * Hook: woocommerce_before_main_content.
+		 *
+		 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
+		 * @hooked woocommerce_breadcrumb - 20
+		 * @hooked WC_Structured_Data::generate_website_data() - 30
+		 */
+		do_action( 'woocommerce_before_main_content' );
+
+		?>
+		<header class="woocommerce-products-header">
+			<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
+				<h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
+			<?php endif; ?>
+
+			<?php
+			/**
+			 * Hook: woocommerce_archive_description.
+			 *
+			 * @hooked woocommerce_taxonomy_archive_description - 10
+			 * @hooked woocommerce_product_archive_description - 10
+			 */
+			do_action( 'woocommerce_archive_description' );
+			?>
+		</header>
+		<?php
+		if ( woocommerce_product_loop() ) {
+
+			/**
+			 * Hook: woocommerce_before_shop_loop.
+			 *
+			 * @hooked woocommerce_output_all_notices - 10
+			 * @hooked woocommerce_result_count - 20
+			 * @hooked woocommerce_catalog_ordering - 30
+			 */
+			do_action( 'woocommerce_before_shop_loop' );
+
+			woocommerce_product_loop_start();
+
+			if ( wc_get_loop_prop( 'total' ) ) {
+				while ( have_posts() ) {
+					the_post();
+
+					/**
+					 * Hook: woocommerce_shop_loop.
+					 */
+					do_action( 'woocommerce_shop_loop' );
+
+					wc_get_template_part( 'content', 'product' );
+				}
+			}
+
+			woocommerce_product_loop_end();
+
+			/**
+			 * Hook: woocommerce_after_shop_loop.
+			 *
+			 * @hooked woocommerce_pagination - 10
+			 */
+			do_action( 'woocommerce_after_shop_loop' );
+		} else {
+			/**
+			 * Hook: woocommerce_no_products_found.
+			 *
+			 * @hooked wc_no_products_found - 10
+			 */
+			do_action( 'woocommerce_no_products_found' );
+		}
+
+		/**
+		 * Hook: woocommerce_after_main_content.
+		 *
+		 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
+		 */
+		do_action( 'woocommerce_after_main_content' );
+
+		/**
+		 * Hook: woocommerce_sidebar.
+		 *
+		 * @hooked woocommerce_get_sidebar - 10
+		 */
+		do_action( 'woocommerce_sidebar' );
+
+		wp_reset_postdata();
+		return ob_get_clean();
+	}
 }

templates/block-templates/archive-product.html

@@ -0,0 +1,3 @@
+<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:woocommerce/legacy-template {"template":"archive-product"} /-->
+<!-- wp:template-part {"slug":"footer"} /-->