* 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>
* 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>
* add imageSizing attribute to the product catalog template
* add attribute for the product search results template
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
---------
Co-authored-by: github-actions <github-actions@github.com>
* 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>
* 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>
* 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
* Fix removal of express payment method from state
- Correct the logic for removing an express payment method from the availableExpressPaymentMethods state object.
- Previously, the deletion targeted the incorrect object, leading to incorrect change in state. Now, the correct entry is removed using destructuring and rest parameters, ensuring the express payment method is properly deleted.
* Revert "Fix removal of express payment method from state"
This reverts commit 8e24553794.
* Fix typo error in the reducer
* Add unit to make sure correct express payment method is removed
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Remove payment method descriptions from express and fix changelog
---------
Co-authored-by: github-actions <github-actions@github.com>
* 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>
* 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>
* Fix Gutenberg links in the docs pointing to the wrong branch
* Add changefile(s) from automation for the following project(s): @woocommerce/notices, @woocommerce/eslint-plugin, @woocommerce/dependency-extraction-webpack-plugin, @woocommerce/components, woocommerce-blocks, woocommerce-beta-tester, woo-ai
* Fix markdown lint errors
* Fix wrong link in the docs
---------
Co-authored-by: github-actions <github-actions@github.com>
* Early implementation of getting the Product Collection location/context
* Solve the problem of async fetch in the hook
* Improve typing
* Import core data store instead of hardcoding store name
* Recognise Product Category and Product Tag
* Remove attr property from archive location data
* Unify states naming
* Add TODO entry
* Display the info about the location of Product Collection
* Improve the typing
* Recognise if Product Collection is nested in Single Product block
* Improve cases descriptions and add some defaults to potentially undefined values
* Change the taxonomies sourceData
* Recognise Mini Cart as Cart context
* Recognise attribute as archive contect but no taxonomy
* Refactor the function into single useEffect and clean it up
* Fix typo
* Remove unnecessary import
* Stop rendering the output in Editor (it was for demo purposes)
* Pass location data to Product Template query in Editor
* Replace templateSlugs literal strings with object reference
* Rename parseResponse function to more specific name getIdFromResponse
* Add dpeendency array to useEffect
* Refactor templates detection
* Use full taxonomy names instead of shortcuts
* Write down scenarios to test
* Working scenario
* Change the verification way for more robust
* Add more robust methods to include Single Product block
* Add test Product Collection in Single Product block in a Single Product Template
* Imprvoe the order of veryfing the requests
* Fix linter issues. Although that makes code less readable
* Improve the useGetLocation typing so it's more generic
* Rework the E2E tests regarding location of Product Collection and limit their number
* Bring back necessary eslint-disable
* Remove unused imports
* Uncomment line required for other tests
* Add changelog
* Rename constant from BLOCK_NAME to BLOCK_SLUG as it's a slug
* Add a BLOCK_NAME constant and replace the literal block name usages in E2E tests
* Fix post merge issues
* Fix test after merge
* Adjust the tests to kick off waiting for request before action that triggers them
* Make attributes available in rest_product_query hook
This commit introduces the 'includeInQueryContext' attribute to the 'woocommerce/product-collection' block and updates the 'woocommerce/product-template' block to consume this new attribute.
Key Changes:
1. `woocommerce/product-collection` Block:
- A new attribute 'includeInQueryContext' is added in `block.json`. This attribute is designed to hold a list of attribute names relevant for the query context.
- The 'includeInQueryContext' attribute is included in the `providesContext` field to ensure its availability to child blocks.
- In `constants.ts`, default values for 'includeInQueryContext' are defined, specifying 'collection' and 'id' as initial attributes.
- The `types.ts` file is updated with a comment explaining the purpose of 'includeInQueryContext'.
2. `woocommerce/product-template` Block:
- Modified `block.json` to utilize the 'includeInQueryContext' context provided by the parent `woocommerce/product-collection` block.
- The `edit.tsx` file is updated to handle the new context. It uses a newly added utility function `useProductCollectionBlockAttributes` from `utils.tsx` to access parent block attributes.
- The `utils.tsx` file is introduced, containing the `useProductCollectionBlockAttributes` hook. This hook is responsible for finding the parent 'woocommerce/product-collection' block and returning its attributes.
- Within `edit.tsx`, logic is added to create a query context object based on the attributes specified in 'includeInQueryContext', enhancing the block's ability to dynamically adapt to changes.
* Remove commented code
* Rename query context attribute and optimize parent block detection
This commit introduces two significant changes aimed at improving code readability and efficiency.
1. **Renaming of Query Context Attribute:**
- The attribute `includeInQueryContext` has been renamed to `queryContextIncludes` across various files, including block JSON configurations and TypeScript definitions. This change makes the attribute's purpose more intuitive, indicating it specifies which attributes to include in the query context.
2. **Optimized Parent Block Detection:**
- Replaced the use of `getBlockParents` with `getBlockParentsByBlockName` in utility functions to find the closest Product Collection block. This optimization allows for a more direct and efficient way to identify the relevant parent block by specifying the block name, reducing unnecessary iterations and improving code performance.
* Streamline query context construction in product template
Key Changes:
- **Introduction of `useProductCollectionQueryContext` Hook:** This new hook takes the `clientId` and `queryContextIncludes` as inputs and returns a query context object. It encapsulates the logic for fetching parent product collection block attributes and constructing the query context accordingly. This abstraction simplifies the edit component's logic, focusing on the essentials and improving code readability.
- **Optimization of Parent Block Detection:** The hook uses `getBlockParentsByBlockName` to accurately and efficiently find the closest parent `Product Collection` block, minimizing the overhead previously associated with traversing the block hierarchy.
* Always include `collection` and `id` in query context
* Minor refactor
* Enhance query context handling for more maintainable code
- Introduced `DEFAULT_QUERY_CONTEXT_ATTRIBUTES` in `edit.tsx` to maintain a clear list of default query context attributes.
- Modified `ProductTemplateEdit` to automatically include these default attributes in `queryContextIncludes`, ensuring they are always part of the query context without manual initialization.
- Simplified `useProductCollectionQueryContext` in `utils.tsx` by removing static initialization of 'collection' and 'id', relying instead on the dynamic addition of necessary attributes from `queryContextIncludes`.
This refactor enhances the maintainability and clarity of the code, ensuring a solid foundation for future enhancements and features.
* Add E2E tests for Product Collection query context
- Added a new test suite 'Query Context in Editor' to validate the correctness of query context parameters when the Product Collection block is used. This suite ensures that:
- For the 'Product Catalog', only the ID is sent in the query context, confirming that collection-specific parameters are excluded when not relevant.
- For collections such as 'On Sale', the collection name is correctly passed in the query context, validating that the block dynamically adjusts query parameters based on its settings.
- Introduced a new utility method `setupAndFetchQueryContextURL` in `product-collection.page.ts`. This method automates the setup of a post with the Product Collection block and fetches the URL with query context parameters, facilitating the validation of query context handling.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Fix edge case when `queryContextIncludes` is not defined
- Initializing `queryContextIncludes` with a default empty array directly in the destructuring assignment of the component's props. This approach ensures that `queryContextIncludes` is always an array, simplifying downstream logic.
- Creating a new constant `queryContextIncludesWithDefaults` to hold the combination of `queryContextIncludes` and `DEFAULT_QUERY_CONTEXT_ATTRIBUTES`. This step avoids directly mutating the `queryContextIncludes` prop, aligning with best practices for functional purity and making the code easier to understand and debug.
- Updating the `useProductCollectionQueryContext` hook call to use `queryContextIncludesWithDefaults`. This ensures that the default query context attributes are consistently included without altering the original prop.
These adjustments not only enhance the code's maintainability but also ensure more predictable behavior by avoiding side effects related to parameter mutation.
---------
Co-authored-by: github-actions <github-actions@github.com>
* Add logic to trap keyboard focus inside the Product Gallery Pop-Up
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Remove unnecessary condition
* Fix issue with keyboard focus trap not working within the Pop-Up
---------
Co-authored-by: github-actions <github-actions@github.com>
* Import editor.scss styles of Product Templayte and increase specificity
* Add changelog
* Add ts ignore
* Revert changing eslint-disable as it conficts with another rule creating more errors
* Include collection attribute in the block context
* add 'collection' to useContext for Product Template
* Changelog
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Return focus to trigger element when closing pop-up
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Fix php cs error
---------
Co-authored-by: github-actions <github-actions@github.com>
* Update data store to bail if there is no customer ID
* Use WC_Data meta functions
* Save and load meta in session class
* Customer session handling
* CheckoutFields - only persist customer data to accounts
* Inline docs for session handling
* Handle meta data in session
* Document wc->customer inline
* Store only additional fields in session
* Prevent notice in WC_Data
* Organise keys and remove duplicates
* Correctly save fields to account
* Fix notices on checkout
* Remove unnecessary diff
* Changelog
* Go back to previous way to loading session handler to avoid 3rd party breakage
* No need to track is_session
* white space
* Remove changes to customer data store
* Update class-wc-customer-data-store.php
* Populate client from additional values from api
* Additional fields in session
* Add woocommerce_customer_allowed_session_meta_keys hook
* Put back legacy keys for tests
* Remove key fixes
* Don't save additional fields to customer object
* Remove duplicate init call
* Only persist contact fields
* Add ability to select thumbnails using keyboard
* Add ability to open the Product Gallery pop up using the keyboard
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Fix outline border not showing on Thumbnails on some browsers
* Prevent firefox browser from focusing on UL tag of the Large Image block
* Enable usage of 'Space' and 'NumpadEnter' keys to navigate between the thumbnails
---------
Co-authored-by: github-actions <github-actions@github.com>
* fix error on decimal input for the Number of Thumbnails setting
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* Initial working version
* Update scrolling behavior in product collection block frontend
This commit updates the scrolling behavior in the product collection block's frontend script.
Previously, the code focused on the first anchor or button within a product collection block. This approach was taken to maintain accessibility and ensure that the focused element was scrolled into view. However, this behavior has been changed to improve the user experience.
The updated code now directly scrolls to the first product in the collection. This is achieved by selecting the product using a new selector that targets the `.wc-block-product` class within the `.wc-block-product-template` of the specified `data-wc-navigation-id`. Once the product is selected, the `scrollIntoView` method is used with smooth behavior and start block alignment, offering a more visually appealing scroll effect.
This change enhances the user experience by smoothly directing attention to the beginning of the product collection, making it easier for users to browse products.
* Remove code related to animation
* Fix the issue related to pagination block rendering
- I have improved the code by breaking it into smaller functions
- Added unique `data-wc-key` to each anchor tag
* Enhance Product Collection Block with Interactive Prefetching
* Refine Prefetch Logic & other improvements
This commit further refines the prefetch logic and interactivity in the Product Collection block. It focuses on enhancing code clarity and improving the prefetch behavior based on user interactions.
Key changes include:
1. Renamed 'isPrefetchNextAndPreviousLink' to 'isPrefetchNextOrPreviousLink' in ProductCollectionStoreContext for better readability and accuracy.
2. Modified the scrollToFirstProductIfNotVisible function to accept a wcNavigationId as a parameter instead of a reference
3. Introduced checks for the existence of wcNavigationId in scrollToFirstProductIfNotVisible to prevent unnecessary executions.
4. Updated comments throughout frontend.tsx for enhanced clarity, explaining the prefetch logic and its triggers in detail.
5. Adjusted the logic in the navigate and prefetch functions to align with the new context structure and prefetch strategy.
6. In ProductCollection.php, updated data attributes to align with the revised prefetch strategy.
7. Refined the attribute setting in process_pagination_links function to correctly implement the updated interactivity and prefetch logic.
These changes aim to optimize the prefetch functionality, reduce unnecessary prefetching on initial page load, and ensure a smoother and more efficient navigation experience within the Product Collection block.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Improve comments
* Use wp_json_encode for data-wc-interactive attribute
This commit updates the `ProductCollection` class to use `wp_json_encode` for setting the `data-wc-interactive` attribute value. Previously, the attribute value was hardcoded as a JSON string. Now, by utilizing `wp_json_encode`, we ensure the JSON encoding is handled correctly by WordPress standards, enhancing readability and maintainability of the code.
---------
Co-authored-by: github-actions <github-actions@github.com>
* Initial approach to fix incorrect product data displayed in Product Collection in context of Single Product block
* Remove the BlockCOntextProvider
* Add Block context for title and summary
* Add changelog
* Improve typing
* Add E2E test with Product Collection inside Single Product block
* Improve insertBLock function description
* Make productPrices selector in Product Collectionmore specific
* Extract components props into a types
* Hide the shipping rates in editor to match front-end
- If there are no shipping rates, hide the shipping rates in editor to match front-end.
* Add get_shipping_zones method to CartCheckoutUtils
* Display change address like for fallback shipping zone
- If cart has multiple and default shipping zones without shopper address, display the change address link
* Update shipping address label
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Fix linting errors
* Update plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/shipping-address.tsx
Co-authored-by: Niels Lange <info@nielslange.de>
* Display shipping calculator for locations outside all other zones
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Update typescript for activeShippingZones
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Niels Lange <info@nielslange.de>
* Fix session notices in Cart and Checkout block pages
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Update plugins/woocommerce-blocks/assets/js/base/components/notice-banner/style.scss
Co-authored-by: Niels Lange <info@nielslange.de>
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Niels Lange <info@nielslange.de>
* Add unique ID attribute to Product Collection block
In this update, we introduced a unique identifier for each instance of the Product Collection block. This change involves several key modifications:
1. **Block JSON Update**: Added a new `id` attribute in `block.json` to store the unique identifier for each block instance.
2. **Product Collection Content Update**: In `product-collection-content.tsx`, we utilized the `uuid` library to generate a unique ID. This is done in a `useEffect` hook, ensuring that each block instance receives a distinct ID upon initialization.
3. **Type Definitions**: The `ProductCollectionAttributes` interface in `types.ts` was updated to include the new `id` attribute, aligning with our enhanced data structure.
4. **Package Dependencies**: To support this feature, `@types/uuid` and `uuid` were added to `package.json`, ensuring we have the necessary tools for ID generation.
This enhancement is pivotal for uniquely identifying each Product Collection block, paving the way for more robust and individualized block handling in the future.
* Rename uniqueId to id
* Add lock file
* Add 'id' context to product collection and template
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Merge trunk with 42861-introduce-a-unique-identifier-for-each-product-collection-block
* Regenerate the lockfile
* Remove autogenerated change in plugins/woocommerce/package.json
* Regenerate lock file
* Rerun CI actions
* Delete pnpm-lock.yaml file & regenerate it using pnpm install command
---------
Co-authored-by: github-actions <github-actions@github.com>
* Remove the experimental flag from the Product Gallery block
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
---------
Co-authored-by: github-actions <github-actions@github.com>
* Get default attributes on front end
* Remove console log
* Show notice about 0 registered fields in editor
* Do not show block in editor if no fields are registered
* Wrapper block
* Styling/spacing
* Update webpack config
* Register heading pattern
* Wrapper block type definition
* get_fields_for_location return fields in array format
* Use wrapper in default content
* Separate fields from the hook block
* Hide when no custom fields exist
* Address and contact fields
* Shared form fields in settings
* remove info block from wrapper
* Revert render_content to original
* rename block
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Update styling
* Create shared get_order_additional_fields_with_values to format values
* Update block names and descriptions
* Show address placeholders
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Unused import
---------
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: github-actions <github-actions@github.com>
* Product Gallery: Update div elements to ul and li for better accessibility
* Product Gallery: Add changelog files
---------
Co-authored-by: roykho <roykho77@gmail.com>
Alexandre Lara
Sam Seay
Luigi Teschio
Karol Manijak
Manish Menaria
Tarun Vijwani
Tung Du
Mike Jolley
Chris Lilitsas
Thomas Roberts
Niels Lange
Danny Dudzic