What’s the best way to deal with blocks you may have to move around?

[Sue]

I have been working on a site (with Generate Press & Generate Blocks installed) that has a couple dozen audiobooks listed in alphabetical order. Occasionally, I need to add a new book, and to preserve the alphabetical order, I can’t simply add it to the end.

I have it set up the page using columns. Since each column section includes multiple blocks (header, image, text, links…), I can’t just drag & drop them. I tried to group the blocks, but it changed the margins of the group, and I was still having trouble with drag & drop.

How do you recommend I set up a page where groups of blocks will need to be moved around? I’ve watched YouTube tutorials on dragging & dropping, but if I select multiple blocks using the shift key, the arrows that allow drag & drop are greyed out.

[Elvin]

Hi,

To clarify: You’re trying to move containers with lots of contents in Gutenberg editor?

If yes, check this: https://share.getcloudapp.com/04uOvwEj

You can use the move up/down button. Just make sure you select the actual container.

If you’re having a hard time selecting the container, use the block navigation icon (SHIFT + ALT + O).

You can even drag and drop the block containers by clicking and holding the move up/down button and drag it to the place you want it to be in.

A wise man once said:
"Have you cleared your cache?"

[Sue]

I watched the video, but when I try selecting the column, I can only move it right/left within its own group — not down into a new group. There are no up/down arrows, just right/left. Perhaps it’s not possible to move columns outside of their own group? If so, that is very inconvenient… not sure how else I should structure the page.

[Elvin]

Perhaps it’s not possible to move columns outside of their own group? If so, that is very inconvenient… not sure how else I should structure the page.

You can hold left-click the “Drag block” and drag + place the block anywhere within the content sequence.

This is the “Drag block” icon – https://share.getcloudapp.com/NQu19zbk

Here’s a demo video of it in action – https://share.getcloudapp.com/bLuwvDJW

A wise man once said:
"Have you cleared your cache?"

[Sue]

For some reason, I still can’t get it to work. I’m attaching a video below.

[Elvin]

Ah my bad. I missed an important detail. You were using the default columns block.

The default column block’s columns can be moved but it gets tricky.

Its UI isn’t exactly great but here’s how to do it:
https://share.getcloudapp.com/bLuwLY7P

What happens here is we select the column we want to move and click “Move to”.

After clicking “Move to”, left click the target place you want to place it. The target place is marked by the grey white line you see on top of the column/block.

After selecting the target destination, press enter to move the column to the target destination.

Note: You can’t move a column inside a column but you can move the whole columns row inside a column. Also, selecting the target destination may get pretty annoying to do as its pretty difficult to target properly. It’s a default WordPress UX issue that GenerateBlocks improved on.

A wise man once said:
"Have you cleared your cache?"

[Sue]

oh, wow, THANK YOU — that worked!!! It is definitely a pain, but I was able to get the hang of it. I appreciate your patience!

[Elvin]

oh, wow, THANK YOU — that worked!!! It is definitely a pain, but I was able to get the hang of it. I appreciate your patience!

Nice one. No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts