861bc091d4
* Initial implementation of the missing product state - Changed `getProductCollectionUIStateInEditor` to a hook `useProductCollectionUIState`. - As we added logic to check if selected product reference is deleted which require making an API call. Therefore, I decided to use a hook. - While making an API call to check if product reference is deleted, I decided to show spinner in the block. - Introduced new UI state `DELETED_PRODUCT_REFERENCE` to handle the missing product state. - Updated existing `ProductPicker` component to handle the new UI state. - It's better to use existing component for the missing product state, as it already has all the required UI. * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Use getEntityRecord to check if product exists and other improvements * Remove console log * Add E2E tests for deleted product reference in Product Collection block This commit introduces new E2E tests to verify the behavior of the Product Collection block when dealing with deleted product references. The changes include: 1. New test suite in register-product-collection-tester.block_theme.spec.ts 2. Modification to product-collection.page.ts to support custom product selection 3. Minor update to utils.tsx to handle trashed products These tests ensure that the Product Collection block correctly handles scenarios where referenced products are deleted, trashed, or restored, improving the overall reliability of the feature. * Simplify product creation in Product Collection block test * Refactor E2E test for delete product reference picker 1. Removing the unnecessary `test.describe` block for "Deleted product reference" 2. Eliminating the `beforeEach` hook that was creating a test product 3. Integrating the test product creation directly into the main test This change simplifies the test structure and improves readability while maintaining the same test coverage for the Product Collection block's behavior when dealing with deleted or unavailable products. * Simplify logic for product collection UI state This commit simplifies the handling of the `usesReference` prop in the Product Collection block: 1. In `edit/index.tsx`, directly pass `usesReference` to `useProductCollectionUIState` hook without conditional spreading. 2. In `utils.tsx`, update the type definition of `usesReference` in the `useProductCollectionUIState` hook to explicitly include `undefined`. * Refactor Product Collection block to improve prop passing - Introduce ProductCollectionContentProps type for better prop management - Refactor Edit component to use a renderComponent function - Update component prop types to use more specific props - Remove unnecessary props from ProductCollectionEditComponentProps - Simplify component rendering logic in Edit component - Adjust ProductPicker to receive only required props - Update imports and prop types in various files to use new types This refactoring improves code organization and reduces prop drilling by only passing necessary props to each component. It enhances maintainability and readability of the Product Collection block and related components. * Refactor Product Collection block editor UI state handling This commit simplifies the rendering logic in the Product Collection block's Edit component. It removes a redundant case for the VALID state, as both VALID and VALID_WITH_PREVIEW states now render the same ProductCollectionContent component. This change improves code maintainability and reduces duplication. * Fix: isDeletedProductReference is not set correctly * Use "page.reload" instead of "admin.page.reload" * Separate PRODUCT_REFERENCE_PICKER and DELETED_PRODUCT_REFERENCE cases This improves readability and maintainability of the switch statement. --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|---|---|---|
| .. | ||
| .vscode | ||
| assets | ||
| bin | ||
| docs | ||
| packages | ||
| storybook | ||
| tests | ||
| .distignore | ||
| .editorconfig | ||
| .env | ||
| .eslintignore | ||
| .eslintrc.js | ||
| .gitattributes | ||
| .gitignore | ||
| .markdownlint.json | ||
| .markdownlintignore | ||
| .prettierignore | ||
| .prettierrc.js | ||
| .stylelintrc.json | ||
| .wp-env.json | ||
| LICENSE | ||
| README.md | ||
| babel.config.js | ||
| composer.json | ||
| composer.lock | ||
| docker-compose.yml | ||
| global.d.ts | ||
| package.json | ||
| phpcs.xml | ||
| phpunit.xml.dist | ||
| postcss.config.js | ||
| readme.txt | ||
| tsconfig.base.json | ||
| tsconfig.json | ||
| webpack.config.js | ||
| wp-cli.yml | ||
README.md
WooCommerce Blocks
This is the client for WooCommerce + Gutenberg. This package serves as a space to iterate and explore new Blocks and updates to existing blocks for WooCommerce, and how WooCommerce might work with the Block Editor.
Table of Contents
Documentation
To find out more about the blocks and how to use them, check out the documentation on WooCommerce.com.
If you want to see what we're working on for future versions, or want to help out, read on.
Code Documentation
- Blocks - Documentation for specific Blocks.
- Editor Components - Shared components used in WooCommerce blocks for the editor (Gutenberg) UI.
- WooCommerce Blocks Handbook - Documentation for designers and developers on how to extend or contribute to blocks, and how internal developers should handle new releases.
- WooCommerce Blocks Storybook - Contains a list and demo of components used in the plugin.
Getting started with block development
Run through the "Writing Your First Block Type" tutorial for a quick course in block-building.
For deeper dive, try looking at the core blocks code, or see what components are available.
Other useful docs to explore:
Long-term vision
WooCommerce Blocks are the easiest, most flexible way to build your store's user interface and showcase your products.