Block Bindings: Add synced-styles source for style attr syncing#77459
Draft
Block Bindings: Add synced-styles source for style attr syncing#77459
Conversation
mikachan
added
[Type] Enhancement
github-actions
Bot
added
[Package] Editor
|
Size Change: +969 B (+0.01%) Total Size: 7.75 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in 7ad5c69. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/24573879281
|
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?
Part of #76330
Adds a
core/synced-stylesblock bindings source that syncs style attributes across sibling inner blocks via a shared parent block attribute.Why?
When a block family has multiple instances of the same inner block (e.g.
accordion-headinginside an accordion), there's no built-in way to keep their styles in sync. This PR introduces a generic mechanism for that via the block bindings API, wired up initially for the Accordion block.How?
core/synced-stylesJS and PHP block bindings source. The canonical styles live on the parent block as asyncedStylesattribute, shared to children viaprovidesContext. When a child'sstyles change,
setValueswalks the block tree to find the providing ancestor and writes the update back to it, propagating to all siblings via context.replacePatternOverridesDefaultBindingis updated to also expand__defaultbindings forcore/synced-styles(preservingargsso the context key is retained per-attribute).accordion/block.jsongains asyncedStylesattribute and aprovidesContextentry.accordion-heading/block.jsondeclares the correspondingusesContextkey.__defaultbinding injected automatically.accordion-headingis excluded from the generic block bindings panel. Instead, Unlink styles / Link styles actions appear in the block settings dropdown (three-dot menu), in the same group asCopy/Paste styles. Unlinking snapshots the current resolved styles into the block's own attributes; relinking clears them and restores the binding.
BlockStyleSettingsMenuControlsFill/Slot toblock-editorfor placing style-related actions alongside copy/paste styles in the dropdown — without coupling block-specific logic to the genericdropdown component.
BlockListBlockuses raw store attributes (not binding-resolved computed attributes) when applying CSS classes and inline styles,setValuesalso writes resolved values back to each bound sibling'sown attributes so style changes are immediately reflected in the editor.
metadata.bindings, which linked headings already have.Testing Instructions
Screenshots or screencast
Use of AI Tools
This PR was drafted with assistance from Claude Code (Anthropic). All generated code has been reviewed and tested by the author.