* add handleMap

* remove useValidation from cart blocks

* add namespace options to docs

* Update packages/checkout/blocks-registry/README.md

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* expand on the docblock

* Update packages/checkout/blocks-registry/README.md

Co-authored-by: Mike Jolley <mike.jolley@me.com>

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Mike Jolley <mike.jolley@me.com>
This commit is contained in:
Seghir Nadir 2021-10-19 14:05:26 +01:00 committed by GitHub
parent 3840462cf0
commit 91296b09cc
3 changed files with 54 additions and 12 deletions

View File

@ -8,7 +8,6 @@ import {
import { getValidBlockAttributes } from '@woocommerce/base-utils';
import { Children, cloneElement, isValidElement } from '@wordpress/element';
import { useStoreCart } from '@woocommerce/base-context';
import { useValidation } from '@woocommerce/base-context/hooks';
import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry';
import { renderParentBlock } from '@woocommerce/atomic-utils';
@ -33,13 +32,11 @@ const Wrapper = ( { children } ) => {
// we need to pluck out receiveCart.
// eslint-disable-next-line no-unused-vars
const { extensions, receiveCart, ...cart } = useStoreCart();
const validation = useValidation();
return Children.map( children, ( child ) => {
if ( isValidElement( child ) ) {
const componentProps = {
extensions,
cart,
validation,
};
return cloneElement( child, componentProps );
}

View File

@ -6,7 +6,7 @@ Components and utilities making it possible to integrate with the WooCommerce Ca
- [Installation](#installation)
- [Usage](#usage)
- [Aliased imports](#aliased-imports)
- [Aliased imports](#aliased-imports)
- [Folder Structure Overview](#folder-structure-overview)
## Installation
@ -33,6 +33,10 @@ const dependencyMap = {
'@woocommerce/blocks-checkout': [ 'wc', 'blocksCheckout' ],
};
const handleMap = {
'@woocommerce/blocks-checkout': 'wc-blocks-checkout',
};
module.exports = {
// …snip
plugins: [
@ -43,6 +47,11 @@ module.exports = {
return dependencyMap[ request ];
}
},
requestToHandle( request ) {
if ( handleMap[ request ] ) {
return handleMap[ request ];
}
},
} ),
],
};

View File

@ -9,17 +9,18 @@ Registered Inner Blocks can either be forced within the layout of the Cart/Check
- [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)
- [Registering a Block Component](#registering-a-block-component)
- [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)
- [Usage](#usage)
- [Options](#options)
- [`metadata` (object, required)](#metadata-object-required)
- [`component` (function, required)](#component-function-required)
- [`getRegisteredBlocks( blockName )`](#getregisteredblocks-blockname-)
- [Usage](#usage-1)
- [Usage](#usage-1)
- [`hasInnerBlocks( blockName )`](#hasinnerblocks-blockname-)
- [Usage](#usage-2)
- [Usage](#usage-2)
## How Inner Blocks Work
@ -89,6 +90,41 @@ If you want your block to appear within the layout of the Checkout without merch
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.