-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pattern overrides: Fix aspect ratio not working in image with overrides #62828
Pattern overrides: Fix aspect ratio not working in image with overrides #62828
Conversation
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. |
Size Change: +340 B (+0.02%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
Flaky tests detected in e1bdd7e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9664062423
|
return { | ||
sources: getAllBlockBindingsSources(), | ||
hasParentPattern: | ||
getBlockParentsByBlockName( clientId, 'core/block' ) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This adds a block editor store subscription for all bindable block, no? Any early returns we can set here to avoid it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also noticed this lookup for a parent pattern block has been added in a few places, another example here and there are more for the UI parts of pattern overrides -
gutenberg/packages/editor/src/bindings/pattern-overrides.js
Lines 16 to 20 in 7bca2fa
const [ patternClientId ] = getBlockParentsByBlockName( | |
clientId, | |
'core/block', | |
true | |
); |
We could look into using block context as a way of checking for a parent pattern, though it'd mean every (supported) block needs to subscribe to that context.
There isn't an obvious context attribute that the pattern block could provide. There's only ref
(which may be removed in the future when the block uses a slug
), and content
(which can be undefined
so might not reliable, unless it's changed so a default value is provided).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I made a PR based on this that shows how that would work - #62861.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I answered you there, but I think using context makes sense. Thanks for working on that! 🙂
…62861) * Use block context to detect presence of parent pattern * Regenerate fixtures * Update image block to use context for checking a parent pattern block exists * Rename context to `pattern/overrides` to be consistent with php code * Move pattern overrides context shim to pattern overrides hooks * Remove shim Co-authored-by: talldan <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: SantosGuillamot <[email protected]>
I can reproduce the bug in trunk and can confirm that this PR fixes it. |
@@ -508,7 +504,12 @@ export default function Image( { | |||
: __( 'Connected to dynamic data' ), | |||
}; | |||
}, | |||
[ clientId, isSingleSelected, metadata?.bindings ] | |||
[ | |||
arePatternOverridesEnabled, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
arePatternOverridesEnabled, | |
patternOverridesEnabled, |
We can remove the verb from the variable in follow-up PRs.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM and works as expected.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @SantosGuillamot, this is working well for me, and it's a nice minimal change.
…es (#62828) * Remove only supported attributes * Try alternative approach * Update comment * Return early while editing the original pattern * Move conditional inside conditional * Add missing check * Go back to running always bindings * Use block context to detect presence of parent pattern for overrides (#62861) * Use block context to detect presence of parent pattern * Regenerate fixtures * Update image block to use context for checking a parent pattern block exists * Rename context to `pattern/overrides` to be consistent with php code * Move pattern overrides context shim to pattern overrides hooks * Remove shim Co-authored-by: talldan <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: SantosGuillamot <[email protected]> * Reduce diff * Change array order --------- Co-authored-by: SantosGuillamot <[email protected]> Co-authored-by: talldan <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: cbravobernal <[email protected]>
I just cherry-picked this PR to the wp/6.6 branch to get it included in the next release: 49bba72 |
What?
Fixes #62814.
In order to do so, it includes the changes from this pull request, where block context is used to detect presence of parent pattern for overrides.
Why?
As reported in the mentioned issue, the aspect ratio, and other attributes, don't work as expected when editing an image with pattern overrides.
How?
Ensuring that we only skip setting non-bound attributes when users are actually overriding a pattern, and not when they are editing the original one. To do so, it check if the block has a parent pattern with the code of this other pull request.
Testing Instructions
There are three main issues to consider:
Before
Aspect.ratio.not.working.mp4
After
Aspect.ratio.working.mp4