Optimize getVisibleElementBounds in scrollable cases
#66546
Merged
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
stokesman
added
[Type] Code Quality
|
Size Change: -7 B (0%) Total Size: 1.81 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 5edd745. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11566904008
|
ramonjd
reviewed
Oct 29, 2024
| if ( isScrollable( currentElement ) ) { | ||
| childBounds = currentElement.getBoundingClientRect(); | ||
| // Children won’t affect bounds unless the element is not scrollable. | ||
| if ( ! isScrollable( currentElement ) ) { |
There was a problem hiding this comment.
I just gave this a test run. Good spotting!
Here's this branch testing the scenarios from previous PRs:
2024-10-29.15.43.48.mp4
2024-10-29.15.43.22.mp4
t-hamano
reviewed
Oct 30, 2024
Do you mean whether there are alternatives to this PR? |
|
I’m pretty confident this would be okay to land. I’d kept it drafted mostly because I didn’t complete the testing instructions. I was also interested in testing with Aki’s cool plugin as I figured it’d be a good case where a performance difference could be significant. I just now got around to trying that but only got as far as noticing that the toolbar still shifts with the scrolling 😵💫. I then switched to trunk and saw the same thing: scrollable-trunk.mp4So this PR still appears okay but it seems like the detection of elements that can be skipped is lacking somehow. |
|
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. |
|
Thanks for the PR!
Yes, I reported issue #66112 because I was testing my plugin with WP 6.7 😅 I was trying to figure out why my plugin couldn’t fix the toolbar positioning issue, and I found that it occurred when an element was inside a scrollable element. Below is the code to reproduce the issue: Detailswp.blocks.registerBlockType( 'test/horizontally-scrollable', {
apiVersion: 3,
title: 'Horizontally scrollable block',
edit: () => {
return wp.element.createElement(
'div',
wp.blockEditor.useBlockProps( {
style: {
overflowX: 'scroll',
background: 'lightgray',
},
} ),
wp.element.createElement(
'div',
{
style: {
width: '2000px',
height: '100px',
},
},
wp.element.createElement(
'button',
{},
'Button inside scrollable element'
)
)
);
},
} );
wp.blocks.registerBlockType( 'test/vertically-scrollable', {
apiVersion: 3,
title: 'Vertically scrollable block',
edit: () => {
return wp.element.createElement(
'div',
wp.blockEditor.useBlockProps( {
style: {
overflowY: 'scroll',
background: 'lightgray',
height: '200px',
},
} ),
wp.element.createElement(
'div',
{
style: {
height: '1000px',
},
},
wp.element.createElement(
'button',
{},
'Button inside scrollable element'
)
)
);
},
} );The video below reproduces the issue, and shows that if I hide the descendants of the scrollable element, the block toolbar works correctly: b93c32a51176adc777e68711535b51e0.mp4 |
ramonjd
approved these changes
Oct 31, 2024
|
If @t-hamano is happy with this PR, then so am I 😄 Thank you! |
t-hamano
approved these changes
Nov 1, 2024
There was a problem hiding this comment.
This PR is about refactoring, so let's ship it 👍
However, as discovered in this comment, I still think it's not ideal with regard to the block toolbar position. Therefore, I would like to reopen #66188. Let's exploring the ideal approach in #66438.
Right, it seems #66188 fixed the scrollable issue for reduced test cases but for some reason not on your plugin. Thanks for reviewing folks ❤️. We might as well get this in. |
This was referenced Nov 3, 2024
getdave
added
the
Backport to WP 6.7 Beta/RC
github-actions
bot
removed
the
Backport to WP 6.7 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Nov 5, 2024
Co-authored-by: ramonjd <[email protected]> Co-authored-by: t-hamano <[email protected]>
github-actions
bot
added
the
Backported to WP Core
|
I just cherry-picked this PR to the wp/6.7 branch to get it included in the next release: 65e6363 |
karthick-murugan
pushed a commit
to karthick-murugan/gutenberg
that referenced
this pull request
Nov 13, 2024
Co-authored-by: ramonjd <[email protected]> Co-authored-by: t-hamano <[email protected]>
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?
A minor improvement of
getVisibleElementBounds.Why?
To avoid extraneous DOM method invocations. I think it also makes the code more clear. The performance probably isn’t really an issue. Scrollable elements aren’t expected to be the primary use case of the utility anyway.
How?
Skips iteration of children when the parent is scrollable.
Testing Instructions
Scrollable block for use in reproduction/testing
Verify the extraneous calls on trunk (optional)
It seems pretty clear just reading the source of the function but if your like me you want to run the experiment.
Diff to log iterations when the element is scrollable
Navigation block with child extending beyond the nav block's bounds
This will confirm that the original fix from #62711 (comment) still works.
Scrollable block toolbars
Follow the nice and detailed instructions on #66112
TL;DR version
Block Popovers and Visualizers
Screenshots or screencast
Making sure the toolbar positioning works as expected on this branch
block-toolbar-positioning.mp4