Commit Graph

1692 Commits

Author SHA1 Message Date
Calvin Rodrigues 562e791978
Fix minicart icon cursor on hover in site navbar (#46996)
* Fix minicart icon cursor on hover in site navbar

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-06-06 16:54:48 +02:00
Karol Manijak 7d3309dc6c
Related Products: hide unusable options from Inspector Controls (#47845)
* Hide unusable options from Related Products block

* Add changelog

* Fix the dscription of Single Product template compatibility layer tests

* Add E2E test

* Replace editorUtils with editor in E2E tests

* Fix typo

Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>

* Fix typo

---------

Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
2024-06-04 11:51:27 +02:00
Alexandre Lara b702fb1288
[Experimental] Product Filters Redesign: Hide individual filter blocks from the Block Inserter (#47526)
* Hide individual filter blocks from the inserter

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Adjust E2E tests to check for hidden filters

* Fix file conflict

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: roykho <roykho77@gmail.com>
2024-06-03 12:26:21 -07:00
Thomas Roberts bb92392d9f
Apply spacing improvements to the Checkout block (#47565) 2024-06-03 11:18:42 -07:00
Niels Lange 93214eeb2b
[Enhancement]: Block-based checkout input fields style updates (#46362)
* Adjust border and box-shadow color for textual inputs

* WIP: Style checkboxes

* Vertically center checkmark

* Adjust focus outline width

* Adjust selected checkbox background in light mode

* Adjust background color of selected radio button

* Add chevron icon to dropdown fields

* Add changelog

* Fix CSS lint issues

* Adjust outline width

* Revert checkbox styles

* Adjust input field height and label size

* Revert box-shadow styles

* Add spacing between coupon title and coupon code

* Simplify onFocus and onBlur

* Fix outline width when focusing combobox

* Ensure chevron points down after selecting value

* Adjust outline color of focused delivery option

* POC: Use currentColor for focus states
2024-06-03 18:46:08 +07:00
Luigi Teschio 0712c6037b
Add To Cart Form: Improve the default style and add the `Stepper` style (#47664)
* Add To Cart Form: Improve the default style and add the Stepper style

* fix height button when no variation is selected

* not allow the user to set 0 as value of the input

* format css

* fix padding

* format css

* fix CSS

* unset margin to align with the button
2024-05-31 10:25:04 +02:00
Karol Manijak fe30778293
Increase product excerpt default length in Single Product template and block (#47651)
* Increase the length of Product Summary block (core/post-excerpt variation)

* Add changelog

* Bring back the Product Summary variation to original length

* Increase the Product Summary length to max 100 words in Single Product template and block

* Increase the Product Summary length to max 100 words in Single Product block

* Update tests

* Change the attribute type froms tring to niumber as expected
2024-05-31 08:19:06 +02:00
Patricia Hillebrandt 5dd7713346
[Performance]: Replace `classnames` usage with `clsx` (#47760)
* Replace classnames with clsx within woocommerce-blocks.

* Undo unnecessary change to getClassnames const.

* Replace classnames with clsx within woocommerce-admin.

* Add changelog.

* Update the pnpm lock file

* Address lint.

* Address lint errors for the block-library.
2024-05-31 05:49:36 +02:00
Manish Menaria 4bee1547b7
Fix: "On Sale" collection isn't displaying on Editor side (#47994)
* Fix the issue

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Add E2E test to cover this regression

* Fix: On sale collection should be visible after refresh in Post

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-30 21:55:49 +05:30
Sam Seay 82f5b84a80
Remove isFeaturePlugin and flag code from FeatureGating class (#47866) 2024-05-30 02:50:09 +12:00
Manish Menaria bb3f38a3d8
Fix: Product Collection block does not display when editing template/post (#47871)
* Fix issue where Product Collection wasn't showing anything

- Moved queryId logic to a new `useQueryId` custom hook to encapsulate the logic.
- Simplified attribute setting in `useEffect` by using a default attributes value.
- Utilized `fastDeepEqual` to check for attribute equality

These changes fix the issue where the Product Collection block did not display properly in the template editor, ensuring consistent rendering of products.

* Add comment

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Remove leftover comment

* Add e2e tests for Product Collection block visibility after refresh

Added end-to-end tests to verify the visibility of the Product Collection block after page refresh in both Product Archive and Post contexts.

- Added tests to ensure the Product Collection block remains visible after refreshing the template or post editor.
- Updated existing tests to use `BLOCK_LABELS` for better readability and maintainability.

* Improve E2E tests

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-29 16:35:36 +05:30
Niels Lange dec873926d
Partially revert #45767 (#47867)
* Partially revert #45767

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Add test for description on checkout order summary block

* Add another test back in for order summary description

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Alex Florisca <alex.florisca@automattic.com>
2024-05-28 18:25:34 +07:00
Sam Seay 756bb8ccfa
Allow experimental blocks to be enabled WC Admin Features as part of removing WC_BLOCKS_PHASE (#47701) 2024-05-25 00:13:24 +12:00
Karol Manijak c318bf50f8
Fix incompability of Query Pagination block with Product Collection (#47749)
* Amend Query Pagination parent OR ancestor array and include product collection

* Rename the function and amend comment

* Add changelog

* Remove some leftovers

* Tets if it's possible to insert multiple Pagination blocks in Product Collection

* Add awaits to expects

* Update plugins/woocommerce-blocks/assets/js/blocks/product-collection/utils.tsx

Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>

* Add comment explaining the condition

---------

Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
2024-05-23 13:01:57 +02:00
Seghir Nadir 34f8c65f53
only make order summary sticky when it's not longer than view (#47680)
* only sticky summary when it's not longer than view

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* fix tests

* correctly check for height

* switch how to get top

* remove from editor

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-22 22:09:50 +00:00
Thomas Roberts b7643b9b7a
Change Checkout form step numbering so it can only be toggled for all blocks, not individually per-step (#47479) 2024-05-22 07:03:48 -07:00
Karol Manijak f55e25b009
Filter by Attribute: fix potential reading property of undefined error (#47699)
* Fix reading from undefined error in attribute-filter

* Add changelog
2024-05-22 11:57:53 +02:00
Karol Manijak 313ab0eb74
Rename classic template blocks to avoid confusion (#44931)
* Rename  blocks to  to distinguish them from new blocks

* Add changelog

* Change the naming convention to XYZ (Classic)

* Update classic templates descriptions

* Fix package.json lint error
2024-05-22 10:53:43 +02:00
Alba Rincón 1d0ec79d43
Use the term attribute sort order for the "Filter by attribute" block (#47616)
* Use the term attribute sort order for the "Filter by attribute" block

* Allow `id` and `name_num` orderby values

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-21 15:44:08 +02:00
Niels Lange 5168a21920
Block-based checkout - Update address fields display logic (#47160)
* Add “Address line 2” toggle

* Allow apartment field to be required

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Rename “Apartment, suite, etc.” to “Address line 2”

* Remove unused dependency

* Add key to fragment

* Simplify keys

* Address failing e2e tests

* Change “Optional (Recommended)” to “Optional”

* Toggle address line 2 visibility in editor

* Add e2e tests

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Update e2e tests

* Update e2e tests

* Ensure the address 2 field stays open when the seller empties it

* Optimise hasAddress2FieldValue

* Move address 2 filed related functionality into separate component

* Rmove + sign from address 2 field links

* WIP: Introduce AddressField component

* Update AddressFields component

* Refactor AddressFields and Address2Field components

* Fix CSS lint error

* Fix JS lint error

* Fix failing e2e tests

* Fix typo in e2e tests

* Improve e2e selector

* Fix core e2e tests

* Use address line 2 label for the link text

* Lazy initialise the “isFieldVisible” state

* Remove obsolete code

* Add inline comments for clarity

* Fix JS lint error

* Improve e2e tests

* Revert "Remove obsolete code"

This reverts commit 027d6adc89.

* Adjust visibility toggle

* Delete obsolete changelog file

* Add inline comment

* Fix TS error

* Remove obsolete parts

* Solve TS warning

* Remove obsolete “fieldsRef”

* Remove obsolete “setHasFieldBeenModified”

* Address various TS warnings

* Fix link styling issue on mobile

* Fix JS lint error

* Refactor and simplify address components

* Optimise Address2Field component

* Improve inline docs

* Move ‘+’ from CSS to i18n

* Rename rest of values and pass correct onChange

* force component to remount

* remove unsed useEffect

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
2024-05-21 15:48:24 +07:00
Karol Manijak 929564da82
Product Collection: remove Beta label (#47572)
* Remove Beta label from Product Collection

* Remove unnecessary dependency in Product Collection page object

* Add changelog

* Udpate block references
2024-05-21 08:36:40 +02:00
Ilyas Foo 7c1802fefa
Update coming soon pages to use cardo and inter fonts via editor (#47613)
* Add type safety, update coming soon entire site changes for fonts

* Add conditional font to support TT24 and other themes

* Revert unnecessary change

* Changelog

* Lint
2024-05-21 13:35:12 +08:00
Manish Menaria 3a3a386e34
Fix: Product Collection block should respects 'Out of stock visibility' setting (#47537)
* Fix: Ensure Product Collection Block Respects "Hide Out of Stock Items" Setting

- Added logic to include the "Out of stock visibility" setting in the Product Collection block.
- Modified `ProductTemplateEdit` component to use the `getDefaultStockStatuses` function.
- Ensured that out-of-stock products are hidden in the Product Collection block when the "Hide out of stock items from the catalog" option is enabled.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-21 10:50:05 +05:30
Seghir Nadir 1ae7ca5179
Make checkout sidebar (order summary) sticky on desktop (#47376)
* Make sidebar sticky on desktop

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* limit sidebar sticky to cart only

* add useless new line

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-17 13:13:01 +02:00
Seghir Nadir 4f348eb540
remove the generic incompatible notice from Checkout block. (#47475)
* remove the generic incompatible notice

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-16 16:52:06 +02:00
Manish Menaria a7a1264fec
Fix input clearing issue in PriceTextField with improved currency parsing (#47354)
* Fix input clearing issue in PriceTextField with improved currency parsing

This commit addresses a usability issue in the PriceTextField component, highlighted by @dinhtungdu, where the input field would clear itself if users omitted a space between the numeric value and the currency symbol when the currency is configured to appear on the right with a space (e.g., "20$" instead of "20 $"). The problem was rooted in the strict parsing logic that did not account for variations in user input related to currency formatting.

The fix involves an enhancement to the numeric parsing function, which now effectively handles various user inputs regardless of space or placement of the currency symbol. The revised parsing logic uses a regular expression to strip out any characters that are not numeric or the designated decimal separator, and then replaces the locale-specific decimal separator with a period for standard numeric conversion. This approach not only fixes the specific issue but also improves the robustness of the component against similar input variations.

* Refactor currency parsing and improve handling in PriceTextField

1. Renaming `formatValueAsCurrency` to `formatNumberAsCurrency` to better
   reflect its functionality.
2. Moving the `convertCurrencyStringToNumber` function outside of the
   PriceTextField component, enhancing readability and reusability.
3. Changing the internal state handling from `newValue` to `inputValue`,
   directly managing the string input and parsing it as needed for further
   processing. This will force input field to re-render.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Fix: Handle empty string in price conversion to prevent 0 value

This commit fixes an issue where an empty string in the price conversion function resulted in a value of 0. Now, empty strings are properly handled and do not convert to a numerical value.

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-16 13:23:47 +05:30
Manish Menaria 1233fb4745
Fix: handle undefined templateSlug in Product Collection tracking utils (#47504)
* fix: handle undefined templateSlug in Product Collection tracking utils

The modification introduces a check for templateSlug before attempting to access its properties or use it in further logic. This change addresses a bug that manifested when users tried to edit a synchronized Product Collection block, resulting in a JavaScript error because templateSlug could be undefined.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Update types to better reflect reality

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
2024-05-16 11:17:52 +05:30
Chi-Hsuan Huang a120b99d7d
Fix coming soon page mobile UI issues (#47491)
* Update styles for WooCommerce coming soon page

- Add min-width to container for better responsiveness
- Adjust padding for smaller screens
- Update font size and text wrapping for banner

* Add changelog

* Improve readability
2024-05-16 12:46:26 +08:00
Alexandre Lara 7abb996017
[Experimental] Product Filters Redesign: Add the Product Filters block (#47294)
* Add Product Filters block

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Add the blocks template for the Product Filters block

* Dynamically add the highest product count attribute to the block template

* wip: Add E2E tests for the Product Filters block

* Add E2E tests for the Product Filters block

* Add CSS file to Product Filters block

* Fix css error lint

* Fix lint error

* Fix lint errors

* Remove unnecessary styles for the Product Filters block

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-15 18:09:48 -03:00
Sam Seay 3ef7a01840
Update blocks JS tests to React 18 (#47383) 2024-05-15 21:33:36 +12:00
Manish Menaria 9f5f93cba6
Product Collection: Implement Preview Mode (#46369)
* POC: Preview Mode using HOC

* Add explanation as comments

POC: Implement preview mode for Product Collection block in editor
- Added extensive commentary to clarify the mechanism and usage of the `handlePreviewState` function
- Implemented an internal state within `ProductCollectionContent` to manage preview status and messages, serving as a foundational example of how preview mode can enrich block functionality.
- Showcased the application of `handlePreviewState` by incorporating it as a prop in `BlockEdit`, illustrating the potential for extending the block's capabilities for dynamic and interactive previews.

This POC demonstrates a flexible approach to managing preview states within the editor, paving the way for further development and integration based on feedback and use-case analysis.

* Refactor preview state handling and collection registration

This commit introduces a centralized approach for registering product collection variations and managing their preview states. It abstracts the registration logic into a dedicated function and enhances the flexibility of preview state handling across different collection types.

* Rename file

* Minor improvements

* Don't pass previewState to handlePreviewState

I don't see any good use of it in handlePreviewState. Also, We will be going to call handlePreviewState only once
therefore, it will always have the same value as the initial value of the previewState. If in future, we decide to run it
multiple times then we can pass the previewState as an argument to handlePreviewState.

* Add comment

* Use JS closure to inject handlePreviewState

This commit introduces a refined approach for injecting the `handlePreviewState` function into product collection blocks, utilizing JavaScript closures to streamline the process. This method replaces the previous global registry mechanism, offering a more direct and efficient way to manage preview states.

Advantages of This Approach:
- Utilizing JavaScript closures for injecting `handlePreviewState` simplifies the overall architecture by directly modifying block edit components without relying on an external registry. This method enhances code clarity and reduces the cognitive load for developers.
- The conditional application of `withHandlePreviewState` ensures that the preview state handling logic is only added to blocks that require it, optimizing performance and maintainability.

* Refactor preview state management into custom hook

This commit enhances the organization and readability of the product collection content component by abstracting the preview state management into a custom hook named `usePreviewState`. This change streamlines the component's structure and aligns with React best practices for managing state and side effects.

Key Changes:
- Introduced `usePreviewState`, a custom hook responsible for initializing and managing the preview state (`isPreview` and `previewMessage`) of the product collection block. This hook encapsulates the state logic and its side effects, including the conditional invocation of `handlePreviewState`.
- Modified `ProductCollectionContent` to utilize `usePreviewState` for handling its preview state. This adjustment makes the component cleaner and focuses it more on presentation and behavior rather than state management details.

* Replace useEffect with useLayoutEffect

* Add cleanup function in handlePreviewState function

Based on [this discussion](https://github.com/woocommerce/woocommerce/pull/45703#discussion_r1535323883), I added a cleanup function support for handlePreviewState. `handlePreviewState` can return a function which will be called on cleanup in `useLayoutEffect` hook.

* Fetching random products in Preview mode

* Allow collection to set initial preview state

* Pass location & all attributes to handlePreviewState function

* Handling collection specific query for preview mode

- Consolidated `handlePreviewState` and `initialPreviewState` into a single `preview` prop in `register-product-collection.tsx` and `product-collection-content.tsx` to streamline prop passing and improve the component interface.
- Updated the `queryContextIncludes` in `constants.ts` to include 'previewState'
- Enhanced the `ProductCollection` PHP class to handle preview-specific queries more effectively, introducing a new method `get_preview_query_args` that adjusts query parameters based on the collection being previewed, thereby improving the relevance and accuracy of products displayed in preview mode.

* Always set initialPreviewState on load

* Refine preview state handling

- Renamed `HandlePreviewStateArgs` to `SetPreviewStateArgs` in `featured.tsx` to better reflect its purpose, which is now more focused on setting rather than handling states. The implementation details within `featured.tsx` have also been refined to include async operations and cleanup functions, demonstrating a more sophisticated approach to managing state.

Overall, these updates make the preview state logic more understandable and maintainable.

* Rename "initialState" to "initialPreviewState"

* Fix: Correct merging of newPreviewState into previewState attribute

This commit addresses an issue in the product-collection-content.tsx where the newPreviewState was not properly merged into the existing previewState attribute. Previously, the spread operator was incorrectly applied, leading to potential loss of existing state attributes. By changing the order of operations and correctly spreading the existing attributes before merging the newPreviewState, we ensure that all state attributes are preserved and updated correctly.

* Initial refactor POC code to productionize it

* Move `useSetPreviewState` to Utils

* Implement preview mode for Generic archive templates

Implemented a new useLayoutEffect in `utils.tsx` to dynamically set a preview message in the editor for product collection blocks located in generic archive templates (like Products by Category, Products by Tag, or Products by Attribute).

* Remove preview mode from Featured and On sale collection

* Remove preview query modfication for On Sale collection

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Fix: hide/show preview label based on value of "inherit"

If user change the toggle "Sync with current query", then it should reflect for the preview label as well.
- If the toggle is on, then the preview label should be shown.
- If the toggle is off, then the preview label should be hidden.

* Minor improvements

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Refactor: Simplify SetPreviewState type definition in types.ts

This commit refines the SetPreviewState type definition by eliminating the previously used intermediate interface, SetPreviewStateArgs. The change streamlines the type definition directly within the SetPreviewState type, enhancing readability and reducing redundancy.

* Update import syntax for ElementType in register-product-collection.tsx

This commit updates the import statement for `ElementType` from `@wordpress/element` to use the more modern and concise `import type` syntax. This change does not affect functionality but aligns with TypeScript best practices for importing types, ensuring that type imports are distinguished from regular imports. This helps in clarity and in optimizing the build process by explicitly indicating that `ElementType` is used solely for type checking and not included in the JavaScript runtime.

* Refactor: Update TypeScript usage in Product Collection

This commit introduces several TypeScript refinements across product-collection components:

1. **DEFAULT_ATTRIBUTES** in `constants.ts` now uses `Pick` to explicitly define its shape, ensuring only relevant attributes are included and typed accurately.
2. **ProductCollectionAdvancedInspectorControls** and **ToolbarControls** in the `edit` subdirectory now use `Omit` to exclude the 'preview' property from props, clarifying the intended prop usage and improving type safety.

These changes collectively tighten the type definitions and improve the codebase's adherence to best practices in TypeScript.

* Refactor: Update dependencies of useSetPreviewState hook in utils.tsx

This change enhances the stability and predictability of the hook's behavior, ensuring it updates its internal state accurately when its dependencies change, thus aligning with best practices in React development.

* Refactor preview button CSS and conditional rendering

1. **CSS Refactoring:** Moved the positioning styles of the `.wc-block-product-collection__preview-button` from inline styles in the JSX to the `editor.scss` file. This separation of concerns improves maintainability and readability, aligning the styling responsibilities solely within the CSS file.
2. **Conditional Rendering Logic:** Updated the rendering condition for the preview button. Now, it not only checks if `isPreview` is true but also if the block is currently selected (`props.isSelected`). This prevents the preview button from appearing when the block is not actively selected, reducing visual clutter and enhancing the user experience in the editor.

* Enhance: Update preview button visibility logic in ProductCollectionContent

This commit enhances the visibility logic of the preview button in the `ProductCollectionContent` component:

1. **Added `isSelectedOrInnerBlockSelected`:** Introduced a new `useSelect` hook to determine if the current block or any of its inner blocks are selected. This ensures that the preview button is visible when either the product collection block or any of its inner blocks are selected.
2. **Updated Conditional Rendering:** Adjusted the conditional rendering of the preview button to use the new `isSelectedOrInnerBlockSelected` value, providing a more intuitive user experience by ensuring the preview button remains visible when any relevant block is selected.

* use __private prefix with attribute name

* Add E2E tests for Preview Mode

1. **Template-Specific Tests:** Each template (tag, category, attribute) undergoes a test to ensure the preview button behaves as expected when replacing products with product collections in these contexts.
2. **Visibility Checks:** The tests verify that the preview button is visible when the block or its inner blocks are selected and hidden when the block is not selected. This helps confirm the correct implementation of the preview button visibility logic across different use cases.
3. **Interaction with Inner Blocks:** Additional checks are included to ensure the preview button's visibility toggles appropriately when interacting with inner blocks, reinforcing the dynamic nature of block selection and its effect on UI elements within the editor.

* Add setPreviewState to dependencies

* Add data-test-id to Preview button and update e2e locator

Modifications:
- Added `data-test-id="product-collection-preview-button"` to the Preview button in `product-collection-content.tsx`.
- Updated the corresponding e2e test locator in `product-collection.block_theme.side_effects.spec.ts` to use the new `data-test-id` instead of the class name.

By using `data-test-id`, we ensure that the e2e tests are not affected by changes in the styling or restructuring of the DOM that might alter CSS classes but do not affect functionality.

* Enhance: Localize preview message in useSetPreviewState hook

* Don't show shadow & outline on focus

* Make preview button font same as Admin

* Fix SCSS lint errors

* Add missing await keyword

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-15 13:18:43 +05:30
Thomas Roberts 35f07934a4
Remove bold text from selected payment method in Checkout block (#47412) 2024-05-14 02:00:30 -07:00
Karol Manijak bf2d622a66
Product Collection: telemetry for filter usage (#46545)
* Create trackInteraction function and pass it to query Insprector Controls

* Add tracking to Attribute filter

* Add tracking to Created filter

* Add tracking to Featured filter

* Add tracking to Handpicked Products filter

* Add tracking to Inherit Query filter

* Add tracking to Keyqord filter

* Add tracking to On Sale filter

* Add tracking to Order By option

* Add tracking to Stock Statusoption

* Add tracking to Price Range filter

* Add tracking to Taxonomies filter

* Fix lint errors

* Add changelog

* Rearrange the logic of recognising the tracks location so it's more reliable
2024-05-14 09:45:33 +02:00
Christopher Allford b8aabe9005
Fixed Taxonomy Term Limit On Product Collection Filters (#47155)
In the interest of avoiding pagination this refactor swaps the current term loading with one that doesn't require a cache of all terms. We've removed the need for the cache by storing the ID and term name together in the token/suggestion list and using a display transformation to hide any unnecessary information.
2024-05-13 16:00:24 -07:00
Roy Ho f5dc46a385
Product Filters: add individual clear button (#47101)
* Product Filters: add individual clear button

* Remove unused style.scss

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Simplify searching for the tag

* Convert to use button instead of anchor

* Try using iAPI to show/hide clear button

* Use local context instead of global state

* Fix linting error

* Remove unneeded context

* Update clear button block description

* Fix frontend PHP error

* Add e2e tests for attributes filter clear button

* Add e2e tests for price filter clear button

* Add e2e tests for rating filter clear button

* Add e2e tests for stock status filter clear button

* Address feedback and use built in locators

* Address feedback and replace the use of timeouts

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-13 15:19:56 -03:00
Seghir Nadir 76a9e2eb27
Move country to top of form for all countries (#47375)
* Move country to top of form for all countries

* adjust styling

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-13 16:24:40 +02:00
Niels Lange e7aff9428f
[Enhancement]: Block-based checkout - Pickup section updates (#47173)
* Change “Pickup options” to “Pickup locations”

* Always show pickup location and truncate pickup details

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Adjust spacing between pickup details and more link

* Hide pickup details of unselected pickup location

* Adjust line height of truncated text

* Show “Read more/less” instead of “more/less”

* Ensure both lines are equally filled with text

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-08 17:58:09 +07:00
Niels Lange 99bed6d7ba
Display price in place order button (#47083)
* WIP: Display price in place order button

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Fix JS lint error

* Update e2e tests

* Display default place order button including placeholder in page editor

* Update plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/constants.tsx

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

* Optimise i18n using sprintf

* Wrap cart totals in “useSelect”

* Temporary skip failing e2e test

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2024-05-08 16:18:48 +07:00
Niels Lange b6d9b3a013
Fix broken checkout address forms layout (#47131)
* Fix broken checkout address forms layout

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-08 10:30:12 +07:00
Sam Seay a8be4f3330
Checkout: fix a bug where the local pickup / shipping buttons are rendered incorrectly in the editor (#47157) 2024-05-06 20:57:52 +12:00
Sam Seay 3a5721c0d8
Replace @wordpress/components Button, Radio, RadioGroup with Ariakit Button (#45974) 2024-05-03 15:28:39 +12:00
Niels Lange 1d93ba0b6a
Block-based checkout - Shipping section changes (#46083)
* Refactor shipping sections

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Refactor various files and adjust e2e tests

* Display expected styles for “Ship” and “Pickup” in the page editor

* Use exact selector

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-04-30 19:59:03 +07:00
Ilyas Foo 35c50ebdb4
Try wrapping entire coming soon page under cover block to fix layout issue (#46914)
* Refactor to wrap everything under cover block

* Changelog

* Cleanup and fix classic theme

* Wrap center with stack for ease of adding elements nearby

* Update styles

* Fix dynamic background color

* Style clean up
2024-04-30 16:56:59 +08:00
Sam Seay 1e225f701f
Add aria label to the customer account block link (#46899) 2024-04-29 13:35:47 +12:00
Paul Sealock d5d25d3bfe
[LYS] Comin soon block - Refactor and hide Styles block on Store Only (#46854) 2024-04-26 16:43:08 +12:00
Alex Florisca 7dc8dd63ba
Update Order Summary Design (#45767)
* Add border around order summary on cart & checkout

* Group subtotal, discount, fees, taxes and shiping block

* Move the coupon form in order summary

* Move the coupon form in order summary

* Manage state externally in Panel component and refactor Coupon form to use the Panel component

* Remove descriptions from order summary items

* increase font weight of order summary title

* Tidy up design for desktop and add separator back in for blocks on checkout order summary

* Remove border around order summary on mobile

* Revert "Move the coupon form in order summary"

This reverts commit 4a8044cdcf.

* Change heading styles for cart

* Change font weight to 500 of order summary heading on checkout block

* Remove padding and border between order summary totals items

* Refactor css for cart & checkout totals to work in the editor

* Adjust cart totals heading in the editor

* Last adjustment to checkout totals style to work in editor

* Add changelog

* Change the cursor to pointer for the panel component

* remove unused short and full description from OrderSummaryItem

* Fix failing e2e tests

* Fix lint issues

* Vertically align order summary title in the editor

* Fix e2e tests

* Fix linting issues

* Fix unit tests

* Remove changes from woocommerce.php

* Fix checkout block test

* fix eslint errors in checkout block test

---------

Co-authored-by: Niels Lange <info@nielslange.de>
2024-04-25 12:03:31 +07:00
Seghir Nadir 742cbbda9d
Graduate Additional Fields to stable and rename it. (#46805)
* graduate woocommerce_blocks_register_checkout_field

* graduate filters

* Migrate Additional to Order and Other

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* fix markdown lint

* update tests to use old value

* fix lint issue

* pass field options by reference

* update test helpers

* update tests to use latest api

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-04-23 16:47:32 +02:00
Paul Sealock b9a1b67991
[LYS] Reapply styles from 46619 (#46813)
* copy styles over from 46619

* Fix header padding

* login/out

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* typo

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-04-23 19:26:35 +12:00
Paul Sealock 89c330f03e
[Launch Your Store] Use Block to handle template styles (#46751) 2024-04-23 16:07:56 +12:00
Leif Singer d1be68b88c
Update @woo.com email addresses to @woocommerce.com (#46387)
* update @woo.com email addresses

* update %40woo.com email address

* add changelog file

* update docs manifest
2024-04-19 21:11:01 +00:00
Thomas Roberts 9e0fab4ebc
Reset shipping rate font size to match other elements (#46345) 2024-04-17 13:54:43 -07:00
Alex Florisca 3089b1888e
Refactor the Order Summary of the Cart & Checkout blocks (#46386)
* Added new OrderSummaryTotals Block

* Refactor order summary and totals block to contain the inner children

* Add migration for Order Summary Block

* Migration to handle older order summary without totals block

* Remove empty lines from order summary migration

* block editor migration for order summary

* Fix isEligible function

* Update Totals title

* Add checkout totals

* Remove echos and dies

* replace individual checkout blocks with totals block

* Change parent of totals inner blocks and add totals block to innerBlockAreas map

* change CART_ORDER_SUMMARY_TOTALS to CHECKOUT_ORDER_SUMMARY_TOTALS

* Fix linting issues

* fix lint warnings

* Add  changelog

* Lock movement of the taxes block in attributes.tsx

* Less indentation in the render function of CartOrderSummaryBlock and CheckoutOrderSummaryBlock

* Rename webpack chunkName for order summary totals
2024-04-17 10:28:30 +01:00
Thomas Roberts fb481bdce5
Increase shipping/payment borders to prevent half pixel issues on high-resolution screens (#46525)
* Replace pixel box shadow with em to prevent half pixels

* Add changelog

* Apply 2px border

* Make padding around shipping options bigger
2024-04-16 09:50:54 +01:00
Wesley Rosa fed46ed1e7
Adding support for co-branded credit cards (#45903) 2024-04-15 22:59:05 +01:00
Karol Manijak 7efd3d4652
Product Collection: break taxonomies filter into multiple menu items per each taxonomy (#46160)
* Split taxonomies filter into seperate filter per taxonomy

* Add changelog

* Improve onDeselect function

* Update tests

* Fix lint

* Satisfy TS by returning single React element rather than array of elements

* Remove unused variable
2024-04-11 08:13:42 +02:00
Roy Ho deef144a43
Add translation context to ambiguous words (#46382)
* Add translation context to ambiguous words

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-04-10 06:17:14 -07:00
Thomas Roberts 255a45911c
Update shipping and payment radio controls to use borders on selected items (#46150) 2024-04-10 02:54:05 -07:00
Leif Singer 8ee74ede0e
Update Woo.com references to WooCommerce.com (#46259)
* replace capitalized Woo.com with WooCommerce.com

* replace http URLs

* replace https URLs

* replace developer.woo.com

* add missing version in `@since` tag

* unslash the HTTP_REFERER

* WordPress.Security.ValidatedSanitizedInput.InputNotSanitized

* add changelog file

* add more changelog files

* address linter errors

* address more linter errors

* fix test

* more linter errors
2024-04-09 09:50:15 +01:00
Sam Seay 803a62c50a
Remove all references to the product add to cart block. (#46220) 2024-04-09 14:01:32 +12:00
Thomas Roberts 9f159f7141
Use address format from server in address card (#45852) 2024-04-08 01:43:42 -07:00
Tung Du 11ec7c6255
Fix: broken contract in StoreAPI ProductCollectionData endpoint (#45247)
* revert: use original implementation

* fix: price query clause

* chore: changelog

* fix: passing full query state to get the correct count and avoid cache issue

* Replace references to woo-gutenberg-products-block

* fix php cs error

* fix php cs error

* Fix e2e tests for attributes count

* Separated out and/or query type tests for attrs count

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: roykho <roykho77@gmail.com>
2024-04-05 15:50:19 -03:00
Karol Manijak 0c1e4efc89
Rename the "other" location from `generic` to `site` (#46228)
* Rename the useGetLocation generic option to site

* Add changelog

* Adjust tests to change
2024-04-05 15:54:56 +02:00
Karol Manijak 1c4b793f06
Product Collection: fix "Reset All" button in Editor filters (#46226)
* Add deselect callabck to attribute filter

* Add deselect callabck to created filter

* Add deselect callabck to featured filter

* Add deselect callabck to handpicked filter

* Cleanup deselect callabck to keyword filter

* Add deselect callabck to on salefilter

* Add deselect callabck to order by option

* Add deselect callabck to stock status filter

* Add deselect callabck to price range filter

* Add deselect callabck to price taxonomies filter

* Call all the reset filer callbacks on reset

* Add changelog

* Remove unused variable

* Replace hardcoded default filter values with the DEFAULT_FILTERS constant
2024-04-05 13:16:00 +02:00
Karol Manijak 92e99d4cad
Product Collection: telemetry choosing collection (#45827)
* Use templateSlug context in Product Collection

* Implement util recognising the location for track events

* Implement the track event when user chooses a collection in Product Collection

* Add changelog

* Remove incorrect import

* Cover cases with specific Product or Specific Taxonomy

* Update event name

* Adjust Product Filters tests

* Revert wrong commit
2024-04-02 14:12:20 +02:00
Thomas Roberts 893c7ddb04
Sync Local Pickup title between Checkout block and shipping settings UI and vice/versa (#45720) 2024-04-02 11:34:32 +00:00
Karol Manijak 5d47c769a4
Recognise if Product Collection is located inside Cart or Checkout blocks (#46059)
* Recognise if Product Collection is inside Cart or Checkout blocks

* Upgrade priority block recognition over templates

* Update the comments to better depict the flow

* Add changelog

* Simplify the logic
2024-04-02 09:05:17 +02:00
Manish Menaria a1a0128904
Product Collection: fetch all products for hand-picked products control (#45931)
* Fetch all products for hand-picked products control

This commit modifies the `getProducts` function usage within the Hand-Picked Products control, aiming to fetch all products regardless of catalog size.

The change involves explicitly setting `queryArgs` to include `per_page: 0` in the function call. This adjustment overrides the default behavior based on the `isLargeCatalog` condition, ensuring that all available products are fetched from the Store API for selection within the control.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-04-01 14:17:12 +05:30
Roy Ho e3b1dd6a10
Remove clickable cursor on post title (#45998)
* Remove clickable cursor on post title

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Update plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/editor.scss

Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>

* Add missing semicolon

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
2024-03-29 08:35:01 -07:00
Niels Lange cad1aa6c2b
Ensure that each <CheckboxControl> component has a unique ID (#45655)
* Ensure that each <CheckboxControl> component has a unique id

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Optimise setup and teardown settings

* Wrapping setup and teardown in act()

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-29 12:46:13 +01:00
Thomas Roberts dbf0938fdd
Fix styling bug with saved payment methods in Checkout block (#46019) 2024-03-29 02:30:55 -07:00
Tom Cafferkey 271da399cc
Customer Account block: Remove margin-left from label (#45934)
Co-authored-by: github-actions <github-actions@github.com>
2024-03-27 10:24:11 +00:00
Tom Cafferkey 0cb3b4a9ad
Block Hooks API: Add CustomerAccount block to header (#43267)
Co-authored-by: github-actions <github-actions@github.com>
2024-03-26 08:38:06 +00:00
Alexandre Lara 207a5b43d2
Single Product Block: Add missing allowed inner blocks to fix nesting placement restrictions (#45530)
* Add missing allowed inner blocks to Single Product block

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Remove unnecessary attribute from Single Product block template

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-25 10:59:57 -03:00
Seghir Nadir 401737994f
Use state name in Checkout block address card (#45799)
* Use state name in address card

* fix linting issue

* remove extra check for checkout endpoint

* address review feedback
2024-03-22 15:14:14 +01:00
Manish Menaria ca7aed0a95
Product Collection: Don't show publicly non-queryable taxonomies (#45781)
* Don't show publicly non-queryable taxonomies

The main enhancement involves adding a visibility filter to the taxonomies query. Now, the query considers the `publicly_queryable` property of each taxonomy. Only taxonomies marked as publicly queryable are included in the final list returned by the `useTaxonomies` hook. This change ensures that the Product Collection block's taxonomy controls only display taxonomies relevant and accessible to the public, enhancing both the usability for content creators and the relevance of taxonomy selections for site visitors.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-22 15:01:58 +05:30
Christopher Allford b8bd480faf
Ensure Product Collection Block's `queryId` Uniqueness (#44522)
Since we don't need it to be _perfectly_ stable,
we can just set the `queryId` to the instance ID
on every component mounting. This is fine and
won't mark the attribute as dirty unless a
collection block is added, deleted, or moved
in just the right way. The exception to this
is collection blocks in sync patterns.
In this case the ID cannot change
because it can cause update loops in some
cases that freeze the browser.
2024-03-22 01:40:15 -07:00
Christopher Allford 5002b62d00
Reset Product Collection Pagination When Filtering (#45693)
Since we can't be sure that a page exists once the filters have been
changed we should reset the page when they do.
2024-03-21 14:03:13 -07:00
Roy Ho 3ef4fc88a5
Rating filter: fix misaligned count (#45674)
* Rating filter: fix misaligned count

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-20 05:24:47 -07:00
Karol Manijak 5a54dd6527
Product Collection: Disable client side navigation if blocks incompatible with Interactivity API are detected (#45435)
* Add dummy Force Page Reload control to Inspector Advanced Control

* Add enhancedPagination attribute that decides if client side navigation is enabled

* Consume the enhancedPagination attribute

* Force client side navigation when incompatible blocks detected

* Dummy util to detect incompatible blocks

* Detect incompatible blocks in the Editor

* Switch to WordPress Interactivity package in Product Collection

* Add initial implementation of the incompatible blocks detection in frontend

* Remove leftover

* Revert to using internal version of interactivity API

* There's no Interactivity store config available in the internal Interactivity implementation so remove it

* Disable client side navigation if the incompatible block is detected

* Add default attribute value

* Switch from enmhancedPagination attribute to forcePageReload

* Fixed some misclicked line order change

* Switch from enhancedPagination to forcePageReload in PHP code

* Apply the correct filter

* Fix the incorrect condition to detect incompatible block

* Initial implementation of orange dot to bring attention

* Cleanup

* Remove the orange dot indicator

* Refactor checking for unsupported blocks

* Add changelog

* Fix PHP lint errors

* Bring back empty line at the end of pnpm-lock

* Bring pnpm-lock.yaml file to original state

* Fix incorrect function call

* Add visibility description to function

* Switch private method to public

* More linted fixes
2024-03-18 08:24:03 +01:00
Alexandre Lara 21f2a15e97
Product Filter: Price (Beta) block - Disable block interactions within the editor (#45602)
* Disable block interactions within the editor

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-15 17:18:25 -03:00
Alexandre Lara 85ec4a8cc1
Product Filter: Attribute (Beta) block - Fix block preview (#45558)
* Pass isPreview prop to inner blocks of the Product Filter block

* Add logic to render preview block when in Preview mode

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-15 16:27:01 -03:00
Christopher Allford 23a148aa18
Added Result Count Client Navigation (#45556)
Since the product collection block uses the interactivity router,
it reloads the page in the background and replaces sections
with a `data-wc-navigation-id` set. This adds the attribute
to the count block so that it can also live reload regardless
of where it is in the tree.
2024-03-14 09:48:02 -07:00
Tung Du 50beebe3e5
[Experimental] Display the formatted price in price filter text input fields (#45409)
* fix: display the formatted price in price filter text input fields

* chore: changelog

* Display formatted price within the Product Filter: Price input fields

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
2024-03-13 09:47:36 -03:00
Alexandre Lara b162c9fab0
[Experimental] Product Filter: Price (Beta) block: Prevent invalid price range selection in Product Filter Price block (#45403)
* Prevent invalid price range selection in Product Filter Price block

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-08 16:08:20 -03:00
Bhupesh Mishra 319408bb67
changed filter by attribute filter options order (#44799)
* changed filter by attribute filter options order

In filter by attribute, order of the filter conditions "ALL" and "ANY" reversed as requested.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-08 13:45:53 +01:00
Karol Manijak a3811fa007
Product Collection: Set initial value of Created filter for New Arrivals collection (#45355)
* Set initial vlaue of Created filter for New Arrivals collection

* Add changelog

* Remove a check for products in tests as they may not really be displayed

* Adjust the New Arrivals test

* Adjust the tests logic after the change

* Bring back previous formatting

* Bring back function closure removed by mistake
2024-03-08 08:33:21 +01:00
Alexandre Lara 8163b83bf7
Price Filter: Fix styling issue when Inline input fields is enabled (#45197)
* Fix styling issue in the Editor when Inline input fields is enabled

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Fix styling issue on the Frontend when Inline input fields is enabled

* Fix css lint errors

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-06 17:10:12 -03:00
Alexandre Lara be9b3ab4f0
Filter blocks: Add block preview (#45258)
* Add block preview to filter blocks

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-06 16:55:04 -03:00
Christopher Allford e2ed2a9fdb
Removed Product Collection Unique ID (#44625)
With the availability of other unique characteristics
for identifying collection blocks, it is no longer necessary
to keep this attribute. Since it has not been used it is safe
to remove it without a deprecation cycle.
2024-03-05 14:08:17 -08:00
Tung Du 91272dde6f
[Experimental] Fix: regression introduced in #44757 that breaks the inspector settings of the new attribute filter block (#45276)
Fix: regression introduced in #44757 that breaks the inspector settings of the new attribute filter block
2024-03-05 11:09:36 +07:00
Alexandre Lara 56e6772af5
Reviews by Product > No Reviews Placeholder: Refactor component from JavaScript to TypeScript (#44664)
* Refactor No Reviews Placeholder component from JavaScript to TypeScript

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Fix file import

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-02-22 22:23:53 -03:00
Sam Seay ccb1fb3d76
[Experimental] Fix a bug in new attribute filter where we didn't set the attribute from content panel (#44757) 2024-02-21 19:53:15 +13:00
Alexandre Lara 319c2637eb
Reviews block: Convert editor-block.js to editor-block.tsx and replace propTypes with TypeScript definitions (#44594)
* Convert Reviews Editor code to TypeScript

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-02-20 10:58:52 -03:00
Karol Manijak 5b420159cb
Product Collection: disable "Sync with current query" option for 2nd+ block on archive (#44577)
* Refactor store usage

* Prepare function resolving inherit property for additional check

* Add logic to disable sync with query if there's already one Product Collection on archive that does that

* Add changelog

* Cover the post editor case

* Add E2E test for that and small refactor in tests

* Remove duplicated import

* Fix lint problems

* Fix typo in test description

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>

* Replace confusin abbreviation with other description

* Update the logic to be more robust and covering also the case where Product Collection blocks are nested

* Add issue reference to the comment

* Add eslint disable before ts-ignore

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
2024-02-19 17:51:42 +01:00
Manish Menaria ce00f299ea
Improve Accessibility in Product Collection Navigation (#44599)
* Add animation for client-side pagination

This includes:
- Addition of animation state management in the frontend file to control the visual transition between pagination states.
- Introduction of new SCSS rules for the start and finish animations, ensuring a seamless and visually appealing pagination experience.
- Modification of the PHP logic to inject necessary HTML for the animation to be applied.

These updates aim to provide a more engaging and responsive interface for users navigating through product collection.

* Enhance accessibility for product collection navigation

This commit introduces several improvements to enhance accessibility and user experience. Specifically, it adds new context properties to manage accessibility messages during the navigation process, including messages for loading and when a page has loaded. These changes ensure that screen reader users receive appropriate feedback during navigation.

Changes made:
- Added `accessibilityMessage`, `accessibilityLoadingMessage`, and `accessibilityLoadedMessage` properties to the `ProductCollectionStoreContext`. These properties store messages to be announced by screen readers during different stages of page navigation.
- Implemented logic in the product collection store to update the `accessibilityMessage` during the start of navigation (showing a loading message) and upon completion (showing a loaded message).
- Utilized a technique to ensure that consecutive identical messages are still announced by screen readers, by appending a no-break space to the message if it is the same as the previous one. This follows a pattern similar to the `@wordpress/a11y` package.
- In `ProductCollection.php`, enhanced the block's HTML output to include these new accessibility messages and integrated them with the existing interactive data attributes. This ensures that the front-end components are fully prepared to handle these accessibility enhancements.
- Added a new `div` with `class="screen-reader-text"` and `aria-live="polite"` attributes, which dynamically displays the accessibility message based on the navigation state. This div complements the visual pagination animation with an accessibility-focused mechanism for announcing the page load states to screen reader users.

By addressing accessibility considerations with these enhancements, we're making Product Collection navigation more inclusive and user-friendly for all users.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-02-19 11:35:14 +05:30
Tarun Vijwani 4e6476a996
Adjust spacing in/between elements on the Cart and Checkout block pages (#44160)
* Add spacing in Checkout block page

* Add spacing in Order summary block

* Update responsive styles for order summary panel

* Update styles for cart and cart line items table

* Update styles for order summary and cross-sells products

* Remove unnecessary CSS styles from cart line items table and cart block

* Remove unused CSS class from cart line items table

* Fix linting errors

* Add changelog

* Fix changelog lint

* Update quantity selector style

* Increase the line-height of the set description and remove margin top from email field

* Add margin-top to order summary image and express payment margin adjustment

* Update styles for cart and checkout components

* Fix linting error

* Fix margin units in cart-cross-sells-products

* Replace em with px

* Add margin-top to payment method container

* Update styles for Cart block for mobile screen

* Update padding in cart style.scss
2024-02-17 01:50:11 +04:00
Tarun Vijwani 506499dec4
Prevent prefilling of the billing address with the shipping address in the Checkout block for the Guest Shopper (#44347)
* Clear billing address when useShippingAsBilling checkbox is unchecked

* Add billing address sync with server

* Add useRef hook to store previous billing address and update sync functions

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Revert "Add useRef hook to store previous billing address and update sync functions"

This reverts commit 7bc3312ab7.

* Added condition to clear address only for guest users

* Add E2E test to check billing address form is empty for Guest shopper

* Fix typo

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Updated docs-manifest.json

* Revert "Updated docs-manifest.json"

This reverts commit 20d578a9d6.

* Include company field in the E2E test

* Replace beforeAll with beforeEach

* Skip country reset to keep consistency with Shortcode Checkout

* Remove sync billing address on server

* Update E2E test to include the shipping address check

* Remove unsed  imports

* Clear address fields except country and state

* Optimize the billing and shipping address check with switch statement

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
2024-02-16 16:10:51 +04:00
Manish Menaria e210302e8a
Product Collection: Add loading indicator for client-side pagination (#44571)
* Add animation for client-side pagination

This includes:
- Addition of animation state management in the frontend file to control the visual transition between pagination states.
- Introduction of new SCSS rules for the start and finish animations, ensuring a seamless and visually appealing pagination experience.
- Modification of the PHP logic to inject necessary HTML for the animation to be applied.

These updates aim to provide a more engaging and responsive interface for users navigating through product collection.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Allow user clicks under product collection's loading animation

This commit enhances the user experience of the loading animation for the product collection block. Changes include:

- Specifying `transform-origin: 0% 0%;` directly within the block's initial style to indicate the animation should start from the left
- Adding `pointer-events: none;` to allow user interactions with elements underneath the loading animation, thus improving usability by not blocking clicks.

Additionally, redundant `transform-origin` properties were removed from the `@keyframes` declaration to clean up the code and avoid unnecessary repetition. This simplification contributes to both the maintainability and readability of the stylesheet.

* Fix linting errors in SCSS file

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-02-16 15:43:58 +05:30
Tung Du 0425857b7f
[Experimental] Fix Active Filter chips style (#44682) 2024-02-16 10:09:49 +00:00
Sam Seay f513ce7c25
[Experimental] Refresh product collections that don't support the interactivity API (#44631) 2024-02-16 15:51:42 +13:00