Innerblocks embed

[Ben Beard]

So I am trying to make a block that has 2 core/embed blocks.

const TEMPLATE = [
		["core/embed", { placeholder: "Add URL" }],
		["core/embed", { placeholder: "Add URL" }]
];

So it works/looks fine on the front end. However in the dashboard the iframe does not have the responsive capabilities of a regular embed.

I compared my block and a regular embed and noticed that these classes have been stripped out.
“wp-embed-aspect-16-9 wp-has-aspect-ratio wp-block-embed-youtube wp-block-embed is-type-video”

I also noticed the regular embed resizes its height/width via JS (or so I assume)

My question is…
Has anyone made a block similar to this and knows how to deal with the loss of the native responsivness?
(I have tried everything via css but I think there is more to fix this than css)

Also let me know if yall need more info. Thanks

• This topic was modified 4 years ago by Ben Beard.

[Zac Gordon]

I haven’t tried exactly what you’re doing, but I believe that WordPress applies some CSS (maybe JS too) to the backend to make videos responsive, but they were not originally applying it to the frontend (that may have changed).

You might try dynamically adding those classes to your embeds with the Data API and see if that resolves the situation.

[Ben Beard]

Great thanks! I’ll give that a shot

[Author]

Posts