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

All Products: Re-add alignment controls for Product Rating and Price #8264

Merged
merged 3 commits into from
Feb 21, 2023

Conversation

danieldudzic
Copy link
Contributor

@danieldudzic danieldudzic commented Jan 23, 2023

Since #8140 fixed the issue with All Products not saving settings correctly, this PR re-adds alignment settings for Product Rating and Product Price inside of the All Products block.

Fixes #3049

Screenshots

Before After
Edit_Page_“Producs”_‹ratings—_WordPress Edit_Page_“Producs”_‹ratings—_WordPress

Testing

User Facing Testing

  1. Create a new Page and add the All Products block.
  2. Add the Product Rating and Product Price.
  3. Confirm that the Alignment toolbar option is available for both blocks and works correctly (both in the editor and the frontend).
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

All Products: Add alignment settings for the Product Rating and Product Price blocks.

@danieldudzic danieldudzic added the type: enhancement The issue is a request for an enhancement. label Jan 23, 2023
@danieldudzic danieldudzic self-assigned this Jan 23, 2023
@woocommercebot woocommercebot requested review from a team and sunyatasattva and removed request for a team January 23, 2023 11:49
@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8264.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 react, wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js lodash, react, 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-block-editor, 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-url, wp-warning, wp-wordcount ⚠️
attribute-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, 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-url, wp-warning ⚠️
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-block-editor, 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-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-block-editor, wp-blocks, 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-url, wp-warning ⚠️
mini-cart-frontend.js wc-settings, wp-polyfill ⚠️
price-filter-frontend.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, 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 ⚠️
single-product-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-api-fetch, wp-autop, wp-block-editor, 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-url, wp-warning, wp-wordcount ⚠️
stock-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, 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-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-url, wp-warning, wp-wordcount ⚠️

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

TypeScript Errors Report

  • Files with errors: 496
  • Total errors: 2341

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2023

Size Change: +18.1 kB (+2%)

Total Size: 1.1 MB

Filename Size Change
build/active-filters-frontend.js 7.98 kB -8 B (0%)
build/active-filters-wrapper-frontend.js 6 kB -13 B (0%)
build/active-filters.js 7.33 kB +14 B (0%)
build/all-products-frontend.js 11.7 kB +178 B (+2%)
build/all-products.js 34.6 kB +1.09 kB (+3%)
build/all-reviews.js 7.67 kB -1 B (0%)
build/attribute-filter-frontend.js 22.9 kB -25 B (0%)
build/attribute-filter-wrapper-frontend.js 7.67 kB -11 B (0%)
build/attribute-filter.js 12.3 kB -30 B (0%)
build/blocks-checkout.js 41.2 kB +160 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.7 kB +61 B (+1%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB +90 B (+2%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB +10 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB -6 B (0%)
build/cart-blocks/filled-cart-frontend.js 654 B -2 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB -66 B (-4%)
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB -2 B (0%)
build/cart-blocks/order-summary-heading-frontend.js 455 B -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 14.8 kB -61 B (0%)
build/cart-frontend.js 28.7 kB +220 B (+1%)
build/cart.js 47.2 kB -378 B (-1%)
build/catalog-sorting.js 1.7 kB -10 B (-1%)
build/checkout-blocks/actions-frontend.js 1.85 kB -8 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB +4 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.18 kB +29 B (+3%)
build/checkout-blocks/contact-information-frontend.js 2.05 kB +10 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.13 kB +1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.14 kB +2 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB -11 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.78 kB -67 B (-4%)
build/checkout-blocks/order-summary-frontend.js 1.24 kB -5 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB -53 B (0%)
build/checkout-blocks/payment-frontend.js 8.43 kB +101 B (+1%)
build/checkout-blocks/pickup-options-frontend.js 2.8 kB -5 B (0%)
build/checkout-blocks/shipping-address-frontend.js 1.14 kB +30 B (+3%)
build/checkout-blocks/shipping-method-frontend.js 2.27 kB -4 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.78 kB -51 B (-1%)
build/checkout-blocks/terms-frontend.js 1.56 kB -1 B (0%)
build/checkout-frontend.js 30.3 kB +185 B (+1%)
build/checkout.js 43.7 kB +428 B (+1%)
build/customer-account.js 3.12 kB +38 B (+1%)
build/featured-category.js 13.1 kB +55 B (0%)
build/featured-product.js 13.4 kB +26 B (0%)
build/filter-wrapper-frontend.js 14.1 kB +1 B (0%)
build/filter-wrapper.js 2.4 kB +1 B (0%)
build/legacy-template.js 2.85 kB -22 B (-1%)
build/mini-cart-component-frontend.js 27.9 kB +199 B (+1%)
build/mini-cart-contents-block/footer-frontend.js 2.79 kB -31 B (-1%)
build/mini-cart-contents-block/products-table-frontend.js 591 B +1 B (0%)
build/mini-cart-contents.js 17 kB +118 B (+1%)
build/mini-cart-frontend.js 2 kB +118 B (+6%) 🔍
build/mini-cart.js 4.3 kB +15 B (0%)
build/price-filter-frontend.js 13.9 kB -26 B (0%)
build/price-filter-wrapper-frontend.js 6.99 kB -20 B (0%)
build/price-filter.js 8.38 kB -18 B (0%)
build/price-format.js 1.19 kB +1 B (0%)
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 253 B +27 B (+12%) ⚠️
build/product-add-to-cart-frontend.js 6.73 kB +14 B (0%)
build/product-add-to-cart.js 8.63 kB +162 B (+2%)
build/product-best-sellers.js 7.6 kB -14 B (0%)
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 496 B +57 B (+13%) ⚠️
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 258 B +1 B (0%)
build/product-button-frontend.js 2.19 kB +50 B (+2%)
build/product-button.js 3.99 kB +152 B (+4%)
build/product-categories.js 2.36 kB +1 B (0%)
build/product-category-list-frontend.js 1.19 kB +58 B (+5%) 🔍
build/product-category-list.js 504 B +1 B (0%)
build/product-category.js 8.58 kB -13 B (0%)
build/product-image-frontend.js 2.2 kB +53 B (+2%)
build/product-image.js 4.09 kB +154 B (+4%)
build/product-new.js 7.58 kB -13 B (0%)
build/product-on-sale.js 7.91 kB -14 B (0%)
build/product-price-frontend.js 2.29 kB +60 B (+3%)
build/product-price.js 1.58 kB +1 B (0%)
build/product-query.js 6.08 kB +101 B (+2%)
build/product-rating-frontend.js 1.62 kB +50 B (+3%)
build/product-rating.js 919 B -1 B (0%)
build/product-results-count.js 1.65 kB -21 B (-1%)
build/product-sale-badge-frontend.js 1.43 kB +53 B (+4%)
build/product-sale-badge.js 819 B +5 B (+1%)
build/product-search.js 2.63 kB +19 B (+1%)
build/product-sku.js 378 B +1 B (0%)
build/product-stock-indicator-frontend.js 1.32 kB +60 B (+5%) 🔍
build/product-stock-indicator.js 646 B +1 B (0%)
build/product-summary-frontend.js 1.58 kB +50 B (+3%)
build/product-tag-list-frontend.js 1.18 kB +54 B (+5%) 🔍
build/product-tag-list.js 497 B +1 B (0%)
build/product-tag.js 8.07 kB -16 B (0%)
build/product-title-frontend.js 1.62 kB +53 B (+3%)
build/product-title.js 3.46 kB +152 B (+5%) 🔍
build/product-top-rated.js 7.83 kB -4 B (0%)
build/products-by-attribute.js 8.52 kB -1 B (0%)
build/rating-filter-frontend.js 21.4 kB -60 B (0%)
build/rating-filter-wrapper-frontend.js 6.19 kB -26 B (0%)
build/rating-filter.js 7.4 kB -38 B (-1%)
build/reviews-frontend.js 7.14 kB -1 B (0%)
build/single-product-frontend.js 17.8 kB +162 B (+1%)
build/single-product.js 9.98 kB -6 B (0%)
build/stock-filter-frontend.js 21.1 kB -52 B (0%)
build/stock-filter-wrapper-frontend.js 5.85 kB -27 B (0%)
build/stock-filter.js 8.13 kB -47 B (-1%)
build/store-notices.js 1.65 kB +7 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB -1 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB +3 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 kB +2 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.83 kB +1 B (0%)
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB +3 B (0%)
build/vendors--checkout-blocks/shipping-methods-frontend.js 9.48 kB -1 B (0%)
build/wc-blocks-data.js 21.4 kB -184 B (-1%)
build/wc-blocks-editor-style-rtl.css 5.55 kB +144 B (+3%)
build/wc-blocks-editor-style.css 5.56 kB +148 B (+3%)
build/wc-blocks-registry.js 3.15 kB -7 B (0%)
build/wc-blocks-shared-hocs.js 1.73 kB +2 B (0%)
build/wc-blocks-style-rtl.css 26.7 kB +992 B (+4%)
build/wc-blocks-style.css 26.6 kB +992 B (+4%)
build/wc-blocks-vendors.js 64.4 kB +199 B (0%)
build/wc-blocks.js 2.65 kB +27 B (+1%)
build/breadcrumbs.js 2.04 kB +2.04 kB (new file) 🆕
build/wp-directives-runtime.js 2.4 kB +2.4 kB (new file) 🆕
build/wp-directives-vendors.js 7.89 kB +7.89 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
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-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/checkout-blocks/fields-frontend.js 344 B
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-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/totals-frontend.js 324 B
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.24 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/items-frontend.js 237 B
build/mini-cart-contents-block/shopping-button-frontend.js 313 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-sku-frontend.js 629 B
build/product-summary.js 920 B
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 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.14 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-shared-context.js 1.52 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

compressed-size-action

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Jan 31, 2023
Copy link
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

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

Thanks for this PR, @danieldudzic and sorry for the delay. The code works alright, however, the blocks are aligned on the center by default, but when adding the block for the first time and checking the alignment toolbar, none of the options are selected.

It feels like the correct option should be selected, no?

@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Feb 4, 2023
@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Feb 14, 2023
@tjcafferkey
Copy link
Contributor

It feels like the correct option should be selected, no?

@sunyatasattva I've updated the default values for these elements so they are now selected like expected. e9f3320

@tjcafferkey tjcafferkey self-assigned this Feb 16, 2023
@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Feb 17, 2023
Copy link
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

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

Thanks for taking this, Tom! Works for me!

@github-actions github-actions bot added this to the 9.7.0 milestone Feb 20, 2023
@tjcafferkey tjcafferkey merged commit aa95cf3 into trunk Feb 21, 2023
@tjcafferkey tjcafferkey deleted the update/all-products-alignment-controls branch February 21, 2023 09:40
@haszari
Copy link
Member

haszari commented Feb 21, 2023

Nice work getting this old chestnut fixed @danieldudzic @tjcafferkey 🙌!

@dinhtungdu
Copy link
Member

Checking Do not include in the Testing Notes for this PR in favor of more detailed testing instruction of #8526.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Price block: alignment options don't work consistently (when Align last block is enabled)
5 participants