woocommerce/plugins/woocommerce-blocks/packages/checkout/blocks-registry/README.md

75 lines
3.3 KiB
Markdown
Raw Normal View History

WIP - Checkout i2 Feature Branch Tracking (https://github.com/woocommerce/woocommerce-blocks/pull/4268) * Duplicate checkout block * Contact information block * form step block * shipping address block * Setup atomic blocks * Container structure * More formal steps rather than generic form step * Add billing and shipping forms * add checkout actions block * add order note block * Add order summary * add payment block * Add inspector controls for address fields * frontend WIP * move attributes * wrap shipping with form step * PhoneNumber to typescript * Remove column block * form steps * move payment logic to frontend * Express block * inline payment block * Add shipping method block * Render inner blocks (not standalone blocks) and add classes to Atomic Block list on php side * lazy again * Add more wrappers from old frontend file * add layout * Checkout wrappers were missing * Enqueue payment methods for new block * Add missing classnames * Move shipping as billing state to context provider * express payments rendering * try/block-registry * Remove atomic components (unused) * Fix attribute persistance due to template locking * Fix shipping display when not needed * Set correct parent blocks for inner blocks * pass data to blocks * demo/newsletter * Skeleton styling * only apply styles to loading state for now * shipping method block frontend * rename express block * lock template * fix ts warning for __webpack_public_path__ * Refactor to avoid duplicating atomic block logic * remove changes in save method * Add zones and shipping methods to the sidebar for the shipping inner block Closes woocommerce/woocommerce-blocks#4320 * Fix script handles * Fix method display when there are none * Add shipping phone * Add phone to api and sync with billing correctly * Clear hidden fields on load * fix requirePhoneField property * Enable shipping and billing phone fields * readonly field support * Handle context attributes * Fix createInterpolateElement usage * add totalswrapper * Implement Terms and Conditions block for Checkout i2 (https://github.com/woocommerce/woocommerce-blocks/pull/4436) * Setup atomic blocks * frontend WIP * Express block * try/block-registry * Set correct parent blocks for inner blocks * Skeleton styling * Refactor to avoid duplicating atomic block logic * add block locking * add terms and conditions block * hardcore settings image * lock blocks from being deleted * hide original checkout block * mark blocks as side effectful * move variations to block register function * prevent core checkout blocks from needlessly showing in the inserter * enable checkout i1 * fix broken rebase * move save back * Localise default text Co-authored-by: Mike Jolley <mike.jolley@me.com> * Add add-hoc Block locking from WooCommerce Blocks side. (https://github.com/woocommerce/woocommerce-blocks/pull/4454) * add locking * use subscribe instead * fix condition * add locking to blocks * check if the item is not a text field * Tidy up hacks CSS class handling * Fix error if node is undefined * Hide menu when move is disabled * update package lock * Add todo and fix issue where selector returns null * split todos * move todo * edit comment Co-authored-by: Mike Jolley <mike.jolley@me.com> * Un-disable the billing checkbox in the editor (https://github.com/woocommerce/woocommerce-blocks/pull/4457) * Add missing Slot fill provider on frontend Fixes woocommerce/woocommerce-blocks#4441 by adding the slot fill provider to the checkout-i2 block. * Use column style appender * Add padding/styles to actions * Add/update icon library * Multiline checkbox alignment * Icons and copy changes for i2 blocks * Add terms by default * Add notice if text is missing links (https://github.com/woocommerce/woocommerce-blocks/pull/4466) * Swap variations for toggle * Add payment settings to inspector * Update package lock * Add inline docs to block registry * Add inner block areas below each form step. This does not include the form step contents, just adds inner blocks after existing content. Moving content within the inner block area is a separate discussion. This closes woocommerce/woocommerce-blocks#4306 * Sample block registration + docs * Add tests for registerCheckoutBlock * Fix lazy component detection in tests * Add basic transform between i1 and i2 * remove template lock todo * Update scroll to top hoc * Move shared settings to new context providers Closes woocommerce/woocommerce-blocks#4472 * Remove readonly field support (unused) * Remove context code * Experimental * remove invalid typedef * FIx scrolling on validation due to misplaced context provider * Update assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Update comment to remove reference to phone * Update packages/checkout/blocks-registry/README.md Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Rename ScrollToTopComponent * Add explicit list of expectedType in TypeScript definition * Add todo to remove custom shipping phone handling * Remove dangerouslySetInnerHTML in External Link Card Component * Add ExternalLinkCard to storybook * update todo wording * Refactor withScrollToTop to remove useCallback and use typescript * Support children on CheckboxControl, with added Typescript * Spread getRegisteredBlocks return value Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-07-22 11:03:00 +00:00
# WooCommerce Blocks - Blocks Registry <!-- omit in toc -->
This directory contains the Checkout Blocks Registry - functions to register custom blocks that can be inserted into various areas within the Checkout.
**-- These docs will be moved to the main docs directory once finalized --**
The Checkout Block has a function based interface for registering custom Blocks so that merchants can insert them into specific Inner Block areas within the Checkout page layout. Custom Blocks registered in this way can also define a component to render on the frontend in place of the Block.
## Table of Contents <!-- omit in toc -->
- [Registering a block - `registerCheckoutBlock( block, options )`](#registering-a-block---registercheckoutblock-block-options-)
- [`component` (required)](#component-required)
- [`areas` (required)](#areas-required)
- [`configuration`](#configuration)
## Registering a block - `registerCheckoutBlock( block, options )`
To register a checkout block, you use the registerCheckoutBlock function from the checkout blocks registry. An example of importing this for use in your JavaScript file is:
_Aliased import_
```js
import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
```
_wc global_
```js
const { registerCheckoutBlock } = wc.blocksCheckout;
```
The register function expects a block name string, and a JavaScript object with options specific to the block you are registering:
```js
registerCheckoutBlock( blockName, options );
```
The options you feed the configuration instance should be an object in this shape (see `CheckoutBlockOptions` typedef):
```js
const options = {
component: () => <div>A Function Component</div>,
areas: [ 'areaName' ],
configuration: {},
};
```
Here's some more details on the _configuration_ options:
### `component` (required)
This is a React component that should replace the Block on the frontend. It will be fed any attributes from the Block and have access to any public context providers in the Checkout context.
You should provide either a _React Component_ or a `React.lazy()` component if you wish to lazy load for performance reasons.
### `areas` (required)
This is an array of string based area names which define when the custom block can be inserted within the Checkout.
See the `RegisteredBlocks` typedef for available areas. Valid values at time of writing include:
- `totals` - The right side of the checkout containing order totals.
- `fields` - The left side of the checkout containing checkout form steps.
- `contactInformation` - Within the contact information form step.
- `shippingAddress` - Within the shipping address form step.
- `billingAddress` - Within the billing address form step.
- `shippingMethods` - Within the shipping methods form step.
- `paymentMethods` - Within the payment methods form step.
### `configuration`
This is where a standard `BlockConfiguration` should be provided. This matches the [Block Registration Configuration in Gutenberg](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/).
If a `BlockConfiguration` is not provided, your Block Type will not be registered in WordPress unless you manually register the block using `registerBlockType` (this is what `registerCheckoutBlock` does for you behind the scenes).