[Cart & Checkout blocks] Add perceived performance optimizations #60020
Conversation
…f github.com:woocommerce/woocommerce into wooplug-4213-cart-block-enable-progressive-rendering # Conflicts: # plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss
…rendering # Conflicts: # plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss # plugins/woocommerce/client/blocks/assets/js/base/components/skeleton/patterns/cart-line-items/index.tsx
Testing GuidelinesHi @mikejolley @opr @woocommerce/rubik, 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:
|
|
@opr I'm only opening the PR to get a preview site; this is more of a spike at this point. I'll let you know when this is ready for a review |
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. |
|
Size Change: +2.68 kB (+0.05%) Total Size: 5.92 MB
|
…e-look-and-feel-of-the-primary # Conflicts: # plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss # plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx # plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/index.tsx # plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx # plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
📝 WalkthroughWalkthroughThis change introduces a new Changes
Sequence Diagram(s)sequenceDiagram
participant ParentComponent as Any Cart/Checkout Component
participant DelayedContentWithSkeleton
participant SkeletonUI
participant ActualContent
ParentComponent->>DelayedContentWithSkeleton: Render with isLoading, skeleton, children
alt isLoading true
DelayedContentWithSkeleton->>SkeletonUI: Render skeleton
else isLoading false
DelayedContentWithSkeleton->>ActualContent: Render children (actual content)
end
sequenceDiagram
participant DOM as Block Container Element
participant renderBlockInContainers
participant FadeCSS
renderBlockInContainers->>DOM: Check for cart/checkout class
alt is cart/checkout block
renderBlockInContainers->>DOM: Add .is-fading class
Note right of renderBlockInContainers: Wait 200ms
renderBlockInContainers->>DOM: Render block content
renderBlockInContainers->>DOM: Remove .is-fading class
else other block
renderBlockInContainers->>DOM: Render block content immediately
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yml 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (32)
✨ 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. 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
🔭 Outside diff range comments (1)
plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss (1)
187-242: Resolve merge conflict and address build issues.This section contains a merge conflict between HEAD and trunk branches, with different implementations of the skeleton fade styling. The HEAD branch includes calls to the missing
skeleton-animation-fade()mixin and additional.is-fadingstyles, while trunk has simpler implementations.Resolve the merge conflict and ensure the chosen approach:
- Properly defines all required mixins
- Maintains consistent styling patterns
- Doesn't break the build pipeline
🧹 Nitpick comments (2)
plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss (1)
101-105: Consider responsive behavior for action block width.The fixed width of 190px for the actions block might not be optimal on all screen sizes. Consider using responsive units or percentage-based widths.
.wp-block-woocommerce-checkout-actions-block { - width: 190px; + min-width: 190px; + max-width: 100%; height: 58px; display: block; align-self: flex-end; }plugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/index.tsx (1)
73-73: Consider adding fade CSS class for visual feedback.While the logic correctly manages when to show skeleton vs children, the actual fade visual effect might benefit from CSS classes during the fading state.
The current implementation from the AI summary mentions a
.wc-block-delayed-skeletonstyle that's commented out. Consider applying a CSS class during the fade state:-return <>{ showSkeleton ? skeleton : children }</>; +return ( + <div className={ clsx( { 'wc-block-delayed-skeleton--fading': fadingOut } ) }> + { showSkeleton ? skeleton : children } + </div> +);This would allow the CSS fade animations to work in conjunction with the timing logic.
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss(1 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx(2 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/index.tsx(2 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx(3 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/index.tsx(1 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/style.scss(1 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/index.ts(1 hunks)plugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx(2 hunks)plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.tsx(3 hunks)plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss(2 hunks)plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss(3 hunks)plugins/woocommerce/client/blocks/packages/components/totals/item/index.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{php,js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/code-quality.mdc)
**/*.{php,js,jsx,ts,tsx}: Guard against unexpected inputs
Sanitize and validate any potentially dangerous inputs
Ensure code is backwards compatible
Write code that is readable and intuitive
Ensure code has unit or E2E tests where applicable
Files:
plugins/woocommerce/client/blocks/packages/components/totals/item/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/index.tsplugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.tsxplugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/index.tsxplugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx
**/*.{php,js,ts,jsx,tsx}
⚙️ CodeRabbit Configuration File
**/*.{php,js,ts,jsx,tsx}: Don't trust that extension developers will follow the best practices, make sure the code:
- Guards against unexpected inputs.
- Sanitizes and validates any potentially dangerous inputs.
- Is backwards compatible.
- Is readable and intuitive.
- Has unit or E2E tests where applicable.
Files:
plugins/woocommerce/client/blocks/packages/components/totals/item/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/index.tsplugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.tsxplugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsxplugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/index.tsxplugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx
🧠 Learnings (13)
📓 Common learnings
Learnt from: jorgeatorres
PR: woocommerce/woocommerce#59675
File: .github/workflows/release-bump-as-requirement.yml:48-65
Timestamp: 2025-07-15T15:39:21.856Z
Learning: In WooCommerce core repository, changelog entries for all PRs live in `plugins/woocommerce/changelog/` directory and are processed during releases, not at the repository root level.
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: 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: 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: 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: 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: 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: 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: 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: 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.
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.
plugins/woocommerce/client/blocks/packages/components/totals/item/index.tsx (4)
Learnt from: dinhtungdu
PR: #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: #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: ralucaStan
PR: #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: gigitux
PR: #59659
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:136-147
Timestamp: 2025-07-22T09:30:43.528Z
Learning: In WooCommerce blocks TypeScript code, avoid type assertions (as) when accessing properties from unified stores. Instead, create proper union types that combine all the different store component types using Partial<> wrappers, and export the unified type to help third-party extenders. For example: type UnifiedStore = BaseStore & Partial<StoreA> & Partial<StoreB>.
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx (11)
Learnt from: dinhtungdu
PR: #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: #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: ralucaStan
PR: #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: samueljseay
PR: #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: #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: #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: #59659
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:136-147
Timestamp: 2025-07-22T09:30:43.528Z
Learning: In WooCommerce blocks TypeScript code, avoid type assertions (as) when accessing properties from unified stores. Instead, create proper union types that combine all the different store component types using Partial<> wrappers, and export the unified type to help third-party extenders. For example: type UnifiedStore = BaseStore & Partial<StoreA> & Partial<StoreB>.
Learnt from: vladolaru
PR: #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.
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: samueljseay
PR: #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.
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.
plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss (1)
Learnt from: Aljullu
PR: #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.
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/index.tsx (8)
Learnt from: ralucaStan
PR: #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: dinhtungdu
PR: #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: #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: samueljseay
PR: #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: vladolaru
PR: #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.
Learnt from: vladolaru
PR: #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: gigitux
PR: #59659
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:136-147
Timestamp: 2025-07-22T09:30:43.528Z
Learning: In WooCommerce blocks TypeScript code, avoid type assertions (as) when accessing properties from unified stores. Instead, create proper union types that combine all the different store component types using Partial<> wrappers, and export the unified type to help third-party extenders. For example: type UnifiedStore = BaseStore & Partial<StoreA> & Partial<StoreB>.
Learnt from: samueljseay
PR: #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.
plugins/woocommerce/client/blocks/assets/js/base/components/index.ts (4)
Learnt from: gigitux
PR: #59659
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:136-147
Timestamp: 2025-07-22T09:30:43.528Z
Learning: In WooCommerce blocks TypeScript code, avoid type assertions (as) when accessing properties from unified stores. Instead, create proper union types that combine all the different store component types using Partial<> wrappers, and export the unified type to help third-party extenders. For example: type UnifiedStore = BaseStore & Partial<StoreA> & Partial<StoreB>.
Learnt from: dinhtungdu
PR: #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: #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: ralucaStan
PR: #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.
plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.tsx (9)
Learnt from: vladolaru
PR: #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.
Learnt from: ralucaStan
PR: #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: ralucaStan
PR: #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: vladolaru
PR: #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: dinhtungdu
PR: #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: vladolaru
PR: #58784
File: plugins/woocommerce/client/admin/client/settings-payments/onboarding/components/stepper/index.tsx:57-67
Timestamp: 2025-06-20T13:08:44.017Z
Learning: For WooCommerce Payments onboarding step tracking in useEffect hooks, only include the active step in the dependency array, not the context object. The sessionEntryPoint is static throughout the onboarding session and tracking should only fire on actual step navigation, not context changes.
Learnt from: samueljseay
PR: #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: #59659
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:136-147
Timestamp: 2025-07-22T09:30:43.528Z
Learning: In WooCommerce blocks TypeScript code, avoid type assertions (as) when accessing properties from unified stores. Instead, create proper union types that combine all the different store component types using Partial<> wrappers, and export the unified type to help third-party extenders. For example: type UnifiedStore = BaseStore & Partial<StoreA> & Partial<StoreB>.
Learnt from: vladolaru
PR: #58784
File: plugins/woocommerce/src/Internal/Admin/Settings/Payments.php:431-439
Timestamp: 2025-06-17T14:19:30.933Z
Learning: In plugins/woocommerce/src/Internal/Admin/Settings/Payments.php, the process_payment_provider_states() method intentionally filters out payment providers that don't have a _suggestion_id. This is by design to only track state changes for gateways from partner extensions, not core WooCommerce gateways or other installed gateways.
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx (10)
Learnt from: ralucaStan
PR: #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: dinhtungdu
PR: #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: #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: samueljseay
PR: #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: vladolaru
PR: #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.
Learnt from: gigitux
PR: #59659
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:136-147
Timestamp: 2025-07-22T09:30:43.528Z
Learning: In WooCommerce blocks TypeScript code, avoid type assertions (as) when accessing properties from unified stores. Instead, create proper union types that combine all the different store component types using Partial<> wrappers, and export the unified type to help third-party extenders. For example: type UnifiedStore = BaseStore & Partial<StoreA> & Partial<StoreB>.
Learnt from: samueljseay
PR: #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.
Learnt from: samueljseay
PR: #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: #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: vladolaru
PR: #58784
File: plugins/woocommerce/client/admin/client/settings-payments/onboarding/components/stepper/index.tsx:57-67
Timestamp: 2025-06-20T13:08:44.017Z
Learning: For WooCommerce Payments onboarding step tracking in useEffect hooks, only include the active step in the dependency array, not the context object. The sessionEntryPoint is static throughout the onboarding session and tracking should only fire on actual step navigation, not context changes.
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/index.tsx (5)
Learnt from: dinhtungdu
PR: #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: #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: samueljseay
PR: #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: ralucaStan
PR: #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: gigitux
PR: #59659
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:136-147
Timestamp: 2025-07-22T09:30:43.528Z
Learning: In WooCommerce blocks TypeScript code, avoid type assertions (as) when accessing properties from unified stores. Instead, create proper union types that combine all the different store component types using Partial<> wrappers, and export the unified type to help third-party extenders. For example: type UnifiedStore = BaseStore & Partial<StoreA> & Partial<StoreB>.
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/style.scss (10)
Learnt from: Aljullu
PR: #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: #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: #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: #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: #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.
Learnt from: samueljseay
PR: #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: dinhtungdu
PR: #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: samueljseay
PR: #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: lysyjan
PR: #59070
File: packages/php/email-editor/src/Integrations/Core/class-initializer.php:103-141
Timestamp: 2025-06-23T16:55:58.246Z
Learning: The core/spacer block in the WooCommerce email editor intentionally does not have a dedicated renderer class and is handled by the fallback renderer instead of having an explicit render_email_callback assigned in the switch statement.
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.
plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss (12)
Learnt from: ralucaStan
PR: #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: #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: samueljseay
PR: #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: Aljullu
PR: #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: #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: dinhtungdu
PR: #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: Aljullu
PR: #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: samueljseay
PR: #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.
Learnt from: mreishus
PR: #58891
File: plugins/woocommerce/src/Blocks/Utils/BlocksSharedState.php:0-0
Timestamp: 2025-06-16T21:59:26.255Z
Learning: In WooCommerce's CartSchema::get_item_response() method, when called in the context of BlocksSharedState::register_cart_interactivity(), the method returns a plain array rather than a WP_REST_Response object, making it directly suitable for wp_interactivity_state() without needing to call ->get_data().
Learnt from: ralucaStan
PR: #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: samueljseay
PR: #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.
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.
plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss (17)
Learnt from: ralucaStan
PR: #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: ralucaStan
PR: #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: Aljullu
PR: #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: dinhtungdu
PR: #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: samueljseay
PR: #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.
Learnt from: samueljseay
PR: #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: samueljseay
PR: #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: ralucaStan
PR: #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: #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: lysyjan
PR: #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: lysyjan
PR: #59070
File: packages/php/email-editor/src/Integrations/Core/class-initializer.php:103-141
Timestamp: 2025-06-23T16:55:58.246Z
Learning: The core/spacer block in the WooCommerce email editor intentionally does not have a dedicated renderer class and is handled by the fallback renderer instead of having an explicit render_email_callback assigned in the switch statement.
Learnt from: gigitux
PR: #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-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.
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: samueljseay
PR: #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.
Learnt from: Aljullu
PR: #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: #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.
plugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx (11)
Learnt from: ralucaStan
PR: #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: samueljseay
PR: #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: ralucaStan
PR: #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: gigitux
PR: #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: samueljseay
PR: #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: dinhtungdu
PR: #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: #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: gigitux
PR: #59659
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:136-147
Timestamp: 2025-07-22T09:30:43.528Z
Learning: In WooCommerce blocks TypeScript code, avoid type assertions (as) when accessing properties from unified stores. Instead, create proper union types that combine all the different store component types using Partial<> wrappers, and export the unified type to help third-party extenders. For example: type UnifiedStore = BaseStore & Partial<StoreA> & Partial<StoreB>.
Learnt from: Aljullu
PR: #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: Aljullu
PR: #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: #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.
🧬 Code Graph Analysis (1)
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx (2)
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/index.tsx (1)
DelayedSkeleton(34-74)plugins/woocommerce/client/blocks/assets/js/base/components/skeleton/patterns/cart-line-items/index.tsx (1)
CartLineItemsCartSkeleton(14-54)
🪛 GitHub Actions: CI
plugins/woocommerce/client/blocks/packages/components/totals/item/index.tsx
[warning] 1-1: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($grid-unit-05, 2) or calc($grid-unit-05 / 2). See https://sass-lang.com/d/slash-div
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
[warning] 1-1: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($grid-unit-05, 2) or calc($grid-unit-05 / 2). See https://sass-lang.com/d/slash-div
plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
[warning] 1-1: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($grid-unit-05, 2) or calc($grid-unit-05 / 2). See https://sass-lang.com/d/slash-div
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/index.tsx
[warning] 1-1: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($grid-unit-05, 2) or calc($grid-unit-05 / 2). See https://sass-lang.com/d/slash-div
plugins/woocommerce/client/blocks/assets/js/base/components/index.ts
[warning] 1-1: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($grid-unit-05, 2) or calc($grid-unit-05 / 2). See https://sass-lang.com/d/slash-div
plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.tsx
[warning] 1-1: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($grid-unit-05, 2) or calc($grid-unit-05 / 2). See https://sass-lang.com/d/slash-div
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx
[warning] 1-1: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($grid-unit-05, 2) or calc($grid-unit-05 / 2). See https://sass-lang.com/d/slash-div
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/index.tsx
[warning] 1-1: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($grid-unit-05, 2) or calc($grid-unit-05 / 2). See https://sass-lang.com/d/slash-div
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/style.scss
[warning] 1-1: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($grid-unit-05, 2) or calc($grid-unit-05 / 2). See https://sass-lang.com/d/slash-div
plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
[error] 188-188: SassError: expected "{" at @include skeleton-animation-fade(); causing module build failure in sass-loader.
[error] 188-188: Module build failed in mini-css-extract-plugin due to SassError: expected "{" at @include skeleton-animation-fade();
plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss
[warning] 1-1: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($grid-unit-05, 2) or calc($grid-unit-05 / 2). See https://sass-lang.com/d/slash-div
plugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx
[warning] 1-1: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($grid-unit-05, 2) or calc($grid-unit-05 / 2). See https://sass-lang.com/d/slash-div
🪛 GitHub Actions: Build Live Branch
plugins/woocommerce/client/blocks/packages/components/totals/item/index.tsx
[error] 1-1: Build failed during 'build:project:bundle' step with exit code 1 due to sass-loader module build failure.
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
[error] 1-1: Build failed during 'build:project:bundle' step with exit code 1 due to sass-loader module build failure.
plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
[error] 1-1: Build failed during 'build:project:bundle' step with exit code 1 due to sass-loader module build failure.
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/index.tsx
[error] 1-1: Build failed during 'build:project:bundle' step with exit code 1 due to sass-loader module build failure.
plugins/woocommerce/client/blocks/assets/js/base/components/index.ts
[error] 1-1: Build failed during 'build:project:bundle' step with exit code 1 due to sass-loader module build failure.
plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.tsx
[error] 1-1: Build failed during 'build:project:bundle' step with exit code 1 due to sass-loader module build failure.
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx
[error] 1-1: Build failed during 'build:project:bundle' step with exit code 1 due to sass-loader module build failure.
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/index.tsx
[error] 1-1: Build failed during 'build:project:bundle' step with exit code 1 due to sass-loader module build failure.
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/style.scss
[error] 1-1: Build failed during 'build:project:bundle' step with exit code 1 due to sass-loader module build failure.
plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
[error] 188-188: SassError: expected "{" at @include skeleton-animation-fade(); causing module build failure in sass-loader during webpack build.
[warning] 8-8: Sass deprecation warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: use math.div($grid-unit-05, 2) or calc($grid-unit-05 / 2).
[error] 1-1: Build failed during 'build:project:bundle' step with exit code 1 due to sass-loader module build failure.
plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss
[error] 1-1: Build failed during 'build:project:bundle' step with exit code 1 due to sass-loader module build failure.
plugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx
[error] 1-1: Build failed during 'build:project:bundle' step with exit code 1 due to sass-loader module build failure.
🪛 GitHub Actions: Compressed Size
plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
[error] 188-188: SassError: expected "{" at @include skeleton-animation-fade(); causing module build failure in sass-loader.
🔇 Additional comments (29)
plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss (1)
366-372: Mixin Usage Confirmed – No Action NeededThe
skeleton-animation-fademixin is actively used in the codebase:
- plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
Contains@include skeleton-animation-fade();- plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss
Contains@include skeleton-animation-fade();As the mixin isn’t dead code and is applied in both cart and checkout block styles, no further changes are required.
plugins/woocommerce/client/blocks/assets/js/base/components/index.ts (1)
5-5: LGTM!The export addition follows the established pattern for barrel exports in this components index file.
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/style.scss (1)
1-12: Clarify why all styles are commented out.The entire SCSS file is commented out, which means these styles are not being applied. Since this appears to be part of the DelayedSkeleton component implementation, please clarify:
- Is this intentional for the WIP state?
- Should these styles be enabled?
- Are alternative styles being used elsewhere?
Having a complete style file commented out could indicate incomplete implementation or dead code.
plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.tsx (4)
9-9: LGTM!The import follows the established pattern for importing the DelayedSkeleton component.
64-70: Consistent initialization logic.Good consistency with the previous condition by checking initialization state before showing express-only payments.
73-94: Improved loading UX with DelayedSkeleton.The refactor from early return pattern to DelayedSkeleton wrapper improves the user experience by managing skeleton display timing and fade transitions. The loading condition properly uses the initialization state.
56-62: Initialization Check Logic VerifiedThe
DelayedSkeletonwrapper ensures a loading UI (CheckoutPaymentSkeleton) is shown wheneverpaymentMethodsInitializedisfalse, so there is never a blank screen during initialization. Once initialization completes, the code correctly branches to:
noPaymentMethodsif no methods existonlyExpressPaymentsif only express methods exist- the normal payment UI otherwise
No edge cases were found where the user would see empty content.
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx (3)
28-28: LGTM!The import addition follows the established pattern for the DelayedSkeleton component.
132-142: Well-structured skeleton definition.The skeleton element is properly structured with meaningful text ("Including") and an accessible Skeleton component with appropriate aria message for screen readers.
157-172: Improved loading UX with DelayedSkeleton.The refactor from conditional rendering to DelayedSkeleton wrapper provides better loading state management with fade transitions. The tax description formatting logic remains intact within the wrapper.
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx (2)
10-10: LGTM: Clean import addition for DelayedSkeleton.The import is properly added to support the skeleton standardization refactor.
55-78: Excellent refactor to use DelayedSkeleton!The conditional rendering has been properly replaced with the
DelayedSkeletoncomponent, which centralizes skeleton display logic and provides consistent fade transitions. The existing line items mapping and focus management logic is preserved intact as children.plugins/woocommerce/client/blocks/packages/components/totals/item/index.tsx (2)
9-9: LGTM: Clean import addition for DelayedSkeleton.The import is properly added to support the skeleton standardization refactor.
63-79: Well-executed refactor to use DelayedSkeleton!The conditional rendering logic has been cleanly replaced with
DelayedSkeleton, correctly passing the loading condition (! value || showSkeleton) and wrapping the existingSkeletoncomponent in a fragment. TheTotalsItemValueis properly preserved as the child content.plugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx (2)
147-154: LGTM: Clean block type detection logic.The logic to detect cart and checkout blocks is clear and follows established patterns in the codebase.
163-193: No immediate root access required — return value is unusedI reviewed all calls to renderBlockInContainers and renderFrontend and didn’t find any callers capturing or relying on the returned roots array. All block frontends invoke renderFrontend(…) for side-effects only, and no code ever reads the returned ReactRootWithContainer[].
Since no one expects to synchronously retrieve those roots, the async push inside setTimeout for cart/checkout blocks has no impact on existing usage. No changes needed here.
Likely an incorrect or invalid review comment.
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/index.tsx (3)
11-11: LGTM: Clean import addition for DelayedSkeleton.The import is properly added to support the skeleton standardization refactor.
29-29: Good refactor: Loading condition extraction.Extracting the loading condition into a descriptive variable improves code readability and follows the pattern used across the DelayedSkeleton refactor.
32-60: Excellent DelayedSkeleton integration!The refactor properly wraps the existing OrderSummary content with
DelayedSkeleton, dynamically configures the skeleton rows based on cart items count, and preserves all the original component structure and logic.plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss (6)
53-56: LGTM: Flex layout for skeleton structure.The addition of
display: flexandflex-direction: columnprovides proper structure for the skeleton loading state.
62-70: LGTM: Content hiding strategy for skeleton state.The approach to hide all inner children and merchant-added blocks during skeleton loading is well-implemented and ensures a clean skeleton display.
74-74: LGTM: Fade animation integration.The addition of
@include skeleton-animation-fade();aligns with the fade transition system mentioned in the AI summary.
141-152: LGTM: Fade state implementation.The
.is-fadingclass properly handles the fade-out transition by making backgrounds transparent, which works well with the DelayedSkeleton component's fade logic.
176-178: Confirm mobile order summary block heightA search for “55px” or “mobile skeleton” only returns the 55px setting in:
- plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss (around lines 176–178):
.wp-block-woocommerce-checkout-order-summary-block { height: 55px; }No other mobile-specific skeleton heights were found. Please visually test the 55px height on various device sizes to ensure it remains clear and accessible.
79-90: Confirm Checkout Skeleton Layout HeightsPlease manually verify that the fixed heights applied under the loading state match the actual rendered dimensions of each checkout block to prevent layout shifts:
•
.wp-block-woocommerce-checkout-express-payment-block→ 130px
•.wp-block-woocommerce-checkout-contact-information-block→ 120px
•.wp-block-woocommerce-checkout-shipping-method-block→ 120px
•.wp-block-woocommerce-checkout-payment-block→ 280px
•.wp-block-woocommerce-checkout-shipping-address-block→ 300px
•.wp-block-woocommerce-checkout-order-summary-block→ 460pxCheck these values (including padding/margin) against the live components and adjust any that don’t align exactly.
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-skeleton/index.tsx (4)
13-28: LGTM: Well-defined TypeScript interface.The interface clearly defines the component's props with descriptive JSDoc comments. The prop types are appropriate for the component's purpose.
39-43: LGTM: Appropriate timing constants and state management.The 400ms minimum display time and 150ms fade duration provide good UX balance. The state variables properly track the component's loading phases.
45-71: Robust timer management with proper cleanup.The useEffect implementation correctly handles:
- Timer creation and cleanup
- State transitions for loading/fading phases
- Minimum display time enforcement
- Nested setTimeout for fade sequence
The cleanup function prevents memory leaks by clearing active timers.
34-74: Ensure DelayedSkeleton replaces all legacy skeleton logicI ran a ripgrep search for common “isLoading…skeleton” and “? skeleton” patterns in
plugins/woocommerce/client/blocks/assets/js/and only saw references in the newDelayedSkeletoncomponent and its tests. To avoid mixed behaviors, please audit and swap out any remaining manual skeleton implementations:• Review all block and base components under
client/blocks/for inline skeleton conditionals
• Search custom components for<Skeletonorskeletonprops outside ofDelayedSkeleton
• Update any unit tests that assert manual skeleton rendering to useDelayedSkeletonYou can use a broader scan, for example:
rg -n "Skeleton" plugins/woocommerce/client/blocks/assets/js/
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-content-with-skeleton/index.tsx (1)
7-22: Well-defined interface with clear documentation.The interface is properly typed and documented. Consider making some props optional to improve flexibility and guard against unexpected inputs, especially
skeletonwhich might not always be needed.Consider this enhancement for better flexibility:
export interface DelayedContentWithSkeletonProps { /** * The component to render when loading is complete */ children: ReactNode; /** * Whether the content is currently loading */ isLoading: boolean; /** * The skeleton component to show while loading */ - skeleton: ReactNode; + skeleton?: ReactNode; }
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx(2 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/index.tsx(2 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx(3 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/delayed-content-with-skeleton/index.tsx(1 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/index.ts(1 hunks)plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.tsx(3 hunks)plugins/woocommerce/client/blocks/packages/components/totals/item/index.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
- plugins/woocommerce/client/blocks/assets/js/base/components/index.ts
- plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.tsx
- plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
- plugins/woocommerce/client/blocks/packages/components/totals/item/index.tsx
- plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/index.tsx
- plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{php,js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/code-quality.mdc)
**/*.{php,js,jsx,ts,tsx}: Guard against unexpected inputs
Sanitize and validate any potentially dangerous inputs
Ensure code is backwards compatible
Write code that is readable and intuitive
Ensure code has unit or E2E tests where applicable
Files:
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-content-with-skeleton/index.tsx
**/*.{php,js,ts,jsx,tsx}
⚙️ CodeRabbit Configuration File
**/*.{php,js,ts,jsx,tsx}: Don't trust that extension developers will follow the best practices, make sure the code:
- Guards against unexpected inputs.
- Sanitizes and validates any potentially dangerous inputs.
- Is backwards compatible.
- Is readable and intuitive.
- Has unit or E2E tests where applicable.
Files:
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-content-with-skeleton/index.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: jorgeatorres
PR: woocommerce/woocommerce#59675
File: .github/workflows/release-bump-as-requirement.yml:48-65
Timestamp: 2025-07-15T15:39:21.856Z
Learning: In WooCommerce core repository, changelog entries for all PRs live in `plugins/woocommerce/changelog/` directory and are processed during releases, not at the repository root level.
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: 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: 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: 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: 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: 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.
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: 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.
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: mreishus
PR: woocommerce/woocommerce#58891
File: plugins/woocommerce/src/Blocks/Utils/BlocksSharedState.php:0-0
Timestamp: 2025-06-16T21:59:26.255Z
Learning: In WooCommerce's CartSchema::get_item_response() method, when called in the context of BlocksSharedState::register_cart_interactivity(), the method returns a plain array rather than a WP_REST_Response object, making it directly suitable for wp_interactivity_state() without needing to call ->get_data().
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-content-with-skeleton/index.tsx (4)
Learnt from: dinhtungdu
PR: #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: #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: samueljseay
PR: #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: #59659
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:136-147
Timestamp: 2025-07-22T09:30:43.528Z
Learning: In WooCommerce blocks TypeScript code, avoid type assertions (as) when accessing properties from unified stores. Instead, create proper union types that combine all the different store component types using Partial<> wrappers, and export the unified type to help third-party extenders. For example: type UnifiedStore = BaseStore & Partial<StoreA> & Partial<StoreB>.
🔇 Additional comments (1)
plugins/woocommerce/client/blocks/assets/js/base/components/delayed-content-with-skeleton/index.tsx (1)
1-6: LGTM! Imports follow WooCommerce conventions.The imports correctly use
@wordpress/elementinstead of direct React imports, which is the established pattern in WooCommerce blocks.
.../woocommerce/client/blocks/assets/js/base/components/delayed-content-with-skeleton/index.tsx
Outdated
Show resolved
Hide resolved
…layed with skeleton using useReducedMotion for delaying content It's a common pattern in Gutenberg to provide alternative values for animations, transitions, delays for consumers with reduced motion enabled. Their E2E tests run on reducedMotion and components have fallbacks for it.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
plugins/woocommerce/changelog/wooplug-4212-cart-checkout-blocks-update-the-look-and-feel-of-the-primary(1 hunks)plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss(1 hunks)plugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx(2 hunks)plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js(2 hunks)plugins/woocommerce/client/blocks/tests/js/config/global-mocks.js(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- plugins/woocommerce/changelog/wooplug-4212-cart-checkout-blocks-update-the-look-and-feel-of-the-primary
🚧 Files skipped from review as they are similar to previous changes (2)
- plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
- plugins/woocommerce/client/blocks/assets/js/base/utils/render-frontend.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{php,js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/code-quality.mdc)
**/*.{php,js,jsx,ts,tsx}: Guard against unexpected inputs
Sanitize and validate any potentially dangerous inputs
Ensure code is backwards compatible
Write code that is readable and intuitive
Ensure code has unit or E2E tests where applicable
Files:
plugins/woocommerce/client/blocks/tests/js/config/global-mocks.jsplugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js
**/*.{php,js,ts,jsx,tsx}
⚙️ CodeRabbit Configuration File
**/*.{php,js,ts,jsx,tsx}: Don't trust that extension developers will follow the best practices, make sure the code:
- Guards against unexpected inputs.
- Sanitizes and validates any potentially dangerous inputs.
- Is backwards compatible.
- Is readable and intuitive.
- Has unit or E2E tests where applicable.
Files:
plugins/woocommerce/client/blocks/tests/js/config/global-mocks.jsplugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js
🧠 Learnings (3)
📓 Common learnings
Learnt from: jorgeatorres
PR: woocommerce/woocommerce#59675
File: .github/workflows/release-bump-as-requirement.yml:48-65
Timestamp: 2025-07-15T15:39:21.856Z
Learning: In WooCommerce core repository, changelog entries for all PRs live in `plugins/woocommerce/changelog/` directory and are processed during releases, not at the repository root level.
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: 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: 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: 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: 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: 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.
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: vladolaru
PR: woocommerce/woocommerce#58784
File: plugins/woocommerce/client/admin/client/settings-payments/onboarding/components/stepper/index.tsx:57-67
Timestamp: 2025-06-20T13:08:44.017Z
Learning: For WooCommerce Payments onboarding step tracking in useEffect hooks, only include the active step in the dependency array, not the context object. The sessionEntryPoint is static throughout the onboarding session and tracking should only fire on actual step navigation, not context changes.
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: 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.
plugins/woocommerce/client/blocks/tests/js/config/global-mocks.js (8)
Learnt from: vladolaru
PR: #59160
File: plugins/woocommerce/tests/php/src/Internal/Admin/Settings/PaymentsProviders/WooPayments/WooPaymentsServiceTest.php:360-373
Timestamp: 2025-06-25T15:39:25.166Z
Learning: Test mocks should accurately simulate the behavior of the functions they replace, including return value semantics. For WordPress functions like update_option, the mock should properly return false when the value hasn't changed and true when it has, to avoid masking logic errors in tests.
Learnt from: dinhtungdu
PR: #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: samueljseay
PR: #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: ralucaStan
PR: #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: vladolaru
PR: #59966
File: plugins/woocommerce/tests/php/src/Internal/Admin/Settings/PaymentsProviders/WooPayments/WooPaymentsServiceTest.php:5515-5574
Timestamp: 2025-07-24T10:44:40.385Z
Learning: vladolaru prefers to keep both direct value comparison (===) and serialized string comparison (maybe_serialize) in WordPress function mocks like update_option, as they may differ in edge cases and provide more comprehensive test coverage rather than just mirroring core WordPress internal behavior.
Learnt from: samueljseay
PR: #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: gigitux
PR: #58846
File: plugins/woocommerce/client/blocks/tests/e2e/tests/all-products/all-products.block_theme.spec.ts:41-52
Timestamp: 2025-06-16T09:20:22.981Z
Learning: In WooCommerce E2E tests, the database is reset to the initial state for each test, so there's no need to manually restore global template changes (like clearing the header template) as the test infrastructure handles cleanup automatically.
plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js (12)
Learnt from: samueljseay
PR: #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: dinhtungdu
PR: #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: #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: samueljseay
PR: #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: gigitux
PR: #59659
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:136-147
Timestamp: 2025-07-22T09:30:43.528Z
Learning: In WooCommerce blocks TypeScript code, avoid type assertions (as) when accessing properties from unified stores. Instead, create proper union types that combine all the different store component types using Partial<> wrappers, and export the unified type to help third-party extenders. For example: type UnifiedStore = BaseStore & Partial<StoreA> & Partial<StoreB>.
Learnt from: ralucaStan
PR: #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: samueljseay
PR: #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.
Learnt from: mreishus
PR: #58891
File: plugins/woocommerce/src/Blocks/Utils/BlocksSharedState.php:0-0
Timestamp: 2025-06-16T21:59:26.255Z
Learning: In WooCommerce's CartSchema::get_item_response() method, when called in the context of BlocksSharedState::register_cart_interactivity(), the method returns a plain array rather than a WP_REST_Response object, making it directly suitable for wp_interactivity_state() without needing to call ->get_data().
Learnt from: ralucaStan
PR: #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: 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: vladolaru
PR: #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.
Learnt from: vladolaru
PR: #58784
File: plugins/woocommerce/client/admin/client/settings-payments/onboarding/components/stepper/index.tsx:57-67
Timestamp: 2025-06-20T13:08:44.017Z
Learning: For WooCommerce Payments onboarding step tracking in useEffect hooks, only include the active step in the dependency array, not the context object. The sessionEntryPoint is static throughout the onboarding session and tracking should only fire on actual step navigation, not context changes.
🧬 Code Graph Analysis (1)
plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js (2)
plugins/woocommerce/client/blocks/assets/js/previews/cart.ts (1)
previewCart(35-599)plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/slots.js (1)
CartBlock(26-32)
⏰ 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). (21)
- GitHub Check: Blocks e2e tests 7/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 8/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 1/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 10/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 6/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 9/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 4/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 3/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 6/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 5/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: JavaScript - @woocommerce/block-library [unit]
- GitHub Check: Blocks e2e tests 4/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Blocks e2e tests 5/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Metrics - @woocommerce/plugin-woocommerce [performance]
- GitHub Check: Blocks e2e tests 2/10 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 2/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 3/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Core e2e tests 1/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: Lint - @woocommerce/block-library
- GitHub Check: build
- GitHub Check: Check Asset Sizes
🔇 Additional comments (3)
plugins/woocommerce/client/blocks/tests/js/config/global-mocks.js (1)
342-343: LGTM! Improved test consistency for reduced motion preferences.The update to return
trueforprefers-reduced-motionqueries aligns the Jest test environment with the Playwright configuration and ensures consistent testing of the new skeleton loading animations that respect user motion preferences.plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js (2)
267-274: Good improvement for test stability.Wrapping the
registerCheckoutFilterscall inact()is correct practice when performing operations that trigger React state updates during testing. This ensures state changes are properly flushed before assertions run.
278-278: More precise test assertion.The updated assertion directly tests the filter functionality by counting remaining "Remove item" buttons, which is more specific and accurate than the previous approach.
plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js
Outdated
Show resolved
Hide resolved
| } | ||
|
|
||
| // For motion-enabled, use the delay logic | ||
| const MIN_DISPLAY_TIME = 2000; |
There was a problem hiding this comment.
Where did this value come from? Just wondering what its based on, because this is how much we're delaying initial render by,
There was a problem hiding this comment.
From what I read, the delays for perceived performance should be around 3000 or 4000; for the initial render I added a smaller one. Yoann is reviewing the changes as well, and so he might want to increase it.
| // The cart and checkout blocks page placeholders should fade out if motion is not reduced. | ||
| const shouldAnimate = | ||
| ( isCheckoutBlock || isCartBlock ) && | ||
| ! window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches; |
There was a problem hiding this comment.
Should we add any defensive checks in here, like Gutenberg does here. Just to ensure it exists before accessing.
There was a problem hiding this comment.
Good idea, I'll add that.
| setTimeout( performRender, 200 ); | ||
| } else { | ||
| // Render immediately for all other cases (non-cart/checkout blocks or reduced motion) | ||
| performRender(); |
There was a problem hiding this comment.
This is more of a question that recommending anything. Does delaying the render have a knock on effect of nested components which could delay cart/checkout even more? I was just curious if it could be rendered but not visible until the fade is complete so the elements appear instantly once animation is complete.
| const hasPaymentMethods = | ||
| paymentMethodsInitialized && | ||
| Object.keys( availablePaymentMethods ).length > 0; | ||
| const hasExpressPaymentMethods = | ||
| expressPaymentMethodsInitialized && | ||
| Object.keys( availableExpressPaymentMethods ).length > 0; | ||
|
|
||
| if ( ! hasPaymentMethods && ! hasExpressPaymentMethods ) { | ||
| if ( | ||
| paymentMethodsInitialized && |
There was a problem hiding this comment.
This logic is confusing me maybe you can explain. The hasPaymentMethods const above checks paymentMethodsInitialized. If we're not showing a skeleton before paymentMethodsInitialized, when is it going to be shown?
Submission Review Guidelines:
Changes proposed in this Pull Request:
This PR improves the visual loading experience for Cart and Checkout blocks by implementing progressive loading animations with accessibility considerations.
Closes https://linear.app/a8c/issue/WOOPLUG-4212/cart-and-checkout-blocks-update-the-look-and-feel-of-the-primary
(For Bug Fixes) Bug introduced in PR # .
Screenshots or screen recordings:
Screen.Recording.2025-07-29.at.23.01.06.mov
How to test the changes in this Pull Request:
Testing that has already taken place:
Changelog entry
Changelog Entry Details
Significance
Type
Message
Changelog Entry Comment
Comment