* 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>
* 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.
The main aim of this PR was to convert the product-control component to TypeScript. However, since the component is coupled with many other parts (it is itself wrapped into 4 HOCs), many refactoring changes were needed to make the types work.
In particular:
* Add `convertProductResponseItemToSearchItem` utility function
The function allows to clean up the `ProductResponseItem` in order
to make its shape compatible with the `SearchListItem`, instead of
passing the entire object.
Because data from the object might need to be used in certain
circumstance (e.g. render functions), the data is now allowed to be
scoped within a `details` key.
This commit also converts `utils/products` to TypeScript.
* Fix `ProductResponseItem` type missing `slug`
The `slug` is returned by the API but didn't appear in the type def.
* Improve certain HOCs types
The `withSearchedProducts` and `withTransformSingleSelectToMultipleSelect`
HOCs are now typed in such a way that it is clear what incoming props
they expect and what they inject.
* Refactor `ProductAttrributeTermControl` for further type safety
Make sure that `count` is always a `number` as required by the
component types.
* Refactor `search-list-control.tsx` and `item.tsx`
The new `SearchItem` allows for the `details` key to be passed.
All the components are now aware of it.
* Convert `ErrorPlaceholder` and `ErrorMessage` to TypeScript
* Add stories for `ErrorPlaceholder` and `ErrorMessage` (https://github.com/woocommerce/woocommerce-blocks/pull/5255)
Stories include:
* Default generic error
* API error
* Unknown error
* Error without possibility to retry
* Base Error atom
Where applicable, the **Retry** button will not only trigger the appropriate
action, but also simulate the loading state of the error component.
* Update references to `ErrorMessage` component to leave the file extension out
Fixwoocommerce/woocommerce-blocks#5255
Refs woocommerce/woocommerce-blocks#5249
* Add isCompact prop to components using SearchListControl
* Update @woocommerce/components to 6.1.2
* Remove legacy CSS code
* Add some CSS rules to override conflicting editor styles
* Replace showCount prop with has-count class name
* Create ExpandableSearchListItem component
* Refactor ProductControl so it uses ExpandableSearchListItem
* Update @woocommerce/components to 6.2.0
* Fix @woocommerce/components builds breaking
* Fix a11y of expandable item list children
* Set categories to an empty array by default
* Render compact control in Attribute filter sidebar
* Add countLabel to ProductAttributeTermControl
* Fix ProductTagControl selected items
* Use sentence case for countLabel
* Fix wrong margins in block editor
* Fix checkbox alignment
* Update package-lock.json
* Fix withCategories test
* Fix JS error in Filter Products by Attribute block
* Make input ids unique
* mass-rename js/components => js/editor-components & update webpack
* mass-change import '@woocommerce/editor-components' +
+ jsprettier quotes fix
* more mass-rename @woocommerce/editor-components
* fix up references to js/editor-components in various places:
- docs/readmes
- jest config
- typescritp config
* fix story path to match new folder/alias 'editor-components'
* fix jest tests: use new alias for editor-components
* include renamed `editor-components` in editor stylesheet cache group
Manish Menaria
Patricia Hillebrandt
Christopher Allford
Ron Rennick
Mike Jolley
Sam Seay
Lucio Giannotta
Albert Juhé Lluveras
Thomas Roberts
Darren Ethier
Rua Haszard