Block Navigation: Selecting and navigating container, columns & pricing blocks

It’s easy to select the content of most blocks. Double click to select a word or triple click to select a whole paragraph. But when you start using column and container blocks, block navigation gets more complicated.

You need the “Block Navigation” button.

When you’re editing a post or page you can see the block navigation button in the top left corner of the screen.

Example of a complex layout using container and column blocks

In the example below I selected…

• a paragraph
• in a column
• in a container

Selecting the container or one of the columns

It’s usually easy to select the content (text or images) inside complex column and container layouts. But selecting the layout blocks (the columns and the container blocks) can be more difficult.

Why do you want to select container or column blocks?

The Atomic Blocks Container block has some very useful settings, such as…

• Padding and margins
• inside container max width
• background image and color
• advanced CSS (text box)

The Atomic Blocks Advanced Columns block has these settings…

• number of columns
• gap or gutter between columns
• column inner max width
• responsive columns
• margin and padding
• background color and text color
• advanced CSS (text box)

Selecting containers and columns (layout blocks)

The container you want to select is probably just one part of a long web page.

So the first step is to select a paragraph, headline or image in the container or column layout you want to edit.

Click the block navigation button

After selecting a piece of content in the container you want to edit, click the block navigation button. You now see a tree structure of the content blocks, nested inside the container and column blocks, that make up the layout. The layout in the example I’m using was just one small part of a long web page.

Select content inside a container before clicking the block navigation button

Because I selected a paragraph. Before clicking the block navigation button. WordPress only shows me the structure of that container block and the content inside that container block. Which is a small section of a much bigger web page.

I have drilled down to the section I’m interested in.

When I clicked the block Navigation button I saw this tree structure. It shows a container block on my web page and the columns and content inside that container…

Click the different icons in this tree structure. You will then to jump to that part of your “container and columns” based layout.

The icons help you navigate around these complex layouts

The icon used for container block, and the icon used for the column block, are the same. The image above shows…

1. the main container
2. a row of columns, inside a container block
3. a single column, in the row that contains several columns
4. a heading nested deep inside my container and columns layout

Selecting a specific row or column. Or selecting the main container block. Is difficult, unless you use the block navigation button.

Container and column blocks have a square icon

These are some of the icons used in my layout…

Why would you want to select a container or column block?

Container blocks and column blocks have a lot of settings and you’re sure to want to make changes to them at some point. Probably sooner rather than later.

These are the settings dialogue boxes…

Container

Column(s)

Column

Please note! There is an Advanced Column(s) block and an Advanced column block.

You place each individual column inside a columns layout.