Fix template part / reusable block click through on non-safari browsers #40339
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
…ents:none on child elements
talldan
added
[Type] Bug
This was referenced Apr 14, 2022
talldan
added
the
Backport to WP Beta/RC
|
Size Change: -2 B (0%) Total Size: 1.23 MB
ℹ️ View Unchanged
|
|
I think removing
MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#description This fixes the #40309 issue with Firefox and works in Chrome, Safari. Unfortunately, the #35079 bug also affects edit locking, with or without this fix. You can test this by placing the Site Title inside the reusable block. Maybe we can use the ScreencastCleanShot.2022-04-14.at.12.49.01.mp4 |
I didn't know the editor had edit locking, so I wasn't sure how to test it. 😄
A concern I'd have with |
The feature will be limited to Reusable blocks in 6.0.
I tried this idea, but the selection change still happens for RichText elements.
Good suggestion. Thanks, Dan. |
It looks like it is supposed to set gutenberg/packages/compose/src/hooks/use-disabled/index.js Lines 77 to 79 in 53977c6 |
@Mamaduka I did think of one issue here. Some of the site editor blocks (post title, author etc) update entities directly rather than using attributes, so they'd still be editable. If the edit locking feature is limited to the reusable block, then it might be ok. |
|
Using overlay works for Reusable blocks (mostly), but obscuring selection won't work for all the blocks. It is one of the reasons we're enabling edit locking only for this block. I think we'll need to define full specs of what edit locking means for various blocks before considering full implementation. |
|
Are we still aiming to get this into 6.0? If not, I will remove it from the project board and remove the backport label. Thanks! |
|
I think so - it needs a review though. I'll add some more reviewers. |
talldan
requested review from
glendaviesnz,
ramonjd,
Mamaduka,
noisysocks,
kevin940726 and
aaronrobertshaw
ramonjd
approved these changes
Apr 26, 2022
|
Thanks for reviewing! |
adamziel
pushed a commit
that referenced
this pull request
Apr 26, 2022
|
This was backported to wp/6.0 branch to be included in WordPress 6.0 Beta 3 today: 1ed0e07 |
adamziel
removed
the
Backport to WP Beta/RC
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?
Partial fix for #35079 (it's still broken in Safari)
Fixes some situations where the BlockContentOverlay was allowing click through to child elements when it wasn't supposed to.
Unfortunately Safari is still broken. The brokenness seems to be a quirk of browsers allowing inline elements (especially links) to receive clicks even when
pointer-events: noneis set (https://bugs.webkit.org/show_bug.cgi?id=239486).How?
Follows the suggestion in #40309 (comment) (props @MarieComet).
When a template part / reusable block or its child are unselected, BlockContentOverlay renders a
:beforepseudo-element as an overlay (which can be seen on hover) and also setspointer-events: noneon all its children.The
:beforeoverlay also hadpointer-events: noneset, but I don't know why. It seems like it could effectively be used to block clicks. So I've deleted that line and the overlay is now being used to prevent click through.Testing Instructions
Expected - the reusable block is selected (not the site title).