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

Add to the Product Button block the support for the Product Query block #6948

Merged
merged 17 commits into from
Sep 28, 2022

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Aug 19, 2022

This PR is blocked by #6911

This PR adds to the Product Button block the support for the Product Query block.
Now, on the client side, when the Product Button Block is used in the Product Query block, the markup will be server side generated. Also, no javascript related to the Product Button block will be loaded.

Fixes #6785

Testing

N/A

User Facing Testing

  1. Create a post/page and add the Product Query block.
  2. Save it.
  3. Open the frontend side and be sure that:
  • no JS related to the Product Button block is loaded (the block is rendered on the server).
  • The UI of the block is identical to on the editor side.
  • The settings are reflected correctly (eg: custom style)
  1. Go to WooCommerce Settings > Products > General.
  2. Toggle Redirect to the cart page after successful addition.
  3. Toggle Enable AJAX add to cart buttons on archives.
  4. Be sure that the Product Button Block is used in the Product Query Block follows these settings.

Also, consider that this block has a different behavior when it is used in the Product Query block as respect when it is used in All Products. We will address this issue in the next iteration #6949

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@rubikuserbot rubikuserbot requested review from a team and danieldudzic and removed request for a team August 19, 2022 15:50
@gigitux gigitux force-pushed the add/add-to-cart-product-query branch from 57f914f to 9274aca Compare August 19, 2022 15:50
@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Aug 19, 2022

Size Change: +72 B (0%)

Total Size: 893 kB

Filename Size Change
build/all-products.js 34 kB +6 B (0%)
build/wc-blocks-style-rtl.css 23.9 kB +33 B (0%)
build/wc-blocks-style.css 23.9 kB +33 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.62 kB
build/active-filters.js 8.29 kB
build/all-products-frontend.js 18.2 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.3 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 17.5 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.17 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.44 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.63 kB
build/cart-blocks/cart-express-payment-frontend.js 5.08 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.25 kB
build/cart-blocks/cart-line-items-frontend.js 430 B
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 344 B
build/cart-blocks/filled-cart-frontend.js 782 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.64 kB
build/cart-blocks/order-summary-discount-frontend.js 2.15 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.36 kB
build/cart-blocks/order-summary-shipping-frontend.js 427 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 48 kB
build/cart.js 50.3 kB
build/checkout-blocks/actions-frontend.js 1.42 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.11 kB
build/checkout-blocks/billing-address-frontend.js 889 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.37 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.08 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.64 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.27 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js 602 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/payment-frontend.js 7.68 kB
build/checkout-blocks/shipping-address-frontend.js 1.03 kB
build/checkout-blocks/shipping-methods-frontend.js 4.75 kB
build/checkout-blocks/terms-frontend.js 1.23 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 49.9 kB
build/checkout.js 43.7 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.33 kB
build/legacy-template.js 2.84 kB
build/mini-cart-component-frontend.js 16.9 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 7.39 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 290 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 23.4 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 4.57 kB
build/price-filter-frontend.js 13.4 kB
build/price-filter.js 9.35 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 226 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.69 kB
build/product-add-to-cart-frontend.js 2.6 kB
build/product-add-to-cart.js 6.87 kB
build/product-best-sellers.js 7.7 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 432 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-button-frontend.js 1.9 kB
build/product-button.js 1.58 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 890 B
build/product-category-list.js 503 B
build/product-category.js 8.69 kB
build/product-image-frontend.js 1.92 kB
build/product-image.js 1.61 kB
build/product-new.js 7.69 kB
build/product-on-sale.js 8.02 kB
build/product-price-frontend.js 1.93 kB
build/product-price.js 1.53 kB
build/product-query.js 646 B
build/product-rating-frontend.js 1.19 kB
build/product-rating.js 771 B
build/product-sale-badge-frontend.js 1.15 kB
build/product-sale-badge.js 816 B
build/product-search.js 2.61 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 380 B
build/product-stock-indicator-frontend.js 1 kB
build/product-stock-indicator.js 623 B
build/product-summary-frontend.js 1.3 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 883 B
build/product-tag-list.js 497 B
build/product-tag.js 8.05 kB
build/product-title-frontend.js 1.35 kB
build/product-title.js 938 B
build/product-top-rated.js 7.93 kB
build/products-by-attribute.js 8.62 kB
build/reviews-by-category.js 11.3 kB
build/reviews-by-product.js 12.4 kB
build/reviews-frontend.js 7.01 kB
build/single-product-frontend.js 21.5 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 7.62 kB
build/stock-filter.js 7.55 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--04fe80d1-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 6.92 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/wc-blocks-data.js 9.9 kB
build/wc-blocks-editor-style-rtl.css 5.24 kB
build/wc-blocks-editor-style.css 5.24 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 931 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.71 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 54.5 kB
build/wc-blocks.js 2.63 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

compressed-size-action

@gigitux gigitux self-assigned this Aug 19, 2022
@gigitux gigitux added skip-changelog PRs that you don't want to appear in the changelog. block-type: product elements Issues related to Product Element blocks. type: refactor The issue/PR is related to refactoring. labels Aug 19, 2022
@gigitux gigitux changed the title Add to the Product Button Block the support for the Product Query Block Add to the Product Button block the support for the Product Query block Aug 19, 2022
@gigitux gigitux force-pushed the add/add-to-cart-product-query branch from 48d7914 to a69a568 Compare August 22, 2022 12:58
Copy link
Contributor

@danielwrobert danielwrobert left a comment

Choose a reason for hiding this comment

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

LGTM! 🚀

I confirmed the following:

  • On trunk, the All Products block to loads the product-button-frontend.js on the frontend.
  • On trunk, if I add a Product Button block to the Product Query block, the script is also loaded. Note that the overall behavior is a little odd in this particular scenario but I imagine that to be expected.
  • On this PR branch, adding a Product Button block to the PQ block does not render the script on the frontend and the behavior / UI is as expected.
  • Confirmed the Add to cart behaviour in WooCommerce > Settings behaves as expected.

Nice work! 🍻

@github-actions github-actions bot added this to the 8.7.0 milestone Sep 27, 2022
@gigitux gigitux merged commit 300c9e1 into trunk Sep 28, 2022
@gigitux gigitux deleted the add/add-to-cart-product-query branch September 28, 2022 08:54
@gigitux
Copy link
Contributor Author

gigitux commented Sep 28, 2022

Thanks for the review! @danielwrobert 🚀

@sunyatasattva
Copy link
Contributor

Just leaving this for posterity: this PR actually fixes #6794 not #6785

import { Disabled } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';
import { useEffect } from 'react';
Copy link
Member

Choose a reason for hiding this comment

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

Is there any reason why we don't use useEffect from @wordpress/element here?

(Came across this PR while exploring the Query Block.)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Absolutely no :'(
During the cooldown, I guess that it makes sense to work on this #6732

I created a PR and assigned you as a reviewer #7298. Thanks for catching this!

senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
…ck (woocommerce#6948)

* Adds to the Product Image Block the support for the Product Query Block

Adds to the Product Image Block the support for the Product Query Block woocommerce#6911

* use shared config

* use shared config

* use shared config

* Add to the Product Button Block the support for the Product Query Block

* Add to the Product Image Block the support for the Product Query Block

* fix lint errors

* address feedback

* set grid view and font-size L as default
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product elements Issues related to Product Element blocks. skip-changelog PRs that you don't want to appear in the changelog. type: refactor The issue/PR is related to refactoring.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Query: [Atomic Block] Create Product Image block
4 participants