Add support for hidden quantity input style in add-to-cart-form block #61717
+61
−9
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
plugin: woocommerce
📝 WalkthroughWalkthroughAdds a "hidden" quantity selector style to the WooCommerce add-to-cart form block: editor metadata and UI controls, frontend CSS/class support, block manifest updates, and server-side rendering that converts quantity inputs to hidden fields when the style is selected. Changes
Sequence Diagram(s)sequenceDiagram
participant Editor as Block Editor
participant Frontend as Browser Renderer
participant Backend as PHP Renderer
Editor->>Editor: User selects "hidden" quantity style
Editor->>Frontend: Block markup/attributes include quantitySelectorStyle="hidden"
Frontend->>Frontend: Adds class
Note right of Frontend #e6f2ff: .wc-block-components-quantity-selector--hidden\nCSS sets display:none
Frontend->>Frontend: If client-only, input rendered as type="hidden" (or not visible)
Frontend->>Backend: Server render request with attributes
Backend->>Backend: Detects quantitySelectorStyle === "hidden"
Backend->>Backend: Calls hide_input() -> convert qty inputs to type="hidden" and add --hidden modifier
Backend->>Frontend: Returns transformed HTML
Frontend->>Frontend: Quantity input hidden in UI
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/settings.tsx (1)
31-44: Add help text for the Hidden quantity selector style.The
getHelpTextfunction currently handles onlyInputandStepperstyles but doesn't provide help text for the newHiddenstyle. This will result in no help text being displayed when the Hidden option is selected.Apply this diff to add help text for the Hidden style:
const getHelpText = ( quantitySelectorStyle: QuantitySelectorStyle ) => { if ( quantitySelectorStyle === QuantitySelectorStyle.Input ) { return __( 'Shoppers can enter a number of items to add to cart.', 'woocommerce' ); } if ( quantitySelectorStyle === QuantitySelectorStyle.Stepper ) { return __( 'Shoppers can use buttons to change the number of items to add to cart.', 'woocommerce' ); } + if ( quantitySelectorStyle === QuantitySelectorStyle.Hidden ) { + return __( + 'The quantity selector is hidden. A default quantity of 1 will be used.', + 'woocommerce' + ); + } };plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php (1)
70-91: Consider optimizing to use a single HTML processor.The
hide_inputmethod is functionally correct and safely manipulates HTML usingWP_HTML_Tag_Processor. However, it creates two separate processor instances to handle the transformations in two passes. While this works, it could be more efficient to use a single processor if the order of operations allows it.If optimization is desired, consider refactoring to use a single processor:
private function hide_input( $product_html ) { $html = new \WP_HTML_Tag_Processor( $product_html ); // First pass: add class to quantity elements while ( $html->next_tag( array( 'class_name' => 'quantity' ) ) ) { $html->add_class( 'wc-block-components-quantity-selector--hidden' ); } // Second pass: update input type (rewind not available, so get updated HTML) $html = new \WP_HTML_Tag_Processor( $html->get_updated_html() ); while ( $html->next_tag( array( 'class_name' => 'qty' ) ) ) { $html->set_attribute( 'type', 'hidden' ); } return $html->get_updated_html(); }Actually, the current implementation already follows this pattern and is optimal given that
WP_HTML_Tag_Processorrequires getting the updated HTML before processing different tag types. The current approach is correct.
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
plugins/woocommerce/changelog/issues-add-to-cart-form-hidden-input(1 hunks)plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss(1 hunks)plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json(1 hunks)plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/block.json(1 hunks)plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx(3 hunks)plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/settings.tsx(2 hunks)plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scss(1 hunks)plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php(3 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{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/blocks/product-elements/add-to-cart-form/settings.tsxplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php
**/*.{php,js,jsx,tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/avoid-regex.mdc)
**/*.{php,js,jsx,tsx,ts}: Avoid using regular expressions unless absolutely necessary to favor readability and maintainability
Only consider regex when no built-in language alternative (string/array APIs) fits the need
Only use regex when performance is critical and faster than alternatives, with measurements to justify
Use regex for complex pattern matching only if the pattern is well-documented and thoroughly tested
Allow regex when maintaining legacy code where an existing, correct pattern is being modified
If regex is necessary, document the pattern extensively to explain what it matches
If regex is necessary, add comprehensive tests covering edge cases and potential security issues
Use named capture groups in regex to improve readability when supported
Validate input before applying regex to ensure it is safe
Assess and mitigate security risks when using regex, including ReDoS and injection vulnerabilities
Avoid regex patterns that can cause catastrophic backtracking (ReDoS)
Do not construct regex from untrusted input to prevent injection attacks
Ensure regex patterns do not overmatch and unintentionally capture unexpected inputs
Files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/settings.tsxplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php
**/*.{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.
When making any changes to code that deletes or modifies orders/products/customer data, make sure that there are
sufficient checks in place to prevent accidental data loss. As an example, if deleting a draft order, check that
the order status is indeeddraftorcheckout-draft. Also think about whether race conditions could occur and
delete orders that don't belong to the current customer. When in doubt, ask for clarification in the PR comments.
Files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/settings.tsxplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php
🧠 Learnings (22)
📓 Common learnings
Learnt from: Aljullu
PR: woocommerce/woocommerce#60641
File: plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts:410-480
Timestamp: 2025-08-29T14:38:18.023Z
Learning: The "sold individually" variation functionality (where the Product Quantity block should hide when a variation is sold individually) mentioned in issue #59443 objectives is not implemented in PR #60641 and will be addressed in a future PR.
Learnt from: Aljullu
PR: woocommerce/woocommerce#60641
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:485-507
Timestamp: 2025-08-29T14:28:52.427Z
Learning: In WooCommerce Add to Cart with Options blocks, the blur event handler for quantity inputs should be permissive and allow users to enter any value. Only basic cleanup (like converting NaN to min values) should happen on blur, while full validation including min/max/step constraints should only occur on form submission. This provides better UX by not interrupting users while they're typing.
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#60598
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:286-319
Timestamp: 2025-08-26T15:16:32.848Z
Learning: In WooCommerce Add to Cart with Options blocks, the base store's actions can be overridden by specific product type stores. For example, validateQuantity() in frontend.ts is overridden by the Grouped Product Selector store in grouped-product-selector/frontend.ts, meaning grouped products use their own validation logic rather than the base store's validateQuantity implementation.
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.
📚 Learning: 2025-07-24T05:37:00.907Z
Learnt from: dinhtungdu
PR: woocommerce/woocommerce#59900
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/inspector.tsx:0-0
Timestamp: 2025-07-24T05:37:00.907Z
Learning: The DisplayStyleSwitcher component in plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/components/display-style-switcher/index.tsx has been updated so that its onChange prop accepts only a string type (not string | number | undefined), eliminating the need for type assertions when using this component.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scssplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/settings.tsxplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.phpplugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.jsonplugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scssplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/block.json
📚 Learning: 2025-06-13T15:24:45.923Z
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss:21-26
Timestamp: 2025-06-13T15:24:45.923Z
Learning: In WooCommerce blocks, bold styling for `.wc-block-components-product-details__name` should be scoped only to the Cart block (`.wc-block-cart__main`); on the Checkout block, product names are not bold because prices are highlighted instead.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scssplugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.phpplugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
📚 Learning: 2025-08-26T15:16:32.848Z
Learnt from: Aljullu
PR: woocommerce/woocommerce#60598
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:286-319
Timestamp: 2025-08-26T15:16:32.848Z
Learning: In WooCommerce Add to Cart with Options blocks, the base store's actions can be overridden by specific product type stores. For example, validateQuantity() in frontend.ts is overridden by the Grouped Product Selector store in grouped-product-selector/frontend.ts, meaning grouped products use their own validation logic rather than the base store's validateQuantity implementation.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scssplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/settings.tsxplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.phpplugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.jsonplugins/woocommerce/changelog/issues-add-to-cart-form-hidden-inputplugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scssplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/block.json
📚 Learning: 2025-08-08T10:17:51.904Z
Learnt from: MaggieCabrera
PR: woocommerce/woocommerce#59940
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss:28-28
Timestamp: 2025-08-08T10:17:51.904Z
Learning: In WooCommerce blocks, follow WordPress core’s approach for spacing: use the standard CSS gap property on flex containers without adding negative-margin fallbacks. This is acceptable for .wc-block-product-template.is-flex-container in plugins/woocommerce/client/blocks/assets/js/blocks/product-template/style.scss, while grid may include a simple supports fallback (gap → grid-gap). Align with WP’s browserslist baseline and Autoprefixer setup.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scssplugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
📚 Learning: 2025-06-13T17:11:13.732Z
Learnt from: Aljullu
PR: woocommerce/woocommerce#58809
File: plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php:222-225
Timestamp: 2025-06-13T17:11:13.732Z
Learning: In `plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php`, the team intentionally relies on toggling the `disabled` CSS class (via `data-wp-class--disabled`) instead of binding the `disabled` attribute, to mirror the behavior of the classic WooCommerce template.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scssplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.phpplugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
📚 Learning: 2025-08-04T11:58:34.139Z
Learnt from: kmanijak
PR: woocommerce/woocommerce#60154
File: plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx:80-80
Timestamp: 2025-08-04T11:58:34.139Z
Learning: In WooCommerce block Edit components (like plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx), buttons are preview/display elements for the block editor interface and are not meant to be interactive, so accessibility attributes like ARIA labels are not necessary for these non-functional preview buttons.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scssplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/settings.tsxplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.phpplugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.jsonplugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scssplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/block.json
📚 Learning: 2025-08-29T14:28:52.427Z
Learnt from: Aljullu
PR: woocommerce/woocommerce#60641
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:485-507
Timestamp: 2025-08-29T14:28:52.427Z
Learning: In WooCommerce Add to Cart with Options blocks, the blur event handler for quantity inputs should be permissive and allow users to enter any value. Only basic cleanup (like converting NaN to min values) should happen on blur, while full validation including min/max/step constraints should only occur on form submission. This provides better UX by not interrupting users while they're typing.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scssplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.phpplugins/woocommerce/changelog/issues-add-to-cart-form-hidden-inputplugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scssplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/block.json
📚 Learning: 2025-07-03T10:09:20.635Z
Learnt from: Aljullu
PR: woocommerce/woocommerce#59370
File: plugins/woocommerce/client/blocks/assets/js/blocks/product-gallery/style.scss:236-243
Timestamp: 2025-07-03T10:09:20.635Z
Learning: In WooCommerce blocks CSS, prefer using standard CSS properties like `scrollbar-width` over vendor-specific prefixes when the standard property has good browser support. As of late 2024, `scrollbar-width` is widely supported across all major browsers and doesn't require WebKit-specific workarounds.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scssplugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
📚 Learning: 2025-06-23T05:47:52.696Z
Learnt from: samueljseay
PR: woocommerce/woocommerce#59051
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx:66-70
Timestamp: 2025-06-23T05:47:52.696Z
Learning: For WooCommerce mini-cart blocks in plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/, the standardized conditional pattern for experimental features should be `if ( isExperimentalMiniCartEnabled() ) { blockSettings.save = () => <InnerBlocks.Content />; }` - defaulting to the traditional Save component and only overriding when the experimental feature is enabled.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scssplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/settings.tsxplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.phpplugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.jsonplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/block.json
📚 Learning: 2025-07-14T10:41:46.200Z
Learnt from: lysyjan
PR: woocommerce/woocommerce#59632
File: packages/js/email-editor/src/layouts/flex-email.tsx:116-122
Timestamp: 2025-07-14T10:41:46.200Z
Learning: In WooCommerce projects, formatting suggestions should respect the project's Prettier configuration and linting rules. Changes that would break the lint job should be avoided, even if they appear to improve readability.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scss
📚 Learning: 2025-06-13T13:37:35.793Z
Learnt from: ralucaStan
PR: woocommerce/woocommerce#58782
File: plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx:76-90
Timestamp: 2025-06-13T13:37:35.793Z
Learning: In plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx, the `shouldAnimate` flag is expected to be `false` only on initial render and may remain `true` after the first edit; it does not need to be reset.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-07-22T09:30:43.528Z
Learnt from: gigitux
PR: woocommerce/woocommerce#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>`.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-06-17T07:07:53.443Z
Learnt from: samueljseay
PR: woocommerce/woocommerce#58716
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/iapi-frontend.ts:83-101
Timestamp: 2025-06-17T07:07:53.443Z
Learning: In WooCommerce blocks, when porting existing code patterns that have known issues (like parseInt truncating decimal money values), maintain consistency with existing implementation rather than making isolated fixes. The preference is for systematic refactoring approaches (like broader Dinero adoption) over piecemeal changes.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.phpplugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/block.json
📚 Learning: 2025-06-17T12:40:54.118Z
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.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-09-30T15:51:29.389Z
Learnt from: Aljullu
PR: woocommerce/woocommerce#61201
File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx:34-34
Timestamp: 2025-09-30T15:51:29.389Z
Learning: In WordPress blocks, `className` is managed through block supports (supports.className and supports.customClassName) rather than being a custom block attribute. The BlockEditProps generic type parameter should reflect only the custom attributes defined in block.json's attributes field, not the supports features.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-08-29T14:38:18.023Z
Learnt from: Aljullu
PR: woocommerce/woocommerce#60641
File: plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts:410-480
Timestamp: 2025-08-29T14:38:18.023Z
Learning: The "sold individually" variation functionality (where the Product Quantity block should hide when a variation is sold individually) mentioned in issue #59443 objectives is not implemented in PR #60641 and will be addressed in a future PR.
Applied to files:
plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.phpplugins/woocommerce/changelog/issues-add-to-cart-form-hidden-input
📚 Learning: 2025-07-23T15:58:46.719Z
Learnt from: opr
PR: woocommerce/woocommerce#0
File: :0-0
Timestamp: 2025-07-23T15:58:46.719Z
Learning: In WooCommerce shortcode cart mobile view, there is only one header in the table - the product name. Products are required to have names, so concerns about empty header text causing display issues with CSS pseudo-elements (like prepending colons) are not applicable in this context.
Applied to files:
plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php
📚 Learning: 2025-07-28T07:20:49.002Z
Learnt from: Aljullu
PR: woocommerce/woocommerce#60045
File: plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryThumbnails.php:68-68
Timestamp: 2025-07-28T07:20:49.002Z
Learning: WordPress block.json files support JSON schema pattern validation for string attributes using the "pattern" property with regular expression syntax, which provides client-side validation in the block editor.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
📚 Learning: 2025-08-22T10:24:05.067Z
Learnt from: yuliyan
PR: woocommerce/woocommerce#60554
File: plugins/woocommerce/client/blocks/bin/webpack-entries.js:62-62
Timestamp: 2025-08-22T10:24:05.067Z
Learning: WooCommerce blocks use their own block asset API system rather than standard WordPress block.json asset referencing. WC blocks extend AbstractBlock and use methods like get_block_type_editor_script() that leverage $this->asset_api->get_block_asset_build_path() to handle asset registration, instead of defining editorScript, viewScript, or style fields directly in block.json.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
📚 Learning: 2025-08-22T11:04:16.818Z
Learnt from: yuliyan
PR: woocommerce/woocommerce#60554
File: plugins/woocommerce/templates/emails/block/customer-pos-completed-order.php:32-34
Timestamp: 2025-08-22T11:04:16.818Z
Learning: WordPress block.json schema does not have an "aliases" property. The "keywords" property is used for search/discovery terms, not block name aliases. Block name changes require block transforms to map old block names to new ones.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
📚 Learning: 2025-09-12T09:29:11.840Z
Learnt from: Aljullu
PR: woocommerce/woocommerce#60767
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:246-253
Timestamp: 2025-09-12T09:29:11.840Z
Learning: In WooCommerce Add to Cart + Options blocks, when `childProductId` is defined (indicating a grouped product child), `selectedAttributes` is always empty/undefined. This is because `selectedAttributes` is only initialized for variable products on the server side, and grouped products cannot be variable products simultaneously. Therefore, `getProductData` calls with `selectedAttributes` for child products work correctly without additional guards.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/block.json
🧬 Code graph analysis (1)
plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php (2)
packages/php/email-editor/tests/unit/stubs.php (4)
WP_HTML_Tag_Processor(284-430)next_tag(349-355)get_updated_html(425-429)set_attribute(389-393)plugins/woocommerce/src/Blocks/BlockTypes/AddToCartWithOptions/Utils.php (2)
Utils(13-197)is_min_max_quantity_same(173-177)
🔇 Additional comments (12)
plugins/woocommerce/changelog/issues-add-to-cart-form-hidden-input (1)
1-4: LGTM!The changelog entry correctly documents this minor enhancement with appropriate significance level and clear description.
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/block.json (1)
9-9: LGTM!The addition of "hidden" to the quantitySelectorStyle enum is correct and maintains backward compatibility with the default value remaining as "input".
plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss (1)
14-16: LGTM!The CSS class correctly implements the hidden style with
display: none, and its placement before the main selector block ensures proper cascading.plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/style.scss (1)
34-36: LGTM!The nested selector correctly applies
display: noneto the quantity element when the hidden modifier class is present, maintaining consistency with the base component styling.plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/settings.tsx (2)
21-21: LGTM!The addition of
Hidden = 'hidden'to the QuantitySelectorStyle enum is correct and consistent with the feature implementation.
73-76: LGTM!The ToggleGroupControlOption for Hidden is correctly wired to the QuantitySelectorStyle.Hidden enum value.
plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json (1)
14-30: LGTM!The styles array correctly defines the three quantity selector variations (input, stepper, hidden) with appropriate labels and default settings. Setting stepper as the default is a valid design choice.
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx (3)
22-24: LGTM!The dynamic class name construction correctly defaults to
QuantitySelectorStyle.InputwhenquantitySelectorStyleis falsy, ensuring backwards compatibility.
62-63: LGTM!Treating the Hidden style the same as Input for the editor preview is appropriate, as both need to render a simple input field in the disabled editor block.
82-82: LGTM!The conditional type attribute correctly renders
type="hidden"when the Hidden style is selected, andtype="number"otherwise. This provides the appropriate visual feedback in the editor.plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php (2)
206-206: LGTM!The condition correctly includes the new
'hidden' === $attributes['quantitySelectorStyle']check, ensuring the quantity selector is hidden when the hidden style is selected. The condition maintains all existing logic for hiding the quantity selector (sold individually, min/max same, low stock).
250-250: LGTM!The
hide_inputtransformation is correctly applied before theadd_stepperstransformation, ensuring that the hide logic takes precedence and the stepper buttons are not added to already-hidden inputs. This order of operations is correct.
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
Outdated
Show resolved
Hide resolved
Aljullu
reviewed
Oct 31, 2025
There was a problem hiding this comment.
Thanks for opening this PR, @helgatheviking! 🙌 Overall it looks good, I just left a few minor suggestions inline in the code: 👇
| * | ||
| * @return string The Add to Cart form HTML with classes added. | ||
| */ | ||
| private function hide_input( $product_html ) { |
There was a problem hiding this comment.
Instead of setting a CSS class to hide the element, I wonder if we could use the HTML hidden attribute, which should be better for a11y/semantics.
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
Outdated
Show resolved
Hide resolved
...ommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
Show resolved
Hide resolved
helgatheviking
commented
Oct 31, 2025
|
|
||
| $html = new \WP_HTML_Tag_Processor( $html->get_updated_html() ); | ||
| while ( $html->next_tag( array( 'class_name' => 'qty' ) ) ) { | ||
| $html->set_attribute( 'type', 'hidden' ); |
There was a problem hiding this comment.
@Aljullu The attribute should be switched here.
There was a problem hiding this comment.
Ups, sorry, I missed that, but why not adding the hidden attribute to the .wc-block-components-quantity-selector element. It seems a simpler approach, no? 🤔
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json (1)
14-25: Verify if these style definitions belong in this block.json.As noted in a previous review, the Quantity Selector block is only used inside the "Add to Cart + Options" block (line 8:
ancestor: ["woocommerce/add-to-cart-with-options"]), where the Input style is not supported, and Hidden functionality can be accomplished by removing the block. These style variations may be intended for the add-to-cart-form block instead.Please confirm whether these lines should be removed from this file.
🧹 Nitpick comments (1)
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx (1)
60-84: Consider skipping inline styles for hidden inputs.The logic correctly includes
QuantitySelectorStyle.Hiddenin the Input rendering path and conditionally sets the input type. However, when the type is'hidden'(line 80), the inline styles applied on lines 65-79 are unnecessary since hidden inputs are not visually rendered.Consider refactoring to skip the inline style object when
quantitySelectorStyle === QuantitySelectorStyle.Hidden:<input style={ - // In the post editor, the editor isn't in an iframe, so WordPress styles are applied. We need to remove them. - ! isSiteEditor - ? { - backgroundColor: - '#ffffff', - lineHeight: - 'normal', - minHeight: 'unset', - boxSizing: 'unset', - borderRadius: - 'unset', - } - : {} + props.attributes.quantitySelectorStyle === QuantitySelectorStyle.Hidden + ? {} + : ! isSiteEditor + ? { + backgroundColor: '#ffffff', + lineHeight: 'normal', + minHeight: 'unset', + boxSizing: 'unset', + borderRadius: 'unset', + } + : {} } type={ props.attributes.quantitySelectorStyle === QuantitySelectorStyle.Hidden ? 'hidden' : 'number' }
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json(1 hunks)plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{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/blocks/product-elements/add-to-cart-form/edit.tsx
**/*.{php,js,jsx,tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/avoid-regex.mdc)
**/*.{php,js,jsx,tsx,ts}: Avoid using regular expressions unless absolutely necessary to favor readability and maintainability
Only consider regex when no built-in language alternative (string/array APIs) fits the need
Only use regex when performance is critical and faster than alternatives, with measurements to justify
Use regex for complex pattern matching only if the pattern is well-documented and thoroughly tested
Allow regex when maintaining legacy code where an existing, correct pattern is being modified
If regex is necessary, document the pattern extensively to explain what it matches
If regex is necessary, add comprehensive tests covering edge cases and potential security issues
Use named capture groups in regex to improve readability when supported
Validate input before applying regex to ensure it is safe
Assess and mitigate security risks when using regex, including ReDoS and injection vulnerabilities
Avoid regex patterns that can cause catastrophic backtracking (ReDoS)
Do not construct regex from untrusted input to prevent injection attacks
Ensure regex patterns do not overmatch and unintentionally capture unexpected inputs
Files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.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.
When making any changes to code that deletes or modifies orders/products/customer data, make sure that there are
sufficient checks in place to prevent accidental data loss. As an example, if deleting a draft order, check that
the order status is indeeddraftorcheckout-draft. Also think about whether race conditions could occur and
delete orders that don't belong to the current customer. When in doubt, ask for clarification in the PR comments.
Files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
🧠 Learnings (17)
📓 Common learnings
Learnt from: Aljullu
Repo: woocommerce/woocommerce PR: 60641
File: plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts:410-480
Timestamp: 2025-08-29T14:38:18.023Z
Learning: The "sold individually" variation functionality (where the Product Quantity block should hide when a variation is sold individually) mentioned in issue #59443 objectives is not implemented in PR #60641 and will be addressed in a future PR.
Learnt from: Aljullu
Repo: woocommerce/woocommerce PR: 60641
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:485-507
Timestamp: 2025-08-29T14:28:52.427Z
Learning: In WooCommerce Add to Cart with Options blocks, the blur event handler for quantity inputs should be permissive and allow users to enter any value. Only basic cleanup (like converting NaN to min values) should happen on blur, while full validation including min/max/step constraints should only occur on form submission. This provides better UX by not interrupting users while they're typing.
Learnt from: Aljullu
Repo: woocommerce/woocommerce PR: 60598
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:286-319
Timestamp: 2025-08-26T15:16:32.848Z
Learning: In WooCommerce Add to Cart with Options blocks, the base store's actions can be overridden by specific product type stores. For example, validateQuantity() in frontend.ts is overridden by the Grouped Product Selector store in grouped-product-selector/frontend.ts, meaning grouped products use their own validation logic rather than the base store's validateQuantity implementation.
Learnt from: Aljullu
Repo: woocommerce/woocommerce 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: luisherranz
Repo: woocommerce/woocommerce PR: 60540
File: plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php:0-0
Timestamp: 2025-08-21T12:43:30.828Z
Learning: The WooCommerce Interactivity API handles initial hidden states server-side through `data-wp-bind` directives, eliminating the need for explicit `hidden` HTML attributes to prevent content flash. When using `data-wp-bind--hidden` with a state value, the API processes the visibility on the server based on the state, so manual `hidden` attributes are redundant.
Learnt from: kmanijak
Repo: woocommerce/woocommerce PR: 60154
File: plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx:80-80
Timestamp: 2025-08-04T11:58:34.139Z
Learning: In WooCommerce block Edit components (like plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx), buttons are preview/display elements for the block editor interface and are not meant to be interactive, so accessibility attributes like ARIA labels are not necessary for these non-functional preview buttons.
Learnt from: dinhtungdu
Repo: woocommerce/woocommerce 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
Repo: woocommerce/woocommerce 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
Repo: woocommerce/woocommerce PR: 60767
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:246-253
Timestamp: 2025-09-12T09:29:11.840Z
Learning: In WooCommerce Add to Cart + Options blocks, when `childProductId` is defined (indicating a grouped product child), `selectedAttributes` is always empty/undefined. This is because `selectedAttributes` is only initialized for variable products on the server side, and grouped products cannot be variable products simultaneously. Therefore, `getProductData` calls with `selectedAttributes` for child products work correctly without additional guards.
📚 Learning: 2025-07-24T05:37:00.907Z
Learnt from: dinhtungdu
Repo: woocommerce/woocommerce 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.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
📚 Learning: 2025-08-26T15:16:32.848Z
Learnt from: Aljullu
Repo: woocommerce/woocommerce PR: 60598
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:286-319
Timestamp: 2025-08-26T15:16:32.848Z
Learning: In WooCommerce Add to Cart with Options blocks, the base store's actions can be overridden by specific product type stores. For example, validateQuantity() in frontend.ts is overridden by the Grouped Product Selector store in grouped-product-selector/frontend.ts, meaning grouped products use their own validation logic rather than the base store's validateQuantity implementation.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
📚 Learning: 2025-08-29T14:28:52.427Z
Learnt from: Aljullu
Repo: woocommerce/woocommerce PR: 60641
File: plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts:485-507
Timestamp: 2025-08-29T14:28:52.427Z
Learning: In WooCommerce Add to Cart with Options blocks, the blur event handler for quantity inputs should be permissive and allow users to enter any value. Only basic cleanup (like converting NaN to min values) should happen on blur, while full validation including min/max/step constraints should only occur on form submission. This provides better UX by not interrupting users while they're typing.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
📚 Learning: 2025-06-13T17:11:13.732Z
Learnt from: Aljullu
Repo: woocommerce/woocommerce 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.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-08-04T11:58:34.139Z
Learnt from: kmanijak
Repo: woocommerce/woocommerce PR: 60154
File: plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx:80-80
Timestamp: 2025-08-04T11:58:34.139Z
Learning: In WooCommerce block Edit components (like plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/edit.tsx), buttons are preview/display elements for the block editor interface and are not meant to be interactive, so accessibility attributes like ARIA labels are not necessary for these non-functional preview buttons.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsxplugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
📚 Learning: 2025-06-23T05:47:52.696Z
Learnt from: samueljseay
Repo: woocommerce/woocommerce 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.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-06-17T07:07:53.443Z
Learnt from: samueljseay
Repo: woocommerce/woocommerce 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.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-06-17T12:40:54.118Z
Learnt from: gigitux
Repo: woocommerce/woocommerce 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.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-06-13T15:24:45.923Z
Learnt from: ralucaStan
Repo: woocommerce/woocommerce 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.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-06-13T13:37:35.793Z
Learnt from: ralucaStan
Repo: woocommerce/woocommerce 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.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-07-14T10:41:46.200Z
Learnt from: lysyjan
Repo: woocommerce/woocommerce 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.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-06-20T17:38:16.565Z
Learnt from: opr
Repo: woocommerce/woocommerce PR: 0
File: :0-0
Timestamp: 2025-06-20T17:38:16.565Z
Learning: WooCommerce legacy JavaScript files in plugins/woocommerce/client/legacy/js/ must use older JavaScript syntax and cannot use modern features like optional chaining (?.) due to browser compatibility requirements. Explicit null checking with && operators should be used instead.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-09-30T15:51:29.389Z
Learnt from: Aljullu
Repo: woocommerce/woocommerce PR: 61201
File: plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx:34-34
Timestamp: 2025-09-30T15:51:29.389Z
Learning: In WordPress blocks, `className` is managed through block supports (supports.className and supports.customClassName) rather than being a custom block attribute. The BlockEditProps generic type parameter should reflect only the custom attributes defined in block.json's attributes field, not the supports features.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx
📚 Learning: 2025-07-28T07:20:49.002Z
Learnt from: Aljullu
Repo: woocommerce/woocommerce PR: 60045
File: plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryThumbnails.php:68-68
Timestamp: 2025-07-28T07:20:49.002Z
Learning: WordPress block.json files support JSON schema pattern validation for string attributes using the "pattern" property with regular expression syntax, which provides client-side validation in the block editor.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
📚 Learning: 2025-08-22T11:04:16.818Z
Learnt from: yuliyan
Repo: woocommerce/woocommerce PR: 60554
File: plugins/woocommerce/templates/emails/block/customer-pos-completed-order.php:32-34
Timestamp: 2025-08-22T11:04:16.818Z
Learning: WordPress block.json schema does not have an "aliases" property. The "keywords" property is used for search/discovery terms, not block name aliases. Block name changes require block transforms to map old block names to new ones.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
📚 Learning: 2025-08-22T10:24:05.067Z
Learnt from: yuliyan
Repo: woocommerce/woocommerce PR: 60554
File: plugins/woocommerce/client/blocks/bin/webpack-entries.js:62-62
Timestamp: 2025-08-22T10:24:05.067Z
Learning: WooCommerce blocks use their own block asset API system rather than standard WordPress block.json asset referencing. WC blocks extend AbstractBlock and use methods like get_block_type_editor_script() that leverage $this->asset_api->get_block_asset_build_path() to handle asset registration, instead of defining editorScript, viewScript, or style fields directly in block.json.
Applied to files:
plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
🔇 Additional comments (1)
plugins/woocommerce/client/blocks/assets/js/blocks/product-elements/add-to-cart-form/edit.tsx (1)
22-24: LGTM!The dynamic class construction correctly generates style-specific class names (
wc-block-add-to-cart-form--input,wc-block-add-to-cart-form--stepper,wc-block-add-to-cart-form--hidden) and maintains backward compatibility with the fallback toQuantitySelectorStyle.Input.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes proposed in this Pull Request:
Allow the add to cart form block to hide the quantity input (frequently used for things like donations and invoices)
Screenshots or screen recordings:
Before
After
How to test the changes in this Pull Request:
Testing that has already taken place: