search

ArrayHQ / atomic-blocks-theme

34 stars 14 forks source link

Bug: videos displaying incorrectly #21

Closed dartiss closed 6 years ago

dartiss commented 6 years ago

I'm suddenly seeing an issue with embedding YouTube videos. When adding a YouTube URL to a post or page and then previewing or publishing and then viewing, there is a large space above the video. At first, the video appears in the correct position and then, after half a second or less, the gap appears.

I've rolled my version of the theme back to 1.1.9 and it's the same - I don't think is an issue with the theme per se, but maybe a change in Gutenberg which has now affected the theme. If I enable another theme the videos appear correctly.

This Gutenberg markup will appear incorrectly...

<!-- wp:core-embed/youtube {"url":"https://www.youtube.com/watch?v=JOm_S5WID4Q","type":"video","providerNameSlug":"youtube","className":"alignwide wp-has-aspect-ratio wp-embed-aspect-16-9"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube alignwide wp-has-aspect-ratio wp-embed-aspect-16-9"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=JOm_S5WID4Q
</div></figure>
<!-- /wp:core-embed/youtube -->

What I couldn't understand is that my past videos are showing correctly, so I checked how GB was showing these and I see the code is a lot simpler...

<!-- wp:core/embed {"url":"https://www.youtube.com/watch?v=JOm_S5WID4Q"} -->
<figure class="wp-block-embed">
    https://www.youtube.com/watch?v=JOm_S5WID4Q
</figure>
<!-- /wp:core/embed -->

My assumption is that this is to do with this theme's classes, as it looks as if Gutenberg may have introduced some new ones that are affecting output.

dartiss commented 6 years ago

BTW, on one of my draft posts, where the video wasn't working, I modified the GB markup so that it looks like the old style and the video then displayed correctly. However, going back into the GB editor caused the old markup to be added - so it looks like editing videos is transforming the code to the new version.

dartiss commented 6 years ago

Further update... this is caused by Gutenberg 3.9.0. I wound a test site back to 3.8.0, added a video into a post and it displayed it correctly, using the old markup. I then updated it again to 3.9.0 and repeated the same steps - this time it's the new code and displays incorrectly with this theme.

I hope that helps.

mikemcalister commented 6 years ago

I've fixed this in the latest version of the theme, version 1.2.2. Thanks for the heads up!