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

Add Related Products block #8522

Merged

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Feb 23, 2023

This PR introduces:

Related Products Block

This block is visible only in the Single Product Template. This block is a wrapper for the Related Products Control variation. This is necessary because, above the Related Products Control variation, we want to render a notice that notifies the user that the products visible in the editor preview are just examples.

Related Products Control Variation

This variation is visible only inside the Related Products block. All the controls regarding the filters are disabled.
This variation renders the products related to the main product on the frontend side.

I used the same approach for the Filter by * blocks for the naming.

⚠️ The icons are temporary. I will create a follow-up issue for the naming and the icons.

Fixes #8481

Screenshots

image

Testing

User Facing Testing

  1. Edit the Single Product Template.
  2. Below the WooCommerce Single Product Block, add the Related Products block.
  3. Be sure that above the block, you see a notice (like the image below).
  4. Check that the hierarchy in the list view is the same as the image below.
  5. Save the template.
  6. On the frontend side, click on a product.
  7. Be sure that the products inside the Related Products block are the same as the row generated by the WooCommerce Single Product Block.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Add Related Products block.

@gigitux gigitux self-assigned this Feb 23, 2023
@gigitux gigitux linked an issue Feb 23, 2023 that may be closed by this pull request
@gigitux gigitux added the focus: template Related to API powering block template functionality in the Site Editor label Feb 23, 2023
@woocommercebot woocommercebot requested a review from a team February 23, 2023 14:09
@gigitux gigitux added the type: new block Applied to work that introduces a new block (typically used on an epic issue). label Feb 23, 2023
@woocommercebot woocommercebot requested review from kmanijak and removed request for a team February 23, 2023 14:09
@gigitux gigitux force-pushed the 8481-blockifying-single-product-template-related-products-block branch from 41dc8fd to c41829c Compare February 23, 2023 14:11
@github-actions
Copy link
Contributor

github-actions bot commented Feb 23, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

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

TypeScript Errors Report

  • Files with errors: 491
  • Total errors: 2336

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Feb 23, 2023

Size Change: +2.2 kB (0%)

Total Size: 1.11 MB

Filename Size Change
build/active-filters.js 7.33 kB +6 B (0%)
build/add-to-cart-form.js 1.48 kB -2 B (0%)
build/all-products.js 36.2 kB +1.59 kB (+5%) 🔍
build/all-reviews.js 7.67 kB +5 B (0%)
build/attribute-filter.js 12.4 kB +11 B (0%)
build/breadcrumbs.js 2.04 kB -4 B (0%)
build/cart.js 47.4 kB +1 B (0%)
build/catalog-sorting.js 1.7 kB +5 B (0%)
build/checkout.js 44.1 kB +2 B (0%)
build/featured-category.js 13.3 kB +10 B (0%)
build/featured-product.js 13.6 kB +3 B (0%)
build/handpicked-products.js 7.24 kB -3 B (0%)
build/legacy-template.js 2.85 kB -2 B (0%)
build/mini-cart-contents.js 17.1 kB +8 B (0%)
build/mini-cart.js 4.29 kB -2 B (0%)
build/price-filter.js 8.39 kB +9 B (0%)
build/product-add-to-cart.js 8.61 kB +11 B (0%)
build/product-best-sellers.js 7.59 kB +3 B (0%)
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B +4 B (+1%)
build/product-button.js 4 kB +1 B (0%)
build/product-categories.js 2.36 kB -4 B (0%)
build/product-category.js 8.58 kB +4 B (0%)
build/product-image.js 4.1 kB +4 B (0%)
build/product-new.js 7.58 kB -2 B (0%)
build/product-on-sale.js 7.91 kB -2 B (0%)
build/product-query.js 6.56 kB +493 B (+8%) 🔍
build/product-rating.js 919 B -1 B (0%)
build/product-results-count.js 1.66 kB +1 B (0%)
build/product-sale-badge.js 818 B -1 B (0%)
build/product-search.js 2.63 kB -3 B (0%)
build/product-sku.js 378 B -1 B (0%)
build/product-stock-indicator.js 646 B +1 B (0%)
build/product-tag-list.js 498 B +1 B (0%)
build/product-tag.js 8.07 kB +2 B (0%)
build/product-title.js 3.46 kB +4 B (0%)
build/products-by-attribute.js 8.52 kB -1 B (0%)
build/reviews-by-category.js 11.2 kB -3 B (0%)
build/reviews-by-product.js 12.3 kB +6 B (0%)
build/single-product.js 9.98 kB +1 B (0%)
build/stock-filter.js 8.13 kB +10 B (0%)
build/store-notices.js 1.69 kB -3 B (0%)
build/wc-blocks-editor-style-rtl.css 5.71 kB +29 B (+1%)
build/wc-blocks-editor-style.css 5.71 kB +30 B (+1%)
build/wc-blocks-vendors.js 64.3 kB -18 B (0%)
build/wc-blocks.js 2.63 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.99 kB
build/all-products-frontend.js 11.7 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.08 kB
build/blocks-checkout.js 41.2 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.67 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.35 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 14.8 kB
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.24 kB
build/cart-frontend.js 28.9 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.78 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/payment-frontend.js 8.44 kB
build/checkout-blocks/pickup-options-frontend.js 2.8 kB
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.27 kB
build/checkout-blocks/shipping-methods-frontend.js 4.78 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 30.4 kB
build/customer-account.js 3.08 kB
build/filter-wrapper-frontend.js 14 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-component-frontend.js 28 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.86 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 313 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-frontend.js 2 kB
build/price-filter-frontend.js 13.8 kB
build/price-filter-wrapper-frontend.js 6.99 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 253 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.71 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 259 B
build/product-button-frontend.js 2.19 kB
build/product-category-list-frontend.js 1.19 kB
build/product-category-list.js 503 B
build/product-image-frontend.js 2.2 kB
build/product-price-frontend.js 2.29 kB
build/product-price.js 1.58 kB
build/product-rating-frontend.js 1.62 kB
build/product-sale-badge-frontend.js 1.43 kB
build/product-sku-frontend.js 629 B
build/product-stock-indicator-frontend.js 1.32 kB
build/product-summary-frontend.js 1.58 kB
build/product-summary.js 919 B
build/product-tag-list-frontend.js 1.18 kB
build/product-title-frontend.js 1.62 kB
build/product-top-rated.js 7.82 kB
build/rating-filter-frontend.js 20.9 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/rating-filter.js 7.41 kB
build/reviews-frontend.js 7.14 kB
build/single-product-frontend.js 17.8 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.85 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 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-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 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.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 9.44 kB
build/wc-blocks-data.js 21.4 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.73 kB
build/wc-blocks-style-rtl.css 26.7 kB
build/wc-blocks-style.css 26.6 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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 29.7 kB
build/woo-directives-runtime.js 2.52 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

Copy link
Contributor

@thealexandrelara thealexandrelara left a comment

Choose a reason for hiding this comment

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

Thank you for working on this, I just commented one point that we can discuss if it is worth to spend time on it, so it would be great to know your opinion on this

src/BlockTypes/ProductQuery.php Show resolved Hide resolved
Copy link
Contributor

@thealexandrelara thealexandrelara left a comment

Choose a reason for hiding this comment

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

While testing the block with the Twenty-Twenty Three theme and the Aubergine, Pitch or Pilgrimage styles I realized that the text contrast in the Notice block is really low

Aubergine:
image

Pilgrimage:
image

Pitch:
image

Copy link
Contributor

@thealexandrelara thealexandrelara left a comment

Choose a reason for hiding this comment

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

Okay, regarding my last comment, I just tested on trunk, and the issue also happens there. Since this PR is not introducing the issue, I'm approving it, and I'll be opening an issue regarding the text contrast on the Notice block.

@github-actions github-actions bot added this to the 9.7.0 milestone Feb 24, 2023
@gigitux gigitux merged commit a017360 into trunk Feb 24, 2023
@gigitux gigitux deleted the 8481-blockifying-single-product-template-related-products-block branch February 24, 2023 15:35
@dinhtungdu dinhtungdu added the type: enhancement The issue is a request for an enhancement. label Feb 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: template Related to API powering block template functionality in the Site Editor type: enhancement The issue is a request for an enhancement. type: new block Applied to work that introduces a new block (typically used on an epic issue).
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Blockifying Single Product Template: Related Products block
3 participants