Store Editing Templates v1: add basic taxonomy block templates (wooco…

…mmerce#5063) * Add taxonomy block templates * Change Category template display name * Check for product category/tag taxonomy explicitely * Group archive templates in LegacyTemplate
jonny-bull · Dec 16, 2021 · 2f7658a · 2f7658a
1 parent 7e90bc5
commit 2f7658a
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 16 deletions.
diff --git a/assets/js/blocks/legacy-template/constants.ts b/assets/js/blocks/legacy-template/constants.ts
@@ -3,13 +3,33 @@
  */
 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'
-	),
+export const TEMPLATES: Record< string, Record< string, string > > = {
+	'single-product': {
+		title: __(
+			'WooCommerce Single Product Template',
+			'woo-gutenberg-products-block'
+		),
+		placeholder: 'single-product',
+	},
+	'archive-product': {
+		title: __(
+			'WooCommerce Product Archive Template',
+			'woo-gutenberg-products-block'
+		),
+		placeholder: 'archive-product',
+	},
+	'taxonomy-product_cat': {
+		title: __(
+			'WooCommerce Product Taxonomy Template',
+			'woo-gutenberg-products-block'
+		),
+		placeholder: 'archive-product',
+	},
+	'taxonomy-product_tag': {
+		title: __(
+			'WooCommerce Product Tag Template',
+			'woo-gutenberg-products-block'
+		),
+		placeholder: 'archive-product',
+	},
 };
diff --git a/assets/js/blocks/legacy-template/editor.scss b/assets/js/blocks/legacy-template/editor.scss
@@ -14,7 +14,7 @@
 	}
 }
 
-.editor-styles-wrapper .wp-block-woocommerce-legacy-template__placeholder-image {
+.wp-block-woocommerce-legacy-template__placeholder .wp-block-woocommerce-legacy-template__placeholder-image {
 	display: none;
 	width: 100%;
 	height: auto;

diff --git a/assets/js/blocks/legacy-template/index.tsx b/assets/js/blocks/legacy-template/index.tsx
@@ -14,7 +14,7 @@ import { page } from '@wordpress/icons';
  * Internal dependencies
  */
 import './editor.scss';
-import { TEMPLATE_TITLES } from './constants';
+import { TEMPLATES } from './constants';
 
 interface Props {
 	attributes: {
@@ -25,7 +25,9 @@ interface Props {
 const Edit = ( { attributes }: Props ) => {
 	const blockProps = useBlockProps();
 	const templateTitle =
-		TEMPLATE_TITLES[ attributes.template ] ?? attributes.template;
+		TEMPLATES[ attributes.template ]?.title ?? attributes.template;
+	const templatePlaceholder =
+		TEMPLATES[ attributes.template ]?.placeholder ?? 'fallback';
 	return (
 		<div { ...blockProps }>
 			<Placeholder
@@ -46,7 +48,7 @@ const Edit = ( { attributes }: Props ) => {
 				<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` }
+						src={ `${ WC_BLOCKS_IMAGE_URL }template-placeholders/${ templatePlaceholder }.svg` }
 						alt={ templateTitle }
 					/>
 				</div>

diff --git a/images/template-placeholders/fallback.svg b/images/template-placeholders/fallback.svg
diff --git a/src/BlockTemplatesController.php b/src/BlockTemplatesController.php
@@ -163,11 +163,17 @@ public function render_block_template() {
 		) {
 			add_filter( 'woocommerce_has_block_template', '__return_true', 10, 0 );
 		} elseif (
-			is_tax() &&
+			( is_product_taxonomy() && is_tax( 'product_cat' ) ) &&
 			! $this->theme_has_template( 'taxonomy-product_cat' ) &&
 			$this->default_block_template_is_available( 'taxonomy-product_cat' )
 		) {
 			add_filter( 'woocommerce_has_block_template', '__return_true', 10, 0 );
+		} elseif (
+			( is_product_taxonomy() && is_tax( 'product_tag' ) ) &&
+			! $this->theme_has_template( 'taxonomy-product_tag' ) &&
+			$this->default_block_template_is_available( 'taxonomy-product_tag' )
+		) {
+			add_filter( 'woocommerce_has_block_template', '__return_true', 10, 0 );
 		} elseif (
 			( is_post_type_archive( 'product' ) || is_page( wc_get_page_id( 'shop' ) ) ) &&
 			! $this->theme_has_template( 'archive-product' ) &&

diff --git a/src/BlockTypes/LegacyTemplate.php b/src/BlockTypes/LegacyTemplate.php
@@ -34,9 +34,11 @@ protected function render( $attributes, $content ) {
 			return;
 		}
 
+		$archive_templates = array( 'archive-product', 'taxonomy-product_cat', 'taxonomy-product_tag' );
+
 		if ( 'single-product' === $attributes['template'] ) {
 			return $this->render_single_product();
-		} elseif ( 'archive-product' === $attributes['template'] ) {
+		} elseif ( in_array( $attributes['template'], $archive_templates, true ) ) {
 			return $this->render_archive_product();
 		} else {
 			ob_start();

diff --git a/src/Utils/BlockTemplateUtils.php b/src/Utils/BlockTemplateUtils.php
@@ -134,7 +134,9 @@ public static function convert_slug_to_title( $template_slug ) {
 			case 'archive-product':
 				return __( 'Product Archive Page', 'woo-gutenberg-products-block' );
 			case 'taxonomy-product_cat':
-				return __( 'Product Taxonomy Page', 'woo-gutenberg-products-block' );
+				return __( 'Product Category Page', 'woo-gutenberg-products-block' );
+			case 'taxonomy-product_tag':
+				return __( 'Product Tag Page', 'woo-gutenberg-products-block' );
 			default:
 				// Replace all hyphens and underscores with spaces.
 				return ucwords( preg_replace( '/[\-_]/', ' ', $template_slug ) );

diff --git a/templates/block-templates/taxonomy-product_cat.html b/templates/block-templates/taxonomy-product_cat.html
@@ -0,0 +1,3 @@
+<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:woocommerce/legacy-template {"template":"taxonomy-product_cat"} /-->
+<!-- wp:template-part {"slug":"footer"} /-->
diff --git a/templates/block-templates/taxonomy-product_tag.html b/templates/block-templates/taxonomy-product_tag.html
@@ -0,0 +1,3 @@
+<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:woocommerce/legacy-template {"template":"taxonomy-product_tag"} /-->
+<!-- wp:template-part {"slug":"footer"} /-->