When a block inside a template part is selected, display the template part outline on the canvas #27780
Conversation
jameskoster
added
Needs Design Feedback
|
Size Change: +214 B (0%) Total Size: 1.28 MB
ℹ️ View Unchanged
|
|
Good exploration, thank you. Back in the day we had this breadcrumb, we called it. The initial idea was to provide tools to select the parent block. It didn't quite work, then it was just an indication of which block you were hovering. This turned out to also be mostly unnecessary. But on the flipside, all the extra UI and the overlap really added headaches for the design, and complexity. And all that you saw on hover actually got in the way, whereas what you saw on select was more important. In this case, when you've selected the template part, the name is right there in the toolbar. Where it might get interesting is to show the template part border even when a child block is selected. I don't know for sure that we want that — it could end up being noise — but that seems like the thing to potentially try first, without the extra label. What do you think? |
|
Yes good point, I think you're right. Displaying the template part outline when innerblocks are selected is the thing to focus on first. I'll update the PR and we can continue to play around with it. I think there are cases where this will be very useful, like when there are multiple instances of the same template part on the canvas (think product grids). But yes, it shouldn't feel like unnecessary noise. As for the label, it was pointed out to me on Slack that the persistent block navigator would probably do that job more effectively. |
jameskoster
changed the title
|
In the screenshot above, I've selected the Tagline block which exists within a template part — but I'm not seeing the outline of the template. Instead, you can see the outline for the Post Content block is also showing. I think maybe there's some confusion over which block is selected and which template part is supposed to be highlighted. |
|
Hmm I wonder if it's theme related. Here's what I see in that scenario with Twenty Twentyone Blocks:
Which theme are you using? |
|
Pardon me as I am slightly frustrated as I feel we have been going in circles a bit.
IMO the entity spotlight-mode should still be a thing. It makes it very clear what is not part of the entity you have selected (or a child of selected), and what is not. The exact problem we are trying to solve here. Moreover, the solution you are looking to apply here was previously implemented and then removed. It feels very much like we are going in circles. |
|
Sometimes the design process involves going in one or two circles as we work out how all the pieces fit together. Apologies for that, it's not intentional 🙇♂️ This is a low priority issue, we can probably leave it for now. |
I would disagree. Having some clarity of where the entity you are editing starts and stops is a high priority issue, so much so that multiple developers and designers worked together to tackle this with solutions in the past. Having some solutions in place is high priority, tweaking those solutions may be lower priority. Since those solutions were stripped out and there currently are none in place, re-implementing them seems high priority. With that said I have opened 2 PRs to:
We can reiterate on them and tweak them as lower priority, even replace them with alternative solutions. But with FSE moving into more of a testing cycle, we need this entity editing UX in place. |
|
Brainstorming... Clicking to select any block that has inner blocks. I say the above as we need a finer way to with one click to initially select the parent block then by just moving the cursor inside the parent to easily see the location and what type of inner blocks are present. Based on where the inner blocks are located and what these are one can easily get an overview and click the block one needs to adjust. A kind of hierarchy of what one sees. |
|
I think we can close this PR, and discuss the merits of the click-through pattern in 29337. |
Currently when a template part (or innerblock) is selected, the name is displayed in the Top Bar like so:
This can be easy to miss and doesn't visually explain the relationship between the template part and the selected innerblock.
In this PR I'm exploring how it feels to also display the template part name on the canvas as a small chip absolutely positioned in the bottom right corner of the block. This treatment would persist as you navigate down the tree, so that you're easily able to identify the parent template part boundaries, and select it via click.