woocommerce/plugins/woocommerce-blocks/assets/js/blocks
Mike Jolley af0520bb8d Show Cart and Checkout blocks in Style Book (https://github.com/woocommerce/woocommerce-blocks/pull/8888)
* Update forced layout

* Track isPreview in editor context

* Add preview to checkout

* Add preview to cart
2023-03-30 15:15:00 +01:00
..
active-filters Align text sizing in filter blocks: chips, checkboxes, buttons, dropdown (https://github.com/woocommerce/woocommerce-blocks/pull/7707) 2022-11-29 16:42:24 +01:00
attribute-filter Improve Products block Attributes Filter Inspector Controls (https://github.com/woocommerce/woocommerce-blocks/pull/8583) 2023-03-08 17:22:51 +01:00
breadcrumbs Fixes CSS spacing and availability issues for breadcrumb, catalog sort, and result count blocks. (https://github.com/woocommerce/woocommerce-blocks/pull/8391) 2023-02-14 05:53:33 -05:00
cart Show Cart and Checkout blocks in Style Book (https://github.com/woocommerce/woocommerce-blocks/pull/8888) 2023-03-30 15:15:00 +01:00
cart-checkout-shared Show Cart and Checkout blocks in Style Book (https://github.com/woocommerce/woocommerce-blocks/pull/8888) 2023-03-30 15:15:00 +01:00
catalog-sorting Fix Catalog Sorting default color in dark backgrounds (https://github.com/woocommerce/woocommerce-blocks/pull/8483) 2023-02-21 13:59:13 +01:00
checkout Show Cart and Checkout blocks in Style Book (https://github.com/woocommerce/woocommerce-blocks/pull/8888) 2023-03-30 15:15:00 +01:00
classic-template Make a Single Product conversion enabled in Core, but keep the Product Archive behind experimental flag (https://github.com/woocommerce/woocommerce-blocks/pull/8907) 2023-03-30 15:57:33 +02:00
customer-account Make the customer account icon bigger to match the mini-cart one (https://github.com/woocommerce/woocommerce-blocks/pull/8594) 2023-03-03 15:44:34 +01:00
featured-items Replace react imports with wordpress/element (https://github.com/woocommerce/woocommerce-blocks/pull/8520) 2023-03-02 15:26:00 +01:00
filter-wrapper Refactor Filter Wrapper to remove usage of useInnerBlocksProps (https://github.com/woocommerce/woocommerce-blocks/pull/8095) 2023-01-04 17:31:17 +07:00
handpicked-products Fix ESLint errors (https://github.com/woocommerce/woocommerce-blocks/pull/7556) 2022-11-02 17:46:14 +01:00
mini-cart Add $schema property to block.json files (https://github.com/woocommerce/woocommerce-blocks/pull/8877) 2023-03-27 17:26:46 -03:00
price-filter Add reset button to all filter blocks (https://github.com/woocommerce/woocommerce-blocks/pull/8366) 2023-02-02 05:50:28 -08:00
product-best-sellers Style Book: Hide all the products grid (https://github.com/woocommerce/woocommerce-blocks/pull/8315) 2023-01-31 10:07:02 +01:00
product-categories Improve public-facing texts and labels (https://github.com/woocommerce/woocommerce-blocks/pull/7045) 2022-09-12 10:39:26 +02:00
product-category Style Book: Hide all the products grid (https://github.com/woocommerce/woocommerce-blocks/pull/8315) 2023-01-31 10:07:02 +01:00
product-new Style Book: Hide all the products grid (https://github.com/woocommerce/woocommerce-blocks/pull/8315) 2023-01-31 10:07:02 +01:00
product-on-sale Style Book: Hide all the products grid (https://github.com/woocommerce/woocommerce-blocks/pull/8315) 2023-01-31 10:07:02 +01:00
product-query Provide a way to switch to the blockified Single Product Template (https://github.com/woocommerce/woocommerce-blocks/pull/8324) 2023-03-23 17:59:59 +01:00
product-results-count Fixes CSS spacing and availability issues for breadcrumb, catalog sort, and result count blocks. (https://github.com/woocommerce/woocommerce-blocks/pull/8391) 2023-02-14 05:53:33 -05:00
product-search Update Cart/Checkout Default Template Styling (https://github.com/woocommerce/woocommerce-blocks/pull/8380) 2023-02-07 16:47:13 +01:00
product-tag Style Book: Hide all the products grid (https://github.com/woocommerce/woocommerce-blocks/pull/8315) 2023-01-31 10:07:02 +01:00
product-top-rated Style Book: Hide all the products grid (https://github.com/woocommerce/woocommerce-blocks/pull/8315) 2023-01-31 10:07:02 +01:00
products Add more Inspector controls for Product(Add to cart) button (https://github.com/woocommerce/woocommerce-blocks/pull/8781) 2023-03-24 12:38:43 +05:30
products-by-attribute Change the property name of the attribute slug in Products By Attribute after the refactor (https://github.com/woocommerce/woocommerce-blocks/pull/8759) 2023-03-15 12:29:13 +01:00
rating-filter Normalise the search param for comparison to avoid endless redirections (https://github.com/woocommerce/woocommerce-blocks/pull/8784) 2023-03-23 08:42:23 +01:00
reviews Add decoding to product names (https://github.com/woocommerce/woocommerce-blocks/pull/8824) 2023-03-23 06:27:02 -07:00
shared/styles Add dropdown version of Filter by Rating (https://github.com/woocommerce/woocommerce-blocks/pull/7771) 2022-12-13 09:12:03 +01:00
stock-filter Normalise the search param for comparison to avoid endless redirections (https://github.com/woocommerce/woocommerce-blocks/pull/8784) 2023-03-23 08:42:23 +01:00
store-notices Update the archive templates to use Products block (https://github.com/woocommerce/woocommerce-blocks/pull/8308)Co-authored-by: Alba Rincón <alba.rincon@automattic.com> 2023-02-22 08:24:04 +07:00
README.md Format Markdown files using wp-scripts (https://github.com/woocommerce/woocommerce-blocks/pull/6462) 2022-06-09 14:43:17 +02:00

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.