Update blocks-registry docs (https://github.com/woocommerce/woocommerce-blocks/pull/4946)
* 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:
parent
3840462cf0
commit
91296b09cc
|
@ -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 );
|
||||
}
|
||||
|
|
|
@ -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 ];
|
||||
}
|
||||
},
|
||||
} ),
|
||||
],
|
||||
};
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue