8

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.

4

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!

| improve this answer | |
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

| improve this answer | |
  • 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
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

| improve this answer | |
0

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

| improve this answer | |
0

I've created a custom-block like so:

const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;
const { Dashicon, TextControl, CheckboxControl } = wp.components;

registerBlockType('gutenberg/custom-container', {
    title: 'Container',
    description: 'Control the max-width of a content or section',
    icon: 'slides',
    category: 'layout',

    attributes: {
        maxWidth: {
            type: 'number',
            default: 0
        },
        collapse: {
            type: 'boolean',
            default: false
        }
    },
    
    edit({attributes, setAttributes}) {
        const { maxWidth, collapse } = attributes;
        
        function setValue(value){ 
             const numberValue = parseInt(value);   
             setAttributes({ maxWidth: numberValue });
        }

        function checkCollapse(){                
            setAttributes({ collapse: !collapse });
        }

        return (
            <div className='custom-container'>
                <div className="components-placeholder__label standard-wrapper">
                    <Dashicon icon="slides" />
                    Container
                </div>
                <div className='flex-between align-center'>
                    <div>
                        <TextControl
                            className="default-label"
                            label="Width(px)" 
                            type="number" 
                            name="max-width"
                            value={maxWidth}
                            onChange={setValue}
                        />
                    </div>
                    <CheckboxControl
                        className="default-label"
                        heading="Collapse Padding"
                        checked={collapse}
                        onChange={checkCollapse}
                    />
                </div>
                <InnerBlocks />
            </div>
        );
    },
    save({attributes}) {
        const { maxWidth, collapse } = attributes;

        return (
            <div 
                className={!collapse ? 
                              'custom-container' : 
                              'custom-container space-none' 
                          }
                style={{ maxWidth: `${maxWidth}px`}}
            >
                <InnerBlocks.Content />
            </div>
        ); }
});

Hope it helps someone.

| improve this answer | |
0

Here are two "container blocks" I used. First one is the Melonpan block container. It has many features... But if you just need a basic container block, here is the section block that does the work pretty well.

| improve this answer | |

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.