InnerBlocks - markhowellsmead/helpers GitHub Wiki
InnerBlocks
refers to a technology used in the WordPress Gutenberg (Block) Editor.
The easiest way to get the settings you need is to add a Block to the editor using the configuration
you need; for example style
or align
. Then, you can use the following in the browser console to
get the attributes
for that block. (The Block ID is the value of the data-block
attribute on the
Block you've just created editorially. In the example, 609441db-ec70-409a-952f-a219ffda7c19
.)
wp.data.select('core/block-editor').getBlock('609441db-ec70-409a-952f-a219ffda7c19');
This example contains an H2, a paragraph with bold formatting applied, a regular paragraph and a Buttons Block with one Button.
<InnerBlocks
allowedBlocks={(['core/heading'], ['core/paragraph'], ['core/buttons'])}
templateLock={true}
template={[
[
'core/heading',
{
align: 'right',
level: 2,
content: 'Lorem ipsum'
}
],
['core/paragraph', {
align: 'right',
content: '<strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit</strong>'
}],
['core/paragraph', {
align: 'right',
content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit , sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}],
['core/buttons', {
align: 'right'
}, [
['core/button', {
borderRadius: 0,
text: 'Button-Text',
url: '#'
}]
]
],
]}
/>