Container Block

I think the current column block itself can be used as a wrapper container block. If we first insert a column with single column inside it and then adding again column in it having multiple column or single column inside it. This way nested columns can create a complete wrapping solution for grouping multiple rows (with multiple columns) and multiple blocks inside it.

But a quick feature that needed in the column block is collapsible feature. So that we can collapse the main outer column block when need to see the page various sections ( outer Blocks ) easily and can easily drag whole section up and down as needed ( with a little drag as it will be collapsed – taking less height ). Also if we able to show a name to the main column to be display in editor will be an another plus point to recognize which column is which section.

Hi @vitamincee, there is a new Group Block in the Gutenberg plugin, but unfortunately it wasn’t released in WordPress 5.2. Development wasn’t quite completed in time for it to be included in 5.2.

My understanding is that it should be in the 5.3 release.

Hi @talldanwp , Do you mean this new group block will be the alternative to column block, a big issue in the recent version of column block I am seeing is that it now not allow to have one column , its min value is set to 2, why this not liking feature change has been done for the column block ?

Thank you @talldanwp ! I’ll put some development on hold until it’s release.

Hi @hozefasmile, the group block will be a bit like a single column. It has some additional features that set it apart from a column like the ability to set a background color, and also a few more planned (the ability to group a selection of blocks using a keyboard shortcut or menu option, possibly background images). The alignment options should also behave slightly differently, when aligning the block to full width, content should stay narrow (if the theme supports it).

Actually it was already relased into the Gutenberg _Plugin_, so when you install the Plugin on Top of your existing wordpress 5.2 you’ll get Gutenberg 5.5. and with it the Group.

This is really a much needed addition and I’m happy to see it. It especially allows to work without additional plugins.

Thank you for letting me know this @francishunger !! I had no idea you could install Gutenberg as a plugin on top of WP 5.2! I just did it and can continue on this project I thought I’d have to put on hold. Thank you!!!

@francishunger , I used it really its more promising, can put group under group and this gives freedom from column block limitation, now I can provide bootstrap classes in my way for layout for example container->row->col-md-3 etc. This give freedom to layout our pages.

But one suggestion I want to mention for this particular block, it should be collapsible. So that we can collapse to see whole page sections easily and it will also be helpful in dragging and moving whole group up and down ( being not need to scroll much ).

@talldanwp , In Recent update of gutenberg, now group block is creating an inner container div inside its main div, and that is creating a big trouble to me. I mostly use bootstrap for theme designing. Now if I want a setup like container>row>col-6 etc. I am not able to do that using group block.

I past I just create a block give it a class “container” then create a group block inside that group and give it a class name “row” and then again create a group block inside it and give it class name “col-6” to have my bootstrap layout work.

But now as group is creating an inner container div automatically, Now I have no freedom to give my own class structure.

Please, is there anyway to make group block not create any inner container div ? Please provide me a solution to it, otherwise all theme development which is based on bootstrap will break.

@hozefasmile As far as I can tell there’s no way to get rid of that inner-container.

One solution is to use a script for the frontend and add the row class to that inner container. But it also limits your use of multiple rows within the same container.

Instead of being able to have container > row + row + row … you’d need to use container > row / container > row / container > row.

Add this to your scripts.js.

$(".bootstrap-fix .container > .wp-block-group__inner-container").addClass("row").removeClass("wp-block-group__inner-container");

However it’s a bit hacky and only works with certain scenarios and with new updates if they change the layout/class name you’d need to fix it.

So when adding content you’d no longer be adding 3 group blocks, you’d add only one group block ( with a custom class of container and the script would add the row class to the inner container created by WP ) and then only the group blocks for columns.

I’d also recommend removing the inner class from the column group blocks.

$(".bootstrap-fix .row > div > .wp-block-group__inner-container").removeClass("wp-block-group__inner-container");

I use a .bootstrap-fix class for the content section of my custom pages just in case – to make sure there are no conflicts with my hard-coded layouts.

It also limits the use of align-items-center/justify-content … as you can no longer add classes to the row container.

I ended up adding yet another script where I applied those 2 classes ( align/justify ) to the container group and they got passed down to the row.

It’s all very messy but I haven’t been able to find another option.

And yes – no javascript on the browser, everything breaks down.

• This reply was modified 5 years, 4 months ago by Emil G.

@dagu Its too hacky and not compatible in all cases.

This plugin uses a very simple method of filter hook to remove Outer Div from any block type that is created by it, see url https://lazyblocks.com/documentation/blocks-code/php/

add_filter( 'lazyblock/my_block_slug/frontend_allow_wrapper', '__return_false' );

@talldanwp , Can’t we apply such simple filter hook to remove it from group block in wordpress ?

@hozefasmile oh yes, i agree, very hacky.

personally i just ended up creating my own block using a plugin, duplicated from the group block that exists with the gutenberg plugin. it’s literally a matter of removing that one div.

it’s not like it’s a complicated matter … although i do admit i’m not all that knowledgeable and all this is very new to me – so perhaps that container serves some kind of purpose that i just can’t see right now.

<div className={ classes } style={ styles }>
<div className="wp-block-group__inner-container">
<InnerBlocks
renderAppender={ ! hasInnerBlocks && InnerBlocks.ButtonBlockAppender }
/>
</div>
</div>

which is still a messy, hacky approach since with future updates the entire content might be lost – if for whatever reason the plugin doesn’t work/is removed – all the content is lost, you can’t even keep the html. as far as i can tell this is a known issue with all blocks containing other blocks ( InnerBlocks component ) – other people have talked about this elsewhere.

by the way – that is also the case with the official gutenberg plugin – if you remove the plugin for whatever reason – you can’t salvage the content, not even by converting it to html.

the only way to keep the content that i know of is to use a classic editor plugin – and open the page directly with the classic editor. that keeps the content/html/layout.

it’s all just very, very messy no matter how you look at it.

the only true solution you have right now is to try and trick the designer into designing something that doesn’t require these kinds of features. :))

@hozefasmile Sorry for the delayed response. That’s a shame that bootstrap is no longer supported. I don’t think it was considered to be the main use case of the group block, which is mainly about organising content rather than creating a grid system.

Have you considered looking at blocks on the plugin store? I did a search for ‘bootstrap grid block’ and it looks like there are a couple of plugins that might support your needs.

@talldanwp , it’s not about the usecase of block but it’s about just customizing the html output of block, many blocks inluding this group block, create additional div tag for the block, in many cases we don’t have in need to have this additional div in output, so there need some simple filter function to remove extra div for any particular block, for example group block in this case , I have mentioned a plugin example above and see have simply that plugin allow a filter function to remove extra div

> it’s not about the usecase of block but it’s about just customizing the html output of block.

@hozefasmile I’d politely disagree. Supporting bootstrap wasn’t a consideration for the group block during development, it’s not how it’s intended to be used. That’s the whole reason your situation exists. You could use a filter to remove the div (there are many block filters: https://developer.www.ads-software.com/block-editor/developers/filters/block-filters/), but there would always be a chance that future changes to the block would again cause compatibility issues. This is a block that hasn’t even been released yet in WordPress core.

On the other hand, a block from a plugin that’s intended to be used with bootstrap would hopefully be maintained with the goal that it’ll continue to work with bootstrap. You’re less likely to have future compatibility issues, which is why I think that’s the preferable solution to your issue.

Anyway, here’s some further background on why the extra div was added:
https://github.com/WordPress/gutenberg/pull/15210

There’s also an issue here that looks relevant, though it was probably created before the extra div was released:
https://github.com/WordPress/gutenberg/issues/15926

It might be worth adding your comment to that issue if you have a github account. I’ve already commented and linked to this forum thread.