Adding a container block 'after the fact'

GenerateBlocks
#1

Hi there

I am using generateblocks (love it - thank you) and realised too late that I actually need to surround some nested blocks with a container block.

I have a big container, and then within that a grid for each row (four rows in total). I want images and text to alternate down the page - image on right, text on left for on row, then image on left and text on right for the next row. When this stacks for mobile and tablet it all looks wrong and because I haven’t surrounded each row with a container I can’t target it right.

I realise I missed out a step and should have added another container block around each row.
Is there a way of inserting a container block/surrounding a group of nested blocks with a container after the fact?

Cheers,
Liz

#2

The current method i use is to:

  1. Insert a Container Block at the very top of where you want the container to begin. And inside that container insert a single text block - doesn’t have to have any content.
  2. Switch to Code View from the 3 dot menu in top bar.
  3. You will see some HTML like this for the Container:

<!-- wp:generateblocks/container {"uniqueId":"699c047c","isDynamic":true} -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

  1. Simply move this line to the very bottom of the code - ie. where you want the container to close:

<!-- /wp:generateblocks/container -->

#3

You star! Thank you! I am so happy to have got this tip.
I’m very tired right now but will come back to this in the morning…
Thanks v much.

#4

Very cool tip, David. Thank you for sharing this!

#5

Can you not just create a container and then click and drag the grid into it?

#6

Hi David
Further question…
So I can see exactly what to do once I’ve managed to insert a new container-with-text-block-inside… what I cannot seem to do is click on the exact right bit of the page to insert those blocks in the right place. I can see by the List View where all my blocks are but I cannot for the life of me work out how to insert one in the right place. I click-to-highlight on either the block I want it inside (another container block) or the one I want it just above in the hierarchy (a grid block) but either way when I try to add it in using the ‘plus’ button it jumps me to some other bit of the page where I’m not wanting to add the block.
Is there a way around this? I’m just using native wp with generatepress theme and gpblocks pro.
Many thanks as always.
Liz

#7

If you select the very top block in your editor - on the Block Toolbar there is the option to Insert Before which should provide you the space to add the new container block.

As per @Bryan comment - yes you can drag and drop the blocks inside a container - but it can be a bit fiddly. Grouping all the blocks first can make it a little easier but on long content its still a pain.

1 Like
#8

Well, I managed to make that work - thanks for your extra tips. I couldn’t find a way of highlighting/selecting a block in ‘visual editor’ and then getting the relevant code highlighted in the code editor - that would be useful so you could be sure you were in exactly the right place. I did it anyway with some trepidation - thank you for your help.

#9

Oh man, this saved me from having to redo a very complicated grid. Excellent instructions, so glad to have found it. From now on, all my grids will be in containers…!

1 Like