ee9b2d20e0
* Move text-input to checkout package * Pass validation props directly to ValidatedTextInput * Import label relatively instead of from package * Pass validation functions to ValidatedTextInput This is so it doesn't need to get them from useValidationContext. * Add InputProps to ValidatedTextInput This will be used to control additional props on the input element of TextInput * Spread inputProps onto <input> element of TextInput * Export TextInput from @woocommerce/blocks-checkout * Add @woocommerce/blocks-checkout package to tsconfig * Allow styling to be applied to number inputs and when value is 0 * Make style order consistent * Remove inputProps to rely on rest in TextInput * Add specific prop for the inputErrorComponent * Only disallow active state if value is 0 AND type is number * Change all uses of ValidatedTextInput to also pass inputErrorComponent * Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent" This reverts commit ec734b99c20c4d29fcf778714246fc406ee37eaf. * Revert "Remove inputProps to rely on rest in TextInput" This reverts commit 1fc64cca4002206423d1fa443ff2d60130ba1ea0. * Revert "Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent"" This reverts commit 110e3606a996668be5a32698b634b7706d16cddc. * Revert "Revert "Remove inputProps to rely on rest in TextInput"" This reverts commit aeb03526c44b3fcc97a719a18930d08157a80baf. * Don't pass errorMessage to ValidatedTextInput |
||
|---|---|---|
| .. | ||
| active-filters | ||
| attribute-filter | ||
| cart-checkout | ||
| featured-category | ||
| featured-product | ||
| handpicked-products | ||
| price-filter | ||
| product-best-sellers | ||
| product-categories | ||
| product-category | ||
| product-new | ||
| product-on-sale | ||
| product-search | ||
| product-tag | ||
| product-top-rated | ||
| products | ||
| products-by-attribute | ||
| reviews | ||
| single-product | ||
| 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.