* Fixed PHP 7.4 Compatibility
The splat operator does not support associative arrays until PHP 8.1.
* Added Related Products Collection Boilerplate
* Added `woocommerceRelatedTo` Collection Parameter
This parameter allows the block to query for products that are related
to the given product IDs.
* Added Collection Related Product Filter
Using `woocommerceRelatedTo`, queries may restrict the products returned
to those that are related to the given product ID(s).
* Removed Unnecessary Tracking
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Removing Misunderstood Option
* Linting Fix
* Fixed Test
* Initialize the Hand-Picked collection
* Removed Unnecessary Keyword
* Render the collection-specific control
* try removing for fixing gh syntax hl
* add back
* tweak icon render
* combine conditions for early return
* Remove timeFrame from the query
* Set control label per context
* Use primitives for the icon
* Hide 'order by' control for the Hand-Picked collection
* Support Unlimited `wc_get_related_products()`
This changes related product fetching so that `-1` will return all
related products. I also removed a second +10 offset that seems
to have been accidentally added eight years ago.
* Revert "Set control label per context"
This reverts commit cd537befbe.
* Update titles and description
* Enable sorting by entered order
* Removed `woocommerceRelatedTo` Param
Since we're going to use the collection name, we don't need
this functionality any longer.
* Simplified `post__in` Filtering
Since `merge_queries` was already using an intersection merge for
`post__in`, this second function is unnecessary. I've removed it
as well as refactored the merging logic.
* Pass Collection Name To Final Query
* Improve the query merging logic
* Added Custom Collection Handlers
Developers can register collections along with handlers that implement
the custom behavior.
* Removed Second Test Query Construction
As it was, `build_query_vars_from_query_block()` was triggering the
ProductCollection instance hooked into WordPress. After that, we
called `build_frontend_query()` on our test instance. This caused some
weird behavior in tests. As a result, however, the tax_query merge
test couldn't rely on the tax_query transformation done by WordPress.
* Added Related Product Collection Handlers
* Revert "Support Unlimited `wc_get_related_products()`"
This reverts commit 41c837202e.
* Fixed Preview Mode Query
It looks like we were checking the wrong place for the preview
state.
* Improve the query merging logic
* Fixed Test
* Updated Collection Heading
* Handle collection context / no results state
* Small cleanup
* Better Collection Test Teardown
Passing a callable back means that we can use variables in the
setUp and then the tearDown without any confusion.
* Removed Unnecessary Test Provider
* Fixed `$post__in` Merging
When the intersection is empty it was returning all products. This
makes it so that it returns nothing when there's no results.
* Set perPage to 0 and add Pagination block for better discoverability
* Improve empty state in Editor by providing meaningful instruction
* Make code more defensive
* Hide more filters in scope of handpicked through hideFilters API
* Fixed PHPDoc
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Hide Empty Related Product Collections
* Removed Duplicate Query Function
* Added Hand-Picked Collection Handler
* Revert changes to pnpm
* Improve comment for empty Hand-Picked collection
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Fix: Pagination not working on Frontend
Remove perPage and pages attributes from hand-picked collection
* Remove unused code
* Revert "Improve empty state in Editor by providing meaningful instruction"
This reverts commit 9ac5c20d5e.
* Do not apply layout styles for empty results
* Improve the wording on the empty results message
---------
Co-authored-by: Christopher Allford <6451942+ObliviousHarmony@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
* Show product picker control in the editor when a product context is required but not provided
Enhanced the Product Collection block by introducing the `selectedReference` attribute and implementing a product picker control. This control appears in the editor when a product context is required but not provided in the current template/page/post.
1. **block.json**: Added `selectedReference` attribute of type `object`.
2. **constants.ts**: Included `selectedReference` in the `queryContextIncludes` array.
3. **EditorProductPicker.tsx**: Created a new component for selecting products within the editor.
4. **editor.scss**: Added styles for the new Editor Product Picker component.
5. **index.tsx**: Updated logic to determine the component to render, incorporating the new Editor Product Picker.
6. **types.ts**: Defined types for `selectedReference` and updated `ProductCollectionAttributes` interface.
This enhancement allows merchants to manually select a product for collections that require a product context, ensuring the block displays correctly even when the product context is not available in the current template/page/post.
- **Product Picker Control**: Utilizes the existing `ProductControl` component for selecting products. This component is displayed in the editor when a collection requires a product context but it doesn't exist in the current template/page/post.
* Update label on ProductControl component
* Implement dynamic UI state management for product collection block
- Introduced `ProductCollectionUIStatesInEditor` enum to define various UI states for the product collection block.
- Added `getProductCollectionUIStateInEditor` utility function to determine the appropriate UI state based on context.
- Updated `Edit` component to use `getProductCollectionUIStateInEditor` for dynamic state management.
- Refactored `ProductCollectionContent` to utilize the new Editor UI state management.
* Fix: Product picker isn't showing
* Fix: Preview label state isn't showing
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Refactor WooCommerceBlockLocation type
- Introduced specific interfaces for WooCommerceBlockLocation, including ProductLocation, ArchiveLocation, CartLocation, OrderLocation, and SiteLocation, to improve type safety and code clarity.
- Updated createLocationObject function to return a BaseLocation type.
- Refactored useSetPreviewState hook in product-collection utils:
- Extracted termId from location.sourceData for cleaner and more readable code.
- Replaced direct access of location.sourceData?.termId with termId variable.
* Remove fallback to 0 in case there may be a product with id 0
* Use optional chaining to avoid undefined errors
* Rename to
* Change order of arguments in function
* Pass boolean prop instead of making further recognition of the UI state in ProductCollectionContent
* Destructure props in component
* Rename to
* Update names in enum
* Rename to and change the structure to single number.
* Rename location to
* Add a method to choose a product in the product picker in Editor
* Add E2E tests
* Fix failing e2e tests by changing location to productCollectionLocation
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Don't allow selecting product variations
* Minor code refactoring
* Fix: Product control isn't showing products
**Before**
```tsx
const getRenderItemFunc = () => {
if ( renderItem ) {
return renderItem;
} else if ( showVariations ) {
return renderItemWithVariations;
}
return () => null;
};
```
As you can see above, `return () => null;` is returning a function which is causing the issue. This will render nothing in the list. I changed this to `return undefined;`. This way, we will use default render item function.
* Translate text in ProductPicker component
* Improve E2E test
* Use createInterpolateElement to safely render strong HTML tag
* Fix E2E tests
* Fix E2E tests
* Product Collection: Inspector control to change selected product (#50590)
* Add Linked Product Control to Product Collection Block Inspector Controls
- Introduced a new `LinkedProductControl` component in the Product Collection block's Inspector Controls.
- This control allows users to link a specific product to the product collection via a dropdown with a search capability.
- Added corresponding styles to `editor.scss`.
- Integrated a `useGetProduct` hook in the `utils.tsx` to fetch and manage the state of the linked product data, including handling loading states and errors.
- Updated the Inspector Controls to include the new Linked Product Control component, enhancing the block's customization options for users.
* Add E2E tests
* Hide product picker when product context is available
* Improve logic to hide Linked Product Control
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
* Remove hasError state from useGetProduct hook
* Rename isShowLinkedProductControl to showLinkedProductControl
* Convert jsxProductButton to ProductButton component
* Refactor jsxPopoverContent to LinkedProductPopoverContent component
* Improve UI of Linked Product Control
* Address PR feedback
* Fix E2E tests
---------
Co-authored-by: github-actions <github-actions@github.com>
* Rename isUsesReferencePreviewMode to isUsingReferencePreviewMode
* Change order of conditions in getProductCollectionUIStateInEditor
---------
Co-authored-by: github-actions <github-actions@github.com>
* Recognize custom category templates as archive ones
* Disable the preview label if termId is recognized
* Fetch the product category template ID
* Prepare util to properly parse product taxonomies
* Utilise the taxonomies util and update the query accordingly
* Add tests
* Update tests to be more specific
* Improve selectors in E2E test
* Add changelog
* Update selectors
* Fix the order of expected products
* Remove unneceessery entries from array that are covered by another entries
* Rename the variable to beytter depict its purpose
* Remove `__experimentalLayout` from Product Template block
This commit removes `__experimentalLayout` from Product Template block. This is because we don't want to use `layout` from Gutenberg for now. This change fixes the alignment of the first item in Grid layout.
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Fix linting errors in SCSS file
---------
Co-authored-by: github-actions <github-actions@github.com>
* 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.
* 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>
* 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>
* 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
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.
* 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>
* 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>
* 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
* 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 authors filter from Product Collection block
* Remove author filed in query
* Add back the author query argument in the final query builder
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Add Toggle to inspector controls allowing shrinking number of columns
* Add logic to allow columns to shrink in Product Collection
* Rename SCSS variable
* Make sure the value provided to component is a boolean
* Rename onChange callback name to better reflect its purpose
* Enable Product Collection as a core feature
* Fix: disable product query title and summary variations from inserter in favour of Product Collection ones (https://github.com/woocommerce/woocommerce-blocks/pull/10548)
* Limit the scope of Product Query's Product Title and Product Summary
* Add missing piece after refactoring
* Enable manual migration of Products to Product Collection (https://github.com/woocommerce/woocommerce-blocks/pull/10655)
* Refactor block variation registration in product-collection (https://github.com/woocommerce/woocommerce-blocks/pull/10701)
This commit refactors the product-collection block's variation registration.
Changes:
- The `product-summary` and `product-title` variations have been encapsulated within their own respective functions: `registerProductSummaryVariation` and `registerProductTitleVariation`.
- Imported and invoked these new functions in the main `index.tsx` of the product-collection block, ensuring the variations are registered.
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Add columns control to product collection block editor settings
- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function.
- A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'.
- The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.
* Refactor: Simplify Fallback Return in ColumnsControl Component
This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.
* Add Products Collection block scaffolding
This commit adds the initial scaffolding for the new Products Collection block. It includes the creation of new files (block.json, edit.tsx, index.tsx and ProductsCollection.php) and additions to existing files (webpack-entries.js and BlockTypesController.php). The block is marked as experimental and currently displays a static "Product collection" text in both the editor and the frontend.
* Add Product Template block and integrate with Products Collection block
This commit introduces the new Product Template block and integrates it with the existing Products Collection block. The changes include:
- Creation of the Product Template block, including its block.json, edit.tsx, icon.tsx, index.tsx, and save.tsx files.
- Modification of the Products Collection block, adding an icon.tsx file and updating its edit.tsx and index.tsx files.
- Updates to the webpack-entries.js file to include the new Product Template block.
- Addition of the ProductTemplate class in the src/BlockTypes directory.
- Inclusion of the ProductTemplate class in the src/BlockTypesController.php file.
* Enhance product-template block with context and styling
This commit adds various enhancements to the product-template block. It includes:
- Introduce `usesContext` and `supports` properties to the block.json file
- Update the edit.tsx file to use BlockContextProvider and add query logic
- Add an editor.scss file for styling the product-template block in the editor
- Extend the products-collection block.json file with new properties
- Modify the products-collection edit.tsx file to include instanceId and useEffect
These changes improve the product-template block by providing better context handling and styling options.
* Add 'woocommerce/product-template' to supported inner blocks and improve product-template editing
This commit adds 'woocommerce/product-template' as a supported inner block for various product elements, including button, image, rating, sale-badge, SKU, and stock-indicator. It also improves the editing experience for the product-template block by memoizing the block previews and rendering them more efficiently. This should lead to a smoother editing experience and better performance in the block editor.
* Add product title and summary variations for Products Collection block
- Add default spacing between product elements in `style.scss`
- Register product title and summary element variations in `products-collection` block
- Create utility for registering element variations
- Extend core elements with WooCommerce namespace
* Set inherit to false by default and other improvements
This commit introduces several changes to the ProductsCollection block:
1. Set the "inherit" property to false in block.json, disabling inheritance by default.
2. Remove the default styles for inner blocks in the edit.tsx file.
3. Add a save function in the index.tsx file, and create a save.tsx file to handle saving the block.
4. Update the ProductTemplate.php file to properly render the block content based on the changes.
5. Remove the render function from the ProductsCollection.php file, as it is no longer necessary.
These changes improve the functionality and flexibility of the ProductsCollection block, allowing for better customization and control over the block's appearance and behavior.
* Fix pagination issue
* Minor code quality improvments
* Register product blocks only in experimental builds
- Wrap registerBlockType calls in product-template and products-collection with isExperimentalBuild check to enable block registration only in experimental builds.
- Update the default value for the perPage property in products-collection/block.json from null to 9, setting a default display of 9 items per page.
* Add experimental flag to PHP file
* Update documentation for feature flags
- Add Products Collection and Product Template blocks to the list of experimental flags in the feature-flags-and-experimental-interfaces.md file.
- Include references to PHP and webpack flags for both blocks.
* Change default order and orderBy values in block.json
- Update the default 'order' value from 'desc' to 'asc'.
- Update the default 'orderBy' value from 'date' to 'title'.
* Refactor experimental block registration and remove unused file
- Replace `isExperimentalBuild()` with `registerExperimentalBlockType()` in product-template/index.tsx.
- Remove unused file types.ts in product-template directory.
- Add `get_block_type_script()` function to ProductTemplate.php and ProductsCollection.php to return null.
* Update variation names in product summary and product title elements
Updated variation names for product summary and product title elements to match the new products-collection namespace. The previous variation names used the product-query namespace which will be deprecated. This change ensures that the correct variation names are used for these elements in the products-collection block.
* Rename 'Products Collection' to 'Product Collection'
- Renamed all instances of "products-collection" to "product-collection" across multiple files.
- Adjusted related types and method calls to match the new naming convention.
- Updated documentation and feature flags to reflect the name change.
- Made necessary changes in `BlockTypesController.php` and `bin/webpack-entries.js`.
* Hide product-template block from inserter
- Added "woocommerce/product-collection" to the list of parent blocks in `product-template/block.json`.
- Added `"inserter": false` to the "supports" section to disable the option of inserting this block through the editor inserter component.
* Fix Eslint error
Bart Kalisz
Manish Menaria
Karol Manijak
Seghir Nadir
Patricia Hillebrandt
Christopher Allford
Chris Lilitsas
Ron Rennick
Luigi Teschio
Mike Jolley
Tung Du
Albert Juhé Lluveras