Fix rendering issue with RTL currency symbols in product price block #58134
Conversation
There was a problem hiding this comment.
This works well, I've tested various currencies and positions and cant find any issues here. I've also tested classic themes for potential regressions and can't find any. It would be great to get this out of draft when you are able to so we can review it properly. Finally, I just left a few minor comments
plugins/woocommerce/client/blocks/packages/components/formatted-monetary-amount/index.tsx
Outdated
Show resolved
Hide resolved
plugins/woocommerce/client/blocks/packages/components/formatted-monetary-amount/index.tsx
Outdated
Show resolved
Hide resolved
|
@AhmarZaidi looks like there are some failing tests that need investigating. They might be because of the markup changes, if so they might need updating. |
|
@tjcafferkey Will check and update those. |
|
@AhmarZaidi there appears to be some failing E2E tests, I have reran them and they fail consistently so they might be legit. To run them locally you can run the following commands from the repo root (ensure Docker is installed):
|
|
Hey @tjcafferkey, I've fixed the PHP unit and JS test however I cannot get the CI/Playwright tests to properly run on my local setup. I've tried the instructions as you mentioned above and also these docs for WooCommerce Playwright End-to-End Tests. Quite likely I'm missing something simple, it would be a great help if you could guide me 😅 I was trying to only run the test that were failing here (not sure these are related to my code). The closest I was able to get was using this command: Here's the error I am getting when I run that test from the UI: 'No route was found matching the URL and request method.' 
Note that I've omitted the |
Testing GuidelinesHi , Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed. Reminder: PR reviewers are required to document testing performed. This includes:
|
|
@AhmarZaidi Hi! The tests that are failing are core tests, and you can find their readme here. I followed these steps to get them running locally just now on your branch (I was able to confirm that failures are most likely related to your changes).
I hope this helps 🤞 Can you also please fix the images in the PR description? |
📝 Walkthrough""" WalkthroughThis update addresses a rendering issue with right-to-left (RTL) currency symbols in the WooCommerce plugin. It introduces new CSS classes and style rules, modifies HTML markup for price display, and updates related unit and end-to-end tests to reflect these changes. Adjustments ensure correct bidirectional text rendering and layout for product prices. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WooCommerce Frontend
participant PHP Formatting Functions
participant React Components
participant CSS
User->>WooCommerce Frontend: View product price
WooCommerce Frontend->>PHP Formatting Functions: Request formatted price
PHP Formatting Functions-->>WooCommerce Frontend: Return HTML with <bdi class="woocommerce-Price-bidi">
WooCommerce Frontend->>React Components: Render FormattedMonetaryAmount
React Components->>CSS: Apply .woocommerce-Price-bidi and RTL styles
CSS-->>User: Correctly rendered RTL currency symbol and price
""" ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
plugins/woocommerce/client/blocks/packages/components/formatted-monetary-amount/style.scss (1)
5-8: Flex centering may mis-align inline price text
justify-content: centercenters the whole inline-flex wrapper horizontally.
In contexts where the price sits inside flowing text (e.g. “From $5.00”), this adds unexpected spacing and can break baselines.Consider keeping the inline-flex for bidi isolation but drop centering so the wrapper behaves like normal inline text:
.wc-block-number-format-container { display: inline-flex; - justify-content: center; }plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scss (1)
58-61: Duplicate bidi rule spreading across stylesheetsExactly the same
.woocommerce-Price-bidi { unicode-bidi: bidi-override; direction: ltr; }block now exists in at least three SCSS files.
To avoid future divergence, extract it to a shared partial (e.g.currency-bidi.scss) and@importit where needed.No functional change required, but deduplication will ease maintenance.
plugins/woocommerce/changelog/fix-49102 (1)
4-4: Minor wording / casing nit in changelogAcronyms should stay uppercase and sentences ideally start with a capital letter.
-Fixed the rendering issue with rtl currency symbols which was causing the product price UI to break. +Fixed a rendering issue with RTL currency symbols that caused the product-price UI to break.
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/test/__snapshots__/index.tsx.snapis excluded by!**/*.snapplugins/woocommerce/client/blocks/assets/js/base/components/product-price/test/__snapshots__/index.js.snapis excluded by!**/*.snap
📒 Files selected for processing (13)
plugins/woocommerce/changelog/fix-49102(1 hunks)plugins/woocommerce/client/blocks/assets/css/style.scss(1 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/product-price/style.scss(1 hunks)plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scss(1 hunks)plugins/woocommerce/client/blocks/packages/components/formatted-monetary-amount/index.tsx(5 hunks)plugins/woocommerce/client/blocks/packages/components/formatted-monetary-amount/style.scss(1 hunks)plugins/woocommerce/includes/wc-formatting-functions.php(2 hunks)plugins/woocommerce/tests/e2e-pw/tests/coupons/cart-block-coupons.spec.js(1 hunks)plugins/woocommerce/tests/e2e-pw/tests/coupons/checkout-block-coupons.spec.js(1 hunks)plugins/woocommerce/tests/legacy/unit-tests/cart/cart.php(3 hunks)plugins/woocommerce/tests/legacy/unit-tests/formatting/functions.php(3 hunks)plugins/woocommerce/tests/legacy/unit-tests/order/class-wc-tests-crud-orders.php(1 hunks)plugins/woocommerce/tests/legacy/unit-tests/product/data.php(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`plugins/woocommerce/tests/**/*.php`: WooCommerce PHPUnit tests for files in thi...
plugins/woocommerce/tests/**/*.php: WooCommerce PHPUnit tests for files in this path should be run using the command: pnpm run test:php:env {relative_path} --verbose, and the command must be executed from the plugins/woocommerce directory.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/woo-phpunit.mdc)
List of files the instruction was applied to:
plugins/woocommerce/tests/legacy/unit-tests/cart/cart.phpplugins/woocommerce/tests/legacy/unit-tests/product/data.phpplugins/woocommerce/tests/legacy/unit-tests/formatting/functions.phpplugins/woocommerce/tests/legacy/unit-tests/order/class-wc-tests-crud-orders.php
🔇 Additional comments (22)
plugins/woocommerce/tests/legacy/unit-tests/cart/cart.php (1)
1090-1112: Ensure all assertion strings updated for new CSS classOnly the three assertions in this test method were modified, but other tests (or even this method earlier in the file) still expect the old markup.
If any price-related assertion is missed the suite will silently pass in PHP 8+ (string differences in HTML rarely raise warnings).Please run the full PHPUnit suite and search for
"<bdi>"without the class to confirm no stale expectations remain.plugins/woocommerce/tests/e2e-pw/tests/coupons/checkout-block-coupons.spec.js (1)
200-200: LGTM! Selector update aligns with RTL markup changes.The change from a direct child selector (
>) to a descendant selector (space) correctly accommodates the updated DOM structure introduced by the RTL currency symbol fixes. This ensures the test can still locate discount value elements even with additional wrapper elements.plugins/woocommerce/client/blocks/assets/js/base/components/product-price/style.scss (1)
27-34: Excellent RTL currency symbol fix implementation.The new CSS classes provide proper bidirectional text handling:
.woocommerce-Price-salePriceensures consistent spacing for sale prices.woocommerce-Price-bidiuses the standard approach (unicode-bidi: bidi-override+direction: ltr) to force left-to-right rendering of currency symbols in RTL contextsThis correctly addresses the RTL currency symbol rendering issues mentioned in the PR objectives.
plugins/woocommerce/tests/e2e-pw/tests/coupons/cart-block-coupons.spec.js (1)
195-195: LGTM! Consistent selector update with checkout block tests.The selector change mirrors the one in the checkout block tests, ensuring both cart and checkout block E2E tests accommodate the updated DOM structure from the RTL fixes. This consistency is good for maintainability.
plugins/woocommerce/tests/legacy/unit-tests/product/data.php (3)
268-268: Test assertion correctly updated for new markup.The expected HTML string now includes the
woocommerce-Price-bidiclass on<bdi>elements andwoocommerce-Price-salePriceclass on<ins>elements, accurately reflecting the markup changes made in the formatting functions for RTL support.
272-272: Consistent test update for sale price markup.The assertion correctly expects the new CSS classes that support RTL currency symbol rendering, maintaining test accuracy with the updated price formatting.
276-276: Test assertion updated for regular price markup.The expected HTML correctly includes the
woocommerce-Price-bidiclass for consistent RTL text direction handling across all price types.plugins/woocommerce/includes/wc-formatting-functions.php (2)
620-620: Perfect implementation of RTL currency symbol fix.Adding the
woocommerce-Price-bidiclass to the<bdi>element provides the necessary hook for CSS to enforce left-to-right text direction for currency symbols in RTL contexts. This is a clean, non-breaking change that enhances the markup without affecting existing functionality.
1324-1324: Excellent addition of sale price styling class.The
woocommerce-Price-salePriceclass on the<ins>element enables consistent styling for sale prices, including the margin spacing defined in the CSS. This complements the RTL fixes and improves overall price display consistency.plugins/woocommerce/tests/legacy/unit-tests/order/class-wc-tests-crud-orders.php (1)
995-995: LGTM! Test updated correctly for new markup structure.The test assertion has been properly updated to expect the new
woocommerce-Price-bidiCSS class in the<bdi>element. This aligns with the RTL currency symbol rendering fix implemented across the codebase.plugins/woocommerce/tests/legacy/unit-tests/formatting/functions.php (5)
596-600: LGTM! Test assertions correctly updated for new price markup.All test assertions have been properly updated to expect the new
woocommerce-Price-bidiCSS class in the<bdi>elements wrapping price amounts. These changes align with the RTL currency symbol rendering improvements.
603-619: LGTM! Additional test cases updated consistently.The remaining test cases have been systematically updated to include the new CSS class, ensuring comprehensive test coverage for the RTL rendering fix.
624-624: LGTM! Ex-tax label test updated correctly.The test for price display with ex-tax label correctly includes the new
woocommerce-Price-bidiclass while preserving the tax label markup.
938-938: LGTM! Sale price formatting test updated with new CSS classes.The test correctly expects both the
woocommerce-Price-bidiclass in<bdi>elements and the newwoocommerce-Price-salePriceclass in the<ins>element for sale prices. This ensures proper RTL rendering for sale price displays.
947-947: LGTM! Price range formatting test updated correctly.The price range test assertion has been properly updated to include the
woocommerce-Price-bidiclass in both price<bdi>elements, maintaining consistency with the RTL rendering improvements.plugins/woocommerce/client/blocks/packages/components/formatted-monetary-amount/index.tsx (7)
11-11: LGTM! Appropriate imports added for React element manipulation.The addition of
cloneElementandisValidElementimports from@wordpress/elementis necessary for the new RTL styling functionality.
31-31: LGTM! Type broadening improves flexibility.Changing the
renderTextprop type from(value: string) => JSX.Elementto(value: string) => React.ReactNodeis appropriate as it allows for more flexible return types while maintaining type safety.
98-106: LGTM! RTL prefix styles implementation is well-structured.The conditional creation of RTL styles based on the presence of a currency prefix is logical and efficient. The specific CSS properties (
unicodeBidi: 'bidi-override'anddirection: 'ltr') are appropriate for enforcing left-to-right directionality in RTL contexts.
108-121: LGTM! Helper function correctly handles custom renderText elements.The
renderTextWithRtlStylesfunction properly:
- Validates that the returned element is a valid React element
- Safely clones the element with merged styles
- Applies RTL styles after existing styles to ensure proper precedence
The null check and element validation prevent runtime errors with invalid custom renderText implementations.
136-140: LGTM! RTL styles correctly applied to NumberFormat component.The RTL styles are properly merged into the
styleprop, ensuring that currency prefixes display correctly in RTL contexts while preserving any existing styles.
142-147: LGTM! Custom renderText handling implemented correctly.The conditional assignment of the custom
renderTextfunction ensures that RTL styles are applied to custom text renderings, maintaining consistency across different rendering approaches.
158-166: LGTM! Wrapper span provides consistent container structure.The addition of the
wc-block-number-format-containerwrapper span is appropriate for providing styling hooks and maintaining consistent layout structure. The NumberFormat component is properly configured with all the necessary props.
|
Hey @straku I've updated the tests, they were failing due to the addition of coupons/cart-block-coupons.spec.js➜ woocommerce git:(fix/49102) ✗ pnpm --filter=@woocommerce/plugin-woocommerce test:e2e tests/e2e-pw/tests/coupons/cart-block-coupons.spec.js ... Running 12 tests using 1 worker
1 skipped coupons/checkout-block-coupons.spec.js➜ woocommerce git:(fix/49102) ✗ pnpm --filter=@woocommerce/plugin-woocommerce test:e2e tests/e2e-pw/tests/coupons/checkout-block-coupons.spec.js ... Running 12 tests using 1 worker
1 skipped coupons/create-restricted-coupons.spec.js➜ woocommerce git:(fix/49102) ✗ pnpm --filter=@woocommerce/plugin-woocommerce test:e2e tests/e2e-pw/tests/coupons/create-restricted-coupons.spec.js ... Running 20 tests using 1 worker
Slow test file: [e2e] › tests/e2e-pw/tests/coupons/create-restricted-coupons.spec.js (2.7m)
Can you please clarify what needs to be fixed here? Thanks! |
|
@AhmarZaidi Thanks for fixing tests 👏 When it comes to the images, this is how they display to me:
Trying to open them leads to a 404 page. It will be difficult to properly review without access to them. |
My bad, updated them, should be visible now 😅 Also, I checked and these tests pass on my local but were failing on the last commit: Core e2e tests - WP latest-1 [WP 6.7.2] 4/5 - @woocommerce/plugin-woocommerce [e2e]➜ woocommerce git:(fix/49102) pnpm --filter=@woocommerce/plugin-woocommerce test:e2e tests/e2e-pw/tests/product/create-product-attributes.spec.js Using config file: /Users/ahmar/Ahmar/CODING/rtCamp/woocommerce/plugins/woocommerce/tests/e2e-pw/envs/default/playwright.config.js BASE_URL is not set. Using default: http://localhost:8086 Running 9 tests using 1 worker
1 skipped [PHP: 8.4 WP: latest [WP latest] 2/2 - @woocommerce/plugin-woocommerce [unit:php]➜ woocommerce git:(fix/49102) pnpm --filter=@woocommerce/plugin-woocommerce test:unit:env -- --filter=WC_Tests_CRUD_Orders
ℹ Starting 'vendor/bin/phpunit -c phpunit.xml --verbose --filter=WC_Tests_CRUD_Orders' on the tests-cli container. Installing... Runtime: PHP 8.1.32 ............................................................... 63 / 130 ( 48%) Time: 00:02.974, Memory: 153.00 MB OK (130 tests, 191 assertions) |
plugins/woocommerce/client/blocks/packages/components/formatted-monetary-amount/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Thank you for your hard work, please address this comment and we will get it merged 😊
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
plugins/woocommerce/client/blocks/assets/js/base/components/product-price/index.tsx (1)
122-127: Update the JSDoc comment to accurately describe the prop usage.The documentation states "Custom style to be applied to the sale price container for LTR currency symbols" and references the
<del>element, but this prop is actually applied to both the regular price (<del>) and sale price (<ins>) elements to handle RTL currency symbol rendering.- /** - * Custom style to be applied to the sale price container for LTR currency symbols - * - * i.e. `<del>` element - */ + /** + * Custom style to be applied to both regular and sale price containers for RTL currency symbol handling + * + * Applied to both `<del>` and `<ins>` elements + */
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
plugins/woocommerce/client/blocks/assets/js/base/components/product-price/index.tsx(6 hunks)plugins/woocommerce/client/blocks/packages/components/formatted-monetary-amount/index.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- plugins/woocommerce/client/blocks/packages/components/formatted-monetary-amount/index.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: woocommerce/woocommerce#0
File: .cursor/rules/generate-pr-description.mdc:0-0
Timestamp: 2025-06-30T09:26:55.361Z
Learning: Provide clear, step-by-step instructions for how to test the changes in the PR description.
Learnt from: samueljseay
PR: woocommerce/woocommerce#58716
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts:83-101
Timestamp: 2025-06-17T07:07:53.443Z
Learning: In WooCommerce blocks, when porting existing code patterns that have known issues (like parseInt truncating decimal money values), maintain consistency with existing implementation rather than making isolated fixes. The preference is for systematic refactoring approaches (like broader Dinero adoption) over piecemeal changes.
Learnt from: CR
PR: woocommerce/woocommerce#0
File: .cursor/rules/generate-pr-description.mdc:0-0
Timestamp: 2025-06-30T09:26:55.361Z
Learning: Summarize the changes, testing steps, and rationale in a way that is easy for reviewers to understand.
Learnt from: NeosinneR
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-06-26T14:25:08.421Z
Learning: In WooCommerce transactional emails, product images have historically had display issues due to lazy loading attributes being applied, which email clients cannot process since they don't execute JavaScript. This issue existed in both old and new email templates, but became more visible with the new email template system. The fix involves preventing lazy loading on attachment images specifically during email generation by adding skip classes and data attributes.
Learnt from: Aljullu
PR: woocommerce/woocommerce#59370
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss:236-243
Timestamp: 2025-07-03T10:09:20.635Z
Learning: In WooCommerce blocks CSS, prefer using standard CSS properties like `scrollbar-width` over vendor-specific prefixes when the standard property has good browser support. As of late 2024, `scrollbar-width` is widely supported across all major browsers and doesn't require WebKit-specific workarounds.
Learnt from: prettyboymp
PR: woocommerce/woocommerce#59048
File: .github/workflows/cherry-pick-milestoned-prs.yml:60-83
Timestamp: 2025-06-26T12:45:40.709Z
Learning: WooCommerce uses WordPress versioning conventions where minor versions in X.Y.Z format are constrained to 0-9 (Y cannot exceed 9). This means version increment logic should reset minor to 0 and increment major when minor reaches 9, rather than allowing two-digit minor versions like 9.10 or 9.11.
Learnt from: opr
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-06-20T17:38:16.565Z
Learning: WooCommerce legacy JavaScript files in plugins/woocommerce/client/legacy/js/ must use older JavaScript syntax and cannot use modern features like optional chaining (?.) due to browser compatibility requirements. Explicit null checking with && operators should be used instead.
Learnt from: Aljullu
PR: woocommerce/woocommerce#59370
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss:206-233
Timestamp: 2025-07-03T10:08:59.936Z
Learning: WooCommerce uses Autoprefixer in their PostCSS configuration (plugins/woocommerce/client/blocks/postcss.config.js) with WordPress' standard browserslist configuration (@wordpress/browserslist-config) to automatically add vendor prefixes like -webkit-mask-image based on supported browsers, eliminating the need for manual prefix additions.
Learnt from: Aljullu
PR: woocommerce/woocommerce#59370
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss:206-233
Timestamp: 2025-07-03T10:08:59.936Z
Learning: WooCommerce uses Autoprefixer in their PostCSS configuration (plugins/woocommerce/client/blocks/postcss.config.js) with WordPress' standard browserslist configuration (@wordpress/browserslist-config) to automatically add vendor prefixes like -webkit-mask-image based on supported browsers, eliminating the need for manual prefix additions.
Learnt from: Aljullu
PR: woocommerce/woocommerce#58809
File: plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php:222-225
Timestamp: 2025-06-13T17:11:13.732Z
Learning: In `plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php`, the team intentionally relies on toggling the `disabled` CSS class (via `data-wp-class--disabled`) instead of binding the `disabled` attribute, to mirror the behavior of the classic WooCommerce template.
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss:21-26
Timestamp: 2025-06-13T15:24:45.923Z
Learning: In WooCommerce blocks, bold styling for `.wc-block-components-product-details__name` should be scoped only to the Cart block (`.wc-block-cart__main`); on the Checkout block, product names are not bold because prices are highlighted instead.
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx:0-0
Timestamp: 2025-06-16T16:12:12.148Z
Learning: For WooCommerce checkout blocks, lazy loading was removed in favor of direct imports to prevent sequential "popping" effects during component loading. This approach prioritizes user experience over code splitting, with minimal bundle size impact and improved performance (1.7s to 1.1s speed score improvement). The checkout flow benefits from having all components load together rather than incrementally.
plugins/woocommerce/client/blocks/assets/js/base/components/product-price/index.tsx (8)
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss:21-26
Timestamp: 2025-06-13T15:24:45.923Z
Learning: In WooCommerce blocks, bold styling for `.wc-block-components-product-details__name` should be scoped only to the Cart block (`.wc-block-cart__main`); on the Checkout block, product names are not bold because prices are highlighted instead.
Learnt from: samueljseay
PR: woocommerce/woocommerce#58716
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts:83-101
Timestamp: 2025-06-17T07:07:53.443Z
Learning: In WooCommerce blocks, when porting existing code patterns that have known issues (like parseInt truncating decimal money values), maintain consistency with existing implementation rather than making isolated fixes. The preference is for systematic refactoring approaches (like broader Dinero adoption) over piecemeal changes.
Learnt from: vladolaru
PR: woocommerce/woocommerce#58784
File: plugins/woocommerce/client/admin/client/settings-payments/components/other-payment-gateways/other-payment-gateways.tsx:43-50
Timestamp: 2025-06-18T07:56:06.961Z
Learning: In plugins/woocommerce/client/admin/client/settings-payments/components/other-payment-gateways/other-payment-gateways.tsx, the user vladolaru prefers to keep the current setUpPlugin function signature with optional positional context parameter rather than refactoring to an options object or making context required.
Learnt from: samueljseay
PR: woocommerce/woocommerce#59051
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx:66-70
Timestamp: 2025-06-23T05:47:52.696Z
Learning: For WooCommerce mini-cart blocks in plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/, the standardized conditional pattern for experimental features should be `if ( isExperimentalMiniCartEnabled() ) { blockSettings.save = () => <InnerBlocks.Content />; }` - defaulting to the traditional Save component and only overriding when the experimental feature is enabled.
Learnt from: gigitux
PR: woocommerce/woocommerce#58902
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/edit.tsx:205-206
Timestamp: 2025-06-17T12:40:54.118Z
Learning: In WordPress blocks, when there's a styling mismatch between editor and frontend, check if the PHP renderer (like in `ProductSpecifications.php`) adds specific classes to the output. If so, add those same classes to the `useBlockProps` className in the editor component (like in `edit.tsx`) to ensure consistent styling. For example, adding `wp-block-table` class to both frontend and editor ensures core table styles and theme customizations apply consistently.
Learnt from: opr
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-06-20T17:38:16.565Z
Learning: WooCommerce legacy JavaScript files in plugins/woocommerce/client/legacy/js/ must use older JavaScript syntax and cannot use modern features like optional chaining (?.) due to browser compatibility requirements. Explicit null checking with && operators should be used instead.
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx:76-90
Timestamp: 2025-06-13T13:37:35.793Z
Learning: In plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx, the `shouldAnimate` flag is expected to be `false` only on initial render and may remain `true` after the first edit; it does not need to be reset.
Learnt from: Aljullu
PR: woocommerce/woocommerce#59370
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss:236-243
Timestamp: 2025-07-03T10:09:20.635Z
Learning: In WooCommerce blocks CSS, prefer using standard CSS properties like `scrollbar-width` over vendor-specific prefixes when the standard property has good browser support. As of late 2024, `scrollbar-width` is widely supported across all major browsers and doesn't require WebKit-specific workarounds.
🔇 Additional comments (2)
plugins/woocommerce/client/blocks/assets/js/base/components/product-price/index.tsx (2)
153-156: Good implementation of style merging for RTL handling.The style merging approach correctly prioritizes RTL styles over existing styles, ensuring proper currency symbol rendering in RTL contexts.
Also applies to: 175-178
322-322: Correctly passes RTL styles to SalePrice component.The prop passing is implemented correctly and integrates well with the existing component structure.
Submission Review Guidelines:
Changes proposed in this Pull Request:
This PR adds custom styles inluding the
unicode-bidialong withdirectionCSS properties to fix the RTL currency symbol issue.Additionally, it also adds a
renderTextWithRtlStylesfunction toFormattedMonetaryAmountcomponent. ThisclonestherenderTextelement, if passed and applies the necessaryRTLstyle classes to it. This is used forSalePriceof theProductPricecomponent.It also handles the additional cases mentioned here: #49102 (comment)
Closes #49102
Screenshots or screen recordings:
Screen.Recording.2025-05-07.at.6.33.07.PM.mov
Currency position:
Left with spaceProduct collection block in Editor
Checkout page order summary
Cart page
Variable product frontend
Currency position:
Right with spaceProduct collection block in Editor
Product collection block in Frontend
How to test the changes in this Pull Request:
Fix 1: Add space between the normal price and the sale price:
Create a new post and add Product Collection block. In "Product Price" block, you will see that space is correctly added between normal price and sale price as shown in the screenshot below.
Fix 2: Keep the same settings as above but change "Currency position" to "Right with space":
In WooCommerce > Settings > General, change "Currency position" to "Right with space".
Create a new post and add Product Collection block. In "Product Price" block, notice that it's looking correct as shown in the screenshot below.
Testing that has already taken place:
Changelog entry
Changelog Entry Details
Significance
Type
Message
Changelog Entry Comment
Comment