Try selecting closest editable block when clicking on a disabled block #60016
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
noisysocks
added
[Type] Technical Prototype
|
Size Change: +1.25 kB (0%) Total Size: 1.72 MB
ℹ️ View Unchanged
|
jasmussen
approved these changes
Mar 20, 2024
There was a problem hiding this comment.
This is a fantastic step forward. I'd expect a code checkup before landing, but behaviorally this is solid.
The trunk behavior is that when you click a header template part, you get the snackbar about it being editable. But focus is remains unchanged, it sits simply on edit-site-visual-editor__editor-canvas. Here's a GIF showing this:
This PR changes that, so when you click a template part, focus is transferred to the nearest editable block. That's shown in this GIF:
The main benefit here is to improve the clarity of what is possible to edit vs. what's part of the template, and even improve the writing flow by providing a giant tap target for starting.
|
Unrelated to this PR, I've in the past voiced my skepticisim about the dotted hover outlines. I still think they are not additive to the experience and mainly add confusion as to whether I selected blocks or not, and this PR specifically makes them even less relevant. But I'm also aware that they are being explored as parts of a larger whole, and happy to keep them to see that to fruition. I'd make them fade out much faster though, to reduce the confusion of whether I selected blocks or whether this was just a quick highlight flash. |
|
I wonder if a more explicit message might be helpful? Something like:
Otherwise, looks good! |
Agreed. |
|
I think this works well. 🚀 |
|
Thanks for testing! I'll wait for #60010 to land and then finish getting this ready. |
noisysocks
force-pushed
the
try/select-closest-editable-block
branch
from
9a8db3f
to
8224741
Compare
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
I've polished this up and marked it ready for review. @SaxonF @jasmussen Would you mind testing this again? Things feel a bit different now that #60010 is landed because clicking on a template part will select the template part. |
noisysocks
added
[Type] Enhancement
There was a problem hiding this comment.
This is feeling much nicer to me than on trunk, it's very neat not having the toast notification popping up, and the double-click behaviour still allows switching over to template editing without having to go to the template menu 👍
One wrinkle I ran into in the post editor with long templates, is that if you go to click on something further down in the template, it'll immediately scroll up to the nearest block. This means that on longer templates, it didn't seem possible to double click on parts of the template as the first click scrolls all the way back to the nearest editable block. It's a little tricky to show in a video, but here goes:
2024-03-27.11.41.51.mp4
One potential idea: should there be a limit on the distance calculation so that it only selects the nearest block if it's within a threshold distance? Or is this potential issue not worth worrying about at this stage 🤔 (IMO it feels very nice to never see the toast popup, so overall I prefer the behaviour here to trunk).
The code change is also looking good to me!
Hmm, what do you think @SaxonF? You can see the issue by going to WP Admin → Posts → Edit a post → Post sidebar → Template → Enable Template preview and then clicking on the comments at the bottom. |
|
@noisysocks we can start with threshold and increase if needed. Probably the safer approach. |
|
I added a threshold of 500px which is mostly arbitrary. |
andrewserong
approved these changes
Mar 27, 2024
There was a problem hiding this comment.
In testing, 500px feels like a nice default threshold to go with for now — it's big enough that most of the time I'm being redirected to the nearest block, while being small enough that I can reliably double click on other blocks to get the prompt to switch over to template editing:
2024-03-28.10.16.35.mp4
Also, looks like it'll be easy to change the threshold in follow-ups if anyone finds it feels like it needs adjusting down the track.
LGTM! ✨
|
Nice, thank you! |
cbravobernal
pushed a commit
to garridinsi/gutenberg
that referenced
this pull request
Apr 9, 2024
WordPress#60016) * Try selecting closest editable block when clicking on a disabled block * Remove 'Edit template' notification * Select nearest *inner block* of Post Content * Move to own hook in @wordpress/editor * Revert use-block-props/index.js * Don't select elements that are too far away Co-authored-by: noisysocks <noisysocks@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Closes #60011.
Makes it so that, when you're editing a page with Template preview enabled (e.g. in the site editor), clicking on a disabled block will select the nearest non-disabled block.
Also removes the Edit your template to edit this block toast notification.
Why?
See #60011.
How?
New hook in
@wordpress/editorcalleduseSelectNearestEditableBlock. This hook works similarly to the existinguseFlashEditableBlockshook and adds aclickhandler that selects the nearest editable block when the click target is the root container.The nearest editable block is determined by drawing a straight line to the nearest point of the block bounding rect. Template Part blocks are excluded and the inner blocks of a Post Content block are preferred.
Testing Instructions
Screenshots or screencast
Kapture.2024-03-27.at.10.40.28.mp4