From 92a74a36d6d54ba23461464499bb345f0c82129f Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 2 Nov 2021 10:58:32 +0100 Subject: [PATCH 1/4] Add the Archive Product block template --- assets/js/blocks/legacy-template/constants.ts | 15 +++ assets/js/blocks/legacy-template/editor.scss | 25 +++++ assets/js/blocks/legacy-template/index.tsx | 42 ++++++-- .../template-placeholders/archive-product.svg | 19 ++++ src/BlockTypes/LegacyTemplate.php | 97 +++++++++++++++++++ 5 files changed, 188 insertions(+), 10 deletions(-) create mode 100644 assets/js/blocks/legacy-template/constants.ts create mode 100644 assets/js/blocks/legacy-template/editor.scss create mode 100644 images/template-placeholders/archive-product.svg diff --git a/assets/js/blocks/legacy-template/constants.ts b/assets/js/blocks/legacy-template/constants.ts new file mode 100644 index 00000000000..82f8bee2ae8 --- /dev/null +++ b/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' + ), +}; diff --git a/assets/js/blocks/legacy-template/editor.scss b/assets/js/blocks/legacy-template/editor.scss new file mode 100644 index 00000000000..89a98a7b209 --- /dev/null +++ b/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; + } +} diff --git a/assets/js/blocks/legacy-template/index.tsx b/assets/js/blocks/legacy-template/index.tsx index 97539c8ae37..f06af41c38b 100644 --- a/assets/js/blocks/legacy-template/index.tsx +++ b/assets/js/blocks/legacy-template/index.tsx @@ -1,11 +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'; +/** + * Internal dependencies + */ +import './editor.scss'; +import { TEMPLATE_TITLES } from './constants'; + interface Props { attributes: { template: string; @@ -14,18 +23,31 @@ interface Props { const Edit = ( { attributes }: Props ) => { const blockProps = useBlockProps(); + const templateTitle = TEMPLATE_TITLES[ attributes.template ]; return (
+ label={ templateTitle } + className="wp-block-woocommerce-legacy-template__placeholder" + > +
+ { 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 + ) } +
+
+ { +
+
); }; diff --git a/images/template-placeholders/archive-product.svg b/images/template-placeholders/archive-product.svg new file mode 100644 index 00000000000..d51f1f56486 --- /dev/null +++ b/images/template-placeholders/archive-product.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/BlockTypes/LegacyTemplate.php b/src/BlockTypes/LegacyTemplate.php index 4b2029897ff..5e0a74f4147 100644 --- a/src/BlockTypes/LegacyTemplate.php +++ b/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' ); + + ?> +
+ +

+ + + +
+ Date: Tue, 2 Nov 2021 12:47:16 +0100 Subject: [PATCH 2/4] Use template slug if no template title is set --- assets/js/blocks/legacy-template/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/js/blocks/legacy-template/index.tsx b/assets/js/blocks/legacy-template/index.tsx index f06af41c38b..caf5142b668 100644 --- a/assets/js/blocks/legacy-template/index.tsx +++ b/assets/js/blocks/legacy-template/index.tsx @@ -23,7 +23,8 @@ interface Props { const Edit = ( { attributes }: Props ) => { const blockProps = useBlockProps(); - const templateTitle = TEMPLATE_TITLES[ attributes.template ]; + const templateTitle = + TEMPLATE_TITLES[ attributes.template ] ?? attributes.template; return (
Date: Tue, 2 Nov 2021 12:54:15 +0100 Subject: [PATCH 3/4] Add page icon as per design --- assets/js/blocks/legacy-template/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/js/blocks/legacy-template/index.tsx b/assets/js/blocks/legacy-template/index.tsx index caf5142b668..db74bbd6c90 100644 --- a/assets/js/blocks/legacy-template/index.tsx +++ b/assets/js/blocks/legacy-template/index.tsx @@ -8,6 +8,7 @@ import { import { useBlockProps } from '@wordpress/block-editor'; import { Placeholder } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; +import { page } from '@wordpress/icons'; /** * Internal dependencies @@ -28,6 +29,7 @@ const Edit = ( { attributes }: Props ) => { return (
From ae090e9da412b326fcfa5c1a138d52b80cc328de Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 2 Nov 2021 13:20:03 +0100 Subject: [PATCH 4/4] Add the basic archive product block template --- templates/block-templates/archive-product.html | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 templates/block-templates/archive-product.html diff --git a/templates/block-templates/archive-product.html b/templates/block-templates/archive-product.html new file mode 100644 index 00000000000..5e498161bf3 --- /dev/null +++ b/templates/block-templates/archive-product.html @@ -0,0 +1,3 @@ + + +