Add Product Meta Block (#8484)

* Add minimum structure for Single Product Details block

* Add Product Image Gallery #8233

Add Product Image Gallery

* Add tests for Single Product Details block

* Add the initial basis for the Add to Cart button

* Trigger the single product add to cart action for each product type.

* wip: create block structure and add initial styles

* Add block details to the SingleProductDetails.php file

* Rename the block from add-to-cart-button to add-to-cart-form

* Update to use the cart icon.

* Implement the skeleton for the editor preview.

* Render tabs title with empty content

* Use woocommerce_output_product_data_tabs function to retrieve tabs data

* Update styles and add Notice for the display in the Editor.

* Update CSS.

* Add base tests for the new Add to Cart Form component.

* Add Product Image Gallery block

* remove support global styles

* remove support global styles

* Update the button CSS.

* Remove customizations for the Single Product Details block

* Update styles for the cart form.

* update td style.

* Update divs and CSS.

* Use conventional input instead of the experimental InputControl

* address CSS feedback

* add support for the custom classname

* remove save function

* Remove unnecessary console.log from the Edit.tsx file

* Remove block classname from block wrapper

* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController

* Remove attributes property from the block registration

* Remove isExperimental flag for the Single Product Details block

* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block

* Prevent Single Product Details block from apppearing in Pages or Posts

* add second parameter to the subscribe function

* Implement the new design and copy provided for the editor.

* Make the notice compatible with dark themes.

* Some additional CSS tweaks

* adjust the padding for the input

* wrap the Single Product Template in a div with the product class

* Fix PHP Coding Standards warnings

* improve logic and increase coverage of unit test

* improve logic and increase coverage of unit test

* fix test

* format HTML

* fix edge case

* update @types/wordpress__data package

* update placeholder, icon and description

* update tsconfig

* update block name

* fix SCSS linter error

* address feedback

* create SingleProductTemplateCompatibility class

* Add Hooks compatibility

* remove not used file

* remove not used files

* Add compatibility layer for the Single Product template

* fix check

* implement Product meta template header

* Product Price Block: Add support Single Product Template

* fix missing import

* add comment

* return a value

* improve comment

* fix import

* Add Product Meta block

* remove unnecessary change

* fix compatibility layer when the Single Product template has the classic block

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>

assets/js/atomic/blocks/index.js

@@ -17,3 +17,4 @@ import './product-elements/add-to-cart-form';
 import './product-elements/product-image-gallery';
 import './product-elements/product-details';
 import './product-elements/related-products';
+import './product-elements/product-meta';

assets/js/atomic/blocks/product-elements/product-meta/block.json

@@ -0,0 +1,17 @@
+{
+	"name": "woocommerce/product-meta",
+	"version": "1.0.0",
+	"title": "Product Meta",
+	"icon": "product",
+	"description": "Display Product Meta",
+	"category": "woocommerce",
+	"supports": {
+		"align": true,
+		"reusable": false
+	},
+	"keywords": [ "WooCommerce" ],
+	"usesContext": [ "postId", "postType", "queryId" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/atomic/blocks/product-elements/product-meta/edit.tsx

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlockTemplate } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+const Edit = () => {
+	const TEMPLATE: InnerBlockTemplate[] = [
+		[
+			'core/group',
+			{ layout: { type: 'flex', flexWrap: 'nowrap' } },
+			[
+				[
+					'woocommerce/product-sku',
+					{
+						isDescendentOfSingleProductTemplate: true,
+					},
+				],
+				[
+					'core/post-terms',
+					{
+						prefix: 'Category: ',
+						term: 'product_cat',
+					},
+				],
+				[
+					'core/post-terms',
+					{
+						prefix: 'Tags: ',
+						term: 'product_tag',
+					},
+				],
+			],
+		],
+	];
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks template={ TEMPLATE } />
+		</div>
+	);
+};
+
+export default Edit;

assets/js/atomic/blocks/product-elements/product-meta/editor.scss

@@ -0,0 +1,4 @@
+.wc-block-editor-related-products__notice {
+	margin: 10px auto;
+	max-width: max-content;
+}

assets/js/atomic/blocks/product-elements/product-meta/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { box as icon } from '@wordpress/icons';
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+registerBlockSingleProductTemplate( {
+	registerBlockFn: () => {
+		// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
+		registerBlockType( metadata, {
+			icon,
+			edit,
+			save,
+		} );
+	},
+	unregisterBlockFn: () => {
+		unregisterBlockType( metadata.name );
+	},
+	blockName: metadata.name,
+} );

assets/js/atomic/blocks/product-elements/product-meta/save.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const Save = () => {
+	const blockProps = useBlockProps.save();
+
+	return (
+		<div { ...blockProps }>
+			{ /* @ts-expect-error: `InnerBlocks.Content` is a component that is typed in WordPress core*/ }
+			<InnerBlocks.Content />
+		</div>
+	);
+};
+
+export default Save;

assets/js/atomic/blocks/product-elements/sku/attributes.ts

@@ -12,6 +12,14 @@ export const blockAttributes: BlockAttributes = {
 		type: 'boolean',
 		default: false,
 	},
+	isDescendentOfSingleProductTemplate: {
+		type: 'boolean',
+		default: false,
+	},
+	showProductSelector: {
+		type: 'boolean',
+		default: false,
+	},
 };
 
 export default blockAttributes;

assets/js/atomic/blocks/product-elements/sku/block.tsx

@@ -18,29 +18,51 @@ import type { Attributes } from './types';
 
 type Props = Attributes & HTMLAttributes< HTMLDivElement >;
 
+const Preview = ( {
+	parentClassName,
+	sku,
+	className,
+}: {
+	parentClassName: string;
+	sku: string;
+	className?: string | undefined;
+} ) => (
+	<div
+		className={ classnames( className, 'wc-block-components-product-sku', {
+			[ `${ parentClassName }__product-sku` ]: parentClassName,
+		} ) }
+	>
+		{ __( 'SKU:', 'woo-gutenberg-products-block' ) }{ ' ' }
+		<strong>{ sku }</strong>
+	</div>
+);
+
 const Block = ( props: Props ): JSX.Element | null => {
 	const { className } = props;
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const sku = product.sku;
 
+	if ( props.isDescendentOfSingleProductTemplate ) {
+		return (
+			<Preview
+				parentClassName={ parentClassName }
+				className={ className }
+				sku={ 'Product SKU' }
+			/>
+		);
+	}
+
 	if ( ! sku ) {
 		return null;
 	}
 
 	return (
-		<div
-			className={ classnames(
-				className,
-				'wc-block-components-product-sku',
-				{
-					[ `${ parentClassName }__product-sku` ]: parentClassName,
-				}
-			) }
-		>
-			{ __( 'SKU:', 'woo-gutenberg-products-block' ) }{ ' ' }
-			<strong>{ sku }</strong>
-		</div>
+		<Preview
+			className={ className }
+			parentClassName={ parentClassName }
+			sku={ sku }
+		/>
 	);
 };
 

assets/js/atomic/blocks/product-elements/sku/edit.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import type { BlockEditProps } from '@wordpress/blocks';
 import EditProductLink from '@woocommerce/editor-components/edit-product-link';
 import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
@@ -11,8 +10,6 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import Block from './block';
-import withProductSelector from '../shared/with-product-selector';
-import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 import type { Attributes } from './types';
 
 const Edit = ( {
@@ -39,11 +36,4 @@ const Edit = ( {
 	);
 };
 
-export default withProductSelector( {
-	icon: BLOCK_ICON,
-	label: BLOCK_TITLE,
-	description: __(
-		'Choose a product to display its SKU.',
-		'woo-gutenberg-products-block'
-	),
-} )( Edit );
+export default Edit;

assets/js/atomic/blocks/product-elements/sku/index.ts → assets/js/atomic/blocks/product-elements/sku/index.tsx

@@ -3,6 +3,7 @@
  */
 import { registerBlockType } from '@wordpress/blocks';
 import type { BlockConfiguration } from '@wordpress/blocks';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -16,20 +17,37 @@ import {
 	BLOCK_DESCRIPTION as description,
 } from './constants';
 
+const { ancestor, ...configuration } = sharedConfig;
+
 const blockConfig: BlockConfiguration = {
-	...sharedConfig,
+	...configuration,
 	apiVersion: 2,
 	title,
 	description,
 	icon: { src: icon },
 	usesContext: [ 'query', 'queryId', 'postId' ],
+	attributes,
 	ancestor: [
 		'woocommerce/all-products',
 		'woocommerce/single-product',
 		'core/post-template',
+		'woocommerce/product-meta',
 	],
-	attributes,
 	edit,
+	save: () => {
+		if (
+			attributes.isDescendentOfQueryLoop ||
+			attributes.isDescendentOfSingleProductTemplate
+		) {
+			return null;
+		}
+
+		return (
+			<div
+				className={ classnames( 'is-loading', attributes.className ) }
+			/>
+		);
+	},
 };
 
 registerBlockType( 'woocommerce/product-sku', { ...blockConfig } );

assets/js/atomic/blocks/product-elements/sku/style.scss

@@ -1,6 +1,4 @@
 .wc-block-components-product-sku {
-	margin-top: 0;
-	margin-bottom: $gap-small;
 	display: block;
 	text-transform: uppercase;
 	@include font-size(small);

assets/js/atomic/blocks/product-elements/sku/types.ts

@@ -1,4 +1,6 @@
 export interface Attributes {
 	productId: number;
 	isDescendentOfQueryLoop: boolean;
+	isDescendentOfSingleProductTemplate: boolean;
+	showProductSelector: boolean;
 }

src/BlockTemplatesController.php

@@ -327,7 +327,8 @@ function( $template ) {
 				}
 
 				if ( 'single-product' === $template->slug ) {
-					if ( ! is_admin() ) {
+					if ( ! is_admin() && ! BlockTemplateUtils::template_has_legacy_template_block( $template ) ) {
+
 						$new_content       = SingleProductTemplateCompatibility::add_compatibility_layer( $template->content );
 						$template->content = $new_content;
 					}

src/BlockTypes/RelatedProducts.php

@@ -19,7 +19,6 @@ class RelatedProducts extends AbstractBlock {
 	 */
 	protected $parsed_block;
 
-
 	/**
 	 * Initialize this block type.
 	 *
@@ -35,7 +34,6 @@ protected function initialize() {
 			10,
 			2
 		);
-
 	}
 
 	/**
@@ -45,7 +43,6 @@ protected function register_block_type_assets() {
 		return null;
 	}
 
-
 	/**
 	 * Update the query for the product query block.
 	 *
@@ -70,8 +67,6 @@ public function update_query( $pre_render, $parsed_block ) {
 		}
 	}
 
-
-
 	/**
 	 * Return a custom query based on attributes, filters and global WP_Query.
 	 *
@@ -92,6 +87,4 @@ public function build_query( $query ) {
 			'post_status' => 'publish',
 		);
 	}
-
-
 }