Site Editor: template part border disappears when hovering over nested blocks

[vindl]

Whenever we hover over a template part a helpful border appears to help delineate that area from the rest of the page. However it's only shown when hovering over empty spaces within template part. As soon as you hover over one of the nested blocks this border disappears.

Correct me if I'm wrong but I don't think this is the expected behavior. The border should disappear only after nested block is selected.

[Addison-Stavlo]

cc @jameskoster - Is this expected or do you think there should always be a border around the template part as well when a child is hovered (both child and parent template part having the hover border triggered at the same time)?

[jeyip]

The behavior was implemented intentionally.

“The desired effect in the Site Editor is that only the block being hovered has an outline.” (from this comment)

In other words, we designed the hover state in such a way that we only expect one block to be outlined at any given time. There’s good news though! If we prefer it, I’m fairly confident that we could quickly modify template part block behavior so that it shows borders, even when nested blocks are hovered.

[jameskoster]

+1 what @jeyip said. When more than one hover-outline is visible at once things gets very visually noisy, and clarity around which block will be selected on click is reduced.

[vindl]

cc @simison since we were involved in a similar discussion recently and your expectation was that both blocks should be outlined.

[Addison-Stavlo]

and clarity around which block will be selected on click is reduced.

Perhaps a different border style (lighter, thinner, etc.) may serve a purpose for the parent template part in this circumstance?

Alternatively IIRC there are some explorations around requiring the user to select the template part to be able to edit its content, I would assume that would also serve as a separate potential solution for this same ux concern of "how do i know this hovered thing with a border does/doesn't belong to a template part". 🤔

[jameskoster]

The hover interaction discussed here is supposed to provide unmistakable clarity in regards to which block will be selected on click. If we start outlining multiple blocks on hover the waters are muddied. What is the benefit there? If it is to understand the relationship between parent / child block, I would argue that the fact we outline the parent of the selected block is adequate.

As we're learning in #28637, getting these outlines right is going to be an exercise in finesse. "Less is more" seems to be a sensible approach to begin with.

Alternatively IIRC there are some explorations around requiring the user to select the template part to be able to edit its content

Personally I think this could be the way to go, but it still needs some exploration. I intend to look into an 'mvp' for reusable blocks very soon. If we feel that works well then we can cross-pollinate the pattern to template parts and bypass this issue altogether :D

[simison]

Yeah, I agree with @jameskoster on this specifically:

When more than one hover-outline is visible at once things gets very visually noisy, and clarity around which block will be selected on click is reduced.

There are two things being mixed up here:

• "I know what block I will choose when I click on point at the screen"
• "I know which template part the block I'm hovering belongs to"

Since the only visual cue for the template part currently is the hover border, I said my initial comment in discussion with @vindl about hover-borders. But if you just fix that by showing both identical-looking hover borders simultaneously, the need for knowing what I click becomes a problem as Jay says.

Alternatively IIRC there are some explorations around requiring the user to select the template part to be able to edit its content

Yep, I think something along those lines could solve it. Other ones being different visual cues used for indicating template areas on hover, for example, opacity changes for other templates, different-looking borders, background color changes, etc.

Another very related problem I had was that "just hovering past text, on empty area" doesn't work for choosing the template behind the blocks, because many of the blocks contain empty "invisible" areas:

Yet another related problem is that on smaller screens template part can take the whole page and thus relying on borders isn't reliable:

Hope this helps!

[creativecoder]

Alternatively IIRC there are some explorations around requiring the user to select the template part to be able to edit its content

Just noting that this is nearly what we have now, when in select mode.

[mtias]

I think this can be closed now