[Resolved] Gap after embed/custom HTML plugins

[melonbird]

I’m seeing a noticeable gap on mobile view only after adding a custom HTML or embed block to a post. I’ve tried removing all custom CSS and turning off all plugins, and that didn’t fix it. Switching to any of several other themes does fix it. I included a test page example in Private Info.

[David]

Hi there,

if you create your own generic iframe using this site:

https://embedresponsively.com

Do they work correctly ?

As the core embed block has its issues with responsiveness

[melonbird]

I’m not sure if I understand how to test it. I put my embed link into the Generic Iframe tab, clicked embed, and pasted the code it produced into my Custom HTML block. But it just showed the code instead of any actual embedded content.

[Ying]

But it just showed the code instead of any actual embedded content.

The link David provided seems don’t have the option for Pinterest, you can try Pinterest’s official widget builder:
https://developers.pinterest.com/tools/widget-builder/?type=pin

You can use a hook element to insert the JavaScript, and choosewp_footer as the hook name.

[melonbird]

Okay, that one didn’t have the gap. So how do we fix the theme, since this is only happening with GP?

[Ying]

So how do we fix the theme, since this is only happening with GP?

I don’t think it’s a theme issue. Just in case, can you switch back to the way you used before so I can take a closer look at the iframe coding?

[melonbird]

Done.

I’m confused because I tried several other themes and it was fine with all of them. I turned off all plugins, deleted my custom CSS, and none of that helped. If I switch themes, I can embed with either the Pinterest block or the custom html and not get that gap.

[Tom]

Hi there,

I’m seeing a javascript error on the page that could cause the issue you’re seeing: https://www.screencast.com/t/gwASqhrZrKV

It seems to be coming from a TOC plugin: https://www.screencast.com/t/m6h7SjK1Oq

Can you deactivate that plugin so we can inspect the gap without any JS errors?

Thanks!

[melonbird]

Done. Didn’t help.

As I said in the first post, I already tried deactivating all plugins removing the custom CSS and it didn’t help. Also the TOC plugin is not on the other GP site where I’m seeing this same behavior. The only thing that fixes it is switching to any other theme. I’ve tried several and am not seeing this problem with other themes.

[Tom]

Hi there,

I added this Pinterest embed to my development server and tried it with TwentyTwenty Three, Two and One to see what those core themes did.

Only TwentyTwentyOne didn’t have the space you’re seeing (the other two did). I took a look at why and it looks like they’re using a custom javascript file to add the inline width/height: https://raw.githubusercontent.com/WordPress/twentytwentyone/trunk/assets/js/responsive-embeds.js

What you can do is:

1. Save the above linked file.
2. Upload it to your website – you will have to add it to your child theme or somewhere on the site using an FTP program.
3. Add the following function:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'responsive-pins', 'THE URL TO YOUR FILE ON YOUR SITE HERE' );
} );

Let us know if you need more info 🙂

[melonbird]

Sorry, I thought I replied to this before. Thank you for researching this and figuring it out for me. I really appreciate the support you guys provide.

[Tom]

Glad we could help! 🙂

[Author]

Posts