-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reduce number of List View re-renders while typing #51518
Conversation
"wp.data.select( 'core/block-editor' ).__unstableGetClientIdWithClientIdsTree", | ||
{ | ||
since: '6.3', | ||
version: '6.5', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the current consensus is that we won't remove deprecated APIs. We can omit targeted versions for removal, at least for now.
"wp.data.select( 'core/block-editor' ).__unstableGetClientIdsTree", | ||
{ | ||
since: '6.3', | ||
version: '6.5', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same.
Size Change: +2.83 kB (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, @noisysocks! The changes test well for me.
Do you know if there are any "penalties" for recursively calling the memoized selector?
P.S. We had some issues with getClientIdsWithDescendants
and getClientIdsOfDescendants
. See #40700.
@@ -10,37 +10,26 @@ import { useSelect } from '@wordpress/data'; | |||
import { store as blockEditorStore } from '../../store'; | |||
import { unlock } from '../../lock-unlock'; | |||
|
|||
const NON_DISABLED_EDITING_MODES = [ 'default', 'contentOnly' ]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The downside of this that once a new editing mode is added, you'll need to update this list. Not sure how realistic this risk is. A good solution would be to have two list-like arguments, allow-list and deny-list, and passing a [ 'disabled' ]
denylist.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You're right!
My first instinct was to have it so that you pass a predicate function.
getClientIdsTreeWithBlockEditingMode( ( mode ) => mode !== 'disabled' )
Then I wondered why make the selector so specific to block editing mode? It could accept a query-like object that lets you do whatever filtering you want.
getClientIdsTree( { rootBlockId: 'foo', blockEditingMode: ( mode ) => mode !== 'disabled' } )
Then I started to think I'm over-engineering this and YAGNI 😅
The selector is private and only used by List View so instead I think let's emphasise that fact by moving the !== 'disabled'
logic into the selector and renaming it to mention ListView
by name. I've done that in 2ff27b0.
That keeps things simple and doesn't prevent us from doing something generic if needed in the future.
state.settings.templateLock, | ||
state.blockListSettings, | ||
] | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When a block is disabled and its children aren't, this function will merge the children as the disabled block's siblings. I.e., this:
[ { id: 'cover', inner: [ id: 'para1' ], disabled: true }, { id: 'para2' } ]
will become:
[ { id: 'para1' }, { id: 'para2' } ]
This behavior already existed before this PR, but I find it suprising. Do we really want to display the list view tree like this? I would expect such a disabled block to be greyed out.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah this was the design decision. It mimics the list view that you get in the right hand sidebar when editing a page or using a content locked pattern.
We can always revisit based on user feedback 😀
Flaky tests detected in 2ff27b0. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5306754331
|
* Add getClientIdsTreeWithBlockEditingMode() * Rename getClientIdsTreeWithBlockEditingMode -> getListViewClientIdsTree
What?
Follows #50643.
Fixes this comment left by @Mamaduka #50643 (comment).
Reduces the number of times List View re-renders while typing into post content.
Why?
Typing performance!
How?
__unstableGetClientIdsTree
as it's not used anymore. I checked wpdirectory.net and the only hits are plugins that bundle@wordpress/block-editor
.Testing Instructions
Screenshots or screencast <!-- if applicable -→
Before:
Kapture.2023-06-15.at.15.48.21.mp4
After:
Kapture.2023-06-15.at.15.47.30.mp4