-
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
DRY up ContentBlocksList and BlockInspectorLockedBlocks #51281
Conversation
Extract BlockQuickNavigation out of ContentBlocksList and BlockInspectorLockedBlocks so that we're not repeating the same code that outputs a list of block navigation links.
import BlockIcon from '../block-icon'; | ||
import { unlock } from '../../lock-unlock'; | ||
|
||
export default function BlockQuickNavigation( { clientIds } ) { |
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.
Not certain about what to name this component.
Size Change: -127 B (0%) Total Size: 1.39 MB
ℹ️ View Unchanged
|
getBlockName, | ||
getBlockEditingMode, | ||
} = unlock( select( blockEditorStore ) ); | ||
return getClientIdsOfDescendants( [ topLevelLockedBlock ] ).filter( |
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.
This is a nice trick to get around the array/object referential equality "requirement" and avoid excessive re-renders 🥇
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.
Wait... it is? Won't filter
return a new array every time? 😅
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 sent me down a rabbit hole of optimising all of this. I made some progress but will tackle it in a separate PR 😅
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.
Sorry about that 😅 I left two more comments in other PR, where returned values need optimization.
This map select returns one dimensional array of client IDs, correct?
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.
This comment? #50643 (comment) Yes I've been looking into that.
Yes this is a one dimensional array.
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 pushed 6006434 which reduces the number of re-renders in PagePanels
and BlockQuickNavigation
by selecting the minimal amount of data. I think BlockInspector
here is as good as we can get it without creating a new selector which is not worth it right now imo.
I have more performance improvements ready but they're unrelated so they'll be in a separate PR 😀
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.
Follow-up: #51319
@apeatling: It should appear in the Block tab. Probably easiest to test patterns while editing a template or using the post editor. |
Flaky tests detected in e4421e8. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5207965918
|
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.
) * DRY up ContentBlocksList and BlockInspectorLockedBlocks Extract BlockQuickNavigation out of ContentBlocksList and BlockInspectorLockedBlocks so that we're not repeating the same code that outputs a list of block navigation links. * Add back check that ensures list items don't appear in list * Remove unnecessary CSS * Reduce amount of rerendering * Update __experimentalGetGlobalBlocksByName
const blockNames = Array.isArray( blockName ) | ||
? blockName | ||
: [ blockName ]; | ||
const clientIds = getClientIdsWithDescendants( state ); | ||
const foundBlocks = clientIds.filter( ( clientId ) => { | ||
const block = state.blocks.byClientId.get( clientId ); | ||
return block.name === blockName; | ||
return blockNames.includes( block.name ); |
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.
@noisysocks, do you remember why you introduced this change? I can't find any place that passes the block names array to this selector.
What?
Follows #50857.
Extract a reusable component out of
ContentBlocksList
andBlockInspectorLockedBlocks
so that we're not repeating the same code that outputs a list of block navigation links.Why?
Less code good.
Testing Instructions
contentOnly
lock. (Here's one.)