Embed code from observablehq.com in a post/page

🙋Get Help
1

Hello,
I tried to put the embed code of an observable cell into a Gutenberg custom Html block, but it doesn’t render on the frontend.

Observable code example:

<div id="observablehq-e5332e2b"></div>
<script type="module">
   import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
   import define from "https://api.observablehq.com/@observablehq/downloading-and-embedding-notebooks.js?v=3";
   const inspect = Inspector.into("#observablehq-e5332e2b");
   (new Runtime).module(define, name => name === "graphic" ? inspect() : undefined);
</script>

I get the following errors (see screenshot)

Screenshot 2020-05-19 at 00.28.39
Screenshot 2020-05-19 at 00.28.392790×520 156 KB

Anyone can help?
Thanks!

2

Hi @ale.vals,

What are you trying to achieve?
Can you provide a repository with the code of your project so the community can check your current implementation and help you with your issue?

3

Hello @juanma
thanks for your reply.
I’m evaluating Frontity for a new project.
For this project, the client needs to be able to include in posts some interactive data visualisations generated on https://observablehq.com/ (see: https://observablehq.com/@observablehq/downloading-and-embedding-notebooks)

In a standard WP theme, i can add the embed code generated by observable in a Gutemberg HTML block and the javascript will load and execute on the frontend and display the interactive infographic.
Example of the code:

   <div id="observablehq-e5332e2b"></div>
 <script type="module">
    import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
    import define from "https://api.observablehq.com/@observablehq/downloading-and-embedding-notebooks.js?v=3";
    const inspect = Inspector.into("#observablehq-e5332e2b");
    (new Runtime).module(define, name => name === "graphic" ? inspect() : undefined);
    </script>

I’m wondering if the same will work with Frontity, or if the script execution will not work.
Trying to insert that code in a Gutenberg HTML block of a Post, will cause the above js errors on the frontend (using the default Frontity Theme).

4

Hi @ale.vals,

I think you should create a React component to handle that and let Wordpress to serve only content (and not javascript logic)

Does it make sense for your project?

8

HI @ale.vals,

If you want your client to directly add the script code directly in the post, then you need to process the HTML somehow. Frontity provides the @frontity/html2react package which can help you to process specific parts of the HTML in the post

This package works with processors.
There’s a processor (activated by default) that process the content in the script tag

Hope this helps

1 Like
10

Hi @ale.vals! :wave:

This looks like a bug in Frontity! The content inside of the <script> tag gets unnecessarily escaped!

In the snippet you provided you can see that the " got substituted with &quot , etc. which is causing the syntax error when react tries to execute the script.

I will open an issue on github for this.

1 Like
11

Thanks for pointing me in the right direction @juanma
I will try to make it work.
BTW, the use-case is a newspaper where editors need to add infographic into posts, so yes, for maximum flexibility the client should be able to insert the script inside the post.

12

@ale.vals

I’ve opened a github issue and pull request to fix this

1 Like
13

@ale.vals I’ve just merged the fix. It will be out in the next release :slightly_smiling_face:

2 Likes
15

Thanks so much @mmczaplinski !
Top support!

1 Like