Wordpress - Are there Gutenberg container blocks?
I had a very hard time getting my first container/wrapper block ready for action. Here's what I've learned the last couple hours:
Because I had serious problems importing the InnerBlocks
I decided to use the create-guten-block toolkit. After the installation I just had to execute npx create-guten-block
. That provided me the structure of related files. Now I changed the file src/block/block.js to the following code:
import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/editor';
const { __ } = wp.i18n;
registerBlockType( 'myplugin/container', {
title: __( 'My Plugin Container', 'myplugin' ),
icon: 'universal-access-alt',
category: 'myplugin',
getEditWrapperProps: function () {
return {
"data-align": "full"
};
},
edit: function( props ) {
return (
<div className={ props.className }>
<InnerBlocks />
</div>
);
},
save: function( props ) {
return (
<div>
<InnerBlocks.Content />
</div>
);
},
} );
After entering the directory via cli and running npm run build
my plugin was ready and worked as expected.
The simple css I've used for this first step was for both, front and backend:
.wp-block-myplugin-container{
padding-top: 50px;
padding-bottom: 50px;
background-color: purple;
}
I used this on a windows machine, after updating node to the newest version everything worked as expected. I'm happy with the result and focus on advanced settings (background color/image, margins, paddings,...) for this container now.
Happy coding!
This what the second phase of Gutenberg development will focus on. Devs can create a parent block with predefined innerblock to smooth the page setup process for users.
For now you can use InnerBlocks component.
import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/editor';
const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
<InnerBlocks
allowedBlocks={ ALLOWED_BLOCKS }
/>
registerBlockType( 'my-plugin/my-block', {
// ...
edit( { className } ) {
return (
<div className={ className }>
<InnerBlocks />
</div>
);
},
save() {
return (
<div>
<InnerBlocks.Content />
</div>
);
}
} );
There's also templateLock and layouts options to manipulate the options. For more options see - Official Doc
There's a new core "Section" block that will be available in an upcoming Gutenberg update which is intended to serve the role you're looking for I think:
Add Section block