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

209 lines
8.0 KiB
Markdown
Raw Normal View History

# Checkout - Blocks Registry <!-- omit in toc -->
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
This directory contains the Checkout Blocks Registry. This provides functions to **register new Inner Blocks** that can be inserted automatically, or optionally, within the cart and checkout blocks in certain areas.
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
Registered Inner Blocks can either be forced within the layout of the Cart/Checkout Block, or they can just be made available to merchants so they can be inserted manually. Inner Blocks registered in this way can also define a component to render on the frontend in place of the Block.
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
## Table of Contents <!-- omit in toc -->
- [How Inner Blocks Work](#how-inner-blocks-work)
- [Inner Block Areas](#inner-block-areas)
- [Registering a Block](#registering-a-block)
- [Registering a Forced Block](#registering-a-forced-block)
- [Passing attributes to your frontend block](#passing-attributes-to-your-frontend-block)
- [Registering a Block Component](#registering-a-block-component)
- [`registerCheckoutBlock( options )`](#registercheckoutblock-options-)
- [Usage](#usage)
- [Options](#options)
- [`metadata` (object, required)](#metadata-object-required)
- [`component` (function, required)](#component-function-required)
- [`getRegisteredBlocks( blockName )`](#getregisteredblocks-blockname-)
- [Usage](#usage-1)
- [`hasInnerBlocks( blockName )`](#hasinnerblocks-blockname-)
- [Usage](#usage-2)
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
## How Inner Blocks Work
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
The Checkout Block has several areas in which inner blocks can be registered and added. Once registered, blocks can be inserted by merchants:
![Inner Block Inserter](inserter.png)
If a block is **forced**, merchants won't see the option to insert the block, they will just see the block inserted by default, and they won't be able to remove it from the layout.
## Inner Block Areas
Blocks can be registered within several different areas or parent blocks. Valid values at time of writing include:
| Parent Block/Area | Description |
| :----------------------------------------------- | :------------------------------------------------------------ |
| `woocommerce/checkout-totals-block` | The right side of the checkout containing order totals. |
| `woocommerce/checkout-fields-block` | The left side of the checkout containing checkout form steps. |
| `woocommerce/checkout-contact-information-block` | Within the contact information form step. |
| `woocommerce/checkout-shipping-address-block` | Within the shipping address form step. |
| `woocommerce/checkout-billing-address-block` | Within the billing address form step. |
| `woocommerce/checkout-shipping-methods-block` | Within the shipping methods form step. |
| `woocommerce/checkout-payment-methods-block` | Within the payment methods form step. |
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
See the `innerBlockAreas` typedef for the most up to date list of available areas.
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
## Registering a Block
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
To register a checkout block, first, register your Block Type with WordPress using https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/. We recommend using the `blocks.json` method to avoid
repetition.
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
When registering your block, you should also define the `parent` property to include a list of areas where your block will be available. For example:
```json
{
"name": "woocommerce/checkout-actions-block",
"title": "Actions",
"description": "Allow customers to place their order.",
"category": "woocommerce",
"parent": [ "woocommerce/checkout-fields-block" ]
// ...snip
}
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
```
### Registering a Forced Block
If you want your block to appear within the layout of the Checkout without merchant intervention, you can implement locking as follows:
```json
{
"name": "woocommerce/checkout-actions-block",
"title": "Actions",
"description": "Allow customers to place their order.",
"category": "woocommerce",
"parent": [ "woocommerce/checkout-fields-block" ],
"attributes": {
"lock": {
"type": "object",
"default": {
"remove": true,
"move": true
}
}
}
// ...snip
}
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
```
In the above example, the inner block would be inserted automatically, and would not be movable or removable by the merchant.
### Passing attributes to your frontend block
For your block to dynamically render on the frontend and have access to its own attributes, both the block name and the list of block attributes need to be passed via HTML `data-` attributes.
- To render the block on the frontend, you need a `data-block-name` attribute on the HTML with your block name `namespace/block-name`.
- To access your attributes on frontend, you need to save them as `data-*` attributes on the HTML.
Blocks whose namespace is `woocommerce` or `woocommerce-checkout` will have this applied to them automatically, but you can also add this behaviour to your own namespace or individual blocks.
To add this behavior to your namespace, you can use the `__experimental_woocommerce_blocks_add_data_attributes_to_namespace` filter:
```php
add_filter(
'__experimental_woocommerce_blocks_add_data_attributes_to_namespace',
function ( $allowed_namespaces ) {
$allowed_namespaces[] = 'namespace';
return $allowed_namespaces;
},
10,
1
);
```
To add just a single block, you can use `__experimental_woocommerce_blocks_add_data_attributes_to_block` filter:
```php
add_filter(
'__experimental_woocommerce_blocks_add_data_attributes_to_block',
function ( $allowed_blocks ) {
$allowed_blocks[] = 'namespace/block-name';
return $allowed_blocks;
},
10,
1
);
```
### Registering a Block Component
After registering your block, you need to define which component will replace your block on the frontend of the store. To do this, use the `registerCheckoutBlock` function from the checkout blocks registry.
## `registerCheckoutBlock( options )`
This function registers a block and it's corresponding component with WooCommerce. The register function expects a JavaScript object with options specific to the block you are registering.
### Usage
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
```js
// Aliased import
import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
// Global import
// const { registerCheckoutBlock } = wc.blocksCheckout;
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
const options = {
metadata: {
name: 'namespace/block-name',
parent: [ 'woocommerce/checkout-totals-block' ],
},
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
component: () => <div>A Function Component</div>,
};
registerCheckoutBlock( options );
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
```
### Options
The following options are available:
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
#### `metadata` (object, required)
This is a your blocks metadata (from `blocks.json`). It needs to define at least a `name` (block name), and `parent` (the areas on checkout) to be valid.
#### `component` (function, required)
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
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 under the Checkout context.
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
You should provide either a _React Component_ or a `React.lazy()` component if you wish to lazy load for performance reasons.
## `getRegisteredBlocks( blockName )`
Returns an array of registered block objects available within a specific parent block/area.
### Usage
```js
// Aliased import
import { getRegisteredBlocks } from '@woocommerce/blocks-checkout';
// Global import
// const { getRegisteredBlocks } = wc.blocksCheckout;
const registeredBlocks = getRegisteredBlocks(
'woocommerce/checkout-totals-block'
);
```
## `hasInnerBlocks( blockName )`
Check if a block/area supports inner block registration.
### Usage
```js
// Aliased import
import { hasInnerBlocks } from '@woocommerce/blocks-checkout';
// Global import
// const { hasInnerBlocks } = wc.blocksCheckout;
const isValid = hasInnerBlocks( 'woocommerce/checkout-totals-block' ); // true
```
<br/><br/><p align="center">
<a href="https://woocommerce.com/">
<img src="https://woocommerce.com/wp-content/themes/woo/images/logo-woocommerce@2x.png" alt="WooCommerce" height="28px" style="filter: grayscale(100%);
opacity: 0.2;" />
</a><br/><a href="https://woocommerce.com/careers/">We're hiring</a>! Come work with us!</p>