Single Product Template: Add compatibility layer (#8442)

* 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

* address feedback

* remove unused import

* double empty line

* remove logic in the constructor

* remove hook

* generate the docs

* add missing hooks

* fix docs

* address feedback

* fix linter

* fix import

* Disable compatibility layer when the WooCommerce Product Grid Block block and WooCommerce Single Product Block are used (#8538)

* disable compatibility layer via hook

* update docs

* generate the docs

* fix version

* fix import

* fix code after merge

---------

Co-authored-by: Alexandre Lara <[email protected]>
Co-authored-by: Patricia Hillebrandt <[email protected]>

Author: 3 people

bin/hook-docs/data/actions.json

@@ -1053,7 +1053,7 @@
         },
         {
             "name": "{$hook}",
-            "file": "Templates/BlockTemplatesCompatibility.php",
+            "file": "Templates/AbstractTemplateCompatibility.php",
             "type": "action",
             "doc": {
                 "description": "Action to render the content of a hook.",

bin/hook-docs/data/filters.json

@@ -547,23 +547,23 @@
         },
         {
             "name": "woocommerce_blocks_hook_compatibility_additional_data",
-            "file": "Templates/BlockTemplatesCompatibility.php",
+            "file": "Templates/AbstractTemplateCompatibility.php",
             "type": "filter",
             "doc": {
                 "description": "When extensions implement their equivalent blocks of the template hook functions, they can use this filter to register their old hooked data here, so in the blockified template, the old hooked functions can be removed in favor of the new blocks while keeping the old hooked functions working in classic templates.",
                 "long_description": "Accepts an array of hooked data. The array should be in the following format: [   [     hook => <hook-name>,     function => <function-name>,     priority => <priority>,  ],  ... ] Where: - hook-name is the name of the hook that have the functions hooked to. - function-name is the hooked function name. - priority is the priority of the hooked function.",
                 "tags": [
+                    {
+                        "name": "since",
+                        "content": "9.5.0"
+                    },
                     {
                         "name": "param",
                         "content": "Additional hooked data. Default to empty",
                         "types": [
                             "array"
                         ],
                         "variable": "$data"
-                    },
-                    {
-                        "name": "since",
-                        "content": "9.5.0"
                     }
                 ],
                 "long_description_html": "<p>Accepts an array of hooked data. The array should be in the following format: [ [ hook =&gt; <hook-name>, function =&gt; <function-name>, priority =&gt; <priority>, ], ... ] Where:</p> <ul> <li>hook-name is the name of the hook that have the functions hooked to.</li> <li>function-name is the hooked function name.</li> <li>priority is the priority of the hooked function.</li> </ul>"
@@ -736,11 +736,11 @@
         },
         {
             "name": "woocommerce_disable_compatibility_layer",
-            "file": "Templates/BlockTemplatesCompatibility.php",
+            "file": "Templates/AbstractTemplateCompatibility.php",
             "type": "filter",
             "doc": {
-                "description": "Filters to disable the compatibility layer for the blockified templates.",
-                "long_description": "This hooks allows to disable the compatibility layer for the blockified.",
+                "description": "Filter to disable the compatibility layer for the blockified templates.",
+                "long_description": "This hook allows to disable the compatibility layer for the blockified.",
                 "tags": [
                     {
                         "name": "since",
@@ -756,17 +756,17 @@
                         "variable": ""
                     }
                 ],
-                "long_description_html": "<p>This hooks allows to disable the compatibility layer for the blockified.</p>"
+                "long_description_html": "<p>This hook allows to disable the compatibility layer for the blockified.</p>"
             },
             "args": 1
         },
         {
             "name": "woocommerce_disable_compatibility_layer",
-            "file": "Templates/BlockTemplatesCompatibility.php",
+            "file": "Templates/AbstractTemplateCompatibility.php",
             "type": "filter",
             "doc": {
-                "description": "Filters to disable the compatibility layer for the blockified templates.",
-                "long_description": "This hooks allows to disable the compatibility layer for the blockified.",
+                "description": "Filter to disable the compatibility layer for the blockified templates.",
+                "long_description": "This hook allows to disable the compatibility layer for the blockified templates.",
                 "tags": [
                     {
                         "name": "since",
@@ -782,7 +782,7 @@
                         "variable": ""
                     }
                 ],
-                "long_description_html": "<p>This hooks allows to disable the compatibility layer for the blockified.</p>"
+                "long_description_html": "<p>This hook allows to disable the compatibility layer for the blockified templates.</p>"
             },
             "args": 1
         },

docs/third-party-developers/extensibility/hooks/actions.md

@@ -883,7 +883,7 @@ do_action( '{$hook}' )
 ### Source
 
 
- - [Templates/BlockTemplatesCompatibility.php](../../../../src/Templates/BlockTemplatesCompatibility.php)
+ - [Templates/AbstractTemplateCompatibility.php](../../../../src/Templates/AbstractTemplateCompatibility.php)
 
 ---
 <!-- FEEDBACK -->

docs/third-party-developers/extensibility/hooks/filters.md

@@ -460,7 +460,7 @@ apply_filters( 'woocommerce_blocks_hook_compatibility_additional_data', array $d
 ### Source
 
 
- - [Templates/BlockTemplatesCompatibility.php](../../../../src/Templates/BlockTemplatesCompatibility.php)
+ - [Templates/AbstractTemplateCompatibility.php](../../../../src/Templates/AbstractTemplateCompatibility.php)
 
 ---
 
@@ -582,15 +582,15 @@ apply_filters( 'woocommerce_cart_contents_changed', array $cart_contents )
 ## woocommerce_disable_compatibility_layer
 
 
-Filters to disable the compatibility layer for the blockified templates.
+Filter to disable the compatibility layer for the blockified templates.
 
 ```php
 apply_filters( 'woocommerce_disable_compatibility_layer', \Automattic\WooCommerce\Blocks\Templates\boolean. $argument0 )
 ```
 
 ### Description
 
-<p>This hooks allows to disable the compatibility layer for the blockified.</p>
+<p>This hook allows to disable the compatibility layer for the blockified.</p>
 
 ### Parameters
 
@@ -601,8 +601,8 @@ apply_filters( 'woocommerce_disable_compatibility_layer', \Automattic\WooCommerc
 ### Source
 
 
- - [Templates/BlockTemplatesCompatibility.php](../../../../src/Templates/BlockTemplatesCompatibility.php)
- - [Templates/BlockTemplatesCompatibility.php](../../../../src/Templates/BlockTemplatesCompatibility.php)
+ - [Templates/AbstractTemplateCompatibility.php](../../../../src/Templates/AbstractTemplateCompatibility.php)
+ - [Templates/AbstractTemplateCompatibility.php](../../../../src/Templates/AbstractTemplateCompatibility.php)
 
 ---
 

src/BlockTemplatesController.php

@@ -2,8 +2,8 @@
 namespace Automattic\WooCommerce\Blocks;
 
 use Automattic\WooCommerce\Blocks\Domain\Package;
-use Automattic\WooCommerce\Blocks\Templates\BlockTemplatesCompatibility;
 use Automattic\WooCommerce\Blocks\Templates\ProductAttributeTemplate;
+use Automattic\WooCommerce\Blocks\Templates\SingleProductTemplateCompatibility;
 use Automattic\WooCommerce\Blocks\Utils\BlockTemplateUtils;
 
 /**
@@ -327,7 +327,7 @@ function( $template ) {
 
 				if ( 'single-product' === $template->slug ) {
 					if ( ! is_admin() ) {
-						$new_content       = BlockTemplatesCompatibility::wrap_single_product_template( $template->content );
+						$new_content       = SingleProductTemplateCompatibility::add_compatibility_layer( $template->content );
 						$template->content = $new_content;
 					}
 					return $template;

src/Domain/Bootstrap.php

@@ -28,6 +28,8 @@
 use Automattic\WooCommerce\StoreApi\SchemaController;
 use Automattic\WooCommerce\StoreApi\StoreApi;
 use Automattic\WooCommerce\Blocks\Shipping\ShippingController;
+use Automattic\WooCommerce\Blocks\Templates\SingleProductTemplateCompatibility;
+use Automattic\WooCommerce\Blocks\Templates\BlockTemplatesCompatibility;
 
 /**
  * Takes care of bootstrapping the plugin.
@@ -129,6 +131,8 @@ function() {
 		$this->container->get( ProductSearchResultsTemplate::class );
 		$this->container->get( ProductAttributeTemplate::class );
 		$this->container->get( ClassicTemplatesCompatibility::class );
+		$this->container->get( BlockTemplatesCompatibility::class )->init();
+		$this->container->get( SingleProductTemplateCompatibility::class )->init();
 		$this->container->get( BlockPatterns::class );
 		$this->container->get( PaymentsApi::class );
 		$this->container->get( ShippingController::class )->init();
@@ -274,6 +278,19 @@ function ( Container $container ) {
 				return new ClassicTemplatesCompatibility( $asset_data_registry );
 			}
 		);
+		$this->container->register(
+			BlockTemplatesCompatibility::class,
+			function () {
+				return new BlockTemplatesCompatibility();
+			}
+		);
+
+		$this->container->register(
+			SingleProductTemplateCompatibility::class,
+			function () {
+				return new SingleProductTemplateCompatibility();
+			}
+		);
 		$this->container->register(
 			DraftOrders::class,
 			function( Container $container ) {

src/Templates/AbstractTemplateCompatibility.php

@@ -0,0 +1,201 @@
+<?php
+namespace Automattic\WooCommerce\Blocks\Templates;
+
+/**
+ * BlockTemplatesCompatibility class.
+ *
+ * To bridge the gap on compatibility with PHP hooks and blockified templates.
+ *
+ * @internal
+ */
+abstract class AbstractTemplateCompatibility {
+	/**
+	 * The data of supported hooks, containing the hook name, the block name,
+	 * position, and the callbacks.
+	 *
+	 * @var array $hook_data The hook data.
+	 */
+	protected $hook_data;
+
+	/**
+	 * Initialization method.
+	 */
+	public function init() {
+		if ( ! wc_current_theme_is_fse_theme() ) {
+			return;
+		}
+
+		$this->set_hook_data();
+
+		add_filter(
+			'render_block_data',
+			function( $parsed_block, $source_block, $parent_block ) {
+				/**
+				* Filter to disable the compatibility layer for the blockified templates.
+				*
+				* This hook allows to disable the compatibility layer for the blockified templates.
+				*
+				* @since TBD
+				* @param boolean.
+				*/
+				$is_disabled_compatility_layer = apply_filters( 'woocommerce_disable_compatibility_layer', false );
+
+				if ( $is_disabled_compatility_layer ) {
+					return $parsed_block;
+				}
+
+				return $this->update_render_block_data( $parsed_block, $source_block, $parent_block );
+
+			},
+			10,
+			3
+		);
+
+		add_filter(
+			'render_block',
+			function ( $block_content, $block ) {
+				/**
+				* Filter to disable the compatibility layer for the blockified templates.
+				*
+				* This hook allows to disable the compatibility layer for the blockified.
+				*
+				* @since TBD
+				* @param boolean.
+				*/
+				$is_disabled_compatility_layer = apply_filters( 'woocommerce_disable_compatibility_layer', false );
+
+				if ( $is_disabled_compatility_layer ) {
+					return $block_content;
+				}
+
+				return $this->inject_hooks( $block_content, $block );
+			},
+			10,
+			2
+		);
+	}
+
+	/**
+	 * Update the render block data to inject our custom attribute needed to
+	 * determine which blocks belong to an inherited Products block.
+	 *
+	 * @param array         $parsed_block The block being rendered.
+	 * @param array         $source_block An un-modified copy of $parsed_block, as it appeared in the source content.
+	 * @param WP_Block|null $parent_block If this is a nested block, a reference to the parent block.
+	 *
+	 * @return array
+	 */
+	abstract public function update_render_block_data( $parsed_block, $source_block, $parent_block );
+
+	/**
+	 * Inject hooks to rendered content of corresponding blocks.
+	 *
+	 * @param mixed $block_content The rendered block content.
+	 * @param mixed $block         The parsed block data.
+	 * @return string
+	 */
+	abstract public function inject_hooks( $block_content, $block );
+
+	/**
+	 * The hook data to inject to the rendered content of blocks. This also
+	 * contains hooked functions that will be removed by remove_default_hooks.
+	 *
+	 * The array format:
+	 * [
+	 *   <hook-name> => [
+	 *     block_name => <block-name>,
+	 *     position => before|after,
+	 *     hooked => [
+	 *       <function-name> => <priority>,
+	 *        ...
+	 *     ],
+	 *  ],
+	 * ]
+	 * Where:
+	 * - hook-name is the name of the hook that will be replaced.
+	 * - block-name is the name of the block that will replace the hook.
+	 * - position is the position of the block relative to the hook.
+	 * - hooked is an array of functions hooked to the hook that will be
+	 *   replaced. The key is the function name and the value is the
+	 *   priority.
+	 */
+	abstract protected function set_hook_data();
+
+
+	/**
+	 * Remove the default callback added by WooCommerce. We replaced these
+	 * callbacks by blocks so we have to remove them to prevent duplicated
+	 * content.
+	 */
+	protected function remove_default_hooks() {
+		foreach ( $this->hook_data as $hook => $data ) {
+			if ( ! isset( $data['hooked'] ) ) {
+				continue;
+			}
+			foreach ( $data['hooked'] as $callback => $priority ) {
+				remove_action( $hook, $callback, $priority );
+			}
+		}
+
+		/**
+		 * When extensions implement their equivalent blocks of the template
+		 * hook functions, they can use this filter to register their old hooked
+		 * data here, so in the blockified template, the old hooked functions
+		 * can be removed in favor of the new blocks while keeping the old
+		 * hooked functions working in classic templates.
+		 *
+		 * Accepts an array of hooked data. The array should be in the following
+		 * format:
+		 * [
+		 *   [
+		 *     hook => <hook-name>,
+		 *     function => <function-name>,
+		 *     priority => <priority>,
+		 *  ],
+		 *  ...
+		 * ]
+		 * Where:
+		 * - hook-name is the name of the hook that have the functions hooked to.
+		 * - function-name is the hooked function name.
+		 * - priority is the priority of the hooked function.
+		 *
+		 * @since 9.5.0
+		 * @param array $data Additional hooked data. Default to empty
+		 */
+		$additional_hook_data = apply_filters( 'woocommerce_blocks_hook_compatibility_additional_data', array() );
+
+		if ( empty( $additional_hook_data ) || ! is_array( $additional_hook_data ) ) {
+			return;
+		}
+
+		foreach ( $additional_hook_data as $data ) {
+			if ( ! isset( $data['hook'], $data['function'], $data['priority'] ) ) {
+				continue;
+			}
+			remove_action( $data['hook'], $data['function'], $data['priority'] );
+		}
+	}
+
+	/**
+	 * Get the buffer content of the hooks to append/prepend to render content.
+	 *
+	 * @param array  $hooks    The hooks to be rendered.
+	 * @param string $position The position of the hooks.
+	 *
+	 * @return string
+	 */
+	protected function get_hooks_buffer( $hooks, $position ) {
+		ob_start();
+		foreach ( $hooks as $hook => $data ) {
+			if ( $data['position'] === $position ) {
+				/**
+				 * Action to render the content of a hook.
+				 *
+				 * @since 9.5.0
+				 */
+				do_action( $hook );
+			}
+		}
+		return ob_get_clean();
+	}
+}