woocommerce/plugins
Manish Menaria 4ae60196ea
Product Collection: Make attributes available in rest_product_query hook (#44150)
* 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>
2024-02-12 14:15:24 +05:30
..
woo-ai Updated PNPM Lock File (#44382) 2024-02-06 09:33:58 +00:00
woocommerce Product Collection: Make attributes available in rest_product_query hook (#44150) 2024-02-12 14:15:24 +05:30
woocommerce-admin [CYS] Ensure the font family for buttons match the one assigned for the content, not the title (#44458) 2024-02-12 09:25:36 +01:00
woocommerce-beta-tester Fix beta test plugin deprecated creation dynamic property (#44109) 2024-01-30 16:12:02 +08:00
woocommerce-blocks Product Collection: Make attributes available in rest_product_query hook (#44150) 2024-02-12 14:15:24 +05:30