From 2f7658a296860262cd429e6dce11aa39a6d45dfe Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 3 Nov 2021 17:55:52 +0100 Subject: [PATCH] Store Editing Templates v1: add basic taxonomy block templates (#5063) * Add taxonomy block templates * Change Category template display name * Check for product category/tag taxonomy explicitely * Group archive templates in LegacyTemplate --- assets/js/blocks/legacy-template/constants.ts | 38 ++++++++++++++----- assets/js/blocks/legacy-template/editor.scss | 2 +- assets/js/blocks/legacy-template/index.tsx | 8 ++-- images/template-placeholders/fallback.svg | 3 ++ src/BlockTemplatesController.php | 8 +++- src/BlockTypes/LegacyTemplate.php | 4 +- src/Utils/BlockTemplateUtils.php | 4 +- .../block-templates/taxonomy-product_cat.html | 3 ++ .../block-templates/taxonomy-product_tag.html | 3 ++ 9 files changed, 57 insertions(+), 16 deletions(-) create mode 100644 images/template-placeholders/fallback.svg create mode 100644 templates/block-templates/taxonomy-product_cat.html create mode 100644 templates/block-templates/taxonomy-product_tag.html diff --git a/assets/js/blocks/legacy-template/constants.ts b/assets/js/blocks/legacy-template/constants.ts index 82f8bee2ae8..85f1ec5f319 100644 --- 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 index 09d5732680a..7ddf81acc5a 100644 --- 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 index db74bbd6c90..3da6fefaea0 100644 --- 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 (
{
{
diff --git a/images/template-placeholders/fallback.svg b/images/template-placeholders/fallback.svg new file mode 100644 index 00000000000..6b11f663f7a --- /dev/null +++ b/images/template-placeholders/fallback.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/BlockTemplatesController.php b/src/BlockTemplatesController.php index db0738b40fb..82ddeb026a5 100644 --- 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 index 8bd346d9c6a..8c59ea43ad8 100644 --- 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 index d248ddeb1a6..13cd12b4b58 100644 --- 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 new file mode 100644 index 00000000000..8abdd65e565 --- /dev/null +++ b/templates/block-templates/taxonomy-product_cat.html @@ -0,0 +1,3 @@ + + + diff --git a/templates/block-templates/taxonomy-product_tag.html b/templates/block-templates/taxonomy-product_tag.html new file mode 100644 index 00000000000..79cdd220a93 --- /dev/null +++ b/templates/block-templates/taxonomy-product_tag.html @@ -0,0 +1,3 @@ + + +