Not able to re-select template part, Group block and Columns block before adding inner blocks.

[paaljoachim]

Description

I made a page template.
Added a Template part. But after adding the part I am not able to select the sidebar settings.
The only way I am able to select the Template part is by adding in an inner block.

Step-by-step reproduction instructions

1. Create a Page template.
2. Add a Template Part.
3. Deselect. Try to re-select the Template Part.

Expected behaviour

Having a way to select the Template Part without having to add inner block.

Actual behaviour

When deselecting the Template Part. I am not seeing any method to where I can reselect the Template Part again without having to add in atleast one inner block.

Add-Template-Part-Deselect-Then-Reselect.mp4

WordPress information

• WordPress version: 5.7.2
• Gutenberg version: 10.7 RC
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Twenty Twenty One.

Associated issue:
Impossible to select Group Block (5.4 Beta 3)
#20453

[carolinan]

I am able to reproduce this. After the block is inserted, it has no toolbar.
Though I am using WordPress 5.8-alpha-50943.

[ntsekouras]

It seems that applies to blocks without having inserted innerBlocks like Group as well. This should be handled in a more generic way but just noting that you can select the block from the List View even if it's empty

[Addison-Stavlo]

Added a Template part. But after adding the part I am not able to select the sidebar settings.
The only way I am able to select the Template part is by adding in an inner block.

When I add a new/empty template part block, the block is already selected by default. If I deselect it, it is difficult to select by clicking on it since its child (empty paragraph or inserter button) takes up the same amount of space as the template part block.

This still seems selectable by keyboard navigation, by the list view component, and if you add any block or type 1 letter in that empty paragraph block you also have the 'select parent' option from the block toolbar. Once you have more blocks, clicking outside their boundaries but within the template part boundary selects it as well.

This seems like an odd edge case to try to select the template part block by clicking alone when it has no children, but the overlay interaction (#31109) would fix this edge case as well.

[Addison-Stavlo]

It seems that applies to blocks without having inserted innerBlocks like Group as well.

Right, this seems like a much more general issue that is not specific to any block's implementation. Not specific to template parts, FSE, and Im not sure if I would even call it a 'bug' ? 🤔 Block selection itself still works as we would expect it to - interacting with the most nested item you clicked on.

[ntsekouras]

I guess this issue should change to reflect that is a generic one about the blocks with no innerBlocks inserted and would need design feedback as well. @paaljoachim would you mind updating the issue?

[paaljoachim]

I re-titled the issue. I assume there are also other parent block container blocks that this issue also is associated with.

---

As @Addison-Stavlo mentions having the click-through overlay will help all blocks that have inner blocks. As the first click would be selecting the parent container.

This is a "bug" or I should say it is a lack of having a way to re-select a parent block that does not yet have inner blocks.
(I brought in the Table block as the bottom example where one is able to click into the block and also see the toolbar.)

Not-able-to-reselect-parent-block.mp4

Today we have the in page block inserter.

What if we add these in page add block buttons to all parent container blocks?

The advantage:
It re-enforces an already existing behavior to use the in page inserter to add blocks to a page.
It adds consistency with adding blocks to a page.
One can much easier select the parent container. Because there is a button to click to insert blocks. One can click inside the parent container border and outside the button to select the parent container.
It creates a clear button/icon to click to add inner blocks.

The disadvantage:
One has to click the inserter icon to insert a block into the parent container. Today one can click anywhere inside the container to open the in page block modal.

Here is a variation.

Joen @jasmussen it would be great if you can share your knowledge here. Thank you.

[jasmussen]

Thanks for the ping! This is definitely an issue larger than just template parts. It applies to groups, as Nik noted, and Anne has also replied that it makes it hard to delete menu items inserted in a nav menu. It applies to social links, to lesser extent, it applies to buttons.

Common to those is that the items you insert are not just blocks, but buttons, which means where other blocks get selected when you click them, in this case you click the buttons.

While the click-through interface that exists for reusable blocks would "solve" this, I don't think it's the solution in this case, exactly because the issue affects any block that is also a button. But more importantly, the appenders — the black plusses — they exist exactly to make it easy to insert blocks in that spot, so if we add further friction we are just going in circles.

To me it seems like there are two solutions that will help here. Firstly, we continue refining select mode, which is created in part for this purpose. Perhaps it's default in the site editor? Perhaps it's easier to flow in and out of? Perhaps there are additional heuristics for entering and exiting it that make it feel that much more natural. This is something I know @jameskoster has thought about, and I believe there are already a few tickets about this.

Secondly, we look to a redesign the generic block appender:

One of the things we've learned from Social Links and Navigation, is that a good setup state is difficult to get right. Notably we have tried to have abstract representations of the blocks in their unselected states, to make its presence and purpose known, but while it worked in a few ways, it failed in others. The empty white square exists to accomplish the same: indicate an empty block and provide a starting point to filling it out. There might be an opportunity to unify across these blocks on a new interface; an appender that also better serves as a setup state for container blocks.

Note, this is slightly different from the setup state/placeholder you get when you insert an empty Image block, in that it is specific to container blocks that need child blocks inserted.

It needs to check a few boxes:

• It should ideally show the boundary of the block, at the very least when selected, so it's clear where it starts and ends.
• It cannot be huge.
• To let the container be more easily selectable, there should be a visually non interactive area in addition to the appender button.
• Ideally in its unselected state, it has some kind of indication of what block it is, instead of being completely anonymous.

It's not as easy to get right as it might sound, but I think we can do it. It could, to build on Paal's doodle, be a white square with one or more buttons inside — but we need to think of how it might scale to Navigation, which also has a dropdown and a "Add all pages" button as shortcuts.

I don't think we can get this done fast, but once we get it right, it will be a nice improvement.

[jameskoster]

Would you mind elaborating on why the click-through wouldn't work here? If we combined that pattern with the empty container occupying some space on the canvas, it could work quite well? 🤔

empty.mp4

I suppose it raises the broader question of whether this pattern will be restricted to template parts and reusable blocks, or eventually applied more holistically to any container.

[jasmussen]

Oh the click-through would work — that's why I mention select mode. Perhaps I should've clarified that I think we should be very careful in expanding this particular click-through beyond select mode, beyond template parts, and beyond reusable blocks, because it literally adds friction — in those cases it's good friction, but the purpose of the appender is to reduce friction, so I don't think it's a fit.

For even deeper context, I was a big believer in clickthrough everywhere by default back in the day, enough that we made it default. Unfortunately we had to revert it quickly, because as we found out, when people see a button, they expect to be able to click it, once. Same for text, click and edit. There's still a place for clickthrough in the way it's implemented now.

There may also be a place for "click it first to select, then click again to insert" — for example the appender might be a white box with a block icon, until you select it and it's a white box with a black plus button. Technically the same interaction, but I wouldn't refer to that as clickthrough, so as to reserve that name for the select mode interaction.

[jameskoster]

There may also be a place for "click it first to select, then click again to insert"

Yeah that's what I was thinking. It seems reasonable because you may want to select the parent first in order to choose a pattern, change the layout / alignment, or other options. And if there are no children then there's nothing to click inside any way :D

It's not perfect because if we hide the [+] until selected then the block is essentially invisible until you hover it, but that is perhaps where the empty-block-placeholder effect could come in to play? Or perhaps even the dotted outline we've considered for containers before? That might be a more flexible solution that doesn't rely on custom placeholders being designed for every single container.

empty.mp4

I do agree that there is a lot of overlap with the Select mode enhancements that have been discussed.

[jasmussen]

It might work — but I'd show a block type indicator so it isn't just a white box. But I'd also design it to intentionally not have anything visually in common with the click-through. Because although the interaction could be argued to be the same, you could also just say that it's an abstract expression of the block design principle that the unselected is a preview, and the selected can show additional controls.

Crucially, I think we need to think of this as an appender redesign, not just a template part affordance. We can solve it for group, template parts, and POSSIBLY social links/navigation as well.

[jasmussen]

I extracted the conversation here into a mockup in #33025, which if could fix this issue.