Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Product Image Gallery: Reintroduce filters and override-restore the global product variable. #9630

Merged
merged 2 commits into from
Jun 2, 2023

Conversation

nefeline
Copy link
Contributor

@nefeline nefeline commented May 29, 2023

Fixes #9618

  • Reintroduce the 'woocommerce_single_product_image_gallery_classes', 'woocommerce_single_product_image_thumbnail_html', 'woocommerce_sale_flash' and 'woocommerce_product_thumbnails_columns' filters to the Product Image Gallery block (originally removed on Product Gallery Block > Remove global variable overwrite and keep support for the Single Product Block. #9475).
  • Adopt the approach of overriding and restoring the global variable while relying on native template functions. This is a short-term implementation until we figure out a clear upgrade/transition path for code using those filters.

Internal discussion ref. p1685275379858039-slack-C02UBB1EPEF

Testing

User Facing Testing

  1. While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard, and on the sidebar, click on "Appearance > Editor".
  2. Select the Single Product template to customize it and click on edit.
  3. If you are still using the Classic template, click on the button to transform it to the blockifyed version.
  4. Make sure the Product Image Gallery block is available for usage on the inserter (you can remove/add the block from the template), add it, and save.
  5. On the frontend, ensure the gallery works as expected, and the thumbnails can be selected.

Hooks Testing

Add the following by the end of your woocommerce-gutenberg-products-block.php file:

add_filter( 'woocommerce_sale_flash', function () {
	return "<div>Sale!!!!!!</div>";
} );

add_filter( 'woocommerce_single_product_image_gallery_classes', function ( $wrapper_classes ) {
	$wrapper_classes[] = 'my-custom-class';

	return $wrapper_classes;
} );

add_filter( 'woocommerce_single_product_image_thumbnail_html', function ( $html ) {
	return $html . '<div>Thumbnail</div>';
} );

add_filter( 'woocommerce_product_thumbnails_columns', function () {
	return 1;
} );
  1. Access a single product with an Image Gallery (including thumbnails: if you are using the default Woo dummy products, this can be tested with the "Logo Collection" product).
  2. Ensure the "Sale!!!!!!" text is visible on the front-end.
  3. Open the browser dev tools and search for the appended my-custom-class: make sure it is in place as one of the available product gallery classes.
  4. While still on dev tools, search for the 'woocommerce-product-gallery--columns-1' class and make sure it exists (the number attached to this class corresponds to the number of columns modified via woocommerce_product_thumbnails_columns filter).
  5. Now click on the thumbnails below the main image: make sure you can read the appended "Thumbnail" div for all of them.
Screenshot 2023-05-29 at 11 24 11

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Product Image Gallery Block: Reintroduce filters and override-restore the global product variable.

@woocommercebot woocommercebot requested review from a team and imanish003 and removed request for a team May 29, 2023 08:56
@nefeline nefeline requested a review from nerrad May 29, 2023 08:56
@github-actions
Copy link
Contributor

github-actions bot commented May 29, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9630.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
reviews-frontend.js wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
cart-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
checkout-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
filter-wrapper-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning ⚠️
mini-cart-frontend.js wc-price-format, wp-i18n, wp-polyfill ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 474
  • Total errors: 2264

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@nefeline nefeline self-assigned this May 29, 2023
@nefeline nefeline added the block: product image gallery Issues related to the Product Image Gallery block. label May 29, 2023
@github-actions
Copy link
Contributor

Size Change: 0 B

Total Size: 1.09 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.57 kB
build/active-filters-wrapper-frontend.js 7.62 kB
build/active-filters.js 7.48 kB
build/all-products-frontend.js 11.9 kB
build/all-products.js 39.9 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 4.05 kB
build/attribute-filter-wrapper-frontend.js 4.29 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 35.2 kB
build/breadcrumbs.js 2.04 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.94 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.71 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.5 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 656 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 333 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/cart-frontend.js 29.8 kB
build/cart.js 45.1 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 332 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.69 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/payment-frontend.js 8.29 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 6.4 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 361 B
build/checkout-frontend.js 31.9 kB
build/checkout.js 46.4 kB
build/customer-account.js 3.18 kB
build/featured-category.js 15 kB
build/featured-product.js 15.2 kB
build/filter-wrapper-frontend.js 14.2 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8 kB
build/legacy-template.js 6.38 kB
build/mini-cart-component-frontend.js 28.4 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.74 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.74 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 4.1 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 594 B
build/mini-cart-contents-block/shopping-button-frontend.js 528 B
build/mini-cart-contents-block/title-frontend.js 1.91 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.61 kB
build/mini-cart-contents-block/title-label-frontend.js 1.54 kB
build/mini-cart-contents.js 18 kB
build/mini-cart-frontend.js 2.66 kB
build/mini-cart.js 4.35 kB
build/price-filter-wrapper-frontend.js 6.75 kB
build/price-filter.js 8.47 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 251 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.51 kB
build/product-add-to-cart.js 8.87 kB
build/product-best-sellers.js 8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 964 B
build/product-button-frontend.js 2.65 kB
build/product-button.js 4.01 kB
build/product-categories.js 2.37 kB
build/product-category.js 9.35 kB
build/product-collection.js 4.22 kB
build/product-image-frontend.js 2.63 kB
build/product-image.js 4.18 kB
build/product-new.js 8.64 kB
build/product-on-sale.js 8.67 kB
build/product-price-frontend.js 203 B
build/product-price.js 1.68 kB
build/product-query.js 11.7 kB
build/product-rating-frontend.js 2.28 kB
build/product-rating.js 971 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge.js 666 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.84 kB
build/product-sku.js 536 B
build/product-stock-indicator-frontend.js 2.02 kB
build/product-stock-indicator.js 732 B
build/product-summary-frontend.js 2.19 kB
build/product-summary.js 904 B
build/product-tag.js 8.97 kB
build/product-template.js 3.26 kB
build/product-title-frontend.js 2.22 kB
build/product-title.js 3.69 kB
build/product-top-rated.js 8.9 kB
build/products-by-attribute.js 9.7 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.21 kB
build/rating-filter.js 6.89 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.2 kB
build/reviews-frontend.js 7.11 kB
build/single-product.js 11.1 kB
build/stock-filter-wrapper-frontend.js 2.98 kB
build/stock-filter.js 7.61 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.21 kB
build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js 5.11 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.5 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.26 kB
build/vendors--rating-filter-wrapper-frontend.js 5.1 kB
build/wc-blocks-data.js 22.5 kB
build/wc-blocks-editor-style-rtl.css 5.96 kB
build/wc-blocks-editor-style.css 5.96 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 27.8 kB
build/wc-blocks-style.css 27.8 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 65 kB
build/wc-blocks.js 3.7 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 30.3 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@gigitux gigitux added the status: blocker Used on issues or pulls that block work from being released. label May 31, 2023
Copy link
Contributor

@imanish003 imanish003 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @nefeline, I have reviewed the changes and noticed a small issue. When changing the thumbnail, the space at the top keeps increasing. It appears that the divs added for the previous thumbnail are taking up space in the subsequent ones. Here is a quick demonstration:

Screen.Recording.2023-06-02.at.2.46.21.PM.mov

I am not sure if this should be a blocker.

CC: @tjcafferkey @nerrad

@tjcafferkey
Copy link
Contributor

I am not sure if this should be a blocker.

Can we have a quick look into how much effort may be required in fixing this before making a decision on this?

@tjcafferkey
Copy link
Contributor

tjcafferkey commented Jun 2, 2023

@imanish003 upon closer inspection I am not sure this is even an issue. I believe it is the result of the inserted markup via the testing instructions which is causing some layout issues since the inserted <div /> is a block element with no corresponding CSS styling.

add_filter( 'woocommerce_single_product_image_thumbnail_html', function ( $html ) {
	return $html . '<div>Thumbnail</div>';
} );

I am assuming, anyone using this filter to insert their markup will account for any layout issues via styling it. And since this PR is to reintroduce filters merely by the fact that they're working should be enough.

Could you please confirm my above assumptions?

@imanish003
Copy link
Contributor

Hey @tjcafferkey, Thanks for the closer inspection. After reviewing the code and considering your explanations, I agree that the layout issues are likely caused by the inserted markup via the testing filter:

add_filter(
	'woocommerce_single_product_image_thumbnail_html',
	function ( $html ) {
		return $html . '<div>Thumbnail</div>';
	}
);

Since the inserted <div> element is a block element with no corresponding CSS styling, it can affect the layout.

Regarding your assumptions, it is reasonable to assume that anyone using this filter to insert their markup should account for any layout issues by styling it appropriately. Since this pull request is aimed at reintroducing filters and ensuring their functionality, the fact that they are working should indeed be sufficient. I will ahead and approve the PR. 🙂

Copy link
Contributor

@imanish003 imanish003 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚀

@github-actions github-actions bot added this to the 10.4.0 milestone Jun 2, 2023
@imanish003 imanish003 merged commit 0857cbf into trunk Jun 2, 2023
@imanish003 imanish003 deleted the fix/reintroduce-filters-to-product-gallery-block branch June 2, 2023 11:17
@imanish003 imanish003 added status: ready to merge and removed status: blocker Used on issues or pulls that block work from being released. labels Jun 2, 2023
@tarunvijwani tarunvijwani changed the title Product Image Gallery > Reintroduce filters and override-restore the global product variable. Product Image Gallery: Reintroduce filters and override-restore the global product variable. Jun 5, 2023
@tarunvijwani tarunvijwani added the type: bug The issue/PR concerns a confirmed bug. label Jun 5, 2023
@nefeline
Copy link
Contributor Author

Thanks for reviewing and merging PR this while I was away @imanish003; much appreciated! 🙌

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: product image gallery Issues related to the Product Image Gallery block. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

woocommerce_single_product_image_thumbnail_html filter not fired anymore
5 participants