Saturday, 1 September 2018

How to enable Inner Blocks in your Gutenberg Block


Inner Blocks are Gutenberg Blocks that allow inserting additional blocks within your own block. To understand it even better, imagine a shortcode that wraps the content. This content can then be shown or hidden. You can achieve that inside Gutenberg with Inner Blocks. Gutenberg Inner Blocks
If you’re interested in reading the code behind Inner Blocks, you can check their folder on Github. They are basically a wrapper that allows putting other blocks inside.
How do you use them? First, you need to import them in the file where you’re going to use them.
import { InnerBlocks } from ‘@wordpress/editor’; // or wp.editor
Then you need to insert this block inside your edit function (this example uses JSX):
edit( { className } ) {
return (

);
},
To show the contents (other blocks) inside of the InnerBlocks component, you need to call <InnerBlocks.Content/>:
save() {
return (

);
}
Properties
This block (component) also accepts several properties so that you can customize the UX of your block.
allowedBlocks
This property can be a string
Source: https://managewp.org/articles/17828/how-to-enable-inner-blocks-in-your-gutenberg-block



source https://williechiu40.wordpress.com/2018/09/01/how-to-enable-inner-blocks-in-your-gutenberg-block/

No comments:

Post a Comment