Container Block

The container block is more complicated than most other blocks. There are two reasons for this.

Nested blocks

• The container block has several settings.
• You can nest blocks inside the container block.
• Every block you place inside the container block has it’s own settings.

Suppose you want to change a setting such as margin, padding or a color inside a container. You have to discover which block that margin, padding or color setting comes from.

Drill down

You have to drill down from the main container block, to the blocks nested inside the container, and the blocks nested inside those blocks. This can make it difficult to work out where to apply or remove the setting you need.

It soon gets confusing.

The two most important points

1. The settings change depending on which block or element is selected.
2. There is a toolbar above the selected block, AND block settings in the post editor sidebar.

When you change block settings, don’t forget to click all of the down arrows to see the full list of options available.

Before I clicked the down arrows I just saw these two options.

Clicking the down arrows expanded the dialogue boxes to show all of these extra options.

AB Container block: toolbar and sidebar settings

The toolbar above the AB Container block only contains width settings.

LOOK in the sidebar for the main block settings!

The AB Container block is a very tall dialogue box. I tore it into sections so I could put instructions at the side of the relevant images.

AB Container block padding settings

I chose 5 % padding for top, bottom, left & right.

Experiment with this setting and see what works best for your designs and layouts.

The container blocks in the StudioPress blocks based homepages often use 8% padding.

Inside container max width

I didn’t apply any extra margin to the container block I used. But the…

Inside Container Max Width (px) is important!

This is the maximum width the container can span, even on very wide screens.

I chose 900px, the StudioPress hero header container widths are usually 1200px.

Experiment and see what works in your situation.

Background image or color

The AB Container block can have a background image or background color.

Advanced: Additional CSS Class

If you understand CSS, you can add CSS classes to any block. This makes it easier to target your code to a specific block. I made my own CSS class “container-link” in this instance.