Product Price: Fix alignment setting on the frontend #7795

danieldudzic · 2022-11-30T21:31:55Z

This PR fixes the alignment setting on the frontend for the Product Price product element.

Other Checks

This PR removes a feature flag & I've updated this doc.
This PR adds/removes an experimental interfaces and I've updated this doc.
I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Alignment set to center

Before	After

Testing

Automated Tests

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

User Facing Testing

Add the Product Query block to a page.
Add the Product Price block.
Make sure that you can set the alignment to left, center and right.
Make sure all options work both in the editor and on the page.

Do not include in the Testing Notes

WooCommerce Visibility

WooCommerce Core
Feature plugin
Experimental

Changelog

Product Price: Fix the alignment setting.

github-actions · 2022-11-30T21:34:06Z

The release ZIP for this PR is accessible via:

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

github-actions · 2022-11-30T21:35:38Z

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
`reviews-frontend.js`	`react`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-compose`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`	⚠️
`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`	⚠️
`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`	⚠️
`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`	⚠️
`stock-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-url`	⚠️
`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`	⚠️
`rating-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-data`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-url`	⚠️
`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`	⚠️
`mini-cart-frontend.js`	`wc-settings`, `wp-polyfill`	⚠️
`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`	⚠️
`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-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-components`, `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.

github-actions · 2022-11-30T21:38:21Z

TypeScript Errors Report

Files with errors: 428
Total errors: 2063

🎉 🎉 This PR does not introduce new TS errors.

github-actions · 2022-11-30T21:39:01Z

Size Change: -36 B (0%)

Total Size: 972 kB

Filename	Size	Change
`build/all-products.js`	33.1 kB	-36 B (0%)

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	7.74 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-reviews.js`	7.79 kB
`build/attribute-filter-frontend.js`	22.6 kB
`build/attribute-filter-wrapper-frontend.js`	7.14 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.74 kB
`build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js`	5.04 kB
`build/cart-blocks/cart-express-payment-frontend.js`	779 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.07 kB
`build/cart-blocks/cart-order-summary-frontend.js`	1.11 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`	781 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`	273 B
`build/cart-blocks/order-summary-heading-frontend.js`	455 B
`build/cart-blocks/order-summary-shipping-frontend.js`	5.99 kB
`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.19 kB
`build/cart-frontend.js`	46.2 kB
`build/cart.js`	46.1 kB
`build/checkout-blocks/actions-frontend.js`	1.77 kB
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	3.89 kB
`build/checkout-blocks/billing-address-frontend.js`	955 B
`build/checkout-blocks/contact-information-frontend.js`	1.8 kB
`build/checkout-blocks/express-payment-frontend.js`	1.13 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-coupon-form-frontend.js`	1.89 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.11 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`	436 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.64 kB
`build/checkout-blocks/totals-frontend.js`	324 B
`build/checkout-frontend.js`	48.3 kB
`build/checkout.js`	40.1 kB
`build/featured-category.js`	13.2 kB
`build/featured-product.js`	13.4 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.29 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.95 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`	289 B
`build/mini-cart-contents-block/title-frontend.js`	368 B
`build/mini-cart-contents.js`	17.1 kB
`build/mini-cart-frontend.js`	1.76 kB
`build/mini-cart.js`	4.28 kB
`build/price-filter-frontend.js`	13.6 kB
`build/price-filter-wrapper-frontend.js`	7.02 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`	227 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.62 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`	301 B
`build/product-button-frontend.js`	2.13 kB
`build/product-button.js`	3.82 kB
`build/product-categories.js`	2.36 kB
`build/product-category-list-frontend.js`	1.13 kB
`build/product-category-list.js`	502 B
`build/product-category.js`	8.62 kB
`build/product-image-frontend.js`	2.16 kB
`build/product-image.js`	3.93 kB
`build/product-new.js`	7.62 kB
`build/product-on-sale.js`	7.95 kB
`build/product-price-frontend.js`	2.15 kB
`build/product-price.js`	1.53 kB
`build/product-query.js`	4.44 kB
`build/product-rating-frontend.js`	1.44 kB
`build/product-rating.js`	787 B
`build/product-sale-badge-frontend.js`	1.38 kB
`build/product-sale-badge.js`	816 B
`build/product-search.js`	2.62 kB
`build/product-sku-frontend.js`	629 B
`build/product-sku.js`	377 B
`build/product-stock-indicator-frontend.js`	1.26 kB
`build/product-stock-indicator.js`	646 B
`build/product-summary-frontend.js`	1.52 kB
`build/product-summary.js`	921 B
`build/product-tag-list-frontend.js`	1.12 kB
`build/product-tag-list.js`	498 B
`build/product-tag.js`	8 kB
`build/product-title-frontend.js`	1.57 kB
`build/product-title.js`	3.3 kB
`build/product-top-rated.js`	7.87 kB
`build/products-by-attribute.js`	8.54 kB
`build/rating-filter-frontend.js`	7.16 kB
`build/rating-filter-wrapper-frontend.js`	5.41 kB
`build/rating-filter.js`	5.79 kB
`build/reviews-by-category.js`	11.2 kB
`build/reviews-by-product.js`	12.3 kB
`build/reviews-frontend.js`	7.02 kB
`build/single-product-frontend.js`	17.5 kB
`build/single-product.js`	10 kB
`build/stock-filter-frontend.js`	7.8 kB
`build/stock-filter-wrapper-frontend.js`	6.04 kB
`build/stock-filter.js`	6.71 kB
`build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart-frontend.js`	6.86 kB
`build/vendors--attribute-filter-wrapper-frontend.js`	8.2 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.85 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.19 kB
`build/wc-blocks-editor-style.css`	5.19 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-style-rtl.css`	24.2 kB
`build/wc-blocks-style.css`	24.2 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.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}

nefeline

Works like a charm ✨!

✅ Confirmed the price alignments are working as expected both in the editor and on the published post.
✅ Confirmed the alignments can be set to left, center and right.

Left a few suggestions in the code.

src/Utils/StyleAttributesUtils.php

src/BlockTypes/ProductPrice.php

nefeline

Thanks for addressing the feedback: I left a follow-up question, but LGTM !

nefeline · 2022-12-01T13:35:37Z

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

 };

-if ( isFeaturePluginBuild() ) {


Out of curiosity: why are we removing the feature flag here? Was this part of a decision documented elsewhere?

No idea why it was there in the first place. I have asked @Aljullu, but he didn't know either. It doesn't really make sense for it to be there as Text Alignment is not an experimental feature. We have decided it's safe to just remove it.

Also that setting was broken on the frontend anyway 🤷‍♂️

That makes sense: thanks for clarifying!

danieldudzic added 2 commits November 30, 2022 17:11

Product Price: Fix alignment setting on the frontend

4ca6b49

Product Price: Remove the Feature plugin flag from the alignment setting

e79766a

danieldudzic added the type: bug The issue/PR concerns a confirmed bug. label Nov 30, 2022

danieldudzic added this to the 9.1.0 milestone Nov 30, 2022

rubikuserbot requested review from a team and thealexandrelara and removed request for a team November 30, 2022 21:32

nefeline reviewed Nov 30, 2022

View reviewed changes

src/Utils/StyleAttributesUtils.php Outdated Show resolved Hide resolved

src/Utils/StyleAttributesUtils.php Outdated Show resolved Hide resolved

src/BlockTypes/ProductPrice.php Outdated Show resolved Hide resolved

danieldudzic added 2 commits December 1, 2022 11:06

Product Price: Code clean-up

cde862b

Product Price: Fix PHP warning

bfb1030

nefeline approved these changes Dec 1, 2022

View reviewed changes

github-actions bot added the status: ready to merge label Dec 1, 2022

nefeline reviewed Dec 1, 2022

View reviewed changes

danieldudzic merged commit 4837427 into trunk Dec 1, 2022

danieldudzic deleted the fix/7778-alignment-setting-on-frontend branch December 1, 2022 13:51

github-actions bot removed the status: ready to merge label Dec 1, 2022

senadir mentioned this pull request Dec 7, 2022

Update WooCommerce blocks package to 9.1.0 woocommerce/woocommerce#35876

Closed

gigitux mentioned this pull request Dec 15, 2022

Update WooCommerce Blocks to 9.1.1 woocommerce/woocommerce#36004

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Product Price: Fix alignment setting on the frontend #7795

Product Price: Fix alignment setting on the frontend #7795

danieldudzic commented Nov 30, 2022

github-actions bot commented Nov 30, 2022

github-actions bot commented Nov 30, 2022 •

edited

Loading

github-actions bot commented Nov 30, 2022 •

edited

Loading

github-actions bot commented Nov 30, 2022 •

edited

Loading

nefeline left a comment

nefeline left a comment •

edited

Loading

nefeline Dec 1, 2022

danieldudzic Dec 1, 2022

nefeline Dec 1, 2022

Product Price: Fix alignment setting on the frontend #7795

Product Price: Fix alignment setting on the frontend #7795

Conversation

danieldudzic commented Nov 30, 2022

Other Checks

Screenshots

Testing

Automated Tests

User Facing Testing

WooCommerce Visibility

Changelog

github-actions bot commented Nov 30, 2022

github-actions bot commented Nov 30, 2022 • edited Loading

Script Dependencies Report

github-actions bot commented Nov 30, 2022 • edited Loading

TypeScript Errors Report

github-actions bot commented Nov 30, 2022 • edited Loading

nefeline left a comment

Choose a reason for hiding this comment

nefeline left a comment • edited Loading

Choose a reason for hiding this comment

nefeline Dec 1, 2022

Choose a reason for hiding this comment

danieldudzic Dec 1, 2022

Choose a reason for hiding this comment

nefeline Dec 1, 2022

Choose a reason for hiding this comment

github-actions bot commented Nov 30, 2022 •

edited

Loading

github-actions bot commented Nov 30, 2022 •

edited

Loading

github-actions bot commented Nov 30, 2022 •

edited

Loading

nefeline left a comment •

edited

Loading