Add new block support for syncing sibling block styles#76489
Draft
Add new block support for syncing sibling block styles#76489
Conversation
mikachan
added
[Type] Enhancement
github-actions
bot
added
[Package] Block library
|
Size Change: +2.43 kB (+0.03%) Total Size: 8.75 MB
ℹ️ View Unchanged
|
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
1 participant
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?
Closes #76330
This PR adds a new
__experimentalSiblingStyleSyncblock support API that lets inner blocks of the same type automatically share style changes within a parent scope (e.g. all Accordion Heading blocks within an Accordion).Why?
When editing a repeating pattern like an accordion, users may expect a consistent appearance across all headings or content panels. Without this, they have to manually reapply the same colour, typography, or border changes to every sibling block individually. This PR introduces a "sibling style sync" system so style changes are propagated automatically, with per-block opt-out and parent-level controls to disable sync entirely.
How?
Mostly through a new block support:
__experimentalSiblingStyleSyncInner blocks declare support with:
Style groups map to specific block attributes (e.g.
colorcoverstextColor,backgroundColor,style.color).withSiblingStyleSyncHOC (in hooks/sibling-style-sync.js):setAttributesfor blocks with the support and routes style-group attributes through__experimentalUpdateSyncedBlockAttributes, which propagates the change to all linked siblings in the scope viaregistry.batch()(single undo step).__unstableMarkNextChangeAsNotPersistent, so newly inserted blocks immediately match their siblings without creating aseparate undo entry.
styleSyncUnlinkedattribute on page reload.Store additions (in store/private-actions.js, store/private-selectors.js, store/reducer.js):
__experimentalUpdateSyncedBlockAttributes,__experimentalUnlinkBlockStyleSync,__experimentalRelinkBlockStyleSync__experimentalGetSiblingStyleSyncBlocks,__experimentalGetSiblingStyleSyncScopeClientId,__experimentalIsBlockStyleSyncUnlinkedunlinkedSiblingStyleSyncBlocks(keyed by${blockName}:${clientId}) cleaned up on block removalInspector UI:
SiblingStyleSyncControl(inner block inspector): shows "Styles synced with N other X blocks" notice with an Unlink this block button; switches to a warning when unlinked, with a Re-sync styles button.SiblingStyleSyncParentControl(scope block inspector): "Style syncing" panel with a toggle per child type to globally disable sync for that type.sibling-style-sync-utils.js:
partitionAttributesByGroups: splits changed attributes into synced vs unsynced bucketsmergeStyleByGroups: merges incoming synced style sub-keys into a sibling's style without clobbering its unsynced sub-keysfindDescendantsOfType: recursive block tree search used to find all sibling candidates in a scopeApplied to the Accordion block:
syncChildStylesattribute and the parent controlThird-party block support:
This API is not specific to the Accordion block. Any block can opt in via block.json, including third-party parent blocks:
No PHP or JS registration is required beyond block.json. The sync behaviour, inspector controls, and unlink/re-sync UI are all applied automatically by the block editor for any block type that declares this support.
Testing Instructions
Screenshots or screencast
New settings under Settings in the block inspector:
Notice shown on synced inner blocks:
Use of AI Tools
This PR was developed with assistance from Claude Code and Cursor.