fa11141726
* Expose registerProductCollection in @woocommerce/blocks-registry Package This commit exposes the `registerProductCollection` function as part of the `@woocommerce/blocks-registry` package. This enhancement facilitates the registration of new product collections by 3PDs, promoting better modularity and extensibility within the WooCommerce Blocks ecosystem. Changes include: - Migration of `register-product-collection.tsx` to `packages/checkout/blocks-registry`. - Export `registerProductCollection` from `@woocommerce/blocks-registry/index.ts`. - Updated related imports and references to the new path. This update enables 3PDs to register product collections more seamlessly, enhancing the extensibility of Product Collection block. * Replace @woocommerce/blocks-checkout with @woocommerce/blocks-registry * Add __experimental prefix * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Improve registerproductcollection for 3pds * Set isDefault value to false * Don't export all the types * Update changelog * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Add plugin to test __experimentalRegisterProductCollection * Add E2E tests * Fix Lint errors * Improve E2E tests for __experimentalRegisterProductCollection - Reduced preview timeout from 2000ms to 1000ms. - Expanded E2E tests to cover new attributes and preview functionalities. * Refactor code to improve readability and maintainability - Added a warning comment to indicate that `__experimentalRegisterProductCollection` is an experimental API. - Refactored variable names and imports in `register-product-collection.tsx` and `index.tsx` for clarity. - Simplified and reorganized type definitions and imports in `types.ts` and `utils.tsx`. - Renamed function in `register-product-collection-tester.php` for consistency. * E2E: Also test the Frontend * Use alias for import statement * Don't pass isActive to registerProductCollection Now it's handle by registerProductCollection itself. * Update registerproductcollection API structure Refactored the product collection block to enhance attribute management and ensure consistency in query defaults. This change includes: - Importing `DEFAULT_QUERY` from constants and using it to set default query attributes. - Removing `DEFAULT_ATTRIBUTES` from specific collections and directly defining required attributes. - Ensuring `postType` and `isProductCollectionBlock` are set to default values in the query object. - Setting `inherit` attribute to `false` by default in all collections. * Hide inherit control in collections Ensure the "inherit" control is always hidden, as collections should not be able to change this attribute. This includes: - Adding `CoreFilterNames.INHERIT` to the `hideControls` set in `register-product-collection.tsx`. - Adjusting the `hideControls` attribute in individual collection files to remove redundant hiding of the `INHERIT` control. * Fix: Filters not showing in inspector controls * Set inherit to false for all collections * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Product Collection: Add validation for `__experimentalRegisterProductCollection` arguments (#48513) * Add validation for `__experimentalRegisterProductCollection` arguments Introduced comprehensive validation for the `ProductCollectionConfig` object in `__experimentalRegisterProductCollection` to ensure correct data types and values, enhancing error handling and robustness. - Added a new function `isValidProductCollectionConfig` to perform various checks on the `ProductCollectionConfig` object. - Validates properties such as `name`, `title`, `description`, `category`, `keywords`, `icon`, `isDefault`, `innerBlocks`, `example`, `scope`, `isActive`, `attributes`, and `preview`. - Ensures correct data types and provides detailed console error messages for invalid configurations. - Updated `__experimentalRegisterProductCollection` to use the validation function before proceeding with the registration process. **Impact** - Improves stability and prevents invalid configurations from causing runtime errors. - Provides clearer error messages for developers, aiding in quicker debugging and development. * Fix typo * Refactor: Replace console.error with console.warn Updated the error logging in the isValidProductCollectionConfig function to use console.warn instead of console.error for invalid configuration properties. This address the feedback from the PR review. - Replaced console.error with console.warn for various validation checks in isValidProductCollectionConfig. - Removed redundant return statements after console.warn calls. - Improved logging messages to better inform about invalid configuration properties without treating them as critical errors. - Simplified the logic in __experimentalRegisterProductCollection by combining query and attribute properties and ensuring defaults are set properly. * Refactor: Rename isValidProductCollectionConfig to isValidCollectionConfig Updated the function name from isValidProductCollectionConfig to isValidCollectionConfig for better clarity and consistency. Also, renamed related variables for improved readability. * Add validation for name property * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Title is required for new collection * Update comments * Fix E2E tests * Address PR feedback --------- Co-authored-by: github-actions <github-actions@github.com> * Add README file for __experimentalRegisterProductCollection * Add screenshots in README file * Try to fix lint issue * Docs: add example for collection with inner blocks Enhanced the documentation for `__experimentalRegisterProductCollection` to include an example demonstrating how to define a collection with inner blocks. This example shows how to create a custom collection with nested blocks, including a heading and product elements, providing a clear guide for developers. New content added: - Example 4: Collection with inner blocks - Sample code for defining a collection with inner blocks - Tips and links to further resources on inner blocks and core collection definitions * Fix Lint errors * Address PR feedback * Reduce number of JS files on /shop page **Problem:** There was increase in number of JS files on /shop page after exposing `registerProductCollection` function in `@woocommerce/blocks-registry` package. This package is loaded on the frontend. For example, previously 45 JS files were loaded on /shop page but now 55 JS files are loaded on /shop page. **Solution:** 1. After a bit of debugging I found out that constant file which we are importing i.e. `plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts` contain some heavy dependencies & it's not pure. Therefore, I decided to split this file into two files. I moved all the constants that are used in `registerProductCollection` function to a new file i.e. `plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants-register-product-collection.ts`. This way, we don't need to load all the constants on the frontend i.e. /shop page. - This reduced 4 JS files i.e. 51 JS files are loaded on /shop page. 2. After some more investigation, I found out that importing `registerBlockVariation` function is increasing number of JS files on Frontend. Therefore, I decided to use global `wp` object to call `registerBlockVariation` function. This way, we don't need to import it. This reduced last 6 files i.e. 45 JS files are loaded on /shop page. This way, I was able to reduce number of JS files on /shop page from 55 to 45, which is same as before this PR. * Refactor: product collection constants - Moved constants from `constants-register-product-collection.ts` to `constants.ts` - Deleted `constants-register-product-collection.ts` - Updated import paths in relevant files to reflect the changes - Moved utility functions to `utils.ts` --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|---|---|---|
| .. | ||
| .media/images | ||
| block-references | ||
| contributors | ||
| designers/theming | ||
| examples | ||
| internal-developers | ||
| third-party-developers/extensibility | ||
| README.md | ||
README.md
WooCommerce Blocks Handbook
Table of Contents
- Contributors
- Internal developers
- Third-party developers
- Designers and theme developers
- Block References
- Developer Resources
The WooCommerce Blocks Handbook provides documentation for designers and developers on how to extend or contribute to blocks, and how internal developers should handle new releases.
Contributors
Want to contribute to the WooCommerce Blocks plugin? The following documents offer information that can help you get started.
Internal developers
Are you an internal developer? The following documents offer information about the different blocks, the Block Client APIs, the Store API, the templates and the testing process.
- Blocks
- Block Data
- Block Client APIs
- Data store
- Editor Components
- Icons
- Store API (REST API)
- Storybook
- Templates
- Testing
- Translations
Third-party developers
Are you a third-party developer? The following documents explain how to extend the WooCommerce Blocks plugin with your custom extension.
- Extensibility
- Hooks
- REST API
- Checkout Payment Methods
- Checkout Blocks
Designers and theme developers
The following document explains how to to create block themes that work in WooCommerce and how to customize the styles of WooCommerce blocks.
Block References
Developer Resources
Tools
- @woocommerce/extend-cart-checkout-block This is a template to be used with @wordpress/create-block to create a WooCommerce Blocks extension starting point. It also showcases how to use some extensibility points, e.g. registering an inner block in the Checkout Block, applying filters to certain texts such as the place order button, using Slot/Fill and how to change the behaviour of the Store API.
Articles
The following posts from developer.woo.com provide deeper insights into the WooCommerce Blocks development.
- Store API is now considered stable
- Available Extensibility Interfaces for The Cart and Checkout Blocks
- How The Checkout Block Processes An Order
- New @wordpress/data stores in WooCommerce Blocks
Tutorials
The following tutorials from developer.woo.com help you with extending the WooCommerce Blocks plugin.
- 📺 Tutorial: Extending the WooCommerce Checkout Block
- Hiding Shipping and Payment Options in the Cart and Checkout Blocks
- Integrating your Payment Method with Cart and Checkout Blocks
- Exposing Payment Options in the Checkout Block
We're hiring! Come work with us!
🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.