53944beeb3
* Add HTML entity decoding for product names in Hand-Picked Products control In the Hand-Picked Products control within the product-collection inspector controls, a function for decoding HTML entities in product names has been added. - A new utility function `decodeHTMLEntities` has been implemented. This function decodes HTML entities in a string, ensuring that special characters are correctly displayed in their human-readable form. - The `transformTokenIntoProductName` function has been updated to utilize `decodeHTMLEntities`. Now, when a product name is fetched (either directly as a token or via a product ID), the HTML entities within the name are decoded. - This enhancement ensures that product names containing characters like ampersands or other HTML entities are accurately displayed in the UI. This change improves the readability and accuracy of product names within the Hand-Picked Products control, enhancing the user experience for store managers using WooCommerce Blocks. * Update label and hide description This commit updates the `HandPickedProductsControl` component. Specifically, the user-facing label for product selection has been changed from 'Pick some products' to 'Hand-picked Products'. Additionally, the `__experimentalShowHowTo` property has been added with a `false` value, to hide description. Corresponding changes have been made in the E2E test file `product-collection.block_theme.spec.ts`, where the filter name is updated to match the new label. * Refactor: Replace custom HTML entity decoder with `@wordpress/html-entities` Rationale: - The shift to `@wordpress/html-entities` aligns with standard WordPress practices, ensuring consistency across the platform. - Enhances maintainability by relying on a well-supported library rather than custom code. - Simplifies the codebase by removing a redundant utility function. This change enhances the robustness of our code and aligns with best practices in WordPress development. |
||
|---|---|---|
| .. | ||
| active-filters | ||
| attribute-filter | ||
| breadcrumbs | ||
| cart | ||
| cart-checkout-shared | ||
| catalog-sorting | ||
| checkout | ||
| classic-shortcode | ||
| classic-template | ||
| collection-filters | ||
| 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-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.