woocommerce/plugins/woocommerce-blocks/assets/js/blocks
Mike Jolley 4e581a4825 Allow view switcher to toggle view when using Gutenberg list view (https://github.com/woocommerce/woocommerce-blocks/pull/8429)
* Remove old view switcher component (not used)

* Switch in list view

* useSelect

* Optional selection of parent block on changing view

---------

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2023-03-07 11:21:13 +00: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 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 Revert "Show Cart and Checkout blocks in Style Book (https://github.com/woocommerce/woocommerce-blocks/pull/8489)" (https://github.com/woocommerce/woocommerce-blocks/pull/8602) 2023-03-06 12:19:08 +07:00
cart-checkout-shared Allow view switcher to toggle view when using Gutenberg list view (https://github.com/woocommerce/woocommerce-blocks/pull/8429) 2023-03-07 11:21:13 +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 Revert "Show Cart and Checkout blocks in Style Book (https://github.com/woocommerce/woocommerce-blocks/pull/8489)" (https://github.com/woocommerce/woocommerce-blocks/pull/8602) 2023-03-06 12:19:08 +07:00
classic-template [Blockifying Product Archive Templates]: Implement the blockified template conversion for the Classic Template Block. (https://github.com/woocommerce/woocommerce-blocks/pull/8248) 2023-02-27 15:34:18 +01: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 Make the start shopping button show the theme style (https://github.com/woocommerce/woocommerce-blocks/pull/8567) 2023-03-03 10:55:28 +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 Replace react imports with wordpress/element (https://github.com/woocommerce/woocommerce-blocks/pull/8520) 2023-03-02 15:26:00 +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 Replace react imports with wordpress/element (https://github.com/woocommerce/woocommerce-blocks/pull/8520) 2023-03-02 15:26:00 +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 Replace react imports with wordpress/element (https://github.com/woocommerce/woocommerce-blocks/pull/8520) 2023-03-02 15:26:00 +01:00
reviews Replace react imports with wordpress/element (https://github.com/woocommerce/woocommerce-blocks/pull/8520) 2023-03-02 15:26:00 +01: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 Replace react imports with wordpress/element (https://github.com/woocommerce/woocommerce-blocks/pull/8520) 2023-03-02 15:26:00 +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.