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

Product Image block: show the setting to control the imageSizing attribute and add the attribute to the `Product Catalog` and `Product Search Results` templates (#44691) 

* add imageSizing attribute to the product catalog template

* add attribute for the product search results template

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Luigi Teschio 2024-02-20 10:50:42 +01:00 committed by GitHub
parent 879cfaec46
commit 5fe5aef5a0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 44 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/edit.tsx
View File

@ -125,42 +125,44 @@ const Edit = ( {
/>
</ToggleGroupControl>
) }
{ ! isBlockThemeEnabled && (
<ToggleGroupControl
label={ __( 'Image Sizing', 'woocommerce' ) }
help={ createInterpolateElement(
__(
'Product image cropping can be modified in the <a>Customizer</a>.',
'woocommerce'
),
{
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href={ `${ getAdminLink(
'customize.php'
) }?autofocus[panel]=woocommerce&autofocus[section]=woocommerce_product_images` }
target="_blank"
rel="noopener noreferrer"
/>
),
}
) }
value={ imageSizing }
onChange={ ( value: ImageSizing ) =>
setAttributes( { imageSizing: value } )
}
>
<ToggleGroupControlOption
value={ ImageSizing.SINGLE }
label={ __( 'Full Size', 'woocommerce' ) }
/>
<ToggleGroupControlOption
value={ ImageSizing.THUMBNAIL }
label={ __( 'Cropped', 'woocommerce' ) }
/>
</ToggleGroupControl>
) }
<ToggleGroupControl
label={ __( 'Image Sizing', 'woocommerce' ) }
help={
! isBlockThemeEnabled
? createInterpolateElement(
__(
'Product image cropping can be modified in the <a>Customizer</a>.',
'woocommerce'
),
{
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href={ `${ getAdminLink(
'customize.php'
) }?autofocus[panel]=woocommerce&autofocus[section]=woocommerce_product_images` }
target="_blank"
rel="noopener noreferrer"
/>
),
}
)
: null
}
value={ imageSizing }
onChange={ ( value: ImageSizing ) =>
setAttributes( { imageSizing: value } )
}
>
<ToggleGroupControlOption
value={ ImageSizing.SINGLE }
label={ __( 'Full Size', 'woocommerce' ) }
/>
<ToggleGroupControlOption
value={ ImageSizing.THUMBNAIL }
label={ __( 'Cropped', 'woocommerce' ) }
/>
</ToggleGroupControl>
</PanelBody>
</InspectorControls>
<Disabled>

4
plugins/woocommerce/changelog/44691-44689-products-beta-product-collection-blocks-add-an-option-to-scale-all-of-my-product-images-to-have-them-in-a-grid-with-same-size-images Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: fix
Product Image block: show the setting to control the imageSizing attribute and add the attribute to the Product Catalog and Product Search Results templates.

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

@ -19,7 +19,7 @@
<!-- wp:query {"queryId":0,"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"} -->
<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true, "imageSizing":"thumbnail"} /-->
<!-- 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"}}}} /-->
<!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->

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

@ -17,7 +17,7 @@
<!-- wp:query {"queryId":0,"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"} -->
<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true, "imageSizing":"thumbnail"} /-->
<!-- 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"}}}} /-->
<!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->