Skip to content
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

Docs: Use 'key' in 'editor.BlockEdit' filter code examples #58119

Merged
merged 1 commit into from Jan 23, 2024

Conversation

Mamaduka
Copy link
Member

What?

PR updates the editor.BlockEdit filter code examples and sets static key for the original BlockEdit component.

Why?

tl;dr - it is just good practice, and most folks don't need to worry about technical details.

The key prevents the BlockEdit component from remounting if its position changes after the initial render. When the key is provided, React will use it as a part of the position instead of the order in the parent component.

Remounting can have unexpected side effects and sometimes even affect the performance.

Testing Instructions

None

Copy link
Member

@fabiankaegy fabiankaegy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stupid question on the keys here. Do they not need to be a little more unique? I worry that edit as a key will result in multiple elements with the same key.

🤔

Regardless this is an improvement already

@Mamaduka
Copy link
Member Author

Not in this case, since the filter should only return one block edit component.

@fabiankaegy fabiankaegy enabled auto-merge (squash) January 23, 2024 12:44
@fabiankaegy fabiankaegy merged commit 4c96f5e into trunk Jan 23, 2024
62 checks passed
@fabiankaegy fabiankaegy deleted the docs/use-key-block-edit-filter-examples branch January 23, 2024 12:45
@github-actions github-actions bot added this to the Gutenberg 17.6 milestone Jan 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants