Commit 8f5a1b8fc1 for woocommerce
commit 8f5a1b8fc1eb18c93eeb6bdfc3675dcaf7fda777
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Tue Nov 4 13:59:03 2025 +0100
Call Product Gallery block stable (#61274)
* Remove temporary patch code
* Call the block stable
* Update tests
* Update block references
* Add changelog
* Update block references
* Update remaining tests
diff --git a/docs/block-development/reference/block-references.md b/docs/block-development/reference/block-references.md
index 92ebcf8d7c..1847670a58 100644
--- a/docs/block-development/reference/block-references.md
+++ b/docs/block-development/reference/block-references.md
@@ -28,7 +28,7 @@ Display a call to action button which either adds the product to the cart, or li
- **Category:** woocommerce-product-elements
- **Ancestor:** woocommerce/all-products, woocommerce/single-product, core/post-template, woocommerce/product-template
- **Parent:**
-- **Supports:** align (full, wide), color (background, text, ~~link~~), interactivity, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), color (background, text, ~~link~~), email, interactivity, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, productId, textAlign, width
## Product Image - woocommerce/product-image
@@ -39,7 +39,7 @@ Display the main product image.
- **Category:** woocommerce-product-elements
- **Ancestor:** woocommerce/all-products, woocommerce/single-product, woocommerce/product-template, core/post-template
- **Parent:**
-- **Supports:** dimensions (aspectRatio), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize), ~~html~~
+- **Supports:** dimensions (aspectRatio), email, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize), ~~html~~
- **Attributes:** aspectRatio, height, imageSizing, isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, productId, saleBadgeAlign, scale, showProductLink, showSaleBadge, width
## Product Price - woocommerce/product-price
@@ -48,9 +48,9 @@ Display the price of a product.
- **Name:** woocommerce/product-price
- **Category:** woocommerce-product-elements
-- **Ancestor:** woocommerce/all-products, woocommerce/single-product, woocommerce/product-template, core/post-template
+- **Ancestor:** woocommerce/all-products, woocommerce/featured-product, woocommerce/single-product, woocommerce/product-template, core/post-template
- **Parent:**
-- **Supports:** color (background, text, ~~link~~), interactivity, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, text, ~~link~~), email, interactivity, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId, textAlign
## Product Image Gallery - woocommerce/product-image-gallery
@@ -127,7 +127,7 @@ Displays an on-sale badge if the product is on-sale.
- **Category:** woocommerce-product-elements
- **Ancestor:** woocommerce/single-product, woocommerce/product-template, core/post-template, woocommerce/product-gallery
- **Parent:**
-- **Supports:** align, color (background, gradients, text, ~~link~~), interactivity (clientNavigation), spacing (margin), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align, color (background, gradients, text, ~~link~~), email, interactivity (clientNavigation), spacing (margin), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId
## Product SKU - woocommerce/product-sku
@@ -150,7 +150,7 @@ Let shoppers know when products are out of stock or on backorder. This block is
- **Ancestor:** woocommerce/all-products, woocommerce/single-product, woocommerce/product-template, core/post-template
- **Parent:**
- **Supports:** color (background, text), interactivity, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
-- **Attributes:** isDescendantOfAllProducts, isDescendentOfQueryLoop
+- **Attributes:** isDescendantOfAllProducts
## Product Summary - woocommerce/product-summary
@@ -158,7 +158,7 @@ Display a short description about a product.
- **Name:** woocommerce/product-summary
- **Category:** woocommerce-product-elements
-- **Ancestor:** woocommerce/all-products, woocommerce/single-product, woocommerce/product-template, core/post-template
+- **Ancestor:** woocommerce/all-products, woocommerce/featured-product, woocommerce/single-product, woocommerce/product-template, core/post-template
- **Parent:**
- **Supports:** color (background, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight, textAlign)
- **Attributes:** isDescendantOfAllProducts, isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, linkText, productId, showDescriptionIfEmpty, showLink, summaryLength
@@ -402,7 +402,7 @@ Shows the Cross-Sells products.
- **Category:** woocommerce
- **Ancestor:**
- **Parent:** woocommerce/cart-cross-sells-block
-- **Supports:** ~~align~~, ~~html~~, ~~inserter~~, ~~lock~~, ~~multiple~~, ~~reusable~~
+- **Supports:** email, ~~align~~, ~~html~~, ~~inserter~~, ~~lock~~, ~~multiple~~, ~~reusable~~
- **Attributes:** columns, lock
## Express Checkout - woocommerce/cart-express-payment-block
@@ -603,6 +603,28 @@ Enable customers to change the sorting order of the products.
- **Supports:** color (text, ~~background~~), interactivity (clientNavigation), typography (fontSize)
- **Attributes:** fontSize, useLabel
+## Product Category Description - woocommerce/category-description
+
+Displays the current category description.
+
+- **Name:** woocommerce/category-description
+- **Category:** woocommerce
+- **Ancestor:**
+- **Parent:**
+- **Supports:** color (background, text), spacing (margin, padding), typography, ~~align~~, ~~html~~
+- **Attributes:** textAlign
+
+## Product Category Title - woocommerce/category-title
+
+Displays the current category title and lets permitted users edit it.
+
+- **Name:** woocommerce/category-title
+- **Category:** woocommerce
+- **Ancestor:**
+- **Parent:**
+- **Supports:** color (background, text), spacing (margin, padding), typography, ~~align~~, ~~html~~
+- **Attributes:** isLink, level, linkTarget, rel, textAlign
+
## Checkout - woocommerce/checkout
Display a checkout form so your customers can submit orders.
@@ -919,8 +941,8 @@ Visually highlight a product category and encourage prompt action.
- **Category:** woocommerce
- **Ancestor:**
- **Parent:**
-- **Supports:** align (full, wide), ariaLabel, color (background, text), interactivity (clientNavigation), spacing (padding), ~~html~~
-- **Attributes:** alt, categoryId, contentAlign, dimRatio, editMode, focalPoint, hasParallax, imageFit, isRepeated, linkText, mediaId, mediaSrc, minHeight, overlayColor, overlayGradient, previewCategory, showDesc
+- **Supports:** align (full, wide), ariaLabel, color (background, text), filter (duotone), interactivity (clientNavigation), spacing (padding), ~~html~~
+- **Attributes:** alt, categoryId, contentAlign, dimRatio, focalPoint, hasParallax, imageFit, isRepeated, linkText, mediaId, mediaSrc, minHeight, overlayColor, overlayGradient, previewCategory
## Featured Product - woocommerce/featured-product
@@ -930,8 +952,8 @@ Highlight a product or variation.
- **Category:** woocommerce
- **Ancestor:**
- **Parent:**
-- **Supports:** align (full, wide), ariaLabel, color (background, text), interactivity (clientNavigation), multiple, spacing (padding), ~~html~~
-- **Attributes:** alt, contentAlign, dimRatio, editMode, focalPoint, hasParallax, imageFit, isRepeated, linkText, mediaId, mediaSrc, minHeight, overlayColor, overlayGradient, previewProduct, productId, showDesc, showPrice
+- **Supports:** align (full, wide), ariaLabel, color (background, text), filter (duotone), interactivity (clientNavigation), multiple, spacing (padding), ~~html~~
+- **Attributes:** alt, contentAlign, dimRatio, focalPoint, hasParallax, imageFit, isRepeated, linkText, mediaId, mediaSrc, minHeight, overlayColor, overlayGradient, previewProduct, productId
## Filter Block - woocommerce/filter-wrapper
@@ -1337,7 +1359,7 @@ Display a collection of products from your store.
- **Category:** woocommerce
- **Ancestor:**
- **Parent:**
-- **Supports:** align (full, wide), anchor, interactivity, ~~html~~
+- **Supports:** align (full, wide), anchor, email, interactivity, ~~html~~
- **Attributes:** __privatePreviewState, collection, convertedFromProducts, dimensions, displayLayout, forcePageReload, hideControls, query, queryContextIncludes, queryId, tagName
## No results - woocommerce/product-collection-no-results
@@ -1348,7 +1370,7 @@ The contents of this block will display when there are no products found.
- **Category:** woocommerce
- **Ancestor:** woocommerce/product-collection
- **Parent:**
-- **Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** align, color (background, gradients, link, text), email, interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:**
## Product Description - woocommerce/product-description
@@ -1516,7 +1538,7 @@ Enable customers to filter the product collection by selecting one or more taxon
- **Supports:** color (text, ~~background~~), interactivity, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
- **Attributes:** displayStyle, hideEmpty, isPreview, showCounts, sortOrder, taxonomy
-## Product Gallery (Beta) - woocommerce/product-gallery
+## Product Gallery - woocommerce/product-gallery
Showcase your products relevant images and media.
@@ -1524,7 +1546,7 @@ Showcase your products relevant images and media.
- **Category:** woocommerce
- **Ancestor:** woocommerce/single-product
- **Parent:**
-- **Supports:** align, interactivity, layout (allowEditing, allowOrientation, default, ~~allowJustification~~)
+- **Supports:** align, email, interactivity, layout (allowEditing, allowOrientation, default, ~~allowJustification~~)
- **Attributes:** fullScreenOnClick, hoverZoom
## Large Image - woocommerce/product-gallery-large-image
@@ -1744,7 +1766,7 @@ Contains the block elements used to render a product.
- **Category:** woocommerce
- **Ancestor:**
- **Parent:**
-- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), interactivity, layout (~~allowEditing~~, ~~allowInheriting~~, ~~allowSizingOnChildren~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~, ~~reusable~~
+- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), email, interactivity, layout (~~allowEditing~~, ~~allowInheriting~~, ~~allowSizingOnChildren~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~, ~~reusable~~
- **Attributes:**
## Top Rated Products - woocommerce/product-top-rated
diff --git a/plugins/woocommerce/changelog/add-call-product-gallery-stable b/plugins/woocommerce/changelog/add-call-product-gallery-stable
new file mode 100644
index 0000000000..135cb2f9ff
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-call-product-gallery-stable
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Product Gallery: mark block stable
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block.json
index 4015fc025f..a256065674 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/block.json
@@ -2,7 +2,7 @@
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "woocommerce/product-gallery",
- "title": "Product Gallery (Beta)",
+ "title": "Product Gallery",
"description": "Showcase your products relevant images and media.",
"category": "woocommerce",
"keywords": [ "WooCommerce" ],
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
index 1eda1af1e3..8f9bb5b535 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss
@@ -73,23 +73,6 @@ $dialog-padding: 20px;
}
}
- /**
- * ============================================================
- * START TEMPORARY BACKWARDS COMPATIBILITY CODE - TO BE REMOVED
- * ============================================================
- */
- :where(.wc-block-woocommerce-product-gallery-large-image__image--legacy) {
- margin: 0 auto;
- aspect-ratio: 1 / 1;
- object-fit: contain;
- width: 100%;
- }
- /**
- * ==========================================================
- * END TEMPORARY BACKWARDS COMPATIBILITY CODE - TO BE REMOVED
- * ==========================================================
- */
-
:where(.wc-block-product-gallery-large-image__inner-blocks) {
display: flex;
flex-direction: column;
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts
index c88739ba28..0628c0bbcb 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts
@@ -999,7 +999,7 @@ test.describe( 'Add to Cart + Options Block', () => {
await editor.selectBlocks( addToCartFormBlock );
await expect(
- editor.canvas.getByLabel( 'Block: Product Gallery (Beta)' )
+ editor.canvas.getByLabel( 'Block: Product Gallery' )
).toBeHidden();
await page
@@ -1009,7 +1009,7 @@ test.describe( 'Add to Cart + Options Block', () => {
.click();
await expect(
- editor.canvas.getByLabel( 'Block: Product Gallery (Beta)' )
+ editor.canvas.getByLabel( 'Block: Product Gallery' )
).toBeVisible();
} );
} );
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts
index e2602dfed7..9f6d4b734a 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts
@@ -11,7 +11,7 @@ import { ProductGalleryPage } from './product-gallery.page';
const blockData = {
name: 'woocommerce/product-gallery',
- title: 'Product Gallery (Beta)',
+ title: 'Product Gallery',
slug: 'single-product',
productPage: '/product/hoodie/',
};
@@ -396,7 +396,7 @@ test.describe( `${ blockData.name }`, () => {
.click();
const productGalleryBlock = editor.canvas.getByLabel(
- 'Block: Product Gallery (Beta)'
+ 'Block: Product Gallery'
);
await expect( productGalleryBlock ).toBeVisible();
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-image-gallery/product-image-gallery.block_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-image-gallery/product-image-gallery.block_theme.spec.ts
index e4e28b47e3..8faccee465 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-image-gallery/product-image-gallery.block_theme.spec.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-image-gallery/product-image-gallery.block_theme.spec.ts
@@ -113,7 +113,7 @@ test.describe( `${ blockData.name } editor`, () => {
await editor.selectBlocks( productImageGalleryBlock );
await expect(
- editor.canvas.getByLabel( 'Block: Product Gallery (Beta)' )
+ editor.canvas.getByLabel( 'Block: Product Gallery' )
).toBeHidden();
await page
@@ -123,7 +123,7 @@ test.describe( `${ blockData.name } editor`, () => {
.click();
await expect(
- editor.canvas.getByLabel( 'Block: Product Gallery (Beta)' )
+ editor.canvas.getByLabel( 'Block: Product Gallery' )
).toBeVisible();
} );
} );
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryLargeImage.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryLargeImage.php
index 788e592134..6b8d943170 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryLargeImage.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryLargeImage.php
@@ -82,36 +82,6 @@ class ProductGalleryLargeImage extends AbstractBlock {
$images_html = '';
$inner_blocks_html = '';
- /**
- * ============================================================
- * START TEMPORARY BACKWARDS COMPATIBILITY CODE - TO BE REMOVED
- * ============================================================
- * In case Product Gallery Large Image is still used in a
- * "standalone" way, with no Product Image block inside,
- * we need to render the images manually the "old way".
- *
- * Includes legacy_get_main_images_html method.
- */
-
- $has_product_image_block = ! empty(
- array_filter(
- iterator_to_array( $block->inner_blocks ),
- function ( $inner_block ) {
- return 'woocommerce/product-image' === $inner_block->name;
- }
- )
- );
-
- if ( ! $has_product_image_block ) {
- $images_html = $this->legacy_get_main_images_html( $block->context, $product );
- }
-
- /**
- * ==========================================================
- * END TEMPORARY BACKWARDS COMPATIBILITY CODE - TO BE REMOVED
- * ==========================================================
- */
-
foreach ( $block->inner_blocks as $inner_block ) {
if ( 'woocommerce/product-image' === $inner_block->name ) {
// Product Image requires special handling because we need to render it once for each image.
@@ -262,67 +232,6 @@ class ProductGalleryLargeImage extends AbstractBlock {
return wp_interactivity_process_directives( $template );
}
- /**
- * Get the main images html code. The first element of the array contains the HTML of the first image that is visible, the second element contains the HTML of the other images that are hidden.
- *
- * @param array $context The block context.
- * @param \WC_Product $product The product object.
- *
- * @return array
- */
- private function legacy_get_main_images_html( $context, $product ) {
- $image_data = ProductGalleryUtils::get_product_gallery_image_data( $product, 'woocommerce_single' );
- $base_classes = 'wc-block-woocommerce-product-gallery-large-image__image wc-block-woocommerce-product-gallery-large-image__image--legacy';
-
- if ( ! empty( $context['fullScreenOnClick'] ) ) {
- $base_classes .= ' wc-block-woocommerce-product-gallery-large-image__image--full-screen-on-click';
- }
- if ( ! empty( $context['hoverZoom'] ) ) {
- $base_classes .= ' wc-block-woocommerce-product-gallery-large-image__image--hoverZoom';
- }
-
- ob_start();
- ?>
- <ul
- class="wc-block-product-gallery-large-image__container"
- aria-roledescription="carousel"
- >
- <?php foreach ( $image_data as $index => $image ) : ?>
- <li class="wc-block-product-gallery-large-image__wrapper">
- <img
- class="<?php echo esc_attr( $base_classes ); ?>"
- src="<?php echo esc_attr( $image['src'] ); ?>"
- srcset="<?php echo esc_attr( $image['srcset'] ); ?>"
- sizes="<?php echo esc_attr( $image['sizes'] ); ?>"
- data-image-id="<?php echo esc_attr( $image['id'] ); ?>"
- alt="<?php echo esc_attr( $image['alt'] ); ?>"
- data-wp-on--touchstart="actions.onTouchStart"
- data-wp-on--touchmove="actions.onTouchMove"
- data-wp-on--touchend="actions.onTouchEnd"
- <?php if ( $context['hoverZoom'] ) : ?>
- data-wp-on--mousemove="actions.startZoom"
- data-wp-on--mouseleave="actions.resetZoom"
- <?php endif; ?>
- <?php if ( $context['fullScreenOnClick'] ) : ?>
- data-wp-on--click="actions.openDialog"
- <?php endif; ?>
- <?php if ( 0 === $index ) : ?>
- fetchpriority="high"
- <?php else : ?>
- fetchpriority="low"
- loading="lazy"
- <?php endif; ?>
- tabindex="-1"
- draggable="false"
- />
- </li>
- <?php endforeach; ?>
- </ul>
- <?php
- $template = ob_get_clean();
- return wp_interactivity_process_directives( $template );
- }
-
/**
* Disable the editor style handle for this block type.
*