Fix layout shift caused by video tag in Video block lacking width and height
#70293
+95
−1
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
|
Size Change: +26 B (0%) Total Size: 1.89 MB
ℹ️ View Unchanged
|
|
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: @porg. 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. |
westonruter
commented
Jun 3, 2025
| @@ -3,6 +3,7 @@ | |||
| box-sizing: border-box; | |||
| video { | |||
| width: 100%; | |||
| height: auto; | |||
There was a problem hiding this comment.
Without this, the aspect-ratio doesn't cause the height of the element to be the intrinsic height based on the resized width. Notice the white bars on the top and bottom of the video, causes by the default object-fit:contain styles when height:auto is absent:
| Before | After |
|---|---|
 |
 |
|
Flaky tests detected in c048eb8. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/15459358151
|
|
@Mamaduka anything else you want to see here prior to working on a backport PR for core? |
westonruter
commented
Jul 16, 2025
| @@ -72,6 +72,7 @@ function VideoEdit( { | |||
| } | |||
| }, [ poster ] ); | |||
|
|
|||
| // TODO: Whether the video was obtained from the media library or was provided by URL, obtain the `videoWidth` and `videoHeight` of the video once its metadata has loaded and persist in the block attributes. | |||
There was a problem hiding this comment.
I have this TODO here, but it's something that can/should be addressed in a another PR. Namely, if someone adds a remote URL which can load a random image with differing dimensions, then persisting the dimensions would be bad. See #6652 (comment)
There was a problem hiding this comment.
That said, it would be nice if the layout shifts didn't happen in the editor. But squashing them on the frontend is the most important.
| } | ||
|
|
||
| // If the 'id' attribute wasn't for an attachment, abort. | ||
| if ( get_post_type( $attributes['id'] ) !== 'attachment' ) { |
There was a problem hiding this comment.
my brain expects this to be a Yoda conditional, alas equality is is not.
| $metadata = wp_get_attachment_metadata( $attributes['id'] ); | ||
| if ( | ||
| ! isset( $metadata['width'], $metadata['height'] ) || | ||
| ! ( is_int( $metadata['width'] ) && is_int( $metadata['height'] ) ) || |
There was a problem hiding this comment.
love that PHP inconsistency
Mamaduka
reviewed
Jul 18, 2025
There was a problem hiding this comment.
Sorry for the late reply, @westonruter!
I like the idea of using a server-side rendering callback to fix this for Video blocks, without requiring users to re-save the content.
There's a request to add aspect-ratio controls to the block (#60911), which would be nice to keep in mind, but I don't think it should be a blocker here. Maybe something that will resolve the new todo item.
| @@ -120,6 +119,7 @@ function gutenberg_reregister_core_block_types() { | |||
| 'tag-cloud.php' => 'core/tag-cloud', | |||
| 'template-part.php' => 'core/template-part', | |||
| 'term-description.php' => 'core/term-description', | |||
| 'video.php' => 'core/video', | |||
There was a problem hiding this comment.
I think this will be the only part that needs to be backported. Then index.php will be automatically synced.
There was a problem hiding this comment.
@Mamaduka Sorry, where would this be backported to in core? I'm having trouble finding the corresponding spot in the wordpress-develop codebase. Or do you mean that the video.php file itself is what will need to be backported as src/wp-includes/blocks/video.php?
There was a problem hiding this comment.
Sorry, false alarm. It looks like this part is fully automated in the core package sync - https://github.com/WordPress/wordpress-develop/blob/trunk/tools/release/sync-stable-blocks.js.
There was a problem hiding this comment.
@Mamaduka OK, great. So what label is needed to bypass the failing workflow? And this can now be merged?
There was a problem hiding this comment.
Added the label and retested flaky CI jobs. It should be good to merge after all checks pass.
Co-authored-by: George Mamadashvili <[email protected]>
…ix/video-block-layout-shift
Mamaduka
added
the
No Core Sync Required
adamsilverstein
added a commit
to adamsilverstein/gutenberg
that referenced
this pull request
Jul 31, 2025
… and `height` (WordPress#70293) * Prevent layout shift in Video block when width/height metadata is available * Add todo for capturing dimensions in JS to persist in block attributes * Only set auto:height on videos with width and height set * Use height:auto regardless of whether the width/height attributes were supplied * Add explanation for why inline style is added * Fix syntax of attr() * Update since tag Co-authored-by: George Mamadashvili <[email protected]> * Fix other since tag --------- Unlinked contributors: porg. Co-authored-by: westonruter <[email protected]> Co-authored-by: adamsilverstein <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: priethor <[email protected]>
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.
What?
Fixes #52185
When adding a video from the Media Library to a Video block, this supplies the
widthandheightattributes for the Video based on the dimensions in metadata if available. The dimensions are also supplied in an inlineaspect-ratiostyle (due to w3c/csswg-drafts#7524) to go along with aheight:autostyle (originally proposed in #37052 as a follow-up to #30092). We can't yet useaspect-ratiowithattr()in a rule like this since it's not yet supported in Firefox or Safari:The changes in this PR are also available in a standalone plugin for existing sites to use before the change is published in a Gutenberg release: Layout-stabilized Video Block.
See blog post with full writeup: Eliminating Layout Shifts in the Video Block
Why?
This eliminates a layout shift which occurs while the video loads. The result is an improved Cumulative Layout Shift (CLS) metric for Core Web Vitals.
Testing Instructions
Screenshots or screencast
intrinsic-dimensions-before.webm
intrinsic-dimensions-after.webm