Are There Descriptions for the Blockly Examples?

[Clyde Eisenbeis]

VS Code opens folder --- ..\blockly-samples-master\examples\context-menu-codelab\starter-code.

Are there descriptions for the index.html file contents of:

<script src="https://unpkg.com/blockly/blockly.min.js"></script>

and

<script src="https://unpkg.com/@blockly/dev-tools"></script>

?

---

The index.js file contains:

let workspace = null;

function start() {

  // Create main workspace.

  workspace = Blockly.inject('blocklyDiv',

    {

      toolbox: toolboxSimple,

    });

}

Blockly.inject --- 'blocklyDiv' --- and --- toolbox: toolboxSimple --- are defined in https://unpkg.com/blockly/blockly.min.js? 

---

F5 for index.html displays icons on the browser for --- if/do/else  --- = --- and --- repeat --- etc.  I don't see those words in the .html or the .js files.  These appear to be a standard template.  How can these be re-worded, and duplicated with other words?

[Maribeth Moffatt]

Hello,

It looks like you're new to Blockly. I would recommend starting with the codelabs. These walk you through the basics of using the library and do explain the code in a little more detail. 

The contents of the unpkg files are the Blockly library itself, minified. Don't try to read them. You can find our API reference documentation on our website; here's the reference for the Blockly.inject function. This function is explained more in the getting started codelab. Please let us know if you have other questions! Best,

Maribeth

[Clyde Eisenbeis]

Yes, I am new to Blockly.  Thanks for the prompt response.

At --- https://blocklycodelabs.dev/codelabs/getting-started/index.html#3 --- 4. Add Blockly libraries --- it starts with <script src="https://unpkg.com/blockly"></script>.    

This is different than the "<script src=" in the html under ..\starter-code.  How does one decide which "src" to use?

Yes --- https://developers.google.com/blockly/reference/js/blockly.inject_1_function --- does have some descriptions of "Blockly.inject(string element, Blockly options)".  

The "string element" is any name the code writer chooses? 

The html under ..\starter-code -> uses "toolbox: toolboxSimple" for the "Blockly options".  The blockly > BlocklyOptions > toolbox webpage does not list the toolbox contents.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Maribeth Moffatt]

Hi,

> How does one decide which "src" to use?

The two different unpkg URLs resolve to the same place. If you go to https://unpkg.com/blockly in your browser, you'll see it redirects to the minified file the other codelab links to.

> The "string element" is any name the code writer chooses?

The container has to be the name or css selector of an element that you wish to inject Blockly into (or the Element itself). Blockly needs some DOM elements to run, so it creates its own elements and will inject them into a container of your choice. You need to tell Blockly which container that is.

>  The blockly > BlocklyOptions > toolbox webpage does not list the toolbox contents.

The toolbox contents are defined by you. The toolbox is the area of the page which shows a palette of blocks for the user of your application to use, so you need to define these. The context menu codelab is not trying to teach you anything about toolboxes, so it uses a predefined toolbox that comes from a plugin we publish called @blockly/dev-tools. I honestly would not worry too much about this, it's taking a shortcut you don't need to use. If you are still learning about toolboxes, then the custom context menu codelab is not going to be useful to you and I would avoid looking there. 

The topics of injecting Blockly and defining the toolbox are both covered in Step 4 of the Getting Started codelab. Were you able to complete that? I know we've repeated it a lot, but it really is the best place to start. Jumping in to try to compare different codelabs without understanding the basics is likely to lead to confusion as the codelabs are each intended to teach you a specific concept and may take shortcuts in the areas they don't address.

If you prefer direct text-based documentation, we also have many different guides, such as this one about injecting Blockly, or this one about defining a toolbox. But the Guides often go into more detail than you need in order to gain the basic understanding, so I would not try to understand the entire page at once.

Best,

Maribeth