Issues with location of added blocks with quick inserter

Cwicly Plugin version:


I had noticed some strange behaviour during my Cwicly tests when adding new blocks to the canvas with quick inserter, but now that I’ve actually started building sites, it is driving me mad… So frustrating experience :frowning:

  1. FIRST EXAMPLE of workflow from scratch
  • Add a section: OK
  • Add a paragraph, goes into the section and selected: OK
  • Add a heading, goes BEFORE the paragraph: ERROR, should go AFTER the paragraph
  • Add a paragraph: same ERROR
  • Select the last paragraph of the section, add a heading: OK

After a few tests, it seems that, when selecting the first block inside a section/div or at root level, a new block is added BEFORE the selected block.
And when selecting another block, new block is added AFTER.

The problem is that when inserting a div or a section, then adding blocks inside, they are added in reverse order because every new block is added before the newly selected one, which is always the first.

I find the idea of inserting BEFORE a FIRST block is seducing, but the side effect of continued reverse order is a no go, so I guess blocks should always be added AFTER the selected block.

  • Add a section: OK
  • Add a div, goes inside: OK
  • Add a heading: OK
  • Add a paragraph: ERROR, goes OUTSIDE and BEFORE the div

(Same issue with a div instead of the section.)

  • Add a section: OK
  • Add a div, goes inside: OK
  • Add a heading: OK
  • This time instead of directly adding, I select the second div, and add a block: OK, goes after the last block inside the div
  • Add a block: ERROR, goes OUTSIDE and AFTER the div

So, after a few tests, it seems that if a block is selected inside a div which is inside a div or section (so at depth 2), adding a new one will always insert it OUTSIDE the div, inside the depth 1 div.

It is actually worse after other tests: WHATEVER THE DEPTH you add a block in, it is always added in level 1 ancestor!


In a real life situation, you spend your time looking for added blocks in the structure because depending on containers depth and length, newly added blocks can be very far from the previously selected one.
(It seems there are issues with the scrolling to reach new block as well, but I’ll have more tests.)

This is still better than Gutenberg “+” button that only adds AFTER at the same level, but on the other side Gutenberg is more predictable and you know where to find the block :wink:

Hi @yankiara,

Thanks for bringing this up, and apologies for the headache it might have caused!

This should be addressed in
If you have any thing else to add, please don’t hesitate!


1 Like

It is almost perfect, but there’s still a problem :wink:

When adding a new block, the new block should always be selected, but it is only working when adding a block inside a container like div or section.

When adding a block after another NON-container block, the selected block remains selected, and the new block is correctly added after, but NOT selected.

This is a problem on its own, since when adding single block, we want it to be selected to directly edit it.

But there is more, when adding multiple blocks in a row, first block keeps being selected, like mentionned above, and all blocks are inserted just afer it, thus before the previously inserted block, so order is still reverse.

1 Like

And after adding a div or section, it is not selected, so we can’t directly add anything inside it unless we manually select it.

1 Like

I mentioned this here as well: The big UI/UX topic - #97 by sunny

Apparently it’s going to be fully resolved in the next update :slight_smile:

P.S. Thanks for taking the time to make this thread. I had disabled the Quick Inserter until now because of everything you mentioned - even though it’s super handy.