Block Editor: Integrate Block Bindings with Block Fields #75064
+976
−28
Conversation
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
Implements integration of Block Bindings functionality directly into Block Fields UI, addressing issue #75022. This eliminates duplication between the "Attributes" panel and Block Fields while maintaining full backward compatibility. Key Changes: **Feature Flag** - Added `__experimentalBlockFieldsBindings` flag for independent testing - Located in lib/experimental/editor-settings.php **New Components** (packages/block-editor/src/hooks/block-fields/bindings/) - `useBindingState` - Hook returning binding state for fields (bound status, editability, validity) - `BindingFieldBadge` - Visual indicator showing binding status with appropriate icons (link/lock/warning/linkOff) - `BindingMenu` - Popover for managing bindings, reusing BlockBindingsSourceFieldsList - `withBindingBadge` - HOC wrapper adding binding badges alongside field controls - `isFieldBindable` - Utility checking if field supports bindings - `getCompatibleFields` - Type matching utility for source/field compatibility **Integration** - Modified BlockFields component to wrap rich-text fields with binding badges via HOC - Block Fields remains agnostic of bindings - data flow handled by existing edit.js layer - Attributes panel now hidden when both Block Fields and bindings integration active **Styling** - Reuses established "connected" UI patterns (purple color primitives) - Uses var(--wp-block-synced-color) for visual consistency with template parts/synced patterns - Subtle backgrounds and hover states following existing design system **Architecture** - UI-only integration - NO data interception code needed - Existing edit.js handles all binding data flow (computedAttributes/setBoundAttributes) - Pattern-overrides source filtered from UI - Initial scope: rich-text fields only (proof-of-concept) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Adds checkbox in Gutenberg > Experiments admin page to enable/disable the Block Fields Bindings integration feature. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Adds comprehensive E2E test coverage for the Block Fields Bindings integration: **Test Coverage:** - Binding badge visibility next to rich-text Block Fields - Badge click opens binding menu with available sources - Pattern-overrides source is filtered from UI - Connecting fields to binding sources via badge menu - Badge shows source label when connected - Disconnecting bindings via badge menu - Read-only icon display for non-editable bindings - Error state for invalid binding sources - Attributes panel hiding when integration active - Bound values display in Block Fields - Editing editable bound fields - Read-only enforcement for non-editable fields - Badges only appear on bindable fields **Test Setup:** - Uses existing gutenberg-test-block-bindings plugin - Enables both feature flags via experiments page: - __experimentalContentOnlyInspectorFields - __experimentalBlockFieldsBindings - Tests paragraph block with content field Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The previous approach of enabling flags via the admin UI didn't work because the JavaScript feature flags are set during page load via wp_add_inline_script. Updated to enable flags via REST API in beforeAll hook so they're active when the editor loads.
Adds __experimentalBlockBindingsSupportedAttributes to enable binding the content attribute to data sources. Required for Block Fields Bindings integration to work with paragraph blocks. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…bute" This reverts commit e955ac4.
- Fix useBindingState to check editor settings instead of block.supports for bindable attributes (__experimentalBlockBindingsSupportedAttributes) - Update E2E tests to use setGutenbergExperiments() instead of REST API Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
ockham
added
[Type] Experimental
- Fix SCSS import: Add missing @use for variables in styles.scss - Fix icon import: Use 'error' icon instead of non-existent 'warning' - Fix getCompatibleFields: Use selectors from select(blocksStore) instead of unlocking at module level Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fix the binding badge and menu to use the proper Menu component API: - Replace custom Button + state with Menu.TriggerButton - Use Menu.Popover instead of standalone Popover component - Wrap menu items in Menu.Group for proper structure - Remove manual onClose handling (Menu handles automatically) This fixes the rendering issue where the menu was showing only "N" instead of the full menu content. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fix BlockFields to use computed attributes passed as props instead of fetching raw attributes from the store. This ensures Block Fields display bound values when a binding is connected. The issue was that BlockFields was calling getBlockAttributes() directly, bypassing the computed attributes with bound values that edit.js injects. Now BlockFields accepts attributes as a prop (with fallback to store). Also add E2E test to verify Block Field input updates when binding is connected, not just the canvas. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Contributor
Author
|
AFAICT, the main blocker here is this problem: #73423 (comment) |
|
Size Change: +1.48 kB (+0.05%) Total Size: 3 MB
ℹ️ View Unchanged
|
Contributor
I thought that issue was solved after #73863, but I realize now what has happened. The change here accidentally undid some of the work 🤦 : Grabbing attributes from the store like that means the binding values won't be included. I guess end to end tests would have been helpful and caught the issue. Edit: To resolve the issue we could consider continuing with #75137, or alternatively carefully partially reverting #74574. Let me know what you think. |
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.
LLM-created attempt at #75022. Doesn't work yet. (Even after a lengthy planning session and subsequent tweaks, Claude didn't manage to actually get this to work.)
Original commit message.
Implements integration of Block Bindings functionality directly into Block Fields UI, addressing issue #75022. This eliminates duplication between the "Attributes" panel and Block Fields while maintaining full backward compatibility.
Key Changes:
Feature Flag
__experimentalBlockFieldsBindingsflag for independent testingNew Components (packages/block-editor/src/hooks/block-fields/bindings/)
useBindingState- Hook returning binding state for fields (bound status, editability, validity)BindingFieldBadge- Visual indicator showing binding status with appropriate icons (link/lock/warning/linkOff)BindingMenu- Popover for managing bindings, reusing BlockBindingsSourceFieldsListwithBindingBadge- HOC wrapper adding binding badges alongside field controlsisFieldBindable- Utility checking if field supports bindingsgetCompatibleFields- Type matching utility for source/field compatibilityIntegration
Styling
Architecture
What?
Closes
Why?
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast