Stack Overflow
Stack Overflow

Questions tagged [google-blockly]

Google Blockly is a JavaScript library for building visual programming editors. It adds an editor to your app that represents coding concepts as interlocking blocks. It outputs syntactically correct code in the programming language of your choice. It is an open-source project developed and maintained by the google team. Use this tag for questions regarding the implementation of this library or extending the functionality of this library.

Google's Blockly is a web-based, visual programming editor. Users can drag blocks together to build programs. All code is free and open source.

The Blockly library adds an editor to your app that represents coding concepts as interlocking blocks. It outputs syntactically correct code in the programming language of your choice. Custom blocks may be created to connect to your own application.

Blockly is being used by hundreds of projects, most of them educational: Blockly Games, App Inventor, Microsoft MakeCode, Ozo Blockly, micro bit, etc.

Important links

Standard lockup

enter image description here

72 questions
4
votes
1 answer

Property 'JavaScript' does not exist on type 'typeof Blockly'

I integrated the Google "Blockly" library in an Angular project, but I am getting the following error when I want to convert the elements of my workspace to javascript code. I made an example with this same library using vanilla script and had no…
Angel
  • 71
  • 5
4
votes
2 answers

What are the default blockly blocks?

The documentation shows use of some sample blocks, but I can't find a definitive list. I found a gist that is the type of list that I want, but it isn't official. The GitHub repository contains a set of json files that appear to implement the…
James Foster
  • 2,070
  • 10
  • 15
4
votes
1 answer

Preventing the Blockly toolbox from being zoomed

When zooming in and out on the workspace the toolbox will also zoom which causes the blocks to increase/decrease in size. Is there anyway to prevent zooming on the toolbox and its blocks, yet still allow for the workspace to be zoomed?
Iamprettybadatthis
  • 53
  • 4
4
votes
2 answers

How do you check if a JavaScript Object is a new DOM Element?

I have a function mutationToDom: function() { var container = document.createElement( 'mutation' ); container.setAttribute( 'string', 'test' ); return container; } The container is How can I check…
Vu Le Anh
  • 708
  • 2
  • 8
  • 21
3
votes
1 answer

How to make blockly horizontal

I want to make a block based program like scratchjr. I use blockly but I don't know how to change blocks shape/direction; I want to make blocks iconic and Horizontal, like this picture: The Question is: How to change blocks shape and direction?
user11955706
3
votes
1 answer

How to hide/remove field in Blockly?

How to hide a field based on the dropdown value change. I added a input field called 'A'. I have a drop-down field. If I select a value in the drop down, say 'Remove field A', then the input field should be removed. I tried removeField. But it did…
D J
  • 45
  • 1
  • 6
3
votes
1 answer

Read user entered input in blockly block

I have the below code in my blockly.js file Blockly.Blocks['account_number'] = { // Other type. init: function() { this.jsonInit({ "message0": "account_number %1", "args0": [{"type": "field_input", "name": "TYPE", "text": ""}], …
BigDataLearner
  • 1,388
  • 4
  • 19
  • 40
2
votes
1 answer

How to customize the look and feel of blockly blocks

I am trying to customize the look and feel of blocks provided by framework Blockly. Please see the link: Blockly Input Text But as I understood and researched, I can only modify the color of particular block. 'blockStyles': { 'my_block': { …
Ashish
  • 39
  • 1
2
votes
1 answer

Blockly doesn't show anything in the browser

I want to customize blockly but after following instructions from online sources, I don't see anything appearing in the browser. This is the example code:
Nyamkhuu Buyanjargal
  • 621
  • 2
  • 11
  • 29
2
votes
0 answers

Blockly commandeer code generation for following statements

How can I make a block that compiles to wrap all blocks that follow it? Here is an example of the block I want to make: I want to write generators that create the output: console.log('1'); console.log('2'); (function () { console.log('3'); …
theonlygusti
  • 11,032
  • 11
  • 64
  • 119
2
votes
0 answers

In Google Blockly Callback function executing while rendering the custom block

We have upgraded the Blockly from version 1 to 3.20191014. In the old Blockly, a callback function is not executed while the block is loaded, but in the new Blockly, a callback function is executed while loading. Due to that, my code is not working…
Dipak Mahato
  • 21
  • 1
2
votes
1 answer

How to toggle Blockly toolbox

I am making a web based coding games, so I am using blockly so kids can drag and drop to program their games. I was able to customize few things on the editor using my own JavaScript and CSS. But I want the feature to toggle the toolbox, so there…
Jeeva
  • 3,975
  • 3
  • 23
  • 47
2
votes
1 answer

Blockly: type check of child blocks during code generation

I am trying to generate code from blocks that can have any input type to JavaScript. But to do so I need to know what type these blocks are during generation time. Most blocks already have a type internally for the type check "output":…
Student01
  • 93
  • 7
2
votes
2 answers

Google Blockly UI on jQuery Dialog is not editable

While rendering Blockly UI in jQuery Dialog, it does not allow to edit the inputs. Reason is Blockly adding a div to DOM with an input field like below:
saravanakumar
  • 1,747
  • 4
  • 20
  • 38
2
votes
1 answer

Unable to get an object's base type

I'm trying to get an object's base type but failing. Chrome's console seems to be able to do it, but I can't. Here's what the console is giving me: I'm trying to get Blockly.FieldDropdown somehow. How is Chrome console able to find it out, but I…
Francis Ducharme
  • 4,848
  • 6
  • 43
  • 81
1
2 3 4 5