11# Blockly
22
3- Google's Blockly is a web-based, visual programming editor. Users can drag
4- blocks together to build programs. All code is free and open source.
5-
6- The source for this module is in the [ Blockly repo] ( http://github.com/google/blockly ) .
3+ Blockly is a web-based visual programming editor maintained by the
4+ [ Raspberry Pi Foundation] ( https://www.raspberrypi.org ) . The Blockly editor uses
5+ interlocking graphical blocks to represent code concepts like variables,
6+ logical expressions, loops, and more. It allows users to apply programming
7+ principles without having to worry about syntax or the intimidation of a
8+ blinking cursor on the command line, and can automatically translate block-based
9+ programs into a variety of text-based programming languages like Python,
10+ Javascript and Lua. All code is free and open source.
11+
12+ [ Try a live demo] ( https://raspberrypifoundation.github.io/blockly/packages/blockly/demos/code/index.html ) ,
13+ or browse the source code in the [ Blockly repo] ( http://github.com/RaspberryPiFoundation/blockly ) .
714
815## Example Usage
916
@@ -14,13 +21,24 @@ Blockly.inject('blocklyDiv', {
1421})
1522```
1623
17- ## Samples
24+ ## Plugins
1825
19- For samples on how to integrate Blockly into your project, view the list of samples at [ blockly-samples] ( https://github.com/google/blockly-samples ) .
26+ A [ wide variety of plugins] ( https://raspberrypifoundation.github.io/blockly-samples/ )
27+ that add additional features and functionality to Blockly are available. All
28+ plugins are distributed via NPM; source code can be found in the
29+ [ Blockly Samples repo] ( http://github.com/RaspberryPiFoundation/blockly-samples ) .
2030
2131## Installation
2232
23- You can install this package either via ` npm ` or ` unpkg ` .
33+ You can install Blockly either via ` npm ` or ` unpkg ` . Or, if you're starting an
34+ entirely new project that uses Blockly, you can bootstrap it using our
35+ ` create-package ` tool:
36+
37+ ### npm
38+
39+ ``` bash
40+ npm install blockly
41+ ```
2442
2543### unpkg
2644
@@ -39,15 +57,16 @@ Blockly.Blocks['block_type'];
3957javascript .javascriptGenerator ;
4058```
4159
42- ### npm
60+ ### create-package
4361
4462``` bash
45- npm install blockly
63+ npx @blockly/create-package app my-cool- blockly-app --typescript
4664```
4765
4866## Imports
4967
50- Note: Using import of our package targets requires you to use a bundler (like webpack), since Blockly is packaged as a UMD, rather than an ESM.
68+ Note: Using import of our package targets requires you to use a bundler
69+ (like webpack), since Blockly is packaged as a UMD, rather than an ESM.
5170
5271``` js
5372// Import Blockly core.
@@ -73,20 +92,27 @@ const {javascriptGenerator} = require('blockly/javascript');
7392const En = require (' blockly/msg/en' );
7493```
7594
76- ## Applying messages
95+ ## Loading messages
7796
78- Once you have the message files, you also need to apply them.
97+ Blockly is translated into [ more than 100 different languages] ( https://github.com/RaspberryPiFoundation/blockly/tree/main/packages/blockly/msg/json ) .
98+ Once you've imported or required the message file for the language you want to
99+ use as shown above, it needs to be applied:
79100
80101``` js
81- Blockly .setLocal (En);
102+ Blockly .setLocale (En);
82103```
83104
84- For a full list of supported Blockly locales, see: [ https://github.com/google/blockly/tree/master/msg/js ] ( https://github.com/google/blockly/tree/master/msg/js )
85-
86105## Docs
87106
88107For more information about how to use Blockly, check out our
89- [ devsite] ( https://developers.google.com/blockly/guides/overview ) .
108+ [ developer documentation] ( https://docs.blockly.com ) .
109+
110+ ## Accessibility
111+
112+ Although Blockly is built around drag-and-drop, it is fully usable with the
113+ keyboard alone. Blockly is also accessible to screenreader users by default. We
114+ provide [ Accessibility Conformance Reports] ( https://docs.blockly.com/guides/app-integration/accessibility/compliance/ )
115+ in the VPAT format that outline Blockly's conformance to WCAG 2.2 Level AA.
90116
91117## License
92118
0 commit comments