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

Products Block: fix grid view with Gutenberg 16 (https://github.com/woocommerce/woocommerce-blocks/pull/9916) 

* Revert "fix products block layout on gutenberg 16 (https://github.com/woocommerce/woocommerce-blocks/pull/9886)"

This reverts commit 53665a5bde.

* add post_template_has_support_for_grid_view setting
This commit is contained in:
Luigi Teschio 2023-06-20 16:12:30 +02:00 committed by Luigi
parent 50998bc9fa
commit eb24313fb0
14 changed files with 69 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
plugins/woocommerce-blocks/assets/js/blocks/product-query/constants.ts
View File

@ -1,10 +1,10 @@
/**
* External dependencies
*/
import { getSetting } from '@woocommerce/settings';
import { getSetting, getSettingWithCoercion } from '@woocommerce/settings';
import { objectOmit } from '@woocommerce/utils';
import type { InnerBlockTemplate } from '@wordpress/blocks';
import { isBoolean } from '@woocommerce/types';
/**
* Internal dependencies
*/
@ -69,19 +69,25 @@ export const QUERY_DEFAULT_ATTRIBUTES: QueryBlockAttributes = {
},
};
// This is necessary to fix https://github.com/woocommerce/woocommerce-blocks/issues/9884.
const postTemplateHasSupportForGridView = getSettingWithCoercion(
'post_template_has_support_for_grid_view',
false,
isBoolean
);
export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
[
'core/post-template',
{
__woocommerceNamespace: PRODUCT_TEMPLATE_ID,
layout: {
type: 'grid',
columnsCount: 3,
},
/**
* This class is used to add default styles for inner blocks.
*/
className: 'products-block-post-template',
...( postTemplateHasSupportForGridView && {
layout: { type: 'grid', columnCount: 3 },
} ),
},
[
[

15
plugins/woocommerce-blocks/assets/js/blocks/product-query/variations/related-products.tsx
View File

@ -6,6 +6,8 @@ import { Icon } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { stacks } from '@woocommerce/icons';
import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
import { getSettingWithCoercion } from '@woocommerce/settings';
import { isBoolean } from '@woocommerce/types';
/**
* Internal dependencies
@ -43,6 +45,12 @@ export const BLOCK_ATTRIBUTES = {
},
};
const postTemplateHasSupportForGridView = getSettingWithCoercion(
'post_template_has_support_for_grid_view',
false,
isBoolean
);
export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
[
'core/heading',
@ -55,10 +63,9 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
'core/post-template',
{
__woocommerceNamespace: PRODUCT_TEMPLATE_ID,
layout: {
type: 'grid',
columnsCount: 3,
},
...( postTemplateHasSupportForGridView && {
layout: { type: 'grid', columnCount: 3 },
} ),
},
[
[

2
plugins/woocommerce-blocks/docs/internal-developers/testing/smoke-testing.md
View File

@ -174,7 +174,7 @@ Note: some blocks might fail to render because they are based on products having
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:query {"queryId":0,"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","layout":{"type":"grid","columnCount":3}} -->
<div class="wp-block-query"><!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}}} /-->
<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->

2
plugins/woocommerce-blocks/patterns/featured-products-5-cols.php
View File

@ -14,7 +14,7 @@
<!-- wp:query {"queryId":2,"query":{"perPage":"5","pages":0,"offset":0,"postType":"product","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","onbackorder"]},"displayLayout":{"type":"flex","columns":5},"namespace":"woocommerce/product-query","align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-query alignwide">
<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template", "layout":{"type":"grid","columnCount":3}} -->
<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:cover {"useFeaturedImage":true,"dimRatio":0,"minHeight":190,"minHeightUnit":"px","contentPosition":"top right","isDark":false,"align":"right","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-cover alignright is-light has-custom-content-position is-position-top-right" style="margin-bottom:var(--wp--preset--spacing--40);min-height:190px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>

2
plugins/woocommerce-blocks/patterns/product-collections-featured-collection.php
View File

@ -23,7 +23,7 @@
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%">
<!-- wp:query {"queryId":5,"query":{"perPage":"3","pages":0,"offset":0,"postType":"product","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query"} -->
<div class="wp-block-query">
<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0"},"color":{"background":"#484848"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"4px","bottomRight":"4px"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->

2
plugins/woocommerce-blocks/patterns/product-collections-newest-arrivals.php
View File

@ -31,7 +31,7 @@
<div class="wp-block-group alignfull">
<!-- wp:query {"query":{"perPage":"4","pages":0,"offset":0,"postType":"product","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","onbackorder"]},"displayLayout":{"type":"flex","columns":4},"namespace":"woocommerce/product-query"} -->
<div class="wp-block-query">
<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:group {"style":{"border":{"radius":"4px","top":{"color":"#dddddd","style":"solid","width":"1px"},"right":{"color":"#dddddd","style":"solid","width":"1px"},"bottom":{"color":"#dddddd","style":"solid","width":"1px"},"left":{"color":"#dddddd","style":"solid","width":"1px"}},"spacing":{"padding":{"right":"20px","bottom":"10px","left":"20px","top":"20px"}}},"textColor":"contrast","layout":{"type":"flex","orientation":"vertical","verticalAlignment":"center","justifyContent":"center"}} -->
<div class="wp-block-group has-contrast-color has-text-color" style="border-radius:4px;border-top-color:#dddddd;border-top-style:solid;border-top-width:1px;border-right-color:#dddddd;border-right-style:solid;border-right-width:1px;border-bottom-color:#dddddd;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#dddddd;border-left-style:solid;border-left-width:1px;padding-top:20px;padding-right:20px;padding-bottom:10px;padding-left:20px">

2
plugins/woocommerce-blocks/patterns/product-featured-2-columns.php
View File

@ -12,7 +12,7 @@
<div class="wp-block-column" style="flex-basis:66.66%">
<!-- wp:query {"queryId":7,"query":{"perPage":"4","pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","onbackorder"]},"displayLayout":{"type":"flex","columns":2},"namespace":"woocommerce/product-query"} -->
<div class="wp-block-query">
<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true,"style":{"spacing":{"margin":{"bottom":"24px","top":"0"}}}} /-->
<!-- wp:columns {"verticalAlignment":"bottom"} -->

32
plugins/woocommerce-blocks/src/BlockTypes/ProductQuery.php
View File

@ -75,6 +75,38 @@ class ProductQuery extends AbstractBlock {
add_filter( 'rest_product_collection_params', array( $this, 'extend_rest_query_allowed_params' ), 10, 1 );
}
/**
* Extra data passed through from server to client for block.
*
* @param array $attributes Any attributes that currently are available from the block.
* Note, this will be empty in the editor context when the block is
* not in the post content on editor load.
*/
protected function enqueue_data( array $attributes = [] ) {
parent::enqueue_data( $attributes );
$gutenberg_version = '';
if ( is_plugin_active( 'gutenberg/gutenberg.php' ) ) {
if ( defined( 'GUTENBERG_VERSION' ) ) {
$gutenberg_version = GUTENBERG_VERSION;
}
if ( ! $gutenberg_version ) {
$gutenberg_data = get_file_data(
WP_PLUGIN_DIR . '/gutenberg/gutenberg.php',
array( 'Version' => 'Version' )
);
$gutenberg_version = $gutenberg_data['Version'];
}
}
$this->asset_data_registry->add(
'post_template_has_support_for_grid_view',
version_compare( $gutenberg_version, '16.0', '>=' )
);
}
/**
* Check if a given block
*

2
plugins/woocommerce-blocks/templates/templates/blockified/archive-product.html
View File

@ -18,7 +18,7 @@
<!-- /wp:group -->
<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":true,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query","align":"wide"} -->
<div class="wp-block-query alignwide">
<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","isLink":true,"__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->

2
plugins/woocommerce-blocks/templates/templates/blockified/product-search-results.html
View File

@ -16,7 +16,7 @@
<!-- /wp:group -->
<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":true,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query","align":"wide"} -->
<div class="wp-block-query alignwide">
<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","isLink":true,"__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->

2
plugins/woocommerce-blocks/templates/templates/blockified/single-product.html
View File

@ -53,7 +53,7 @@
<h2 class="wp-block-heading">Related products</h2>
<!-- /wp:heading -->
<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:post-template {"className":"products-block-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"} /-->

4
plugins/woocommerce-blocks/templates/templates/blockified/taxonomy-product_attribute.html
View File

@ -18,7 +18,7 @@
<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":true,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query","align":"wide"} -->
<div class="wp-block-query alignwide">
<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
@ -46,4 +46,4 @@
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->
<!-- wp:template-part {"slug":"footer"} /-->

4
plugins/woocommerce-blocks/templates/templates/blockified/taxonomy-product_cat.html
View File

@ -18,7 +18,7 @@
<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":true,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query","align":"wide"} -->
<div class="wp-block-query alignwide">
<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
@ -46,4 +46,4 @@
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->
<!-- wp:template-part {"slug":"footer"} /-->

4
plugins/woocommerce-blocks/templates/templates/blockified/taxonomy-product_tag.html
View File

@ -18,7 +18,7 @@
<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":true,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query","align":"wide"} -->
<div class="wp-block-query alignwide">
<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
@ -43,4 +43,4 @@
<!-- /wp:query-no-results -->
</div>
<!-- /wp:query -->
</div>
</div>