Git Product home page Git Product logo

blockly's Introduction

Blockly

Google's Blockly is a library that adds a visual code editor to web and mobile apps. The Blockly editor uses interlocking, graphical blocks to represent code concepts like variables, logical expressions, loops, and more. It allows users to apply programming principles without having to worry about syntax or the intimidation of a blinking cursor on the command line. All code is free and open source.

Getting Started with Blockly

Blockly has many resources for learning how to use the library. Start at our Google Developers Site to read the documentation on how to get started, configure Blockly, and integrate it into your application. The developers site also contains links to:

Help us focus our development efforts by telling us what you are doing with Blockly. The questionnaire only takes a few minutes and will help us better support the Blockly community.

Installing Blockly

Blockly is available on npm.

npm install blockly

For more information on installing and using Blockly, see the Getting Started article.

Getting Help

  • Report a bug or file a feature request on GitHub
  • Ask a question, or search others' questions, on our developer forum. You can also drop by to say hello and show us your prototypes; collectively we have a lot of experience and can offer hints which will save you time. We actively monitor the forums and typically respond to questions within 2 working days.

blockly-samples

We have a number of resources such as example code, demos, and plugins in another repository called blockly-samples. A plugin is a self-contained piece of code that adds functionality to Blockly. Plugins can add fields, define themes, create renderers, and much more. For more information, see the Plugins documentation.

Contributing to Blockly

Want to make Blockly better? We welcome contributions to Blockly in the form of pull requests, bug reports, documentation, answers on the forum, and more! Check out our Contributing Guidelines for more information. You might also want to look for issues tagged "Help Wanted" which are issues we think would be great for external contributors to help with.

Releases

We release by pushing the latest code to the master branch, followed by updating the npm package, our docs, and demo pages. If there are breaking bugs, such as a crash when performing a standard action or a rendering issue that makes Blockly unusable, we will cherry-pick fixes to master between releases to fix them. The releases page has a list of all releases.

We use semantic versioning. Releases that have breaking changes or are otherwise not backwards compatible will have a new major version. Patch versions are reserved for bug-fix patches between scheduled releases.

We now have a beta release on npm. If you'd like to test the upcoming release, or try out a not-yet-released new API, you can use the beta channel with:

npm install blockly@beta

As it is a beta channel, it may be less stable, and the APIs there are subject to change.

Branches

There are two main branches for Blockly.

master - This is the (mostly) stable current release of Blockly.

develop - This is where most of our work happens. Pull requests should always be made against develop. This branch will generally be usable, but may be less stable than the master branch. Once something is in develop we expect it to merge to master in the next release.

other branches: - Larger changes may have their own branches until they are good enough for people to try out. These will be developed separately until we think they are almost ready for release. These branches typically get merged into develop immediately after a release to allow extra time for testing.

New APIs

Once a new API is merged into master it is considered beta until the following release. We generally try to avoid changing an API after it has been merged to master, but sometimes we need to make changes after seeing how an API is used. If an API has been around for at least two releases we'll do our best to avoid breaking it.

Unreleased APIs may change radically. Anything that is in develop but not master is subject to change without warning.

Issues and Milestones

We typically triage all bugs within 1 week, which includes adding any appropriate labels and assigning it to a milestone. Please keep in mind, we are a small team so even feature requests that everyone agrees on may not be prioritized.

Good to Know

  • Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs
  • We test browsers using BrowserStack

blockly's People

Contributors

alschmiedt avatar anmatanm avatar beksomega avatar btw17 avatar carlosperate avatar corydcode avatar cpcallen avatar daarond avatar dependabot[bot] avatar drigz avatar duzc2 avatar edauterman avatar ericblackmongoogle avatar espertus avatar gonfunko avatar immortalin avatar maribethb avatar marisaleung avatar moniika avatar neilfraser avatar nikerabbit avatar picklesrus avatar quachtina96 avatar rachel-fenichel avatar roboerikg avatar samelhusseini avatar seanlip avatar siebrand avatar timdawborn avatar translatewiki avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blockly's Issues

More granular events for changes

It would be useful to have a more fully fleshed out event API. At the moment anything interacting with Blockly has to listen to changes on the workspace as a whole and then attempt to inspect to see if values of interest have changed. While this is feasible, it is cumbersome, particularly considering how frequently the workspace change event gets fired.

At a first pass just firing 'change' events on individual blocks when something happens to them would be helpful, but it might perhaps also be helpful to fire 'value_change', 'unplug', and other values. These could be triggered from within the relevant methods that already exist in the Blocks.

Happy to try to implement this if it is something that is desirable, and this design seems appropriate.

Trashcan drop target misbehaves on iOS Chrome

Using the "graph" demo (with PR #25 applied) on iOS 8 gives strange results with detecting whether or not something was dropped over the trashcan. When zoomed out, I'm unable to throw things away. When zoomed in, any time I move a block it gets deleted.

notch highlighting code to use the path constants already defined in Block.BlockSvg namespace

Dear Neil,

Could you please modify the code of Blockly.Connection.prototype.highlight (from connection.js)
so that it would use the constants Blockly.BlockSvg.NOTCH_PATH_LEFT and Blockly.BlockSvg.NOTCH_PATH_RIGHT defined in block_svg.js instead of redefining both paths again. It would make it possible for Blockly users to change the shape of the inter-statement notch without touching business code.

Many thanks in advance!

Unexpected snap close to the "colour with" block

I don't know if this happens with other blocks as well, but for the "colour with" block I've found a weird snap when the block is close to the first input. If we try to drop a block as shown in this screenshot:
snap1

It ends up snapping to the grid right below the one expected. You can see it animate towards the top position, but it intermediately moves to the one square below:
snap2

This does not happen with the current version in https://blockly-demo.appspot.com/static/demos/code/index.html , so probably something to do with the latest commits in master.

RTL mode doesn't seem to be compatible with toolbox-less workspaces

How to reproduce: switch on RTL mode on injection, do not create a toolbox, but pre-place some blocks on the workspace. Then drag any block and drop it back onto the workspace. The block itself and the associated cluster of its children will disappear with animation as if dropped into the trashcan.

For some reason the method Blockly.Workspace.prototype.isDeleteArea returns true in the middle of the workspace. It probably shouldn't?

Text newline

When I input too many words in one text, the block will be too long. How could I make it start from a newline?
image

now:
public void test() { System.out.println("Hello blockly"); }

hope:
public void test() {
System.out.println("Hello blockly");
}

Impossible to use a block of a function call with a parameter

Was checked with the demo ....tmp/google-blockly-610565e/demos/code/index.html

  • from the 'Functions' menu add a function block into the editor (e.g. name it 'testfunc')
  • for the function block define use of a parameter - click at the Star icon and attach 'input name' block to the main block (give it a name: arg)
  • click at the Star icon to hide the context menu of the created function block
  • try using a block for calling the function: from the 'Functions' menu select the block 'testfunc with arg'.
    The calling block will be displayed in the editor just as 'testfunc' without a possiblity to specify its argument

another bug(?) related to binding rules (asymmetry of binding)

Dear developers,

We have found another example of counter-intuitive behaviour ((possibly a bug?) similar to #12 and #15) related to binding/repelling rules, and produced a test-case to demonstrate it.

Please navigate to http://ens-lg4.github.io/blockly_bug_report/ to reproduce
and to https://github.com/ens-lg4/blockly_bug_report to see the test-case files involved.

This example deals with vertical binding of statements. The same effect happens when trying to bind inputs horizontally.

Many thanks in advance for your attention.

possible error in Blockly.Connection.prototype.hideAll

This may or may not be a bug. The Blockly.Connection.prototype.hideAll function doesn't actually hide the connections (setting this.hidden_ = true;). The corresponding unhideAll function does set this.hidden_ = false;.

I am doing some weird type checking with my app (depending on the nextStatement's block type, I hide and unhide inputs on some blocks), and I was getting a glitch where I'd see a highlighted connection path for hidden inputs (although only after I'd dragged around the parent block after a hide - as if the hidden input connection got repopulated into the connection database during the drag? I don't know this, I didn't track down why it only happened after a move). I could even connect a block into the hidden input! I fixed my glitch by adding
this.hidden_ = true;
into the hideAll function (called from the input.setVisible function).

There may have been a good reason not to put this statement in? - if so, please respond to this so I can figure out a better way to fix my glitch. Thanks.

Infinite height resize on iOS Webkit

Hi

I am using resizable blockly for a cross device visual IDE. Things work great on most devices but I'm having problems with Chrome and Safari on iOS.

On load, blockly appears as expected but as soon as I open a toolbox menu the blocklySvg element and several of its children go into an infinite height resize. I noticed that https://developers.google.com/blockly/ seems to have the same problem.

I assume this is an event loop issue somewhere deep in one of the many Google dependencies but I can't get to the bottom of it :(

Touch input does not work

I am unable to drag blocks in the latest version of blockly if using touch input. I have tried this using the several of the demos on:

  • Android: chrome allows to drop blocks from toolbox with a single touch, but there is no dragging, android browser does not do anything with the toolbox
  • iOS7 on iPad: same results as Android chrome with safary and iOS chrome
  • Windows 8 laptop with touch screen: same behaviour in chrome and opera, IE11 will kind of choppily react to touch dragging, firefox works fine

Using Blockly in jquery/bootstrap modal

If using Blockly in a modal created by jquery, and bootstrap; there are two artifacts which are hard to debug.

Maybe this issue should be placed into a special chapter in blockly documentation for Bootstrap integration fixes.

Issue 1. all drop down appears behind the modal.
Solution 1 : Just update the page css

.blocklyWidgetDiv {
    z-index: 9999 !important;
}

Issue 2 : all input fileds (numbers, strings,...) are not working (never focused)
Solution 2 : when the modal is shown, apply this fix

Boostrap 3

$('div#modal-blockly').on("shown.bs.modal", function () {
   //fix input field
   $(document).off('focusin.modal');
}

Boostrap 2

$('div#modal-blockly').on("shown", function () {
   //fix input field
   $(document).off('focusin.modal');
}

Spell checking in text input field

Hi Neil.
When i create a custom block with a text input with Blockly.FieldTextInput, should be a way to disable spell checking in case of not need it.

image

Block factory is broken

When trying to expand the Field flyout, the browser throws
TypeError: this.textElement_ is undefined blockly_compressed.js:1106:133

Using the uncompressed.js the error is
TypeError: this.textElement_ is undefined field_angle.js:217:4

Stack trace:
Blockly.FieldAngle.setText (field_angle.js:217)
Blockly.Field (field.js:43)
Blockly.FieldTextInput (field_textinput.js:46)
Blockly.FieldAngle (field_angle.js:63)
Blockly.Blocks.field_angle.init (blocks.js:231)
Blockly.Block.fill (block.js:128)
Blockly.Block.initialize (block.js:85)
Blockly.Block.obtain (block.js:71)
Blockly.Xml.domToBlock (xml.js:264)
Blockly.Flyout.show (flyout.js:364)
Blockly.Toolbox.TreeControl.setSelectedItem (toolbox.js:291)
goog.ui.tree.BaseNode.select (basenode.js:590)
Blockly.Toolbox.TreeNode.onMouseDown (toolbox.js:346)
goog.ui.tree.TreeControl.handleMouseEvent_ (treecontrol.js:539)
goog.events.fireListener (events.js:727)
goog.events.handleBrowserEvent_ (events.js:851)
(anonymous function) (events.js:276)

Unable to build compressed version with closure service as of 3/8

Something seems to have changed in the closure compiler service on 3/9 that prevents blockly from building the compressed files. I have successfully built them prior to this date (on 3/8).

Steps to reproduce:
Clone blockly
Download the closure zip file from the link provided by build.py
Run build.py

Console output:
...
SUCCESS: msg/js/zh-hant.js
SUCCESS: blockly_uncompressed.js
FATAL ERROR
required "goog.html.SafeHtml" namespace never provided
core/connection.js at line 33:
goog.require('goog.html.SafeHtml');

Parity with Google Code?

Hi, this project seems great and I am evaluating it for use in a project. I've noticed that code lives both here on Github as well as in Google Code. It would be preferable for me to use code from Github, as it is in Git and therefore much easier to work with and contribute to. Is there parity between this repo and the Google Code repo? If not, which is the canonical repo going forward?

Thanks for this awesome tool!

realtime not working playground.html

I noticed that realtime wasn't working in tests/playground.html nor in demos/realtime/index.html. I have included the steps to reproduce. Let me know you need more information or I need to configure something else.

OS: Ubuntu 14.10 (64-bit)
Google Chrome: Version 41.0.2272.101 (64-bit)
Google Closure: 848686a4791374beaa99478cdf37d95deb2752e1
Commit: 706080c
Last known working commit: 8d53788

Steps to reproduce:

  1. Go to /blockly/tests/playground.html. In start() set realtime to true and change clientId to valid client id.
  2. Run in localhost or appengine. I tested both. I use WebStorm for running locally.
  3. Login in your google account and agree.
  4. After the workspace is reloaded, click on any block in the workspace and no flyout menu will appear. I included a screenshot of the javascript console.

screenshot from 2015-03-22 13 52 01

As mutators expand, they don't bump away their neighbors

If I have an "if" mutator with a couple of statements in it like so:
start

and then take away the else statement via the mutator dialog, I get (as expected):

middle

If I then re-add the else statement to the if block, the expanded mutator doesn't bump away the unconnected second statement, making it look like there is a connection when there isn't one.

end

Demo apps can no longer be built

While trying to update the JSON import/export I was trying to build the demos/code application. with the latest release the instructions for building the apps using soy are broken. Soy is located in the plane demo however there seems to be none of the soy templates need to actually build "code".

Andrew

Adding blocks from toolbox can move the grid enable workspace

I'm not 100% sure how to replicate this issue, I can currently trigger it in the https://blockly-demo.appspot.com/static/demos/code/index.html demo and the latest master with Chrome and Firefox. It is more likely to happen when there are no other block in the workspace and I have not yet dragged the workspace.

When a new block is clicked from the toolbox flyout it moves the entire workspace a few pixels to the right and bottom. This workspace movement happens before I release the click. It will continuously happen until I drag the workspace around to move the current blocks to the side.

Please let me know if you need a better explanation or a quick video.

Blockly.Names.equal with called with null arguments

Sometimes Blockly.Named.equal called with null or undefined arguments.

This patch fix this issue:
Blockly.Names.equals = function(name1, name2) {

  • return name1.toLowerCase() == name2.toLowerCase();
  • return (name1 || '').toLowerCase() == (name2 || '').toLowerCase();
    };

decoupling scrollbars from categories

Dear developers,

Some blockly diagrams are large enough and would benefit from scrollbars around the workspace.
However at the moment it is only possible to have scrollbars if the toolbox is also using categories.

Using categories becomes reasonable if you have very many different blocks, otherwise it adds unnecessary complexity (the user not being able to see all the blocks, extra clicks, etc).

We would like to build relatively large diagrams, be able to scroll them, but avoid using categories as our choice of different blocks is small.
Could you please de-couple the scrollbars from categories?

Many thanks in advance!

Field editors don't work on iOS 8

Hey, I'm not sure if this has been reported--I haven't found any mention of it on the internet, so I'm wondering if I'm going a little insane, to be honest--but field editors don't seem to work on iOS 8. Even on Blockly's official demos, like the one at the top of https://developers.google.com/blockly/.

Over the past several weeks, I have tried this on two iOS 8 devices with the latest updates installed: an iPhone 5 and an iPad Air. Both seem to exhibit the same behavior: any editable field, such as field dropdowns and colour fields, can be "highlighted" (i.e. have a solid white border drawn around them when tapped) but nothing else happens: no popup or window.prompt is shown.

I've found that removing the following conditional from Blockly.Field.prototype.onMouseUp_ in core/field.js fixes this for me:

  if ((goog.userAgent.IPHONE || goog.userAgent.IPAD) &&
      e.layerX !== 0 && e.layerY !== 0) {
    // iOS spawns a bogus event on the next touch after a 'prompt()' edit.
    // Unlike the real events, these have a layerX and layerY set.
    return;

My only guess is that at some point Safari on iOS actually started setting layerX and layerY for their real events, which meant that all real events were being interpreted as bogus events, thereby being eaten up by the above code. But I am also extremely unfamiliar with how Blockly's UI works, so it's just a guess. I also have no idea if removing the above conditional causes some kind of regression, though in my brief testing (including experimenting with fields that cause a prompt() edit) does not seem to indicate it.

If my thinking is right, though, I suspect this does cause regressions on iOS devices that still have old versions of Safari/iOS, so perhaps a more robust fix would be to just add an extra conditional that looks at the user agent's version of Safari/iOS and only no-ops if it's below a certain version. I'm not sure how many iOS devices "in the wild" are still on this old version, though, and the task of figuring out which Safari/iOS version "broke" Blockly's field editors still needs to be done.

In any case, if any of my solutions described above seem like a reasonable fix, I'm happy to submit a formal PR.

Grammatical mistake in README.md file

There is a grammatical sentence used in README.md file.
Attached document is a snapshot of webpage. It should be Users can drag blocks together to build programs or something similar and relative.

screen shot 2015-01-08 at 2 13 03 am

this.setDeletable(false); broken

Making a block undeletable seems to be broken in the latest code(906b62f). I'm working under the premise that one should not have to make a block immovable to make it not deletable.

Block Factory "save" link broken if block has an output type

If you create a block that has an output type, then select the link button in the upper left corner of the page, the URL in the address bar will be updated. Opening this link in a new tab will result in a broken view of the block if the block contains an output type. Removing the output type results in a link that works, though there will be no connector present for the output type.

For example: https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#qzkeor

This link shows a corrupted block view in both Chrome and IE 11.

L10n disrupted by code repo move without letting translatewiki.net know

Code was moved from Google code to GitHub. As translatewiki.net wasn't informed, and doesn't have commit access, it's no longer possible to push L10n updates.

Translation has been disabled for now at translatewiki.net. If you'd like it to be re-enabled, please give me push access on the repo.

Commit 4fe83b seems to have broken block positioning in toolbox

Hi,

I've just noticed that the latest commit above has broken something in the toolbox. You can see this in the toolbox demo - clicking on either Loops or Functions and the associated blocks all seem to be bunched up at the top of the toolbox. I've bisected and confirmed that the above commit is responsible.

Cheers,

David.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.