Block party! Check out the new Container Block!

Block party! Check out the new Container Block!

A new block has just landed in Atomic Blocks version 1.2.4! We’re excited to announce the highly-requested Container block. We now have eleven awesome blocks available for the Gutenberg editor. Let’s take a quick look at some features of the Container block.

What’s a Container block?

The Container block lets you gather several individual blocks into a parent container, which helps you create different sections of content on your posts and pages. For example, you might want to create a section with columns, images, and text and give it a specific padding and background color. Using the Container block, you can do just that!

The Container block includes settings for padding, margins, max-width, background image, background image opacity, and background color. These settings will help you create some really unique sections on your site!

A quick video demo

Because the Container block let’s you break away from just adding blocks to a page one on top of the other, this has been a frequently requested block. We’re excited to launch this and we’re looking forward to seeing what you can create with it!

Is it possible to create responsive columns with it? I mean that you have two columns on desktop view and one column on mobile view? Would be so helpful for authors which don’t want to work with page builders.

Right now, this style would need to be provided by the theme. In my examples, I’m using the columns block included with Gutenberg, and it has minimal styles. In the future, we’ll have more dynamic columns and you’ll be able to control the columns on desktop and mobile.

Sounds good, David! I even cheated a bit by pasting those blocks in instead of creating them on the fly. But it also demonstrates how good the copy/pasting of blocks works so far. The future is blocky!

The container block is essentially an empty block for you to add other blocks into. It lets you collect blocks into a section that you can use for layout purposes. It might not look like there is anything there, but there should be block settings available in the sidebar when that block is added/modified.

Atomic block’s posts grid block can actually replace the above mentioned plugins if only we get the option to choose desired thumbnail size rather than rectangle or square which is causing undesirable cropping.

Can max width be an optional setting? I’d like to to use my theme to set a max width on container content without having to use !important in the css. Currently because the max-width is inlined and has a default of 1600, then for every container I need to adjust the slider to be 1300 for example.