You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When adding a caption to an Embed block in the WordPress block editor, there is an unnecessary extra space between the caption and the embedded content. This issue is visible across multiple embed variations, including Spotify and Twitter embeds. The inconsistency negatively impacts the alignment and overall presentation of the embed blocks.
Step-by-step reproduction instructions
Log in to the WordPress dashboard and navigate to a post or page editor.
Add an Embed block (e.g., Spotify or Twitter).
Paste a valid URL to embed the content.
Add a caption below the embed by clicking the “Add caption” option.
Observe the extra space between the caption and the embedded content.
To add to the unexpected gap issue, when adding a playlist link to the Spotify embed block, the gap between the song and the caption becomes significantly larger compared to embedding a single song. This is a noticeable problem that impacts the overall layout and presentation of the content. I've reviewed the issue and agree that this needs to be addressed.
So I spent some time identifying the issue on local, I could replicate the issue and came to a conclusion that the issue is with the aspect-ratio altering classes present in Advance CSS section. Currently we have 7 variations available namely:
.wp-embed-aspect-21-9
.wp-embed-aspect-18-9
.wp-embed-aspect-16-9
.wp-embed-aspect-4-3
.wp-embed-aspect-1-1
.wp-embed-aspect-9-16
.wp-embed-aspect-1-2
They set the aspect ratio for the iframe that's present inside them ( You can try changing the default 16-9 class to something different to see the changes on the frontend )
For YouTube embeds/iframes these aspect ratios work fine as Youtube embeds scale well on these ratios.
However for Spotify, that's not the case, so for that reason I will raise a PR to add 2 more variations: wp-embed-aspect-5-3 and wp-embed-aspect-5-2 which will reduce the extra spacing below the Spotify Embed
Check the screencast below for better understanding ( red border is just to show the extra spacing ):
Description
When adding a caption to an Embed block in the WordPress block editor, there is an unnecessary extra space between the caption and the embedded content. This issue is visible across multiple embed variations, including Spotify and Twitter embeds. The inconsistency negatively impacts the alignment and overall presentation of the embed blocks.
Step-by-step reproduction instructions
Screenshots, screen recording, code snippet
Environment info
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.
The text was updated successfully, but these errors were encountered: