Make Web Stories Compatible with my theme?

@shaunpoore Hi there, thank you for your post. Like many other blocks, the Web Stories block simply enqueues some styles and scripts, which WordPress then tries to load in the footer. The plugin doesn’t do anything out of the ordinary there.

I’d suggest verifying that your theme uses the wp_footer() function properly. Perhaps the official Theme Check plugin flags some potential issues as well.

Are you saying your plugin adds the needed styles/scripts by hooking into that call?

I think I found the lib I was looking for at the link below. I haven’t tested it yet, but you guys appear to use it.

https://amp.dev/documentation/guides-and-tutorials/integrate/embed-stories-nonamp/

> Are you saying your plugin adds the needed styles/scripts by hooking into that call?

Yes.

The Web Stories block enqueues a variety of styles and scripts (including the one you linked to above), which requires the wp_footer() call to be present in your theme.

OK thanks. That does work. I get a JavaScript error now that prevents it from loading saying “The Element did not specify a layout attribute.” But, I can hopefully track that one down myself.

Do you guys work for Google? My feedback on this thing is why are there so many scripts getting loaded for something meant for the web? You got JQuery, Lightbox, the AMP player I mentioned earlier, etc. It’d be pretty difficult to have a web story embedded into a blog post and pass core web vitals with the number of files you add to the page.

That error message is a bit unexpected, as it should only happen on AMP pages. If you have some URL to a staging site we could take a look.

As for the scripts, first of all it’s worth noting that not all of these are enqueued by the Web Stories plugin. For instance, we do not use jQuery at all.
So that is coming from another plugin or probably WordPress itself (WP uses it for the admin toolbar).

I recommend using tools like Query Monitor to find out which plugin/theme/core is causing a script to be loaded.

The lightbox and story player scripts are of course required when using these features. And they don’t really cause difficulties for reaching page experience goals.

That said, we’ll be adding improved scripts for these features in the future that are even more lightweight. But the player+lightbox features don’t work without any JavaScript at all ??

For instance, we do not use jQuery at all.
So that is coming from another plugin or probably WordPress itself (WP uses it for the admin toolbar).

That probably explains why I disabled it to begin with…

But the player+lightbox features don’t work without any JavaScript at all ??

Maybe in the WordPress editor have an option to simply include the pic/link to the web story so there’s less stuff that can go wrong and everything is self-contained?

Or load all the scripts you need on click…

• This reply was modified 2 years, 10 months ago by shaunpoore.

Maybe in the WordPress editor have an option to simply include the pic/link to the web story so there’s less stuff that can go wrong and everything is self-contained?

I see your point, thanks for the suggestion. We do have an open feature request for something similar, I‘ll try to dig it up again. Removing interactivity like that would drastically reduce the usefulness and user experience for this block though.

If you don‘t require any interactivity at all, you might consider using the Query Loop block in instead.

Or load all the scripts you need on click…

Also a good idea, but that requires a script to trigger the click handler still ?? And it‘s not great for UX when you need to wait for a few seconds after clicking on a story for something to happen.

Anyway, as I said we‘ll be improving our scripts in the future anyway and I recommend you to take a look again at that point.