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

Products by Rating: Add inner block support #7362

Merged
merged 8 commits into from
Oct 12, 2022

Conversation

danieldudzic
Copy link
Contributor

A PR following #6978 updating the Filter by Ratings block to match the new InnerBlock standard.

The only difference: there's no upgrade path included, as this has been behind an experimental flag.

It also adds the Ratings filter to the filters block pattern.

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

Insert new blocks:
  1. Check out this PR, built.
  2. Add a new page, add All Products and the WooCommerce Product Filters pattern blocks to the page.
  3. Check the newly inserted rating filter block - a wrapper block containing the heading and filter control block should be inserted now.
  4. Try changing block settings and style, and see if they're updated on the front end.
  5. See if the rating block works as expected.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Separate filter title and filter controls by converting the Rating filter block to use Inner Blocks

@rubikuserbot rubikuserbot requested review from a team and tjcafferkey and removed request for a team October 11, 2022 11:28
@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-7362.zip

@github-actions
Copy link
Contributor

github-actions bot commented Oct 11, 2022

Size Change: +3.3 kB (0%)

Total Size: 965 kB

Filename Size Change
build/active-filters-frontend.js 7.72 kB -5 B (0%)
build/active-filters-wrapper-frontend.js 6 kB -4 B (0%)
build/active-filters.js 7.43 kB -9 B (0%)
build/all-products-frontend.js 26.5 kB +11 B (0%)
build/all-products.js 33.6 kB +17 B (0%)
build/all-reviews.js 7.79 kB -5 B (0%)
build/attribute-filter-frontend.js 22.5 kB -7 B (0%)
build/attribute-filter.js 12.4 kB -10 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.37 kB -3 B (0%)
build/cart-blocks/cart-cross-sells-frontend.js 254 B +1 B (0%)
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.63 kB -3 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.23 kB -1 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 782 B -2 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB +1 B (0%)
build/cart-blocks/filled-cart-frontend.js 782 B -3 B (0%)
build/cart-blocks/order-summary-heading-frontend.js 456 B +2 B (0%)
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.61 kB +2 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 429 B -1 B (0%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB +3 B (0%)
build/cart-frontend.js 50 kB -11 B (0%)
build/cart.js 46.2 kB +3 B (0%)
build/checkout-blocks/actions-frontend.js 1.78 kB -1 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.98 kB +1 B (0%)
build/checkout-blocks/contact-information-frontend.js 3.03 kB -1 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.88 kB -4 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB -3 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.11 kB +2 B (0%)
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B +1 B (0%)
build/checkout-blocks/payment-frontend.js 8 kB +1 B (0%)
build/checkout-blocks/shipping-address-frontend.js 1.06 kB +1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.9 kB +5 B (0%)
build/checkout-blocks/terms-frontend.js 1.64 kB +3 B (0%)
build/checkout-frontend.js 52.1 kB -12 B (0%)
build/checkout.js 40 kB -2 B (0%)
build/featured-category.js 13.2 kB +8 B (0%)
build/featured-product.js 13.4 kB +2 B (0%)
build/filter-wrapper-frontend.js 10.6 kB +49 B (0%)
build/filter-wrapper.js 1.9 kB +39 B (+2%)
build/legacy-template.js 2.83 kB -3 B (0%)
build/mini-cart-component-frontend.js 16.8 kB -17 B (0%)
build/mini-cart-contents-block/empty-cart-frontend.js 366 B -1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 2.97 kB -4 B (0%)
build/mini-cart-contents-block/items-frontend.js 237 B +1 B (0%)
build/mini-cart-contents.js 16.8 kB -7 B (0%)
build/mini-cart-frontend.js 1.71 kB -6 B (0%)
build/mini-cart.js 4.57 kB -1 B (0%)
build/price-filter-frontend.js 13.6 kB -1 B (0%)
build/price-filter-wrapper-frontend.js 6.95 kB +5 B (0%)
build/price-filter.js 8.46 kB -2 B (0%)
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB +2 B (0%)
build/product-add-to-cart-frontend.js 1.25 kB +2 B (0%)
build/product-add-to-cart.js 6.48 kB +2 B (0%)
build/product-best-sellers.js 7.62 kB +3 B (0%)
build/product-button-frontend.js 1.89 kB +4 B (0%)
build/product-button.js 1.58 kB -1 B (0%)
build/product-categories.js 2.36 kB -1 B (0%)
build/product-category-list.js 503 B +1 B (0%)
build/product-image-frontend.js 1.91 kB -4 B (0%)
build/product-image.js 1.62 kB +1 B (0%)
build/product-new.js 7.63 kB +3 B (0%)
build/product-on-sale.js 7.94 kB -4 B (0%)
build/product-price-frontend.js 1.92 kB -3 B (0%)
build/product-price.js 1.53 kB -1 B (0%)
build/product-rating-frontend.js 1.18 kB -1 B (0%)
build/product-sale-badge-frontend.js 1.15 kB -4 B (0%)
build/product-sale-badge.js 818 B -1 B (0%)
build/product-sku-frontend.js 380 B +1 B (0%)
build/product-stock-indicator-frontend.js 994 B -3 B (0%)
build/product-tag-list-frontend.js 874 B -4 B (0%)
build/product-tag-list.js 497 B +1 B (0%)
build/product-tag.js 8 kB -3 B (0%)
build/product-title-frontend.js 1.34 kB -1 B (0%)
build/product-title.js 939 B +1 B (0%)
build/product-top-rated.js 7.87 kB +4 B (0%)
build/rating-filter-frontend.js 7.03 kB -369 B (-5%)
build/rating-filter.js 6.2 kB -1.67 kB (-21%) 🎉
build/reviews-by-category.js 11.2 kB -1 B (0%)
build/reviews-by-product.js 12.3 kB +2 B (0%)
build/reviews-frontend.js 7 kB +1 B (0%)
build/single-product-frontend.js 29.2 kB +16 B (0%)
build/single-product.js 10 kB -2 B (0%)
build/stock-filter-frontend.js 7.72 kB -3 B (0%)
build/stock-filter-wrapper-frontend.js 5.98 kB -4 B (0%)
build/stock-filter.js 6.65 kB -3 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB +6 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB +5 B (0%)
build/rating-filter-wrapper-frontend.js 5.3 kB +5.3 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/attribute-filter-wrapper-frontend.js 7.04 kB
build/blocks-checkout.js 17.5 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.66 kB
build/cart-blocks/cart-items-frontend.js 298 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.3 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-totals-frontend.js 320 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.73 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/billing-address-frontend.js 948 B
build/checkout-blocks/express-payment-frontend.js 1.16 kB
build/checkout-blocks/fields-frontend.js 344 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-fee-frontend.js 276 B
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/totals-frontend.js 323 B
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.27 kB
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-contents-block/title-frontend.js 367 B
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 227 B
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 433 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-category-list-frontend.js 882 B
build/product-category.js 8.61 kB
build/product-query.js 648 B
build/product-rating.js 773 B
build/product-search.js 2.61 kB
build/product-sku.js 380 B
build/product-stock-indicator.js 624 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 920 B
build/products-by-attribute.js 8.53 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper-frontend.js 8.21 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/wc-blocks-data.js 15.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 932 B
build/wc-blocks-registry.js 2.94 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-style-rtl.css 24.2 kB
build/wc-blocks-style.css 24.1 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 62.4 kB
build/wc-blocks.js 2.62 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

patterns/filters.php Outdated Show resolved Hide resolved
@danieldudzic
Copy link
Contributor Author

@tjcafferkey The BlockTitle editor component seems to be still expecting the heading attribute. Can you please have another look?

@tjcafferkey
Copy link
Contributor

The BlockTitle editor component seems to be still expecting the heading attribute. Can you please have another look?

Maybe I need to look into it further but my understand of the work done on this pr #6978 was to separate headings from the filters. But in this case the heading still exists within the filter? The other filters it makes sense because we need to support and migrate users who are already using it but since this is a new block we shouldn't have that problem? BlockTitle should not be in this component? Unless Im missing something.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 11, 2022

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
rating-filter.js wp-compose 🎉

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

Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

This is working great on my test, both in Block Editor and Site Editor.

I notice there's an issue with star icons in the Site Editor:

image

In addition, I notice some eslint warnings, can you please fix them?

patterns/filters.php Outdated Show resolved Hide resolved
assets/js/blocks/rating-filter/utils.ts Outdated Show resolved Hide resolved
),
headingLevel: 3,
} ),
transform: () => createBlock( 'woocommerce/rating-filter' ),
Copy link
Member

Choose a reason for hiding this comment

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

The transform function doesn't work anymore. I noticed the same happens to the Price Filter block. We should review the transform function for all filter blocks after this PR.

assets/js/blocks/rating-filter/block.tsx Outdated Show resolved Hide resolved
assets/js/blocks/filter-wrapper/index.tsx Outdated Show resolved Hide resolved
@danieldudzic
Copy link
Contributor Author

This is working great on my test, both in Block Editor and Site Editor.

I notice there's an issue with star icons in the Site Editor:

image

In addition, I notice some eslint warnings, can you please fix them?

Thank you for the review, the star issue is unrelated to the block: #7167

Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

I relied on @dinhtungdu's comments.
Besides this comment that it will be addressed in a dedicated PR, LGTM 🚢

@github-actions github-actions bot added this to the 8.8.0 milestone Oct 12, 2022
@opr opr added block: filter by rating Issues related to the Filter by Rating block. type: enhancement The issue is a request for an enhancement. labels Oct 24, 2022
sunyatasattva pushed a commit that referenced this pull request Oct 26, 2022
* Products by Rating: Add InnerBlock support for Ratings

* Product by Ratings: Register Ratings filter as an InnerBlock

* Product by Rating: Fix active rating filters bug

* Products by Rating: Remove all heading references

* Products by Rating: Minor code fixes

* Products by Rating: Fix ESlint errors

* Products by Rating: Fix dependency placement
senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
* Products by Rating: Add InnerBlock support for Ratings

* Product by Ratings: Register Ratings filter as an InnerBlock

* Product by Rating: Fix active rating filters bug

* Products by Rating: Remove all heading references

* Products by Rating: Minor code fixes

* Products by Rating: Fix ESlint errors

* Products by Rating: Fix dependency placement
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: filter by rating Issues related to the Filter by Rating block. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants