Update the archive templates to use Products block (#8308)Co-authored…

…-by: Alba Rincón <[email protected]> * wip: update blockified archive templates * Update product archive title to Shop * Update product search template to blockified version * new default templates, all blocks are Products block inner blocks * revert change to fallack eligible archive templates * remove unneccessary translated strings * only filter the archive title on the shop page * add missing categories header for patterns * remove the term description block on the fly * explain the reason for removing the term description block --------- Co-authored-by: Alba Rincón <[email protected]>
woocommerce · Feb 22, 2023 · 05b7838 · 05b7838
1 parent ad6fc21
commit 05b7838
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 9 deletions.
diff --git a/assets/js/blocks/store-notices/block.json b/assets/js/blocks/store-notices/block.json
@@ -6,7 +6,14 @@
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"supports": {
-		"multiple": false
+		"multiple": false,
+		"align": [ "wide", "full" ]
+	},
+	"attributes": {
+		"align": {
+			"type": "string",
+			"default": "wide"
+		}
 	},
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2,

diff --git a/patterns/no-products-found.php b/patterns/no-products-found.php
@@ -0,0 +1,13 @@
+<?php
+/**
+ * Title: No Products Found
+ * Slug: woocommerce/no-products-found
+ * Inserter: no
+ * Categories: WooCommerce
+ */
+?>
+<!-- wp:paragraph -->
+<p>
+	<?php echo esc_html_x( 'No products were found matching your selection.', 'Message explaining that there are no products returned from a search', 'woo-gutenberg-products-block' ); ?>
+</p>
+<!-- /wp:paragraph -->
diff --git a/patterns/product-search-form.php b/patterns/product-search-form.php
@@ -0,0 +1,9 @@
+<?php
+/**
+ * Title: Product Search
+ * Slug: woocommerce/product-search-form
+ * Inserter: no
+ * Categories: WooCommerce
+ */
+?>
+<!-- wp:search {"showLabel":false,"placeholder":"<?php echo esc_attr_x( 'Search products…', 'placeholder for search field', 'woo-gutenberg-products-block' ); ?>","query":{"post_type":"product"}} /-->
diff --git a/src/BlockTemplatesController.php b/src/BlockTemplatesController.php
@@ -68,6 +68,8 @@ protected function init() {
 		add_filter( 'get_block_templates', array( $this, 'add_block_templates' ), 10, 3 );
 		add_filter( 'current_theme_supports-block-templates', array( $this, 'remove_block_template_support_for_shop_page' ) );
 		add_filter( 'taxonomy_template_hierarchy', array( $this, 'add_archive_product_to_eligible_for_fallback_templates' ), 10, 1 );
+		add_filter( 'post_type_archive_title', array( $this, 'update_product_archive_title' ), 10, 2 );
+
 		if ( $this->package->is_experimental_build() ) {
 			add_action( 'after_switch_theme', array( $this, 'check_should_use_blockified_product_grid_templates' ), 10, 2 );
 		}
@@ -597,4 +599,24 @@ function_exists( 'wc_get_page_id' ) &&
 
 		return $is_support;
 	}
+
+	/**
+	 * Update the product archive title to "Shop".
+	 *
+	 * @param string $post_type_name Post type 'name' label.
+	 * @param string $post_type      Post type.
+	 *
+	 * @return string
+	 */
+	public function update_product_archive_title( $post_type_name, $post_type ) {
+		if (
+			function_exists( 'is_shop' ) &&
+			is_shop() &&
+			'product' === $post_type
+		) {
+			return __( 'Shop', 'woo-gutenberg-products-block' );
+		}
+
+		return $post_type_name;
+	}
 }
diff --git a/src/BlockTypes/StoreNotices.php b/src/BlockTypes/StoreNotices.php
@@ -36,6 +36,10 @@ protected function render( $attributes, $content, $block ) {
 
 		$classname = isset( $attributes['className'] ) ? $attributes['className'] : '';
 
+		if ( isset( $attributes['align'] ) ) {
+			$classname .= " align{$attributes['align']}";
+		}
+
 		return sprintf(
 			'<div class="woocommerce wc-block-store-notices %1$s">%2$s</div>',
 			esc_attr( $classname ),

diff --git a/src/Templates/BlockTemplatesCompatibility.php b/src/Templates/BlockTemplatesCompatibility.php
@@ -244,6 +244,14 @@ protected function set_hook_data() {
 					'wc_no_products_found' => 10,
 				),
 			),
+			'woocommerce_archive_description'         => array(
+				'block_name' => 'core/term-description',
+				'position'   => 'before',
+				'hooked'     => array(
+					'woocommerce_taxonomy_archive_description' => 10,
+					'woocommerce_product_archive_description'  => 10,
+				),
+			),
 		);
 	}
 

diff --git a/src/Utils/BlockTemplateUtils.php b/src/Utils/BlockTemplateUtils.php
@@ -121,6 +121,44 @@ public static function inject_theme_attribute_in_content( $template_content ) {
 		return $template_content;
 	}
 
+	/**
+	 * Remove block from parsed template content.
+	 *
+	 * @param string $template_content serialized wp_template content.
+	 * @param string $block_name       Block to be removed.
+	 *
+	 * @return string Updated wp_template content.
+	 */
+	private static function remove_block_from_template( $template_content, $block_name ) {
+		$new_content     = '';
+		$template_blocks = parse_blocks( $template_content );
+
+		self::recursive_remove_block( $template_blocks, $block_name );
+
+		foreach ( $template_blocks as &$block ) {
+			$new_content .= serialize_block( $block );
+		}
+
+		return $new_content;
+	}
+
+	/**
+	 * Remove block recursively from block list.
+	 *
+	 * @param array  $blocks      Parsed blocks array.
+	 * @param string $block_name Block to be removed.
+	 * @return void
+	 */
+	private static function recursive_remove_block( &$blocks, $block_name ) {
+		foreach ( $blocks as $index => &$block ) {
+			if ( $block_name === $block['blockName'] ) {
+				unset( $blocks[ $index ] );
+			} elseif ( ! empty( $block['innerBlocks'] ) ) {
+				self::recursive_remove_block( $block['innerBlocks'], $block_name );
+			}
+		}
+	}
+
 	/**
 	 * Build a unified template object based a post Object.
 	 * Important: This method is an almost identical duplicate from wp-includes/block-template-utils.php as it was not intended for public use. It has been modified to build templates from plugins rather than themes.
@@ -198,6 +236,11 @@ public static function build_template_result_from_file( $template_file, $templat
 		$template->id      = $template_is_from_theme ? $theme_name . '//' . $template_file->slug : self::PLUGIN_SLUG . '//' . $template_file->slug;
 		$template->theme   = $template_is_from_theme ? $theme_name : self::PLUGIN_SLUG;
 		$template->content = self::inject_theme_attribute_in_content( $template_content );
+		// Remove the term description block from the archive-product template
+		// as the Product Catalog/Shop page doesn't have a description.
+		if ( 'archive-product' === $template_file->slug ) {
+			$template->content = self::remove_block_from_template( $template->content, 'core/term-description' );
+		}
 		// Plugin was agreed as a valid source value despite existing inline docs at the time of creating: https://github.com/WordPress/gutenberg/issues/36597#issuecomment-976232909.
 		$template->source         = $template_file->source ? $template_file->source : 'plugin';
 		$template->slug           = $template_file->slug;

diff --git a/templates/templates/blockified/archive-product.html b/templates/templates/blockified/archive-product.html
@@ -1,8 +1,41 @@
 <!-- wp:template-part {"slug":"header"} /-->
-<!-- wp:group {"layout":{"inherit":true}} -->
+
+<!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
 <div class="wp-block-group">
-	<!-- wp:paragraph -->
-	<p>Archive product blockified</p>
-	<!-- /wp:paragraph --></div>
+	<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":true,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query","align":"wide"} -->
+	<div class="wp-block-query alignwide">
+		<!-- wp:query-title {"type":"archive","showPrefix":false} /-->
+
+		<!-- wp:term-description /-->
+
+		<!-- wp:woocommerce/store-notices /-->
+
+		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+		<div class="wp-block-group alignwide">
+			<!-- wp:woocommerce/product-results-count /-->
+			<!-- wp:woocommerce/catalog-sorting /-->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
+			<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
+			<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
+			<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
+			<!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
+		<!-- /wp:post-template -->
+
+		<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
+			<!-- wp:query-pagination-previous /-->
+			<!-- wp:query-pagination-numbers /-->
+			<!-- wp:query-pagination-next /-->
+		<!-- /wp:query-pagination -->
+
+		<!-- wp:query-no-results -->
+			<!-- wp:pattern {"slug":"woocommerce/no-products-found"} /-->
+		<!-- /wp:query-no-results -->
+	</div>
+	<!-- /wp:query -->
+</div>
 <!-- /wp:group -->
+
 <!-- wp:template-part {"slug":"footer"} /-->
diff --git a/templates/templates/blockified/product-search-results.html b/templates/templates/blockified/product-search-results.html
@@ -1,8 +1,40 @@
 <!-- wp:template-part {"slug":"header"} /-->
-<!-- wp:group {"layout":{"inherit":true}} -->
+
+<!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
 <div class="wp-block-group">
-	<!-- wp:paragraph -->
-	<p>Product search results blockified</p>
-	<!-- /wp:paragraph --></div>
+	<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":true,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query","align":"wide"} -->
+	<div class="wp-block-query alignwide">
+		<!-- wp:query-title {"type":"search","showPrefix":false} /-->
+
+		<!-- wp:woocommerce/store-notices /-->
+
+		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+		<div class="wp-block-group alignwide">
+			<!-- wp:woocommerce/product-results-count /-->
+			<!-- wp:woocommerce/catalog-sorting /-->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
+			<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
+			<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
+			<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
+			<!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
+		<!-- /wp:post-template -->
+
+		<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
+			<!-- wp:query-pagination-previous /-->
+			<!-- wp:query-pagination-numbers /-->
+			<!-- wp:query-pagination-next /-->
+		<!-- /wp:query-pagination -->
+
+		<!-- wp:query-no-results -->
+			<!-- wp:pattern {"slug":"woocommerce/no-products-found"} /-->
+			<!-- wp:pattern {"slug":"woocommerce/product-search-form"} /-->
+		<!-- /wp:query-no-results -->
+	</div>
+	<!-- /wp:query -->
+</div>
 <!-- /wp:group -->
+
 <!-- wp:template-part {"slug":"footer"} /-->