# Google Blockly? **URL:** \ **Category:** Uncategorized\ **Created:** [February 27, 2019, 3:21pm UTC](https://talk.observablehq.com/t/google-blockly/1702 "2019-02-27T15:21:56Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![empiimp](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/empiimp/32/691_2.png) [@empiimp](https://talk.observablehq.com/u/empiimp)\ **Post date:** [February 27, 2019, 3:21pm UTC](https://talk.observablehq.com/t/google-blockly/1702/1 "2019-02-27T15:21:56Z")
Has anyone thought of using Google Blockly ([https://developers.google.com/blockly/](https://developers.google.com/blockly/)) inside Observable? It supports generating JavaScript from a visual programming editor. ---
**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\ **Post date:** [February 27, 2019, 5:03pm UTC](https://talk.observablehq.com/t/google-blockly/1702/2 "2019-02-27T17:03:06Z")
Here’s a (failed) attempt at getting Blockly to work inside Observable: > **[Hello, Blockly!](https://observablehq.com/d/abb07cfeef2ea574)** > > An Observable notebook by Bryan Gin-ge Chen. I think it’s hitting [this issue](https://github.com/google/blockly/issues/1114). ---
**Author:** ![empiimp](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/empiimp/32/691_2.png) [@empiimp](https://talk.observablehq.com/u/empiimp)\ **Post date:** [February 27, 2019, 8:06pm UTC](https://talk.observablehq.com/t/google-blockly/1702/3 "2019-02-27T20:06:50Z")
Interesting - I had searched for Blockly and your notebook didn’t come up. Thank you for replying! ---
**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\ **Post date:** [February 27, 2019, 8:09pm UTC](https://talk.observablehq.com/t/google-blockly/1702/4 "2019-02-27T20:09:20Z")
Ah, I should have mentioned I made it in response to your post! (Also, it’s shared but not published, so I don’t think it will appear in public searches) ---
**Author:** ![empiimp](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/empiimp/32/691_2.png) [@empiimp](https://talk.observablehq.com/u/empiimp)\ **Post date:** [February 27, 2019, 8:10pm UTC](https://talk.observablehq.com/t/google-blockly/1702/5 "2019-02-27T20:10:27Z")
Oh wow - Thank you! That might explain not seeing it in search. ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [February 27, 2019, 8:48pm UTC](https://talk.observablehq.com/t/google-blockly/1702/6 "2019-02-27T20:48:52Z")
This might bring you a step closer: > **[Hello, Blockly!](https://observablehq.com/d/0aa678b7b04094a1)** > > Blockly is a client-side JavaScript library for creating visual block programming languages and editors. Known caveats: Not truly self-contained, because scripts make use of the global scope. Variable blocks don't work because they require... By the way, I’d advise against using minified versions of libraries that you’re still trying to get to work. Makes debugging a lot easier. 😉 ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [February 28, 2019, 8:07pm UTC](https://talk.observablehq.com/t/google-blockly/1702/7 "2019-02-28T20:07:37Z")
If you can live without variables you can find a working version here: > **[Hello, Blockly!](https://observablehq.com/@mootari/hello-blockly)** > > An Observable notebook by Fabian Iwand. ---
**Author:** ![mattrei](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mattrei/32/2311_2.png) [@mattrei](https://talk.observablehq.com/u/mattrei)\ **Post date:** [March 19, 2019, 1:29pm UTC](https://talk.observablehq.com/t/google-blockly/1702/8 "2019-03-19T13:29:24Z")
thanks for sharing. Why are variables not working? ---
**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\ **Post date:** [March 19, 2019, 2:42pm UTC](https://talk.observablehq.com/t/google-blockly/1702/9 "2019-03-19T14:42:51Z")
The notebook says: > `Variable` blocks don’t work because they require window.prompt(). The reason that window.prompt() doesn’t work on the Observable site because alert / prompt windows have been blocked, presumably for security reasons. More precisely, the notebook code runs in an iframe which does not have the `allow-modals` token in [the `sandbox` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Attributes). Variable blocks might work in a notebook which has been exported to another site though. You could try downloading the “tarball” of the “Hello, Blockly!” notebook and then hosting it on a different server, per [“Downloading and Embedding Notebooks”](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks). ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [March 19, 2019, 7:08pm UTC](https://talk.observablehq.com/t/google-blockly/1702/10 "2019-03-19T19:08:59Z")
> [@mattrei](#): > > Why are variables not working? To add to what @bgchen already explained: The code makes synchronous calls to window.prompt(). To emulate a prompt modal inside an observable iframe you’d have to make the code run asynchronous, and monkeypatching that into Blockly may prove very difficult. ---
**Author:** ![yutao-huang](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/yutao-huang/32/1681_2.png) [@yutao-huang](https://talk.observablehq.com/u/yutao-huang)\ **Post date:** [March 27, 2019, 10:21pm UTC](https://talk.observablehq.com/t/google-blockly/1702/11 "2019-03-27T22:21:49Z")
I was able to (although kind of poorly) workaround the variable issue by providing my own version of `window.prompt`, which reads the text content from a text input living in an Observable cell. So things like variable creation and renaming should work. You just need to make sure you have put whatever variable name you want into that input box before you’re going to click on `Create variable...` or `Rename variable...` in Blockly. I think the challenging part is that you almost cannot have a synchronous way to prompt the user for some input. Please let me know if you have better ideas! I also had a similar workaround for `window.alert`, so the `print()` block (which by default generates `window.alert`) can work. > **BTW, here is my workaround code** > > ```javascript > { > const shim = html` > >
> `; > > const caption = 'Observable Shim for Blockly'; > > const promptBox = html`
${caption}
Input value for Blockly's window.prompt:
`; > const input = html``; > promptBox.appendChild(input); > shim.appendChild(promptBox); > > window.alert = (message) => { > const alertBox = html`
${caption}
Alert from Blockly: ${message}

`; > const okButton = html``; > okButton.onclick = () => { > shim.removeChild(alertBox); > }; > alertBox.appendChild(okButton); > shim.appendChild(alertBox); > }; > > window.prompt = (caption, defaultText) => { > return input.value; > }; > > return shim; > } > > ``` And here is my notebook (forked from @mootari’s original Hello Blockly notebook): > **[Blockly Playground](https://observablehq.com/@yutao-huang/blockly-playground)** > > An Observable notebook by Yutao Huang. Besides the above workarounds, I also added the functionalities to run the generated code and import/export blocks (via Blockly XML). BTW, how can I insert a link of an Observable notebook here with the nice little thumbnail, like what you guys did in this thread? Thank you! ---
**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\ **Post date:** [March 27, 2019, 10:38pm UTC](https://talk.observablehq.com/t/google-blockly/1702/12 "2019-03-27T22:38:14Z")
This is cool! Thanks for sharing! > [@yutao-huang](#): > > BTW, how can I insert a link of an Observable notebook here with the nice little thumbnail, like what you guys did in this thread? Thank you! You just have to have the link on a line all by itself (this works for Github links too): > **[Blockly Playground](https://observablehq.com/@yutao-huang/blockly-playground)** > > Helpers Dependencies ---
**Author:** ![yutao-huang](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/yutao-huang/32/1681_2.png) [@yutao-huang](https://talk.observablehq.com/u/yutao-huang)\ **Post date:** [March 27, 2019, 10:44pm UTC](https://talk.observablehq.com/t/google-blockly/1702/13 "2019-03-27T22:44:15Z")
@bgchen: Thanks for the tip! I tried several markdown combinations but haven’t thought it’s actually that simple. 😀 ---
**Author:** ![abserari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/abserari/32/4527_2.png) [@abserari](https://talk.observablehq.com/u/abserari)\ **Post date:** [March 3, 2021, 9:25am UTC](https://talk.observablehq.com/t/google-blockly/1702/14 "2021-03-03T09:25:08Z")
[https://github1s.com/google/blockly/blob/HEAD/core/variables.js](https://github1s.com/google/blockly/blob/HEAD/core/variables.js) ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/4/45f48a9bfe3cdf7e055d7e72552ac033ce801fe0.png) Because of this recurse, if you use the same variable\_name and click create\_variable twice. It would be an endless loop in observable.