cab947bc2b
* Make useStoreNotices interact directly with the store * Get/set error notices directly in store in paymentMethodDataContext * Add hasNoticesOfType util * Remove useStoreNotices and interact directly with data store * Create/remove notices directly in store * Remove tests for useStoreNotices * Add tests for notices util * Use setIsSuppressed from useStoreNoticesContext * remove useStoreNotices hook * Update context typedef to define only isSuppressed and setIsSuppressed * Remove all values from StoreNoticesContext besides setIsSuppressed * Wrap Cart and Checkout blocks in StoreNoticesProvider (for isSuppressed) * Make StoreNoticesContainer a named export This is required so we can import it from @wooommerce/base-context * Change addErrorNotice to createErrorNotice to match store action * Remove unnecessary StoreNoticeProviders and pass only context to container * Accept a context in StoreNoticesContainer * Pass relevant context to StoreNoticesContainer * Add function to remove notices by status * Prevent checkout from breaking when removing notices during processing * Prevent TS error about not included path * Add StoreNoticesContainer to single product block * Add StoreNoticesContainer to All Products Block * Ensure errors are shown when using All Products & Single Product Blocks * Add a context arg to removeNoticesByStatus * Use correct contexts for all products and single product block * Update tests to reflect new context argument * Re-add missing block file for order-summary * Remove block file for order-summary * Send context to useStoreCartCoupons to show errors correctly |
||
|---|---|---|
| .. | ||
| active-filters | ||
| attribute-filter | ||
| cart | ||
| cart-checkout-shared | ||
| checkout | ||
| classic-template | ||
| featured-category | ||
| featured-product | ||
| handpicked-products | ||
| mini-cart | ||
| 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 | ||
| stock-filter | ||
| 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.