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

Embed block: Inline preview cut-off when editing URL #4059

Closed
fluiddot opened this issue Sep 30, 2021 · 1 comment · Fixed by #4072
Closed

Embed block: Inline preview cut-off when editing URL #4059

fluiddot opened this issue Sep 30, 2021 · 1 comment · Fixed by #4072
Assignees
Labels
Embed block [Type] Bug Something isn't working

Comments

@fluiddot
Copy link
Contributor

Describe the bug
After creating an Embed block and only depending on the provider used, editing the URL with one from a different provider can lead to a cut-off of the inline preview.

To Reproduce

  1. Add an Embed block.
  2. Set a YouTube URL (example: https://www.youtube.com/watch?v=ssfHW5lwFZg).
  3. Tap on the pencil icon button, located in the toolbar, to edit the URL.
  4. Set an Instagram URL (example: https://www.instagram.com/p/Bl6LgZgFDOm).
  5. Observe that the inline preview is cut-off.

Expected behavior
Inline previews should display the entire content.

Screenshots

embed-block-preview-cut-off.mp4

Smartphone (please complete the following information):

  • Device: Simulator - iPhone 12 Pro Max
  • OS: iOS 14.5
  • Version 18.3

Additional context
Similar behavior can be reproduced following the same reproduction steps in the web version of the editor.

Screenshot 2021-09-30 at 13 57 52

@fluiddot fluiddot added [Type] Bug Something isn't working Embed block labels Sep 30, 2021
@fluiddot fluiddot self-assigned this Sep 30, 2021
@fluiddot
Copy link
Contributor Author

I compared the HTML produced by this case and creating an Instagram embed from scratch and looks like, in the first case, it's adding extra attributes that might be leading to the cut-off, specifically the following ones:

  • "responsive":true
  • "className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"

HTML of setting Instagram URL to YouTube embed:

<!-- wp:embed {"url":"https://www.instagram.com/p/Bl6LgZgFDOm","type":"rich","providerNameSlug":"instagram","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram wp-embed-aspect-16-9 wp-has-aspect-ratio">
    <div class="wp-block-embed__wrapper">
https://www.instagram.com/p/Bl6LgZgFDOm
    </div>
</figure>
<!-- /wp:embed -->

HTML of Instagram embed:

<!-- wp:embed {"url":"https://www.instagram.com/p/Bl6LgZgFDOm","type":"rich","providerNameSlug":"instagram"} -->
<figure class="wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram">
    <div class="wp-block-embed__wrapper">
https://www.instagram.com/p/Bl6LgZgFDOm
    </div>
</figure>
<!-- /wp:embed -->

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Embed block [Type] Bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant