a73c6e5546
* Allow registering custom collections with various context references Implemented the registration of product collections with different context references using the `usesReference` property. These custom collections are now registered with specific contexts such as product, cart, order, and archive. This enhancement allows for more tailored previews and functionality based on the specific context in which the product collection is used. * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Support multiple references for usesReference * docs: update documentation to include `usesReference` Enhanced the `register-product-collection` documentation to include details about the new `usesReference` property. This property allows collections to specify required references, enhancing their contextual relevance and preview capabilities. - Added `usesReference` description to the collection fields section. - Included examples demonstrating the usage of `usesReference` with single and multiple references. - Clarified the behavior when required references are unavailable on the editor side but available on the frontend. This documentation update provides third-party developers with the necessary information to utilize the `usesReference` property effectively in their custom product collections. * test: add e2e tests for `usesReference` Added end-to-end tests to verify the functionality of the `usesReference` property in product collections. These tests ensure that the appropriate preview labels are displayed. - Created multiple custom product collections with different `usesReference` values: `product`, `cart`, `order`, `archive`, and combinations of these. - Verified that collections show the correct preview label when the required reference is present. - Ensured that the preview label is not shown in irrelevant contexts, such as posts or product catalog templates. This addition enhances test coverage and ensures the robustness of the `usesReference` feature. * Fixed issue with preview label showing in Specific Product and Archive templates. * Handle cases when termId or productId is 0 This also improves the readability of the code by using better variable names. * Make PC use postId context so location can be recognised correctly (#50152) * Fix TS errors --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| active-filters | ||
| attribute-filter | ||
| breadcrumbs | ||
| cart | ||
| cart-checkout-shared | ||
| catalog-sorting | ||
| checkout | ||
| classic-shortcode | ||
| classic-template | ||
| coming-soon | ||
| customer-account | ||
| featured-items | ||
| filter-wrapper | ||
| handpicked-products | ||
| migration-products-to-product-collection | ||
| mini-cart | ||
| order-confirmation | ||
| page-content-wrapper | ||
| price-filter | ||
| product-best-sellers | ||
| product-categories | ||
| product-category | ||
| product-collection | ||
| product-filter | ||
| product-filters | ||
| product-filters-overlay | ||
| product-filters-overlay-navigation | ||
| product-gallery | ||
| product-new | ||
| product-on-sale | ||
| product-query | ||
| product-results-count | ||
| product-search | ||
| product-tag | ||
| product-template | ||
| product-top-rated | ||
| products | ||
| products-by-attribute | ||
| rating-filter | ||
| reviews | ||
| shared/styles | ||
| single-product | ||
| stock-filter | ||
| store-notices | ||
| README.md | ||
README.md
Blocks
Our blocks are generally made up of up to 4 files:
|- block.js
|- editor.scss
|- index.js
|- style.scss
The only required file is index.js, this sets up the block using registerBlockType. Each block has edit and save functions.
The scss files are split so that things in style are added to the editor and frontend, while styles in editor are only added to the editor. Most of our blocks should use core components that won't need CSS though.
Editing
A simple edit function can live in index.js, but most blocks are a little more complicated, so the edit function instead returns a Block component, which lives in block.js. By using a component, we can use React lifecycle methods to fetch data or save state.
The Newest Products block is a good example to read over, this is a simple block that fetches the products and renders them using the ProductPreview component.
We include settings in the sidebar, called the Inspector in gutenberg. See an example of this.
Other blocks have the concept of an "edit state", like when you need to pick a product in the Featured Product block, or pick a category in the Products by Category block.