3rd party JS libraries inside FSE

So I just realized that when using a JavaScript library the code is not loading inside the FSE.
CSS related files are loading though.
On front-end everything seems fine.

Is this how things work in genereal when using FSE?
How to fix that? Is there even a way?

What are you using for loading JS library? Code snippets / WP Codebox / anything else?

I’m using WPCodeBox.
Tested it with Cwicly back-end options first, not sure if that loads only on front-end.
I can see inside the browser tools, the code is there.
Maybe an iframe related thing (is there even one?), really have no clue.

It’s an FSE thing → Dynamic editor styles and inline CSS without targetting `.editor-styles-wrapper` · Issue #18571 · WordPress/gutenberg · GitHub.
Basically related to the iframe (you will also have trouble in responsive views inside the Post Editor). Iframe which is also going to be ported to the Post Editor at some stage in the future.

The scripts you add with from the settings page do not load on the back-end.

We could add support for this, but I’d be curious to see what you’d want it for :slight_smile:

1 Like

I think there are many use cases.

Headroom.js, swiper.js, flickity…or gsap animations…it is not neccessary since on the frontend it will load just fine but I guess it will help for sure.

Thanks for the answer, I really didn’t know that.
But this is what I was expecting when scripts didn’t load inside FSE environment, unfortunately.

Like @Dev.tomi said, there are many uses cases.
Actually, I was about to prepare some tutorials to extend Cwicly functionality when I came across this “behaviour”.
Nothing special, just like how to implement basic stuff (e.g. image comparison) with very little effort and the help of JS libraries.
Maybe this might be redundant anway, I don’t know what path Cwicly will follow in the future.

But still, the fact that JS code does not work inside FSE currently is kind of disappointing, since I generally had in mind that I could tweak and extend Cwicly to whatever I want.
That at least, were my initial thoughts from the beginning.
Yeah, it works apparently. Is it necessary to work on back-end?
This also depends on the behaviour of how the particular library acts without JS being loaded.
For tutorial purposes, this wouldn’t be an option when blocks totally gets messed up inside FSE ([small addition here:] because of plugins CSS loads and JS does not).

To be honest, for me personally I wouldn’t mind that much as long as I do not run into any issues.
Tested 3 plugins so far and it was okay since I knew what to do.

But as I said, for client projects or tutorial purposes, this would be a no-go.
I think that e.g. content creators would rather avoid showing nice stuff you can do with Cwicly than present something to their audience which you can’t follow during the process, because of the here discussed issue.

1 Like