GenerateBlocks Demo

This is Paragraph block 1 which is inside Container block 1.

Container block 2 (blue background) contains a Grid block with two grid items (Container blocks that were added automatically by the Grid block). The first grid item, Container block 3 (green background), contains Paragraph block 2 (purple background).

Paragraph block 3 (yellow background) is also inside Container block 3 (green). The photo is in an Image block which is in the 2nd grid item i.e. Container block 4 (pink background). The Grid block does not have a background colour. It is made up of the green and pink Container blocks and the space between them.

This is Paragraph block 4 which is inside Container block 5.

Here’s a screen print of what this looks like in the WordPress block editor, if I click on Paragraph 2 and then on the block navigation icon at the top. This block navigation tool, and the breadcrumbs at the bottom of the page, can both be used to move around between the blocks on the page.

Another Paragraph block inside a Container block

This time I’ve added some left padding to Container block 3 (green) and a top margin to Container block 2 (blue). It seems that giving a Paragraph block a background colour also adds some padding to the block. This paragraph has no background colour (the green of Container 3 shows through) and the text starts right up at the top of the Container.

Paragraph block 2 (purple background) is inside Container block 3 (green background) which is inside a Grid block which is inside Container block 2 (blue background).

Paragraph block 3 (yellow background) is also inside Container block 3 (green). The photo is in an Image block which is in the 2nd grid item i.e. Container block 4 (pink background). The Grid block does not have a background colour. It is made up of the green and pink Container blocks and the space between them.

Another Paragraph block inside a Container block