Open
Conversation
mikachan
added
[Type] Enhancement
|
Size Change: +482 B (+0.01%) Total Size: 8.75 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in c966b8b. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23011024024
|
|
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. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a dedicated sync hook to the Tabs block so the two parallel inner-block lists (tab panels and menu items) stay in sync not only on deletions but also when blocks are inserted via paste/duplicate.
Changes:
- Extracts the tabs/menu deletion sync logic from
tabs/edit.jsinto a newuseTabMenuSynchook and extends it to handle one-sided insertions. - Implements anchor collision handling by generating unique
tab-N/tab-N-buttonanchors and updating duplicated blocks when needed. - Adds a Jest test suite covering initial mount, deletion sync, insertion sync, and anchor-conflict scenarios.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/block-library/src/tabs/use-tab-menu-sync.js | New hook that syncs core/tab and core/tabs-menu-item lists on deletions and one-sided insertions, including anchor collision resolution. |
| packages/block-library/src/tabs/test/use-tab-menu-sync.js | New unit tests for the sync hook (mount behavior, deletion, insertion, and conflict cases). |
| packages/block-library/src/tabs/edit.js | Replaces inline sync effect with useTabMenuSync and expands selection to include the tab-panel and tabs-menu clientIds. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
15 tasks
This file contains hidden or 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
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?
Follow-up to #75954, and addresses a TODO comment
Extends the Tabs Menu Item sync effect in the Tabs block to handle insertions in addition to deletions.
Why?
The Tabs block maintains two parallel lists that must stay in sync: Tab blocks inside Tab Panel and Tabs Menu Item blocks inside Tabs Menu. Previously, the sync effect only handled deletions. If a user pasted, duplicated, or dragged in a block on either side, no counterpart was created, leaving the new block orphaned and unreachable.
How?
The sync effect now detects four cases by comparing the current block lists against a snapshot from the previous render:
tab-Nanchor is generated, the tab's anchor attribute is updated, and the menu item is created with the matchingtab-N-buttonanchor.When both lists grow simultaneously (e.g. the "Add Tab" toolbar button, which already inserts both), the effect exits early since the lists are already in sync.
After each programmatic insertion, a placeholder is spliced into the
prevSyncStateRefsnapshot so the following render sees equal lengths on both sides and does not re-trigger the effect.Testing Instructions