Try clickthrough to edit template part children. #30156
Conversation
Addison-Stavlo
requested review from
vindl,
jeyip,
mattwiebe,
david-szabo97,
Copons and
jameskoster
Addison-Stavlo
added
[Feature] Full Site Editing
Needs Design Feedback
|
Size Change: +731 B (0%) Total Size: 1.47 MB
ℹ️ View Unchanged
|
|
One (hopefully) small change – the green overlay should appear when the template part is selected rather than on hover, and it should be 10% opaque. It should disappear when an innerblock is selected (this part is working fine :)) |
Updated, how does that feel now? |
|
This is what I see: Click-through.mp4
What is comforting with the above method is that the user first gets to see the Template area. What it contains, and is then able to see the boundary of what is inside this container. Gaining an overview. |
|
Btw @Addison-Stavlo Addison. Thanks for working on this feature. This will likely be backported to WP 5.7.1 in relation to this trac ticket: https://core.trac.wordpress.org/ticket/52873 Here is what Dan mentioned in the above ticket: By merging this PR. Clicking the reusable block and then clicking the delete or backspace key will delete the reusable block from the page, and not the block inside the reusable block. We will then be taking care of 1 of the 2 issues that are now up in relation to reusable blocks. |
|
@paaljoachim This PR is for template parts, but I guess you mean if a similar PR were made for reusable blocks. I don't know that backporting to 5.7.1 will be possible, as such a change would be an enhancement and not a small one. Generally only bug fixes end up in patch releases. |
@talldan I would be happy to extend this to reusable blocks as well if it ends up being the behavior we want. The two behave very similarly in the editor and the original design issue requests this flow for both. Although, I will note that @jameskoster mentioned wanting to explore an alternative to this by leveraging 'select' mode in some way. So Im holding back on this a bit as that is explored and design decides the best way to proceed. |
There was a problem hiding this comment.
I made a couple of adjustments
- Rebase to pull in latest outline styles
- Added an overlay on hover with color matching the outline
- Made the selected overlay blue to match the outline (I need some help to opacify the theme color) :D
I still think the green treatments for template parts makes sense, but we should probably do all of that work together as there are several considerations outside the scope of this particular PR.
One strange bug I noticed – it is possible to bypass the click-through entirely with the Site Title block:
site-title.mp4
A couple of additional thoughts:
- We can probably eliminate some noise in the UI by removing the spotlight effect on template part selection. The overlay + dotted outline essentially does the same job so I don't think we need it any more.
- Is there any way we can make the overlay behave like an actual overlay? It currently sits behind the block contents and the illusion of an overlay is lost when something like an image is present. I thought about making the innerblocks semi-opaque when the template part is selected but perhaps there is a better way?
|
The most important part is just getting this into the Gutenberg plugin so we can test it out. |
I think I noticed it with any text element. A standard 'click' doesn't seem to bypass it, but if you 'click' over an editable piece of text AND move the mouse while it is clicked (even so slightly as to not notice) it selects the block containing the editable text - so the initial 'click' unlocks the clickthrough, and the mouse move then triggers text selection which in turn selects the block the text is a part of.
Yeah I think we could create an actual overlay element and fix its position over the entire content of the template part (as opposed to leveraging the CSS for the elements that already exist as is done here). It'l be a little less simplistic but I think it should fix the bug you pointed out regarding clicking on text inputs. |
|
From @Addison-Stavlo comment it seems like the next step is to create an overlay. Call it the lid on the box. So one clicks the overlay (opens the lid) and then has access to the contents inside. Btw lets also get this in for Reusable blocks, as it would be very helpful for users. It would make accidental changes just a bit harder to do. |
That sounds about right!
Il aim for that case as well. I hope to get back to this PR shortly. |
|
Trying that element overlay approach here - #31109 - it should be working pretty well in terms of selection and overlay style, but im still battling against some resizing issues. (pardon splitting the PR, but I was running into a handful of difficulties and figured I would leave this one in its current state in case it made more sense to try to polish this approach instead.) |
|
Closing this PR in favor of #31109 - we can keep iterating over there. |
Description
Explores ideas suggested in #29337 to require a 'clickthrough' flow to edit the contents of a template part. Currently this is only set up for template parts, but the idea would be to expand this to reusable blocks as well.
At this point what do we think of the interaction and styles? What can we refine about this or what else do we want to try? Do we want to keep the highlight color idea, and what different colors would we actually want to use for template parts vs. reusable blocks? etc.
Note - one of the challenges with this flow is the behavior of the popover inserter. To get around this I have added selectors to disable/enable the popover inserter and used them such that when we are hovering a template part that is not selected/child-selected the popover inserter becomes disabled and does not appear and break the hover/click-through interactions.
How has this been tested?
Screenshots
Types of changes
Checklist: