6

In web design, a key design element is the container that may contain various other content and blocks and is styled in CSS.

Is there a Gutenberg container block that may contain other blocks? If so, I haven't found it yet.

It looks like the Gutenberg editor now supports representing nested blocks. Some folks have been requesting section blocks. Any love there yet?

I WAS able to change the Columns block to one column, but that feels like a clunky hack.

3

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

  • Are the InnerBlock components already part of Gutenberg or do I have to register this? – Wes Modes Oct 11 '18 at 15:32
  • Yes, InnerBlock is already loaded with Gutenberg, all need to do is import it from wp-editor. Just like you import other components from wp-editor. – Ashiquzzaman Kiron Oct 12 '18 at 16:21
  • 1
    So I'm new to Gutenberg (but not WP nor web dev), and I don't know how to "import it from wp-editor" as you say. There is a lot of reference to importing blocks in various docs, but so far I haven't been able to figure out if it is a magic wp-editor option I haven't found yet, some menu option elsewhere, or whether I should be mucking about in PHP files. Would you mind pointing me to a resource for Gutenberg dummies? – Wes Modes Oct 18 '18 at 3:13
  • I'd recommend this tutorial - css-tricks.com/learning-gutenberg-1-series-intro . It explained JS(ES6), React and then Gutenberg – Ashiquzzaman Kiron Oct 19 '18 at 4:33
  • Appreciate you pointing me to resources, and while I am interested in understanding everything there is to know about creating Gutenberg blocks and Gutenberg‘s relationship to JavaScript, for now I just want to drive a nail that is sticking up, not handcraft a custom hammer. What is the simplest path to having a classable container block in my Gutenberg editor? – Wes Modes Oct 23 '18 at 15:44
3

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!

1

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

0

A few plugins have added wrapper/container blocks to Gutenberg. Editor Blocks is just one example.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.