Make the padding between blocks clickable to select the blocks

[jasmussen]

Extracting from / inpsired by #13695.

In between every block, the sibling inserter (a.k.a. "inbetweenserter" or "appender") sits. This is full-wide, and takes up the full padding between two blocks, even though only the button in the center is clickable. This is because when you hover the area between the full blocks, we surface the plus in the middle to indicate where to click.

But this also means clicking this padding in between blocks doesn't do anything, because the big bar intended to capture the hover also captures that click. Here's a GIF that explains what's going on:

The transparent blue is the hoverable area that shows the plus in the middle.

The coral is the full block, including the 14px padding that surrounds every block.

Can we make it so clicking this padding even above and below blocks selects the parent block, AND surfaces the sibling inserter? I.e. could we propogate the click through this appender to select the block below?

[m-e-h]

I've struggled trying to select hr blocks . I think this would help.

[talldan]

Related - #12163.

It seems as though it used to be possible to click that region.

[gziolo]

It would also help to solve #12577 - HTML block is hard to select as well.

[gziolo]

@jasmussen, I don't think this is constrained on the technical considerations. It's all pure design decision. I personally would be fine with having two DOM elements on top of each other. One which exists only to trigger the hover effect but propagates clicks to the layer below. The second which is the inserter button or a bit wider area to make it easier to click.

[jasmussen]

It's all pure design decision. I personally would be fine with having two DOM elements on top of each other. One which exists only to trigger the hover effect but propagates clicks to the layer below. The second which is the inserter button or a bit wider area to make it easier to click.

I'm having a bit of difficulty parsing this, can you elaborate? Reading this it seems like you are describing what is in place already today. We have a containing div that spans the width of the main column, called block-editor-block-list__insertion-point-inserter. This div exists to show the plus button in the center, and that plus button is called block-editor-inserter. The "only" piece missing here is the code to propogate clicks on block-editor-block-list__insertion-point-inserter to whatever is below it. Do you have a simple fix for it? I'd approve in a heartbeat!

[gziolo]

The "only" piece missing here is the code to propogate clicks on block-editor-block-list__insertion-point-inserter to whatever is below it. Do you have a simple fix for it? I'd approve in a heartbeat!

Yes, exactly. We only miss that part :)

[aduth]

Related - #12163.

It seems as though it used to be possible to click that region.

Is it duplicate?

[gziolo]

Yes, it’s duplicate. One of them should be closed.

[aduth]

For additional context, I'm copying @ktmn's comment from the now-closed #12163 :

Describe the bug
You can no longer activate a block when clicking in the green area indicated on the image:

Video of current Frontenberg (Gutenberg 4.5.0):

Can only select a paragraph by clicking on the rich text directly.

Video of Gutenberg 4.1.1:

Could select the paragraph by clicking whereever the blue border hover effect appears.

In some nested block scenarios there is very little area available to click to select a "parent" block:

forcing the use of Block Navigation item in the top toolbar, which is somewhat cumbersome for a simple goal.

Additional context

Likely a regression of #11018

More info at #11357 (comment)

[youknowriad]

I think this is addressed now. Let me know if you think otherwise.