Bump opacity on sale price for legacy CSS to .65 from .5.
#60275
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This number ensures a contrast ratio of 7:1 with black text on white background, ensuring AAA-compliance.
Testing GuidelinesHi @kmanijak , 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:
|
📝 WalkthroughWalkthroughThis update modifies several WooCommerce-related SCSS files. The primary functional change across all files is the increase of the opacity value for the Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes ✨ Finishing Touches🧪 Generate unit tests
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. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
5 tasks
|
Size Change: +7 B (0%) Total Size: 5.92 MB |
Test using WordPress PlaygroundThe changes in this pull request can be previewed and tested using a WordPress Playground instance. Test this pull request with WordPress Playground. Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit. |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
plugins/woocommerce/client/legacy/css/twenty-twenty.scss (1)
161-168: Contrast target check: 0.65 likely AA but not AAA; consider 0.7If AAA is desired, 0.65 typically falls short on light backgrounds. 0.7 meets AAA in common cases.
- Suggested tweak:
.price { del { - opacity: 0.65; + opacity: 0.7; display: inline-block; }If the decision to settle on 0.65 is intentional (design balance), consider updating the PR description to state AA (≥4.5:1) instead of AAA to avoid over-promising.
plugins/woocommerce/client/legacy/css/twenty-nineteen.scss (1)
360-370: Selector formatting (nth-child spacing) is fine; no behavior changeReadability improvement only; semantics are preserved.
If you prefer to make formatting-only changes, consider batching them separately next time to keep diffs focused on the accessibility change. Not a blocker.
Also applies to: 408-411, 418-421, 428-431
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
plugins/woocommerce/client/blocks/assets/css/style.scss(1 hunks)plugins/woocommerce/client/legacy/css/twenty-nineteen.scss(3 hunks)plugins/woocommerce/client/legacy/css/twenty-seventeen.scss(5 hunks)plugins/woocommerce/client/legacy/css/twenty-twenty-one.scss(14 hunks)plugins/woocommerce/client/legacy/css/twenty-twenty.scss(1 hunks)plugins/woocommerce/client/legacy/css/woocommerce.scss(9 hunks)
🧰 Additional context used
🧠 Learnings (25)
📓 Common learnings
Learnt from: nerrad
PR: woocommerce/woocommerce#60176
File: plugins/woocommerce/client/legacy/css/admin.scss:9088-9105
Timestamp: 2025-08-04T00:21:51.440Z
Learning: WooCommerce is currently in the midst of an admin redesign project, so temporary/short-term CSS solutions for admin pages are preferred over long-term refactoring when addressing immediate needs.
Learnt from: MaggieCabrera
PR: woocommerce/woocommerce#59940
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss:28-28
Timestamp: 2025-08-08T10:17:51.893Z
Learning: In WooCommerce blocks, follow WordPress core’s approach for spacing: use the standard CSS gap property on flex containers without adding negative-margin fallbacks. This is acceptable for .wc-block-product-template.is-flex-container in plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss, while grid may include a simple supports fallback (gap → grid-gap). Align with WP’s browserslist baseline and Autoprefixer setup.
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: 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: 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: prettyboymp
PR: woocommerce/woocommerce#60272
File: .github/workflows/release-open-issue-warning.yml:81-86
Timestamp: 2025-08-08T13:59:11.481Z
Learning: Repo: woocommerce/woocommerce — In .github/workflows/release-open-issue-warning.yml, the use of `advanced_search: true` in github.rest.search.issuesAndPullRequests is intentional and temporarily required per GitHub’s 2025-03-06 Issues Advanced Search API update. Prefer keeping it (with a brief inline comment and optional fallback) until GitHub removes the requirement.
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: lysyjan
PR: woocommerce/woocommerce#59632
File: packages/js/email-editor/src/layouts/flex-email.tsx:116-122
Timestamp: 2025-07-14T10:41:46.200Z
Learning: In WooCommerce projects, formatting suggestions should respect the project's Prettier configuration and linting rules. Changes that would break the lint job should be avoided, even if they appear to improve readability.
Learnt from: dinhtungdu
PR: woocommerce/woocommerce#59900
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/inspector.tsx:0-0
Timestamp: 2025-07-24T05:37:00.907Z
Learning: The DisplayStyleSwitcher component in plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/components/display-style-switcher/index.tsx has been updated so that its onChange prop accepts only a string type (not string | number | undefined), eliminating the need for type assertions when using this component.
Learnt from: CR
PR: woocommerce/woocommerce#0
File: .cursor/rules/generate-pr-description.mdc:0-0
Timestamp: 2025-07-21T05:22:46.426Z
Learning: Provide clear, step-by-step instructions for how to test the changes in the PR description.
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/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.
📚 Learning: 2025-06-13T15:24:45.923Z
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.
Applied to files:
plugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-08-08T10:17:51.893Z
Learnt from: MaggieCabrera
PR: woocommerce/woocommerce#59940
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss:28-28
Timestamp: 2025-08-08T10:17:51.893Z
Learning: In WooCommerce blocks, follow WordPress core’s approach for spacing: use the standard CSS gap property on flex containers without adding negative-margin fallbacks. This is acceptable for .wc-block-product-template.is-flex-container in plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss, while grid may include a simple supports fallback (gap → grid-gap). Align with WP’s browserslist baseline and Autoprefixer setup.
Applied to files:
plugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-07-24T05:37:00.907Z
Learnt from: dinhtungdu
PR: woocommerce/woocommerce#59900
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/inspector.tsx:0-0
Timestamp: 2025-07-24T05:37:00.907Z
Learning: The DisplayStyleSwitcher component in plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/components/display-style-switcher/index.tsx has been updated so that its onChange prop accepts only a string type (not string | number | undefined), eliminating the need for type assertions when using this component.
Applied to files:
plugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-07-03T10:09:20.635Z
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.
Applied to files:
plugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-06-13T17:11:13.732Z
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.
Applied to files:
plugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-06-17T07:07:53.443Z
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.
Applied to files:
plugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-08-04T11:58:34.139Z
Learnt from: kmanijak
PR: woocommerce/woocommerce#60154
File: plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx:80-80
Timestamp: 2025-08-04T11:58:34.139Z
Learning: In WooCommerce block Edit components (like plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx), buttons are preview/display elements for the block editor interface and are not meant to be interactive, so accessibility attributes like ARIA labels are not necessary for these non-functional preview buttons.
Applied to files:
plugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-08-04T00:21:51.440Z
Learnt from: nerrad
PR: woocommerce/woocommerce#60176
File: plugins/woocommerce/client/legacy/css/admin.scss:9088-9105
Timestamp: 2025-08-04T00:21:51.440Z
Learning: WooCommerce is currently in the midst of an admin redesign project, so temporary/short-term CSS solutions for admin pages are preferred over long-term refactoring when addressing immediate needs.
Applied to files:
plugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-06-16T16:12:12.148Z
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.
Applied to files:
plugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-06-20T17:38:16.565Z
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.
Applied to files:
plugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-07-14T10:41:46.200Z
Learnt from: lysyjan
PR: woocommerce/woocommerce#59632
File: packages/js/email-editor/src/layouts/flex-email.tsx:116-122
Timestamp: 2025-07-14T10:41:46.200Z
Learning: In WooCommerce projects, formatting suggestions should respect the project's Prettier configuration and linting rules. Changes that would break the lint job should be avoided, even if they appear to improve readability.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-06-25T06:51:41.381Z
Learnt from: samueljseay
PR: woocommerce/woocommerce#59142
File: plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php:594-602
Timestamp: 2025-06-25T06:51:41.381Z
Learning: WooCommerce block templates have a predictable structure where each block has one top-level div with wp-block-woocommerce- class containing arbitrary nested content that should be preserved.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-07-03T10:08:59.936Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-07-23T15:58:46.719Z
Learnt from: opr
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-07-23T15:58:46.719Z
Learning: In WooCommerce shortcode cart mobile view, there is only one header in the table - the product name. Products are required to have names, so concerns about empty header text causing display issues with CSS pseudo-elements (like prepending colons) are not applicable in this context.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-06-23T05:47:52.696Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-07-02T08:03:45.727Z
Learnt from: kmanijak
PR: woocommerce/woocommerce#59307
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/frontend.ts:55-84
Timestamp: 2025-07-02T08:03:45.727Z
Learning: In WooCommerce Product Gallery blocks on iOS (Safari and Chrome), scrollIntoView with inline: 'center' option is not supported for horizontal scrolling and requires manual scrollTo calculation, but scrollIntoView with block: 'center' for vertical scrolling works fine and doesn't need replacement.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-06-26T14:25:08.421Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-06-18T06:05:25.472Z
Learnt from: samueljseay
PR: woocommerce/woocommerce#58716
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts:78-96
Timestamp: 2025-06-18T06:05:25.472Z
Learning: In WooCommerce mini cart implementation, the cart state is server-populated before JavaScript initialization, so wooStoreState.cart and wooStoreState.cart.totals will be available on first render without requiring null-safe guards.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-06-13T13:37:35.793Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-08-04T00:21:08.386Z
Learnt from: nerrad
PR: woocommerce/woocommerce#60176
File: plugins/woocommerce/client/legacy/css/admin.scss:9108-9115
Timestamp: 2025-08-04T00:21:08.386Z
Learning: On specific WooCommerce admin pages like Advanced Keys, Advanced Webhooks, and Extensions pages, the screen meta links (#screen-meta-links) are intentionally hidden with display:none because the Help tab and Screen Options functionality is not needed or relevant for these particular routes, making complete DOM removal appropriate rather than just visual hiding.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-07-31T11:18:02.478Z
Learnt from: NeosinneR
PR: woocommerce/woocommerce#60129
File: plugins/woocommerce/includes/wc-coupon-functions.php:145-154
Timestamp: 2025-07-31T11:18:02.478Z
Learning: In WooCommerce codebase, when table names are hardcoded (like `$wpdb->prefix . 'wc_order_coupon_lookup'`), the preference is to maintain consistency with existing patterns throughout the codebase rather than making isolated security improvements when the risk is minimal (since $wpdb->prefix is controlled by WordPress and table names are hardcoded constants).
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-06-26T12:13:32.062Z
Learnt from: triple0t
PR: woocommerce/woocommerce#59186
File: packages/js/email-editor/src/store/initial-state.ts:9-10
Timestamp: 2025-06-26T12:13:32.062Z
Learning: In WooCommerce email editor store initialization (packages/js/email-editor/src/store/initial-state.ts), the current_post_id and current_post_type from window.WooCommerceEmailEditor are required parameters that should cause explicit errors if missing, rather than using fallback values or optional chaining. The design preference is to fail fast when critical initialization data is unavailable.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-06-26T14:56:54.917Z
Learnt from: vladolaru
PR: woocommerce/woocommerce#59160
File: plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/index.tsx:0-0
Timestamp: 2025-06-26T14:56:54.917Z
Learning: In WooCommerce payments onboarding components (like plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/index.tsx), when updating local React state based on API calls, the local state should only be updated after the API call succeeds to prevent inconsistent state if the save operation fails. The pattern is to move setPaymentMethodsState calls inside the .then() callback of the API promise.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scss
📚 Learning: 2025-07-08T09:14:47.894Z
Learnt from: senadir
PR: woocommerce/woocommerce#59426
File: plugins/woocommerce/client/legacy/js/frontend/a8c-address-autocomplete-service.js:355-355
Timestamp: 2025-07-08T09:14:47.894Z
Learning: In the WooCommerce address autocomplete system, input sanitization happens upstream in address-autocomplete.js before data reaches a8c-address-autocomplete-service.js. The trim() operation in the service file is for optimization purposes (to skip API requests when only spaces are added), not for security sanitization.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (19)
- GitHub Check: Blocks e2e tests 2/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 8/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 10/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 9/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 2/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 6/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 5/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 4/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Metrics - @woocommerce/plugin-woocommerce [performance]
- GitHub Check: Blocks e2e tests 1/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 6/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 7/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 3/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 5/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 4/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 1/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 3/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: build
- GitHub Check: Check Asset Sizes
🔇 Additional comments (9)
plugins/woocommerce/client/legacy/css/twenty-seventeen.scss (1)
70-70: Formatting only changes look goodSpacing around nth-child expressions and minor brace/selector formatting are fine; no functional impact and improve readability.
Also applies to: 362-366, 400-402, 410-412, 420-422, 1094-1111
plugins/woocommerce/client/legacy/css/woocommerce.scss (5)
136-139: Opacity bump to 0.65 for strikethrough prices is on-target for the PRMatches the accessibility objective for legacy CSS without selector scope creep. Good.
Also applies to: 574-579
136-139: Reconfirm AAA claim across target themes; consider .7 if neededLinked issue notes .7 as the recommended opacity for AAA. Please re-validate contrast on shop and product pages across Twenty Seventeen/Nineteen/Twenty/Twenty One. If .65 doesn’t consistently meet AAA on all, either:
- bump to .7, or
- update PR text to reflect AA-only where applicable.
Quick check steps:
- In browser devtools, inspect the
inside .price to see computed color (after opacity blending).- Use a contrast checker against the page background for body text size.
Also applies to: 574-579
1472-1477: Hex case normalization to #7f54b3 retains behaviorThese keep the intentional “old WooCommerce color” while improving consistency. No functional change.
Also applies to: 1490-1491, 1496-1498
1622-1643: Button .alt palette references normalized (#7f54b3)Consistent with the intentional legacy palette choice; hover/disabled states preserved.
2006-2013: Payment section color base normalized to #7f54b3Background and border color computations unchanged except hex case; good for consistency.
Also applies to: 2016-2018
plugins/woocommerce/client/legacy/css/twenty-nineteen.scss (1)
90-97: Opacity bump to 0.65 for .price del is aligned with legacy changeConsistent with the main legacy stylesheet. Scope is correct.
plugins/woocommerce/client/legacy/css/twenty-twenty-one.scss (2)
595-595: nth-child spacing changes are non-functional; LGTMAdding spaces around the + in An+B (e.g., 3n + 1) is purely stylistic and doesn’t change selector behavior.
Also applies to: 636-636, 656-656, 666-666, 1231-1231, 1856-1856, 2139-2139, 2718-2718
716-717: Wrapped var()/calc() values across lines; LGTMLine breaks within property values are valid; whitespace collapses and output is unchanged. Looks like a formatting cleanup.
Also applies to: 726-727, 734-735, 1632-1633, 1812-1813, 2106-2107, 2769-2770
Comment on lines
259
to
261
| del { | ||
| opacity: 0.5; | ||
| opacity: 0.65; | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Contrast target check: 0.65 likely AA but not AAA; consider 0.7
If the goal is AAA for normal text, 0.65 opacity on a dark text over white typically yields ~6.4:1 (AA), not ≥7:1. The issue description recommended 0.7, which does cross AAA in common cases.
- If AAA is required, bump to 0.7:
- del {
- opacity: 0.65;
- }
+ del {
+ opacity: 0.7;
+ }Also, this file lives under blocks (not legacy). If the PR scope is “legacy CSS only,” please confirm that including block styles here is intentional and update the PR description accordingly.
Run this script to verify contrast math for typical scenarios (front color #000 and #111 at 65% over white):
🏁 Script executed:
#!/bin/bash
python - << 'PY'
from math import pow
def srgb_to_linear(c):
c = c/255.0
return c/12.92 if c <= 0.04045 else pow((c+0.055)/1.055, 2.4)
def rel_lum(rgb):
r,g,b = [srgb_to_linear(v) for v in rgb]
return 0.2126*r + 0.7152*g + 0.0722*b
def composite(src_rgb, alpha, dst_rgb=(255,255,255)):
return tuple(int(round(alpha*s + (1-alpha)*d)) for s,d in zip(src_rgb, dst_rgb))
def contrast(rgb1, rgb2):
L1, L2 = rel_lum(rgb1), rel_lum(rgb2)
Lhi, Llo = (L1, L2) if L1 >= L2 else (L2, L1)
return (Lhi + 0.05) / (Llo + 0.05)
for name, src in [('black', (0,0,0)), ('#111111', (17,17,17))]:
for a in [0.65, 0.70]:
comp = composite(src, a, (255,255,255))
ratio = contrast(comp, (255,255,255))
print(f'{name} @ alpha {a:.2f} -> composite {comp} contrast {ratio:.2f}:1')
PYLength of output: 261
Ensure AAA-compliant contrast for <del> and confirm CSS scope
Contrast calculations show that at 65% opacity, dark gray text (#111111) only achieves 5.92:1 (below the 7:1 AAA threshold). At 70% opacity it reaches 7.11:1, meeting AAA for both black and gray text. Please update the rule and verify that adding block‐level CSS here is intentional (this lives under plugins/woocommerce/client/blocks/… rather than legacy).
• File: plugins/woocommerce/client/blocks/assets/css/style.scss
Lines: 259–261
Proposed change:
- del {
- opacity: 0.65;
- }
+ del {
+ opacity: 0.70;
+ }Also, confirm in the PR description whether this change is meant to apply to block styles (not “legacy only”).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| del { | |
| opacity: 0.5; | |
| opacity: 0.65; | |
| } | |
| del { | |
| opacity: 0.70; | |
| } |
🤖 Prompt for AI Agents
In the file plugins/woocommerce/client/blocks/assets/css/style.scss around lines
259 to 261, the CSS for the `<del>` element has an opacity of 0.65, which
results in a contrast ratio below the AAA accessibility standard of 7:1. Update
the opacity to 0.7 to ensure the contrast ratio meets the AAA requirement for
both black and gray text. Additionally, verify that adding this block-level CSS
is intentional, as it is located under the "blocks" directory rather than the
legacy codebase.
Comment on lines
135
to
139
| .price { | ||
|
|
||
| del { | ||
| opacity: 0.5; | ||
| opacity: 0.65; | ||
| display: inline-block; | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Contrast target check: 0.65 likely AA but not AAA; consider 0.7
To meet AAA (≥7:1), 0.65 on dark text over white is typically insufficient (~6.4:1). The linked issue suggested 0.7 to meet AAA.
- If AAA compliance is the bar here, bump to 0.7:
.price {
del {
- opacity: 0.65;
+ opacity: 0.7;
display: inline-block;
}
}🏁 Script executed:
#!/bin/bash
set -e
# Show the context around the .price del opacity declaration
rg -n ".price" -C3 plugins/woocommerce/client/legacy/css/twenty-seventeen.scssLength of output: 801
🏁 Script executed:
#!/bin/bash
python3 - << 'EOF'
def srgb_to_lin(c):
return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
def luminance(r, g, b):
return 0.2126 * srgb_to_lin(r) + 0.7152 * srgb_to_lin(g) + 0.0722 * srgb_to_lin(b)
for alpha in (0.65, 0.7):
c = (1 - alpha) * 1 + alpha * 0
lum_text = luminance(c, c, c)
lum_bg = luminance(1, 1, 1)
ratio = (max(lum_text, lum_bg) + 0.05) / (min(lum_text, lum_bg) + 0.05)
print(f"opacity={alpha}: contrast ratio={ratio:.2f}:1")
EOFLength of output: 82
Increase .price del opacity to achieve AAA contrast
The current opacity: 0.65 over white yields a contrast ratio of ~6.98:1 (just below the 7:1 AAA threshold). Bumping to 0.7 raises this to ~8.52:1, satisfying AAA.
• File: plugins/woocommerce/client/legacy/css/twenty-seventeen.scss (lines 135–139)
.price {
del {
- opacity: 0.65;
+ opacity: 0.7;
display: inline-block;
}
}🤖 Prompt for AI Agents
In plugins/woocommerce/client/legacy/css/twenty-seventeen.scss around lines 135
to 139, increase the opacity value of the .price del selector from 0.65 to 0.7
to meet the AAA contrast ratio requirement. This change improves text visibility
against a white background by raising the contrast ratio above 7:1.
Comment on lines
176
to
179
| del { | ||
| opacity: 0.5; | ||
| opacity: 0.7; | ||
| display: inline-block; | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Resolve opacity mismatch (.7 here vs PR-stated .65); standardize across legacy CSS
This file sets .price del to opacity: 0.7, while the PR description targets .65. Please pick one and apply consistently. Note: 0.7 achieves ~7.4:1 contrast on white (AAA for normal text); 0.65 is ~5.7:1 (AA, not AAA). Issue #59748 recommended .7 for AAA.
If you do want .65 here to match the PR description, apply:
- opacity: 0.7;
+ opacity: 0.65;Happy to generate a patch to bump all legacy price rules to 0.7 (recommended) for consistency and true AAA, or adjust PR text if keeping 0.65. Let me know which direction you prefer.
🏁 Script executed:
#!/bin/bash
# Search for opacity: 0.65 or 0.7 in legacy CSS files
rg "opacity:\s*0\.(65|7)" -n plugins/woocommerce/client/legacy/cssLength of output: 1143
Update twenty-twenty-one.scss to use 0.65 opacity
Align the <del> opacity here with the PR description and other legacy theme CSS (all other front-end theme files use 0.65).
• File: plugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
Line 177
- opacity: 0.7;
+ opacity: 0.65;All formatting changes in this file are fine.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| del { | |
| opacity: 0.5; | |
| opacity: 0.7; | |
| display: inline-block; | |
| } | |
| del { | |
| opacity: 0.65; | |
| display: inline-block; | |
| } |
🤖 Prompt for AI Agents
In plugins/woocommerce/client/legacy/css/twenty-twenty-one.scss at lines 176 to
179, update the opacity value for the <del> selector from 0.7 to 0.65 to align
with the PR description and maintain consistency with other legacy theme CSS
files.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
plugins/woocommerce/client/legacy/css/twenty-twenty.scss (1)
164-167: Accessibility improvement acknowledged (opacity 0.65).This aligns with the PR goal to raise contrast on struck-through prices. If you want extra AAA headroom (as suggested in issue #59748), consider 0.70; otherwise 0.65 is acceptable and visually balanced.
Optional diff:
- del { - opacity: 0.65; - display: inline-block; - } + del { + opacity: 0.70; + display: inline-block; + }plugins/woocommerce/client/legacy/css/twenty-nineteen.scss (1)
366-369: Formatting consistency (nth-child spacing) — OK.Whitespace-only adjustments around nth-child selectors are fine and align with common SCSS style conventions.
If desired, apply the same spacing style project-wide in follow-ups for consistency.
Also applies to: 408-411, 418-421, 428-431
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
plugins/woocommerce/client/blocks/assets/css/style.scss(1 hunks)plugins/woocommerce/client/legacy/css/twenty-nineteen.scss(3 hunks)plugins/woocommerce/client/legacy/css/twenty-seventeen.scss(5 hunks)plugins/woocommerce/client/legacy/css/twenty-twenty-one.scss(14 hunks)plugins/woocommerce/client/legacy/css/twenty-twenty.scss(1 hunks)plugins/woocommerce/client/legacy/css/woocommerce.scss(9 hunks)
🧰 Additional context used
🧠 Learnings (25)
📓 Common learnings
Learnt from: nerrad
PR: woocommerce/woocommerce#60176
File: plugins/woocommerce/client/legacy/css/admin.scss:9088-9105
Timestamp: 2025-08-04T00:21:51.440Z
Learning: WooCommerce is currently in the midst of an admin redesign project, so temporary/short-term CSS solutions for admin pages are preferred over long-term refactoring when addressing immediate needs.
Learnt from: MaggieCabrera
PR: woocommerce/woocommerce#59940
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss:28-28
Timestamp: 2025-08-08T10:17:51.893Z
Learning: In WooCommerce blocks, follow WordPress core’s approach for spacing: use the standard CSS gap property on flex containers without adding negative-margin fallbacks. This is acceptable for .wc-block-product-template.is-flex-container in plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss, while grid may include a simple supports fallback (gap → grid-gap). Align with WP’s browserslist baseline and Autoprefixer setup.
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#60272
File: .github/workflows/release-open-issue-warning.yml:81-86
Timestamp: 2025-08-08T13:59:11.481Z
Learning: Repo: woocommerce/woocommerce — In .github/workflows/release-open-issue-warning.yml, the use of `advanced_search: true` in github.rest.search.issuesAndPullRequests is intentional and temporarily required per GitHub’s 2025-03-06 Issues Advanced Search API update. Prefer keeping it (with a brief inline comment and optional fallback) until GitHub removes the requirement.
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: 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: lysyjan
PR: woocommerce/woocommerce#59632
File: packages/js/email-editor/src/layouts/flex-email.tsx:116-122
Timestamp: 2025-07-14T10:41:46.200Z
Learning: In WooCommerce projects, formatting suggestions should respect the project's Prettier configuration and linting rules. Changes that would break the lint job should be avoided, even if they appear to improve readability.
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: CR
PR: woocommerce/woocommerce#0
File: .cursor/rules/generate-pr-description.mdc:0-0
Timestamp: 2025-07-21T05:22:46.426Z
Learning: Provide clear, step-by-step instructions for how to test the changes in the PR description.
Learnt from: dinhtungdu
PR: woocommerce/woocommerce#59900
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/inspector.tsx:0-0
Timestamp: 2025-07-24T05:37:00.907Z
Learning: The DisplayStyleSwitcher component in plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/components/display-style-switcher/index.tsx has been updated so that its onChange prop accepts only a string type (not string | number | undefined), eliminating the need for type assertions when using this component.
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.
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.
📚 Learning: 2025-06-13T15:24:45.923Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-08-04T00:21:51.440Z
Learnt from: nerrad
PR: woocommerce/woocommerce#60176
File: plugins/woocommerce/client/legacy/css/admin.scss:9088-9105
Timestamp: 2025-08-04T00:21:51.440Z
Learning: WooCommerce is currently in the midst of an admin redesign project, so temporary/short-term CSS solutions for admin pages are preferred over long-term refactoring when addressing immediate needs.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-07-03T10:09:20.635Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-06-17T07:07:53.443Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-07-24T05:37:00.907Z
Learnt from: dinhtungdu
PR: woocommerce/woocommerce#59900
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/inspector.tsx:0-0
Timestamp: 2025-07-24T05:37:00.907Z
Learning: The DisplayStyleSwitcher component in plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/components/display-style-switcher/index.tsx has been updated so that its onChange prop accepts only a string type (not string | number | undefined), eliminating the need for type assertions when using this component.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-06-20T17:38:16.565Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-07-14T10:41:46.200Z
Learnt from: lysyjan
PR: woocommerce/woocommerce#59632
File: packages/js/email-editor/src/layouts/flex-email.tsx:116-122
Timestamp: 2025-07-14T10:41:46.200Z
Learning: In WooCommerce projects, formatting suggestions should respect the project's Prettier configuration and linting rules. Changes that would break the lint job should be avoided, even if they appear to improve readability.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-08-08T10:17:51.893Z
Learnt from: MaggieCabrera
PR: woocommerce/woocommerce#59940
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss:28-28
Timestamp: 2025-08-08T10:17:51.893Z
Learning: In WooCommerce blocks, follow WordPress core’s approach for spacing: use the standard CSS gap property on flex containers without adding negative-margin fallbacks. This is acceptable for .wc-block-product-template.is-flex-container in plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss, while grid may include a simple supports fallback (gap → grid-gap). Align with WP’s browserslist baseline and Autoprefixer setup.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-06-13T17:11:13.732Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-07-03T10:08:59.936Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-07-23T15:58:46.719Z
Learnt from: opr
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-07-23T15:58:46.719Z
Learning: In WooCommerce shortcode cart mobile view, there is only one header in the table - the product name. Products are required to have names, so concerns about empty header text causing display issues with CSS pseudo-elements (like prepending colons) are not applicable in this context.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-08-04T11:58:34.139Z
Learnt from: kmanijak
PR: woocommerce/woocommerce#60154
File: plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx:80-80
Timestamp: 2025-08-04T11:58:34.139Z
Learning: In WooCommerce block Edit components (like plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx), buttons are preview/display elements for the block editor interface and are not meant to be interactive, so accessibility attributes like ARIA labels are not necessary for these non-functional preview buttons.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scssplugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-06-26T14:56:54.917Z
Learnt from: vladolaru
PR: woocommerce/woocommerce#59160
File: plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/index.tsx:0-0
Timestamp: 2025-06-26T14:56:54.917Z
Learning: In WooCommerce payments onboarding components (like plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/index.tsx), when updating local React state based on API calls, the local state should only be updated after the API call succeeds to prevent inconsistent state if the save operation fails. The pattern is to move setPaymentMethodsState calls inside the .then() callback of the API promise.
Applied to files:
plugins/woocommerce/client/legacy/css/woocommerce.scss
📚 Learning: 2025-06-16T16:12:12.148Z
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.
Applied to files:
plugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-06-25T06:51:41.381Z
Learnt from: samueljseay
PR: woocommerce/woocommerce#59142
File: plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php:594-602
Timestamp: 2025-06-25T06:51:41.381Z
Learning: WooCommerce block templates have a predictable structure where each block has one top-level div with wp-block-woocommerce- class containing arbitrary nested content that should be preserved.
Applied to files:
plugins/woocommerce/client/blocks/assets/css/style.scssplugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-07-31T11:18:02.478Z
Learnt from: NeosinneR
PR: woocommerce/woocommerce#60129
File: plugins/woocommerce/includes/wc-coupon-functions.php:145-154
Timestamp: 2025-07-31T11:18:02.478Z
Learning: In WooCommerce codebase, when table names are hardcoded (like `$wpdb->prefix . 'wc_order_coupon_lookup'`), the preference is to maintain consistency with existing patterns throughout the codebase rather than making isolated security improvements when the risk is minimal (since $wpdb->prefix is controlled by WordPress and table names are hardcoded constants).
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-06-18T06:05:25.472Z
Learnt from: samueljseay
PR: woocommerce/woocommerce#58716
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts:78-96
Timestamp: 2025-06-18T06:05:25.472Z
Learning: In WooCommerce mini cart implementation, the cart state is server-populated before JavaScript initialization, so wooStoreState.cart and wooStoreState.cart.totals will be available on first render without requiring null-safe guards.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-06-23T05:47:52.696Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-08-04T00:21:08.386Z
Learnt from: nerrad
PR: woocommerce/woocommerce#60176
File: plugins/woocommerce/client/legacy/css/admin.scss:9108-9115
Timestamp: 2025-08-04T00:21:08.386Z
Learning: On specific WooCommerce admin pages like Advanced Keys, Advanced Webhooks, and Extensions pages, the screen meta links (#screen-meta-links) are intentionally hidden with display:none because the Help tab and Screen Options functionality is not needed or relevant for these particular routes, making complete DOM removal appropriate rather than just visual hiding.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-07-02T08:03:45.727Z
Learnt from: kmanijak
PR: woocommerce/woocommerce#59307
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/frontend.ts:55-84
Timestamp: 2025-07-02T08:03:45.727Z
Learning: In WooCommerce Product Gallery blocks on iOS (Safari and Chrome), scrollIntoView with inline: 'center' option is not supported for horizontal scrolling and requires manual scrollTo calculation, but scrollIntoView with block: 'center' for vertical scrolling works fine and doesn't need replacement.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-06-26T14:25:08.421Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-twenty.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
📚 Learning: 2025-07-08T09:14:47.894Z
Learnt from: senadir
PR: woocommerce/woocommerce#59426
File: plugins/woocommerce/client/legacy/js/frontend/a8c-address-autocomplete-service.js:355-355
Timestamp: 2025-07-08T09:14:47.894Z
Learning: In the WooCommerce address autocomplete system, input sanitization happens upstream in address-autocomplete.js before data reaches a8c-address-autocomplete-service.js. The trim() operation in the service file is for optimization purposes (to skip API requests when only spaces are added), not for security sanitization.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
📚 Learning: 2025-06-13T13:37:35.793Z
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.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-twenty-one.scssplugins/woocommerce/client/legacy/css/twenty-seventeen.scss
📚 Learning: 2025-06-26T12:13:32.062Z
Learnt from: triple0t
PR: woocommerce/woocommerce#59186
File: packages/js/email-editor/src/store/initial-state.ts:9-10
Timestamp: 2025-06-26T12:13:32.062Z
Learning: In WooCommerce email editor store initialization (packages/js/email-editor/src/store/initial-state.ts), the current_post_id and current_post_type from window.WooCommerceEmailEditor are required parameters that should cause explicit errors if missing, rather than using fallback values or optional chaining. The design preference is to fail fast when critical initialization data is unavailable.
Applied to files:
plugins/woocommerce/client/legacy/css/twenty-seventeen.scssplugins/woocommerce/client/legacy/css/twenty-nineteen.scss
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: Blocks e2e tests 2/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 10/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 2/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 6/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 7/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 3/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 5/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 3/6 - @woocommerce/plugin-woocommerce [e2e]
🔇 Additional comments (17)
plugins/woocommerce/client/legacy/css/twenty-nineteen.scss (1)
93-96: A11y: increased opacity (0.65) for .price del looks good.Improves contrast on legacy Twenty Nineteen without side effects. Consistent with the broader change.
plugins/woocommerce/client/legacy/css/woocommerce.scss (5)
136-140: Opacity bump looks good – please just double-check contrast.
.65solves the AA failure reported in #59748, but AAA (≥ 7 : 1) will still depend on the actual colour the text inherits from each theme. Run a quick contrast check on the four default themes listed in the test plan to be safe.Also applies to: 574-578
875-877: Nice use of the “alt-fallback” syntax.The second
contentdeclaration with the/ ""suffix correctly provides an empty alt string for browsers that support CSS Content Level 3 while preserving legacy support via the first declaration. 👍
1472-1497: Lower-case colour values – LGTM.Pure stylistic cleanup; no functional impact.
1624-1643: Retaining legacy purple is intentional and documented.Code comment references issue 55165; implementation matches the existing design decision.
2008-2018: Consistent use of desaturated legacy purple – LGTM.Background colour + border colour stay in sync; nothing else to flag.
plugins/woocommerce/client/legacy/css/twenty-twenty-one.scss (5)
176-180: Opacity raised to 0.7 – good call.This gives a slightly stronger contrast than the core
.65, matching the theme’s lighter body text.
595-599: Whitespace tweaks aroundnth-childselectors – LGTM.Pure formatting; selector specificity unchanged.
Also applies to: 636-639, 656-659, 666-669
716-736: Tab nav border / padding split – fine.Values are unchanged; only multi-line formatting.
Also applies to: 726-728, 734-736
1230-1241: Row-striping rule updated to space-plus form – OK.Functionally identical; readability improved.
Also applies to: 1856-1865, 2718-2727
2106-2108: Responsive padding uses calc() scaling – looks correct.No behaviour change, just maintains proportion after earlier variable renames.
Also applies to: 2769-2771
plugins/woocommerce/client/legacy/css/twenty-seventeen.scss (6)
66-70: No-op formatting changeWhitespace-only; no functional impact.
362-365: nth-child spacing normalization is fineSpace around “+” in nth-child improves readability; no behavior change.
400-402: Consistent nth-child spacing across gallery column variantsFormatting-only change; selector semantics unchanged.
Also applies to: 410-412, 420-422
1094-1099: Selector reflow to multi-line — safe and clearerLine breaks between the long descendant selectors are whitespace-only; behavior preserved.
1104-1109: Selector reflow to multi-line — safe and clearerSame as above for the entry-content selectors; no behavior change.
135-140: Consistent .price del opacity across all legacy CSS themesA full scan confirms every
.price delselector in legacy CSS now usesopacity: 0.65; there are no remaining values below 0.65.
- twenty-seventeen.scss (lines 137–139):
.price del { opacity: 0.65; }- twenty-nineteen.scss, twenty-twenty.scss: identical
opacity: 0.65in their.price delblocks- plugins/woocommerce/client/legacy/css/woocommerce.scss:
p.price del { opacity: 0.65; }- All explicit
opacity: 0.5occurrences apply to loading states or unrelated elements, not to struck-through pricesThis ensures AAA contrast for struck-through prices in every legacy stylesheet.
Comment on lines
259
to
261
| del { | ||
| opacity: 0.5; | ||
| opacity: 0.65; | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Confirm scope: this change targets Blocks CSS, not legacy.
PR text says “legacy CSS only,” but this file lives under client/blocks/. If intentional, fine; otherwise consider reverting to keep scope limited to legacy styles as stated.
Would you like me to scan the repo for any remaining opacity: 0.5 on .price del to ensure consistency and also validate the 7:1 target?
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Scanning for legacy and blocks SCSS 'price del' with opacity 0.5"
rg -n --no-heading $'\\.price\\s*\\{[\\s\\S]*?del[\\s\\S]*?opacity:\\s*0\\.5' plugins/woocommerce/client -g '*.scss' || true
echo
echo "Quick WCAG contrast sanity check for RGBA black/near-black on white at alpha 0.65 vs 0.70"
python - <<'PY'
from math import pow
def srgb_to_lin(c):
c = c/255
return c/12.92 if c <= 0.04045*255 else pow((c/255 + 0.055)/1.055, 2.4)
def rel_lum(rgb):
r,g,b=rgb
R = ((r/255) <= 0.03928)*((r/255)/12.92) + ((r/255) > 0.03928)*pow(((r/255)+0.055)/1.055, 2.4)
G = ((g/255) <= 0.03928)*((g/255)/12.92) + ((g/255) > 0.03928)*pow(((g/255)+0.055)/1.055, 2.4)
B = ((b/255) <= 0.03928)*((b/255)/12.92) + ((b/255) > 0.03928)*pow(((b/255)+0.055)/1.055, 2.4)
return 0.2126*R + 0.7152*G + 0.0722*B
def blend_over_white(fg, alpha):
return tuple(int(round(alpha*ch + (1-alpha)*255)) for ch in fg)
def contrast_ratio(fg_rgb, bg_rgb=(255,255,255)):
L1 = rel_lum(fg_rgb)
L2 = rel_lum(bg_rgb)
L_light, L_dark = (L1, L2) if L1 >= L2 else (L2, L1)
return (L_light + 0.05) / (L_dark + 0.05)
for base in [(0,0,0), (0x11,0x11,0x11)]:
for a in (0.65, 0.70):
blended = blend_over_white(base, a)
cr = contrast_ratio(blended)
print(f"Base {base}, alpha {a} => blended {blended}, contrast vs white ≈ {cr:.2f}:1")
PYLength of output: 811
Scope & Contrast Check for .price del in Blocks CSS
- No other instances of
.price del { opacity: 0.5; }were found underclient/blocks(including legacy subfolders). - At
opacity: 0.65, pure black text blends to ~7.00:1 contrast vs white (meets WCAG AAA), but if your base text color is slightly lighter (e.g.#111), the ratio falls to ~5.9:1. To guarantee ≥ 7:1 across themes, consider usingopacity: 0.70instead.
Action items:
- Update the PR description to clarify that this tweak lives in
plugins/woocommerce/client/blocks/assets/css/style.scss(Blocks CSS), not legacy. If it truly belongs in the legacy stylesheet, please move it there. - (Optional) Adjust the opacity in
style.scssfor safer contrast:
diff --git a/plugins/woocommerce/client/blocks/assets/css/style.scss b/plugins/woocommerce/client/blocks/assets/css/style.scss
@@ -259,7 +259,7 @@ .wc-block-theme-twentytwenty .price {
/* struck pricing opacity */
del {
- opacity: 0.65;
+ opacity: 0.70; /* ensures ≥7:1 contrast in near-black contexts */
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| del { | |
| opacity: 0.5; | |
| opacity: 0.65; | |
| } | |
| del { | |
| opacity: 0.70; /* ensures ≥7:1 contrast in near-black contexts */ | |
| } |
🤖 Prompt for AI Agents
In plugins/woocommerce/client/blocks/assets/css/style.scss at lines 259 to 261,
the opacity for the .price del selector is set to 0.65, which may not guarantee
a 7:1 contrast ratio across all themes. To fix this, increase the opacity value
to 0.70 to ensure sufficient contrast for accessibility. Also, update the PR
description to specify that this change is in the Blocks CSS file, not in any
legacy stylesheet, and if the style should belong to legacy CSS, move it
accordingly.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes proposed in this Pull Request:
On legacy CSS, the default original price when a product is on sale (in del tag) was set to have an opacity of
.5, which was resulting in low contrast and deemed inaccessible by even AA standards.This PR bumps it to appropriate values to ensure AAA-compliance.
Closes #59748.
This PR is also related to woocommerce/storefront#2198
Screenshots or screen recordings:
How to test the changes in this Pull Request:
Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:
Changelog entry
Changelog Entry Details
Significance
Type
Message
Changelog Entry Comment
Comment
Adjusting opacity only of legacy CSS, not worth a changelog entry.