9b8256cc3e
* Add new buttonAttributes API to style express checkout buttons coherently (#47899) * Expose buttonAttributes to the express payment methods * Add size and label attributes to the express checkout area * Remove defaultHeight * default button Label * Remove the button label attribute * Remove px from height * Change large button height to 55px * Load express checkout block with attributes * Add toggle and borderRadius controls and remove getting border radius from the theme * Remove extra border radius text * Only pass buttonAttributes if toggled on * Move express payment block attribute logic into a Provider * Tidy up editor grid and parse attributes into context on frontend * Add px to border-radius input * Express payment methods not selectable * Add a test * lint fixes * default button height is 48 not 4 * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Update docs * Add tests for express payment methods * Center images within the express payment area in the editor * Apply the buttonAttributes to the li container in the editor regardless of showButtonStyles * Fix style issue * fix linting * fix lint again * Update manifest * Update docs manifest * Resize images in editor * lint fix --------- Co-authored-by: github-actions <github-actions@github.com> * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Synchronise the express payment settings between the Cart & Checkout blocks (#50688) * Add express payment methods to sidebar * Only add extra props for express payment methods * Update docs * Make title, description and gatewayId types optional * Update docs * Fix types again and editor side * Add changefile(s) from automation for the following project(s): woocommerce-blocks * handle situation when no methods are active * Update manifest * Add express payment methods to inspector controls for express checkout block (#50983) * Remove forced styles on the editor * Remove the darkMode setting from the buttonAttributes API (#51109) * Remove darkMode from the buttonAttributes API * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * Accept supports declarations for express payment style controls + merchant ux improvements in the editor (#51296) * Fix images in editor displaying weird * Fix long express payment names breaking layout * Default to uniform styles off * Use heightControl for border radius and fix height for cart buttons * Move formatting title and description to the config validation * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Fix linting * Fix failing test * Add back the 48px height for images in editor * Fix linting again * Update docs * Update docs manifest * Update docs to fix linting * Add comment to test to better explain why we are expecting a console warning * make strings translatable * Sync cart & checkout directly without option * Remove current styles * Change the beta label * Replace < and > with symbol references in docs * Update docs manifest * Increase padding of beta label * fix linter issues * change to using looger helper * fix CSS --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> |
||
|---|---|---|
| .. | ||
| active-filters | ||
| attribute-filter | ||
| breadcrumbs | ||
| cart | ||
| cart-checkout-shared | ||
| catalog-sorting | ||
| checkout | ||
| classic-shortcode | ||
| classic-template | ||
| coming-soon | ||
| customer-account | ||
| featured-items | ||
| filter-wrapper | ||
| handpicked-products | ||
| migration-products-to-product-collection | ||
| mini-cart | ||
| order-confirmation | ||
| page-content-wrapper | ||
| price-filter | ||
| product-best-sellers | ||
| product-categories | ||
| product-category | ||
| product-collection | ||
| product-filters | ||
| product-gallery | ||
| product-new | ||
| product-on-sale | ||
| product-query | ||
| product-results-count | ||
| product-search | ||
| product-tag | ||
| product-template | ||
| product-top-rated | ||
| products | ||
| products-by-attribute | ||
| rating-filter | ||
| reviews | ||
| shared/styles | ||
| single-product | ||
| stock-filter | ||
| store-notices | ||
| 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.