Skip to content
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

Extra Space Between Caption and Embedded Content in Embed Block #67859

Open
3 of 6 tasks
SainathPoojary opened this issue Dec 12, 2024 · 2 comments · May be fixed by #68014
Open
3 of 6 tasks

Extra Space Between Caption and Embedded Content in Embed Block #67859

SainathPoojary opened this issue Dec 12, 2024 · 2 comments · May be fixed by #68014
Labels
[Block] Embed Affects the Embed Block [Type] Bug An existing feature does not function as intended

Comments

@SainathPoojary
Copy link
Contributor

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

  1. Log in to the WordPress dashboard and navigate to a post or page editor.
  2. Add an Embed block (e.g., Spotify or Twitter).
  3. Paste a valid URL to embed the content.
  4. Add a caption below the embed by clicking the “Add caption” option.
  5. Observe the extra space between the caption and the embedded content.

Screenshots, screen recording, code snippet

Image

Environment info

  • WordPress: 6.8-alpha-59505
  • PHP: 8.2.26
  • Server: Apache/2.4.62 (Debian)
  • Database: mysqli (Server: 11.4.4-MariaDB-ubu2404 / Client: mysqlnd 8.2.26)
  • Browser: Chrome 131.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty-Five 1.0
  • MU Plugins: None activated
  • Plugins: None activated

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@SainathPoojary SainathPoojary added the [Type] Bug An existing feature does not function as intended label Dec 12, 2024
@himanshupathak95
Copy link
Contributor

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.

Screen.Recording.2024-12-12.at.12.13.02.mov

@Rishit30G
Copy link
Contributor

Rishit30G commented Dec 16, 2024

Hey @SainathPoojary,

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 ):

Screen.Recording.2024-12-16.at.1.28.00.PM.mov

Thanks for raising this issue 🙇🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Embed Affects the Embed Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants