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

Fix for Rating alignment when used in Products block #8104

Merged
merged 1 commit into from
Jan 4, 2023

Conversation

kmanijak
Copy link
Contributor

@kmanijak kmanijak commented Jan 4, 2023

Fix for a correct Rating block alignment within the Products block. It is extracted from another PR merged into trunk already.

Raised bug: "Product Rating" inner block is aligned different for "Product list with full product description", "Product list with 1:1 images" and "Minimal product list" test page with "Products (Beta)" block

Screenshots

Check the Rating position - it's expected to be left-aligned in the patterns.

Case Before After
Product list with full product description image . image
Product list with 1:1 images image . image
Minimal product list image . image
Classic Template image . image

User Facing Testing

  1. Make sure you have at least one product with rating.
  2. Create a post and add Products (Beta) block
  3. If not yet added, add Product Rating block into the Product Template
  4. Try to set each of the Rating alignment (as on a video below)
    Expected: Starts are aligned accordingly
  5. Save the post for each of the option and check the change is reflected on the frontend
alignment.mov

  1. Make sure you have at least one product with rating.
  2. Create a post and add patterns from this PR
  3. Check especially "Product list with full product description", "Product list with 1:1 images" and "Minimal product list" which showed incorrect behaviour
    Expected: Rating is aligned as on the screenshots in the PR above

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Products: Fix the Rating block alignment

@kmanijak kmanijak added this to the 9.1.4 milestone Jan 4, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jan 4, 2023

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Jan 4, 2023

TypeScript Errors Report

Files with errors: 436
Total errors: 2124

⚠️ ⚠️ This PR introduces new TS errors on 61 files:

assets/js/atomic/blocks/product-elements/add-to-cart/edit.js

assets/js/atomic/blocks/product-elements/button/block.js

assets/js/atomic/blocks/product-elements/button/edit.js

assets/js/atomic/blocks/product-elements/button/index.js

assets/js/atomic/blocks/product-elements/price/block.js

assets/js/atomic/blocks/product-elements/price/edit.js

assets/js/atomic/blocks/product-elements/rating/block.tsx

assets/js/atomic/blocks/product-elements/rating/index.ts

assets/js/atomic/blocks/product-elements/sale-badge/index.ts

assets/js/atomic/blocks/product-elements/sku/index.ts

assets/js/atomic/blocks/product-elements/stock-indicator/index.ts

assets/js/base/components/block-error-boundary/index.tsx

assets/js/base/components/cart-checkout/address-form/test/index.js

assets/js/base/components/cart-checkout/totals/shipping/has-shipping-rate.js

assets/js/base/components/cart-checkout/totals/shipping/shipping-rate-selector.js

assets/js/base/components/radio-control-accordion/index.js

assets/js/base/components/reviews/review-list-item/index.js

assets/js/base/components/reviews/review-list/index.js

assets/js/base/components/reviews/review-sort-select/index.js

assets/js/base/context/event-emit/test/emitters.js

assets/js/base/context/hooks/cart/use-store-cart-coupons.ts

assets/js/base/context/hooks/use-checkout-notices.js

assets/js/base/context/providers/cart-checkout/checkout-processor.js

assets/js/base/context/providers/editor-context.js

assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js

assets/js/base/utils/errors.js

assets/js/base/utils/render-frontend.tsx

assets/js/blocks-registry/block-components/test/index.js

assets/js/blocks-registry/payment-methods/test/payment-method-config-helper.ts

assets/js/blocks-registry/payment-methods/test/registry.ts

assets/js/blocks/attribute-filter/test/block.tsx

assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-error-boundary.js

assets/js/blocks/cart-checkout-shared/use-view-switcher.tsx

assets/js/blocks/cart/block.js

assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx

assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx

assets/js/blocks/cart/test/block.js

assets/js/blocks/cart/test/slots.js

assets/js/blocks/checkout/block.tsx

assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx

assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js

assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/edit.js

assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/frontend.js

assets/js/blocks/filter-wrapper/index.tsx

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx

assets/js/blocks/mini-cart/test/block.js

assets/js/blocks/rating-filter/test/block.tsx

assets/js/blocks/single-product/block.js

assets/js/blocks/single-product/edit/index.js

assets/js/blocks/single-product/edit/layout-editor.js

assets/js/blocks/stock-filter/test/block.tsx

assets/js/data/cart/controls.js

assets/js/data/cart/test/resolvers.js

assets/js/editor-components/edit-product-link/index.js

assets/js/previews/cart.ts

node_modules/@wordpress/element/node_modules/@types/react/index.d.ts

packages/checkout/components/order-shipping-packages/index.js

packages/checkout/components/store-notices-container/index.tsx

packages/checkout/components/text-input/test/validated-text-input.tsx

packages/prices/utils/price.ts

@github-actions
Copy link
Contributor

github-actions bot commented Jan 4, 2023

Size Change: +43 B (0%)

Total Size: 1.01 MB

Filename Size Change
build/wc-blocks-style-rtl.css 24.5 kB +22 B (0%)
build/wc-blocks-style.css 24.4 kB +21 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.75 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.32 kB
build/all-products-frontend.js 11.3 kB
build/all-products.js 33.2 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.6 kB
build/attribute-filter-wrapper-frontend.js 7.62 kB
build/attribute-filter.js 12.3 kB
build/blocks-checkout.js 27.1 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--product-add-to-cart-frontend.js 5.48 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.77 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.04 kB
build/cart-blocks/cart-express-payment-frontend.js 778 B
build/cart-blocks/cart-items-frontend.js 298 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.23 kB
build/cart-blocks/cart-totals-frontend.js 319 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 779 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.72 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping-frontend.js 5.98 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 431 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/cart-frontend.js 46.2 kB
build/cart.js 46.4 kB
build/checkout-blocks/actions-frontend.js 1.78 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.9 kB
build/checkout-blocks/billing-address-frontend.js 1.09 kB
build/checkout-blocks/contact-information-frontend.js 1.79 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 343 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.88 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 6.04 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 431 B
build/checkout-blocks/payment-frontend.js 8.31 kB
build/checkout-blocks/shipping-address-frontend.js 1.07 kB
build/checkout-blocks/shipping-methods-frontend.js 5.01 kB
build/checkout-blocks/terms-frontend.js 1.63 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 48.3 kB
build/checkout.js 40.5 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/filter-wrapper-frontend.js 13.8 kB
build/filter-wrapper.js 2.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.85 kB
build/mini-cart-component-frontend.js 20 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer-frontend.js 2.96 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 591 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 366 B
build/mini-cart-contents.js 17.1 kB
build/mini-cart-frontend.js 1.88 kB
build/mini-cart.js 4.28 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.01 kB
build/price-filter.js 8.37 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 225 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 1.46 kB
build/product-add-to-cart.js 8.37 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 440 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 300 B
build/product-button-frontend.js 2.18 kB
build/product-button.js 3.85 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.14 kB
build/product-category-list.js 503 B
build/product-category.js 8.69 kB
build/product-image-frontend.js 2.17 kB
build/product-image.js 3.93 kB
build/product-new.js 7.69 kB
build/product-on-sale.js 8.02 kB
build/product-price-frontend.js 2.17 kB
build/product-price.js 1.54 kB
build/product-query.js 5.94 kB
build/product-rating-frontend.js 1.48 kB
build/product-rating.js 814 B
build/product-sale-badge-frontend.js 1.39 kB
build/product-sale-badge.js 812 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 628 B
build/product-sku.js 377 B
build/product-stock-indicator-frontend.js 1.27 kB
build/product-stock-indicator.js 646 B
build/product-summary-frontend.js 1.53 kB
build/product-summary.js 918 B
build/product-tag-list-frontend.js 1.14 kB
build/product-tag-list.js 497 B
build/product-tag.js 8.05 kB
build/product-title-frontend.js 1.59 kB
build/product-title.js 3.3 kB
build/product-top-rated.js 7.93 kB
build/products-by-attribute.js 8.61 kB
build/rating-filter-frontend.js 20.5 kB
build/rating-filter-wrapper-frontend.js 5.57 kB
build/rating-filter.js 7.25 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 17.5 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 20.8 kB
build/stock-filter-wrapper-frontend.js 5.85 kB
build/stock-filter.js 8.13 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart--rating-fil--b8470171-frontend.js 6.85 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--671ca56f-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 7.54 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.82 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--dda5866c-frontend.js 8.85 kB
build/wc-blocks-data.js 18.7 kB
build/wc-blocks-editor-style-rtl.css 5.22 kB
build/wc-blocks-editor-style.css 5.23 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 2.92 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 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.7 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

@sunyatasattva sunyatasattva self-requested a review January 4, 2023 16:29
@sunyatasattva sunyatasattva merged commit 8af92ee into release/9.1.4 Jan 4, 2023
@sunyatasattva sunyatasattva deleted the fix/rating-alignment branch January 4, 2023 16:29
sunyatasattva added a commit that referenced this pull request Jan 5, 2023
sunyatasattva added a commit that referenced this pull request Jan 5, 2023
* Remove the Products block from WP < 6.0

Too many APIs which are required for the Products block experience
are just plainly unavailable in versions lower than 6.0.

* Revert "Fix for Rating alignment when used in Products block and Classic Template (#8104)"

This reverts commit 8af92ee.
sunyatasattva added a commit that referenced this pull request Jan 5, 2023
* Empty commit for release pull request

* Fix for Rating alignment when used in Products block and Classic Template (#8104)

* Hide `core/no-results` as default in Product Query if WP <= 5.9 (#8082)

`core/no-results` was not available until WP 6.0.

* Update the readme

* Add testing notes

* Remove the “Products (Beta)” block from WP 6.0 or lower (#8112)

* Remove the Products block from WP < 6.0

Too many APIs which are required for the Products block experience
are just plainly unavailable in versions lower than 6.0.

* Revert "Fix for Rating alignment when used in Products block and Classic Template (#8104)"

This reverts commit 8af92ee.

Co-authored-by: github-actions <[email protected]>
Co-authored-by: kmanijak <[email protected]>
Co-authored-by: Lucio Giannotta <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants