Create a Block

Overview:

Section 1:

• Add custom block
• Add block description to en_json for translation

Section 2:

• Add block to database
• In level builder, add new block to toolbox

Section 3:

• Add new API
• Add logic for new block

Section 1: Add Custom Block

Define Block

• The javascript format is used to define the block.

Standard parts of the block are as follows:

• Help Url ‘’ - either an empty string or a link to a page that provides additional information about the block
• Init: function - creates the block's shape
• this.setHSV (set the color of the block)
• this.setPreviousStatement(true) - the block will have a connector at the top
• this.setNextStatement(true)- the block will have a connector at the bottom
• this.setIputsInline(true)-indicates the block will be inline and not multiple lines

Generator

• Add a code generator to the pointTo block
  • This generates javascript code for the pointTo block (except from blockly documentation)

Helpful Tips:

• Use string interpolation over string concatenation when returning values.
• Reference style guide for line breaks (https://github.com/code-dot-org/code-dot-org/blob/staging/STYLEGUIDE.md)

Internationalization

• Add the string "point to" en_json (i18n).
  • This string is used in msg.pointTo
  • This string can be translated into any language.
    

Section 2: Add Block to Toolbox

• Add pointTo block to the def toolbox method in artist.rb

• Put pointTo block type in the actions category.

• This saves the new block in the database.

• Required: You will need permission to access level builder.

• Click on tool box (level builder side bar)

• Select category that has block type that was added in artist.rb

• Drag the block onto the work space and paste in the correct category (link to helpful tip)

• Click run (run is equivalent to save)
• Confirmation that blocks has been saved will be displayed.
• Click continue and page will automatically refresh.
• Check toolbox to see new block
• Drag block onto work space and test functionality.

Demo

Helpful Tip:

• If there is no space after the last block in the desired category, place block to the right of the last block.

Section 3: Code generation

• Add API for pointTo block to api.js
• This API is called when the block is in use.

• Figure a: PointTo API