Block Bindings: Add support for Cover block background image#74032
Closed
Block Bindings: Add support for Cover block background image#74032
Conversation
Co-authored-by: cbravobernal <37012961+cbravobernal@users.noreply.github.com>
Co-authored-by: cbravobernal <37012961+cbravobernal@users.noreply.github.com>
ockham
requested review from
ajitbohra,
fabiankaegy and
spacedmonkey
as code owners
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @Copilot, @jptweb. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. 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. |
cbravobernal
added
[Type] Enhancement
Co-authored-by: cbravobernal <37012961+cbravobernal@users.noreply.github.com>
Co-authored-by: cbravobernal <37012961+cbravobernal@users.noreply.github.com>
Co-authored-by: cbravobernal <37012961+cbravobernal@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Add support for block bindings in cover block background image
Block Bindings: Add support for Cover block background image
Dec 16, 2025
|
Flaky tests detected in a650985. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20274212268
|
cbravobernal
requested changes
Dec 16, 2025
Contributor
cbravobernal
left a comment
cbravobernal
left a comment
There was a problem hiding this comment.
The code is working on the frontend, but we still have some bugs.
-
- When I bind the image for the cover, the overlay opacity is 100 by default, which means the frontend will show a black image. Please confirm is a common issue in WP Cover block for default images and fix it if not.
-
- It does not support pattern overrides. And all bindable attributes should support it.
- Automatically adjust dimRatio from 100 to 50 when image is set via bindings - Add pattern overrides detection to prevent media controls showing when overrides are enabled - Pass arePatternOverridesEnabled prop to block controls Co-authored-by: cbravobernal <37012961+cbravobernal@users.noreply.github.com>
Contributor
Author
Both issues have been addressed in commit 6708fa0: Issue 1 (dimRatio 100% showing black image): This is the default behavior of the Cover block. When an image is added via the UI, the block automatically adjusts dimRatio from 100 to 50 to make the image visible. However, this logic wasn't running for bound images. I've added a useEffect hook that detects when an image is set via bindings and automatically adjusts dimRatio to 50, matching the same behavior as manually adding an image. Issue 2 (Pattern overrides not working): Added full pattern overrides support:
The block now properly supports both pattern overrides and regular block bindings for the |
- Remove unused prevHasImageBinding ref - Extract image change detection logic for better readability - Add clarifying comments Co-authored-by: cbravobernal <37012961+cbravobernal@users.noreply.github.com>
- Initialize refs with undefined to properly track initial state - Clarify imageJustSet logic to only trigger on first image set, not on changes - Fix indentation for EmbedVideoUrlInput Co-authored-by: cbravobernal <37012961+cbravobernal@users.noreply.github.com>
- Explicitly set useRef(undefined) for clarity - Use falsy check (!prevId.current) instead of explicit undefined check - This handles null, undefined, 0, and empty string cases consistently Co-authored-by: cbravobernal <37012961+cbravobernal@users.noreply.github.com>
cbravobernal
requested changes
Dec 16, 2025
Contributor
cbravobernal
left a comment
cbravobernal
left a comment
There was a problem hiding this comment.
Can you please tell me which takes precedence if you bind both url and id and why?
Contributor
Author
When both The logic (in
Why this precedence:
If both are bound and both have values, only |
Contributor
@copilot And what would happen if |
|
Size Change: -547 B (-0.02%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
cbravobernal
requested changes
Dec 17, 2025
Contributor
cbravobernal
left a comment
cbravobernal
left a comment
There was a problem hiding this comment.
@copilot And what would happen if id does not point to an image?
Contributor
Author
If Non-parallax/non-repeated mode (line 171):
Parallax/repeated mode (line 191):
Fallback behavior:
If Non-parallax/non-repeated mode (line 171):
Parallax/repeated mode (line 191):
Fallback behavior: |
Contributor
|
Let's close the PR and use it as a possible reference. |
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.
Summary
This PR adds complete block bindings support for the Cover block's
idandurlattributes, enabling dynamic image sources for cover backgrounds through block bindings and pattern overrides.Issues Addressed (from PR review comments)
Issue 1: dimRatio Overlay (100% opacity showing black image)
Problem: When binding an image, the overlay remained at 100% opacity, showing a black cover instead of the image.
Solution: Added automatic dimRatio adjustment from 100 to 50 when an image is FIRST set via bindings. The logic properly detects the initial image set (from falsy to truthy) and only triggers once, matching the behavior when users manually select an image.
Implementation Details:
idandurlvaluesIssue 2: Pattern Overrides Not Working
Problem: Pattern overrides were not functional - the UI and behavior didn't support them.
Solution: Added full pattern overrides support with proper detection and UI adjustments.
Implementation Details:
metadata?.bindings?.__default?.source === 'core/pattern-overrides'__defaultbindingsComplete Feature Set
PHP (Server-Side):
idandurlattributesJavaScript (Editor):
Tests:
idandurlbindingsCode Quality
Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.