-
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
Respect custom aspect ratio #52286
Respect custom aspect ratio #52286
Conversation
Size Change: +48 B (0%) Total Size: 1.42 MB
ℹ️ View Unchanged
|
Flaky tests detected in 3441ffb. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5464377920
|
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 for working on this. This seems like a simple fix for the issue at hand. We can address other issues in follow up.
2fdb05a
to
3441ffb
Compare
* add image width and height via css inline style, update width and height attrs to be string * keep width and height as attributes too, keep the attributes as numbers * updates image fixtures
* Post and Comment Template blocks: Change render_block_context priority to 1 (#52364) * Footnotes: fix lingering format boundary attr (#52439) * Footnotes: Fix incorrect anchor position in Firefox (#52425) * Scope CSS rules for the wp admin reset to js support only. (#52376) * Fix: Patterns & template parts: remove "apply globally" option from block settings (#52160) * Advanced styles panel: add an early return * Update index.js * Minor styling changes * Use array of features --------- Co-authored-by: George Mamadashvili <[email protected]> * make the body of the editor minimmum viewport height so that smaller contents maintain clickability (#52406) * Patterns: Add renaming, duplication, and deletion options (#52270) * Patterns: Update manage pattern links to go to site editor if available (#52403) * [Patterns] Separate sync status into a filter control (#52303) Co-authored-by: Saxon Fletcher <[email protected]> Co-authored-by: Glen Davies <[email protected]> * Patterns: Add missing decoding entities processing in Patterns and Template/Parts pages (#52449) * Fix document title icon appearance (#52424) * Quote block: Add transform to paragraph (#51809) * Add ungroup transform as transform to p * Lint * Update test and snapshot. --------- Co-authored-by: Juan Aldasoro <[email protected]> * remove sidebar group descriptions (#52453) * Patterns: alternative grid layout to improve keyboard accessibility (#52357) * add sync tooltip (#52458) * Patterns: Update section heading levels (#52273) * Ensure that the unsaved title is not persisted when reopening the modal (#52473) * Iframe: avoid asset parsing & fix script localisation (#52405) * Iframe: avoid asset parsing & fix script localisation * Add e2e test for script localisation * Update descriptions (#52468) * Footnotes: show in inserter and placehold (#52445) * Footnotes: show in inserter and placehold * Fix placeholder block membrane; fix copy; add icon, label --------- Co-authored-by: Miguel Fonseca <[email protected]> * Fix: Focus loss on navigation link label editing on Firefox. (#52428) * Update tooltip (#52465) * Refactor, document, and fix image block deprecations (#52081) * Refactor, document, and fix image block deprecations * Fix v5 attributes & supports * Fix v1 & v2 deprecation tests * Rename deprecated test descriptions * Respect custom aspect ratio (#52286) * add image width and height via css inline style, update width and height attrs to be string * keep width and height as attributes too, keep the attributes as numbers * updates image fixtures * RichText/Footnotes: make getRichTextValues work with InnerBlocks.Content (#52241) * RichText/Footnotes: make getRichTextValues work with InnerBlocks.Content --------- Co-authored-by: Miguel Fonseca <[email protected]> * Footnotes: save numbering through the entity provider (#52423) * Footnotes: save numbering through the entity provider * Add sup so no styling is needed at all * Migrate old format * Restore old styles, fix nested attribute queries * Fix anchor selection * Migrate markup in entity provider instead * Fix tests * Fix typo * Fix comment --------- Co-authored-by: Miguel Fonseca <[email protected]> * Revert "Post editor: Require confirmation before removing Footnotes (#52277)" (#52486) This reverts commit e6426ea. * List block: Fix selected type option (#52472) * Library - make pattern title clickable (#51898) * Use button inside title * Remove href * Preserve roving tab index * Fix link colors to match trunk $gray-600 * Remove redundant var * Amend colors as per review * remove old files again --------- Co-authored-by: scruffian <[email protected]> * remove status icon (#52457) * Rename block theme activation nonce variable. (#52398) --------- Co-authored-by: Bernie Reiter <[email protected]> Co-authored-by: Ella <[email protected]> Co-authored-by: Aki Hamano <[email protected]> Co-authored-by: Andrea Fercia <[email protected]> Co-authored-by: Carolina Nymark <[email protected]> Co-authored-by: George Mamadashvili <[email protected]> Co-authored-by: Andrei Draganescu <[email protected]> Co-authored-by: Aaron Robertshaw <[email protected]> Co-authored-by: Kai Hao <[email protected]> Co-authored-by: Saxon Fletcher <[email protected]> Co-authored-by: Glen Davies <[email protected]> Co-authored-by: James Koster <[email protected]> Co-authored-by: Rich Tabor <[email protected]> Co-authored-by: Juan Aldasoro <[email protected]> Co-authored-by: Miguel Fonseca <[email protected]> Co-authored-by: Jorge Costa <[email protected]> Co-authored-by: Alex Lende <[email protected]> Co-authored-by: Héctor <[email protected]> Co-authored-by: Petter Walbø Johnsgård <[email protected]> Co-authored-by: Dave Smith <[email protected]> Co-authored-by: scruffian <[email protected]> Co-authored-by: Peter Wilson <[email protected]>
export default [ v5, v4, v3, v2, v1 ]; | ||
/** | ||
* Deprecation for adding width and height as style rules on the inner img. | ||
* It also updates the widht and height attributes to be strings instead of numbers. |
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.
It looks like the width and height are still numbers here.
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 think the PR description remained behind on the actual end result of what's implemented. The updating to string never happened and this comment is wrong.
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.
The updating to string never happened and this comment is wrong.
Do you know if that is that stil true for WordPress 6.3.2? We're seeing a lot of 'block recovery' in the editor for images like these:
<!-- wp:image {"id":1,"width":200,"height":100,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://example.com/wp-content/uploads/2023/10/example.svg" alt="" class="wp-image-1" style="width:200px;height:100px"/></figure>
<!-- /wp:image -->
Updating the width
and height
attributes from numbers to strings ("200px"
and "100px"
) seems to fix the blocks.
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.
Do you know if that is that still true for WordPress 6.3.2?
Currently, they should be getting migrated to strings. However, it will only migrate for valid markup.
We're seeing a lot of 'block recovery' in the editor for images like these:
Yeah, that markup looks invalid. If the block attributes are correct, the img
's width
and height
attributes should be there. Or if the markup is correct, the block attributes should be strings with px
units.
Do you happen to know if that markup was generated with gutenberg trunk (at some point), a proper gutenberg plugin release, or a full WordPress release? If it was generated with some release code, we probably need to update some deprecations—we shouldn't be getting block recovery errors from release code.
Updating the width and height attributes from numbers to strings ("200px" and "100px") seems to fix the blocks.
Yep, this is what I was going to suggest. It's the best workaround for now.
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.
If it was generated with some release code, we probably need to update some deprecations—we shouldn't be getting block recovery errors from release code.
That is what I was thinking too.
Do you happen to know if that markup was generated with gutenberg trunk (at some point), a proper gutenberg plugin release, or a full WordPress release?
Not Gutenberg trunk. I assumed a full WordPress release, but I now discovered that the Gutenberg plugin is also installed (inactive, so I'm not sure if it has been active in the past and with which version).
We've updated all posts in the meantime, which has resolved the issue for our client.
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.
#56916 was submitted, probably related to this PR.
Upgrading from 6.2 to 6.3 or 6.4 seems to break the Image block. This might be related to the fact that in 6.2, the width
and height
attribute values are number types.
width, | ||
height, |
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.
These need units since only numbers are saved.
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.
It seems it works without units by virtue of React being awesome. If the keys are width and height in a styles attribute in JSX the numbers will default to 'px`
What?
Fixes #51929. Alternative to #52220
Why?
How?
Testing Instructions
Screenshots or screencast
n/A