Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Wrap the Single Product Template in a div with the product class (https://github.com/woocommerce/woocommerce-blocks/pull/8364) 

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

* improve logic and increase coverage of unit test

* improve logic and increase coverage of unit test

* fix test

* format HTML

* fix edge case

* address feedback

* fix name block and fix check

* wrap single product template only on the frontend
This commit is contained in:
Luigi Teschio 2023-02-15 10:27:18 +01:00 committed by GitHub
parent 336591f8d4
commit c13bf15862
3 changed files with 469 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
plugins/woocommerce-blocks/src/BlockTemplatesController.php
View File

@ -2,6 +2,7 @@
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\Utils\BlockTemplateUtils;
@ -322,6 +323,15 @@ class BlockTemplatesController {
if ( ! $template->description ) {
$template->description = BlockTemplateUtils::get_block_template_description( $template->slug );
}
if ( 'single-product' === $template->slug ) {
if ( ! is_admin() ) {
$new_content = BlockTemplatesCompatibility::wrap_single_product_template( $template->content );
$template->content = $new_content;
}
return $template;
}
return $template;
},
$query_result

129
plugins/woocommerce-blocks/src/Templates/BlockTemplatesCompatibility.php
View File

@ -361,4 +361,133 @@ class BlockTemplatesCompatibility {
}
}
/**
* For compatibility reason, we need to wrap the Single Product template in a div with specific class.
* For more details, see https://github.com/woocommerce/woocommerce-blocks/issues/8314.
*
* @param string $template_content Template Content.
* @return string Wrapped template content inside a div.
*/
public static function wrap_single_product_template( $template_content ) {
$parsed_blocks = parse_blocks( $template_content );
$grouped_blocks = self::group_blocks( $parsed_blocks );
// WIP: The list of blocks is WIP.
$single_product_template_blocks = array( 'woocommerce/product-image-gallery', 'woocommerce/product-details', 'woocommerce/add-to-cart-form' );
$wrapped_blocks = array_map(
function( $blocks ) use ( $single_product_template_blocks ) {
if ( 'core/template-part' === $blocks[0]['blockName'] ) {
return $blocks;
}
$has_single_product_template_blocks = self::has_single_product_template_blocks( $blocks, $single_product_template_blocks );
if ( $has_single_product_template_blocks ) {
$wrapped_block = self::create_wrap_block_group( $blocks );
return array( $wrapped_block[0] );
}
return $blocks;
},
$grouped_blocks
);
$template = array_reduce(
$wrapped_blocks,
function( $carry, $item ) {
if ( is_array( $item ) ) {
return $carry . serialize_blocks( $item );
}
return $carry . serialize_block( $item );
},
''
);
return $template;
}
/**
* Wrap all the blocks inside the template in a group block.
*
* @param array $blocks Array of parsed block objects.
* @return array Group block with the blocks inside.
*/
private static function create_wrap_block_group( $blocks ) {
$serialized_blocks = serialize_blocks( $blocks );
$new_block = parse_blocks(
sprintf(
'<!-- wp:group {"className":"woocommerce product"} -->
<div class="wp-block-group woocommerce product">
%1$s
</div>
<!-- /wp:group -->',
$serialized_blocks
)
);
$new_block['innerBlocks'] = $blocks;
return $new_block;
}
/**
* Check if the Single Product template has a single product template block:
* woocommerce/product-gallery-image, woocommerce/product-details, woocommerce/add-to-cart-form]
*
* @param array $parsed_blocks Array of parsed block objects.
* @param array $single_product_template_blocks Array of single product template blocks.
* @return bool True if the template has a single product template block, false otherwise.
*/
private static function has_single_product_template_blocks( $parsed_blocks, $single_product_template_blocks ) {
$found = false;
foreach ( $parsed_blocks as $block ) {
if ( isset( $block['blockName'] ) && in_array( $block['blockName'], $single_product_template_blocks, true ) ) {
$found = true;
break;
}
$found = self::has_single_product_template_blocks( $block['innerBlocks'], $single_product_template_blocks );
if ( $found ) {
break;
}
}
return $found;
}
/**
* Group blocks in this way:
* B1 + TP1 + B2 + B3 + B4 + TP2 + B5
* (B = Block, TP = Template Part)
* becomes:
* [[B1], [TP1], [B2, B3, B4], [TP2], [B5]]
*
* @param array $parsed_blocks Array of parsed block objects.
* @return array Array of blocks grouped by template part.
*/
private static function group_blocks( $parsed_blocks ) {
return array_reduce(
$parsed_blocks,
function( $carry, $block ) {
if ( 'core/template-part' === $block['blockName'] ) {
array_push( $carry, array( $block ) );
return $carry;
}
if ( empty( $block['blockName'] ) ) {
return $carry;
}
$last_element_index = count( $carry ) - 1 < 0 ? 0 : count( $carry ) - 1;
if ( isset( $carry[ $last_element_index ][0]['blockName'] ) && 'core/template-part' !== $carry[ $last_element_index ][0]['blockName'] ) {
array_push( $carry[ $last_element_index ], $block );
return $carry;
}
array_push( $carry, array( $block ) );
return $carry;
},
array()
);
}
}

330
plugins/woocommerce-blocks/tests/php/Templates/BlockTemplatesCompatibilityTests.php Normal file
View File

@ -0,0 +1,330 @@
<?php
namespace Automattic\WooCommerce\Blocks\Tests\Templates;
use \WP_UnitTestCase;
use Automattic\WooCommerce\Blocks\Templates\BlockTemplatesCompatibility;
/**
* Tests the BlockTemplatesCompatibility class
*
*/
class BlockTemplatesCompatibilityTests extends WP_UnitTestCase {
/**
* Test that the default Single Product Template is not wrapped in a div.
*
*/
public function test_no_wrap_single_product_template_with_default_single_product_template() {
$default_single_product_template = '
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:woocommerce/legacy-template {"template":"single-product"} /-->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$expected_single_product_template = '
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:woocommerce/legacy-template {"template":"single-product"} /-->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$result = BlockTemplatesCompatibility::wrap_single_product_template( $default_single_product_template );
$result_without_withespace = preg_replace( '/\s+/', '', $result );
$expected_single_product_template_without_whitespace = preg_replace( '/\s+/', '', $expected_single_product_template );
$this->assertEquals( $result_without_withespace, $expected_single_product_template_without_whitespace, '' );
}
/**
* Test that the Single Product Template is wrapped in a div with the correct class if it contains a block related to the Single Product Template.
*/
public function test_wrap_single_product_template_if_contains_single_product_blocks() {
$default_single_product_template = '
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:woocommerce/product-image-gallery /-->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$expected_single_product_template = '
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:group {"className":"woocommerce product"} -->
<div class="wp-block-group woocommerce product">
<!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:woocommerce/product-image-gallery /-->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$result = BlockTemplatesCompatibility::wrap_single_product_template( $default_single_product_template );
$result_without_withespace = preg_replace( '/\s+/', '', $result );
$expected_single_product_template_without_whitespace = preg_replace( '/\s+/', '', $expected_single_product_template );
$this->assertEquals( $result_without_withespace, $expected_single_product_template_without_whitespace, '' );
}
/**
* Test that the Single Product Template is wrapped in a div with the correct class if it contains a block related to the Single Product Template in a nested structure.
*/
public function test_wrap_single_product_template_if_contains_nested_single_product_blocks() {
$default_single_product_template = '
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide">
<!-- wp:woocommerce/product-image-gallery /-->
</div>
<!-- /wp:group -->
<!-- wp:query {"queryId":2,"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query"} -->
<div class="wp-block-query">
<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
<!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
<!-- /wp:post-template -->
<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->
<!-- wp:query-no-results -->
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results -->
</div>
<!-- /wp:query -->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$expected_single_product_template = '
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:group {"className":"woocommerce product"} -->
<div class="wp-block-group woocommerce product">
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide">
<!-- wp:woocommerce/product-image-gallery /-->
</div>
<!-- /wp:group -->
<!-- wp:query {"queryId":2,"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query"} -->
<div class="wp-block-query">
<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
<!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
<!-- /wp:post-template -->
<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->
<!-- wp:query-no-results -->
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results -->
</div>
<!-- /wp:query -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$result = BlockTemplatesCompatibility::wrap_single_product_template( $default_single_product_template );
$result_without_withespace = preg_replace( '/\s+/', '', $result );
$expected_single_product_template_without_whitespace = preg_replace( '/\s+/', '', $expected_single_product_template );
$this->assertEquals( $result_without_withespace, $expected_single_product_template_without_whitespace, '' );
}
/**
* Test that the Single Product Template is wrapped in a div with the correct class if it contains a block related to the Single Product Template in a nested structure.
*/
public function test_wrap_single_product_template_without_a_main_wrapper() {
$default_single_product_template = '
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:woocommerce/product-image-gallery /-->
<!-- wp:query {"queryId":2,"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query"} -->
<div class="wp-block-query">
<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
<!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
<!-- /wp:post-template -->
<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->
<!-- wp:query-no-results -->
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results -->
</div>
<!-- /wp:query -->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$expected_single_product_template = '
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:group {"className":"woocommerce product"} -->
<div class="wp-block-group woocommerce product">
<!-- wp:woocommerce/product-image-gallery /-->
<!-- wp:query {"queryId":2,"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query"} -->
<div class="wp-block-query">
<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
<!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
<!-- /wp:post-template -->
<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->
<!-- wp:query-no-results -->
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results -->
</div>
<!-- /wp:query -->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$result = BlockTemplatesCompatibility::wrap_single_product_template( $default_single_product_template );
$result_without_withespace = preg_replace( '/\s+/', '', $result );
$expected_single_product_template_without_whitespace = preg_replace( '/\s+/', '', $expected_single_product_template );
$this->assertEquals( $result_without_withespace, $expected_single_product_template_without_whitespace, '' );
}
/**
* Test that the Single Product Template is wrapped in a div with the correct class if it contains a block related to the Single Product Template.
*/
public function test_wrap_single_product_template_with_multiple_header() {
$default_single_product_template = '
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:woocommerce/product-image-gallery /-->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$expected_single_product_template = '
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:group {"className":"woocommerce product"} -->
<div class="wp-block-group woocommerce product">
<!-- wp:woocommerce/product-image-gallery /-->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$result = BlockTemplatesCompatibility::wrap_single_product_template( $default_single_product_template );
$result_without_withespace = preg_replace( '/\s+/', '', $result );
$expected_single_product_template_without_whitespace = preg_replace( '/\s+/', '', $expected_single_product_template );
$this->assertEquals( $result_without_withespace, $expected_single_product_template_without_whitespace, '' );
}
/**
* Test that the Single Product Template is wrapped in a div with the correct class if it contains a block related to the Single Product Template.
*/
public function test_wrap_single_product_template_with_multiple_footer() {
$default_single_product_template = '
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:woocommerce/product-image-gallery /-->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$expected_single_product_template = '
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:group {"className":"woocommerce product"} -->
<div class="wp-block-group woocommerce product">
<!-- wp:woocommerce/product-image-gallery /-->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$result = BlockTemplatesCompatibility::wrap_single_product_template( $default_single_product_template );
$result_without_withespace = preg_replace( '/\s+/', '', $result );
$expected_single_product_template_without_whitespace = preg_replace( '/\s+/', '', $expected_single_product_template );
$this->assertEquals( $result_without_withespace, $expected_single_product_template_without_whitespace, '' );
}
/**
* Test that the Single Product Template is wrapped in a div with the correct class if it contains a block related to the Single Product Template.
*/
public function test_wrap_single_product_template_with_multiple_blocks_related_to_the_single_product_template() {
$default_single_product_template = '
<!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph -->
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:woocommerce/product-image-gallery /-->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->
<!-- wp:woocommerce/product-image-gallery /-->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$expected_single_product_template = '
<!-- wp:paragraph -->
<p>test</p>
<!-- /wp:paragraph -->
<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
<!-- wp:group {"className":"woocommerce product"} -->
<div class="wp-block-group woocommerce product">
<!-- wp:woocommerce/product-image-gallery /-->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->
<!-- wp:group {"className":"woocommerce product"} -->
<div class="wp-block-group woocommerce product">
<!-- wp:woocommerce/product-image-gallery /-->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->';
$result = BlockTemplatesCompatibility::wrap_single_product_template( $default_single_product_template );
$result_without_withespace = preg_replace( '/\s+/', '', $result );
$expected_single_product_template_without_whitespace = preg_replace( '/\s+/', '', $expected_single_product_template );
$this->assertEquals( $result_without_withespace, $expected_single_product_template_without_whitespace, '' );
}
}