woocommerce/plugins/woocommerce-blocks/assets/js/blocks
Albert Juhé Lluveras 081a63ab8d Fix Catalog Sorting default color in dark backgrounds (https://github.com/woocommerce/woocommerce-blocks/pull/8483) 2023-02-21 13:59:13 +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
add-to-cart-form Create the Add to Cart Form Block (https://github.com/woocommerce/woocommerce-blocks/pull/8284) 2023-02-16 11:43:37 +01:00
attribute-filter Move the usage of Notices from @wordpress/components from frontend to editor only (https://github.com/woocommerce/woocommerce-blocks/pull/8457) 2023-02-20 14:31:33 +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 In editor use the components from @wordpress/components instead of wordpress-components (https://github.com/woocommerce/woocommerce-blocks/pull/8432) 2023-02-17 15:09:26 +01:00
cart-checkout-shared Refactor payment status (https://github.com/woocommerce/woocommerce-blocks/pull/8110) 2023-02-14 12:08:19 +00: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 In editor use the components from @wordpress/components instead of wordpress-components (https://github.com/woocommerce/woocommerce-blocks/pull/8432) 2023-02-17 15:09:26 +01:00
classic-template Remove Classic Template from Style Book. (https://github.com/woocommerce/woocommerce-blocks/pull/8371) 2023-02-03 18:26:41 +01:00
customer-account Fix Customer account sidebar link incorrect margin in WP 6.2 (https://github.com/woocommerce/woocommerce-blocks/pull/8437) 2023-02-16 10:07:44 +01:00
featured-items Add parsed border props to featured items (https://github.com/woocommerce/woocommerce-blocks/pull/8472) 2023-02-20 05:45:06 -08: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 minimum height to Mini Cart Contents block in the Style Book (https://github.com/woocommerce/woocommerce-blocks/pull/8458) 2023-02-17 11:45:42 +01: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 Set inherit default to true when products is inserted on archive product templates (https://github.com/woocommerce/woocommerce-blocks/pull/8375) 2023-02-13 16:36:38 +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 Style Book: Hide all the products grid (https://github.com/woocommerce/woocommerce-blocks/pull/8315) 2023-01-31 10:07:02 +01:00
products-by-attribute Fix ESLint errors (https://github.com/woocommerce/woocommerce-blocks/pull/7556) 2022-11-02 17:46:14 +01:00
rating-filter Move the usage of Notices from @wordpress/components from frontend to editor (Filter by Rating) (https://github.com/woocommerce/woocommerce-blocks/pull/8444) 2023-02-21 11:48:52 +01:00
reviews Convert Reviews component to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/7936) 2022-12-21 17:09:48 +04: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
single-product Style Book: Hide all the products grid (https://github.com/woocommerce/woocommerce-blocks/pull/8315) 2023-01-31 10:07:02 +01:00
stock-filter Add reset button to all filter blocks (https://github.com/woocommerce/woocommerce-blocks/pull/8366) 2023-02-02 05:50:28 -08:00
store-notices Make `Notice` component legible in dark themes (https://github.com/woocommerce/woocommerce-blocks/pull/8278) 2023-01-25 15:29:17 +01: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.