InnerBlocks - markhowellsmead/helpers GitHub Wiki

InnerBlocksrefers to a technology used in the WordPress Gutenberg (Block) Editor.

Setting attributes in a template

The easiest way to get the settings you need is to add a Block to the editor using the configuration you need; for example styleor 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-blockattribute 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');

Example using React

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: '#'
			}]
		]
		],
	]}
/>
⚠️ **GitHub.com Fallback** ⚠️