setAttribute -> getting-started-codelab\complete-code

Clyde Eisenbeis

unread,

Dec 14, 2023, 11:51:05 AM12/14/23

to Blockly

In HTML

<button class="mode-maker mdl-button" id="edit">Edit</button>

'edit' is the id of the Edit button.

In main.js is '#edit':

document.querySelector('#edit').addEventListener('click', enableEditMode);

Clicking the Edit button will go to the "enableEditMode" function.

1) The '#' concatenated to 'edit' appears to represent the Edit button. Is '#' a Blockly standard?

------------------------------------------------------

Inside the "enableEditMode" function is this:

document.body.setAttribute('mode', 'edit');

In the HTML

<body mode="maker">

The "maker" is a "<div class"

<div class="maker">

which contains the "<div class" of every colored button.

2) The "setAttribute" appears to connect the Edit button to the 9 colored buttons. This is a Blockly standard?

------------------------------------------------------

I started modifying "custom-toolbox-codelab\complete-code" folder HTML file by converting the code from XML to JSON. The "custom-toolbox-codelab\complete-code" folder has been renamed to a "Learn Blockly" folder to shorten the folder name.

As the numerous lines of my code mask my questions, I've uploaded the "Learn Blockly" folder / files (zipped) to my website -> "https://temp.foxping.com/". The zipped file name is "Learn Blockly.7z". Downloading this zip file will make it easier to understand my questions.

The revised code uses JSON instead of XML. The JSON code in the HTML is:

  <body>
    <div id="blocklyDiv"></div>
    <script>      var toolbox = 
      {

This JSON code does not have any "<div class" code.

3) What code changes need to made to implement the code examples in "getting-started-codelab\complete-code" described at the beginning of this post?

------------------------------------------------------

Thanks!

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

Beka Westberg

unread,

Dec 15, 2023, 4:26:00 PM12/15/23

to Blockly

Hello,

1) This is not a blockly-specific thing. Please google `querySelector`.

2) This is not a blockly-specific thing. Please google `setAttribute`.

3) I'm not sure what you mean by this question :/ What functionality are you trying to implement?

Best wishes,

--Beka

Clyde Eisenbeis

unread,

Dec 19, 2023, 2:51:37 PM12/19/23

to Blockly

After thinking more about this, I added

document.addEventListener("click", e =>
  {
    switch(e.key) {
      ...
    }  }
);

to the .js file. Setting a break point there, when I click anywhere on the browser display, the code stops there. This works! Ignore my comments about`querySelector` and `setAttribute`.

Back to the code, I inserted the JSON example from https://developers.google.com/blockly/guides/configure/web/toolbox#json into the index.html file.

  <body>
    <div id="blocklyDiv"></div>

    <!-- from XML to JSON -> https://developers.google.com/blockly/guides/configure/web/toolbox#json -->
    <script>
      var toolbox = 
      {
        "kind": "categoryToolbox",
        "contents": [
          {
            "kind": "category",
            "name": "Core",
            "contents": [
              {
                "kind": "block",
                "type": "controls_if"
              },
              {
                "kind": "block",
                "type": "logic_compare"
              },
            ]
          },
          {
            "kind": "category",
            "name": "Custom",
            "contents": [
              {
                "kind": "block",
                "type": "start"
              },
              {
                "kind": "category",
                "name": "Move",
                "contents": [
                  {
                    "kind": "block",
                    "type": "move_forward"
                  }
                ]
              },
              {
                "kind": "category",
                "name": "Turn",
                "contents": [
                  {
                    "kind": "block",
                    "type": "turn_left"
                  }
                ]
              }
            ]
          }
        ]
      }
      var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
    </script>
  </body>

When I run index.html I see -> https://snipboard.io/ToY9UW.jpg. Which is good.

When I select the Custom icon I see -> https://snipboard.io/X9WIFH.jpg, but I get an TypeError message -> https://snipboard.io/qkpXCi.jpg. It cannot find 'start'. What do I add to a .js file to define 'start'?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~https://snipboard.io/X9WIFH.jpg https://snipboard.io/X9WIFH.jpg https://snipboard.io/X9WIFH.jpg https://snipboard.io/X9WIFH.jpg

Christopher Allen

unread,

Dec 19, 2023, 6:45:51 PM12/19/23

to blo...@googlegroups.com

Hi Clyde,

Back to the code, I inserted the JSON example from https://developers.google.com/blockly/guides/configure/web/toolbox#json into the index.html file.

When I run index.html I see -> https://snipboard.io/ToY9UW.jpg. Which is good.

When I select the Custom icon I see -> https://snipboard.io/X9WIFH.jpg, but I get an TypeError message -> https://snipboard.io/qkpXCi.jpg. It cannot find 'start'. What do I add to a .js file to define 'start'?

So, start is just an made-up bock type name of a hypothetical custom block used in the example toolbox definition—the code as written won't work unless you happen to have created a custom block with that type name (and the other type names used in that example, such as move_forward and turn_left). You'll need to modify the toolbox definition so that it contains the actual blocks you want your users to see in that toolbox category. You can either use the type names of library blocks we provide (le.g. controls_if, procedure_defnoreturn, etc.) or create custom block definitions for your particular application.

Best wishes,

Christopher

Clyde Eisenbeis

unread,

Dec 20, 2023, 6:29:02 AM12/20/23

to Blockly

Could you provide a code example of what I would place in the .js file? I do not see that at https://developers.google.com/blockly/guides/create-custom-blocks/overview.

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

Mark Friedman

unread,

Dec 20, 2023, 6:56:34 PM12/20/23

to blo...@googlegroups.com

There are examples in https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks. Christopher gave you a link to the first page of the "Create Custom Blocks" sections, but you'll probably want to read the other pages of that section as well. Also, recall that the Getting Started codelab includes some of this, particularly in its "Create a custom block" section.

-Mark

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/657b97ab-0a97-4de4-9405-ca4d5c57f35cn%40googlegroups.com.

Clyde Eisenbeis

unread,

Dec 21, 2023, 8:03:35 AM12/21/23

to Blockly

I have added JSON code to the HTML file (as found at https://developers.google.com/blockly/guides/configure/web/toolbox#json) ->

  <body>
    <div id="blocklyDiv"></div>
    <script>      var toolbox = 
      {

When I run index.html (VS Code - F5), I see -> https://snipboard.io/ToY9UW.jpg on the Chrome browser.

When I select the Custom icon, on the Chrome browser, I see -> https://snipboard.io/X9WIFH.jpg --- but I get a TypeError message in the DEBUG CONSOLE ->

Uncaught TypeError TypeError: Invalid block definition for type: start at Block$$module$build$src$core$block (unpkg.com/blockly/blockly.min.js:1105:461) at BlockSvg$$module$build$src$core$block_svg (unpkg.com/blockly/blockly.min.js:1166:349) at WorkspaceSvg$$module$build$src$core$workspace_svg.newBlock (unpkg.com/blockly/blockly.min.js:1631:382) at appendPrivate$$module$build$src$core$serialization$blocks (unpkg.com/blockly/blockly.min.js:208:210) at appendInternal$$module$build$src$core$serialization$blocks (unpkg.com/blockly/blockly.min.js:206:406) at createFlyoutBlock (unpkg.com/blockly/blockly.min.js:1476:394) at createFlyoutInfo (unpkg.com/blockly/blockly.min.js:1474:205) at show (unpkg.com/blockly/blockly.min.js:1472:444) at updateFlyout_ (unpkg.com/blockly/blockly.min.js:1621:387) at setSelectedItem (unpkg.com/blockly/blockly.min.js:1620:103) at onClick_ (unpkg.com/blockly/blockly.min.js:1609:97) at f (d:\_MyDocs _L\Code\__Blockly\__Blockly Code\Learn Blockly\blockly\generators\javascript\lists.ts:402:5)

Blockly wants a valid block definition for type: start" ->

 <body>
    <div id="blocklyDiv"></div>
    <script>      var toolbox = 
      {

        "kind": "categoryToolbox",
        "contents": [
          {
            "kind": "category",
            "name": "Core",
            "contents": [
              {
                "kind": "block",
                "type": "controls_if"
              },
              {
                "kind": "block",
                "type": "logic_compare"
              },
            ]
          },
          {
            "kind": "category",
            "name": "Custom",
            "contents": [
              {
                "kind": "block",
                "type": "start"
              },

What should I change to fix the "Invalid block definition for type: start"?

On the website you posted, I cannot find this information. Is there a webpage that does provide this information? Thanks!

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

Mark Friedman

unread,

Dec 21, 2023, 5:29:35 PM12/21/23

to blo...@googlegroups.com

I think that Christopher and I did the best we could to explain that the toolbox definition that is causing the error is referring to a hypothetical custom "Start" block. You could either replace that reference with a reference to one of Blockly's built-in blocks or you could create your own definition of a "Start" block according to the resources that we linked to.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/aef8731c-ba0a-43da-a97f-2bac01370313n%40googlegroups.com.

Clyde Eisenbeis

unread,

Dec 22, 2023, 7:06:10 AM12/22/23

to Blockly

For my project, I need to create custom blocks. Please provide a code example of creating a definition for a "Start" block. The websites referenced do not tell me how to do that.

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

Clyde Eisenbeis

unread,

Dec 22, 2023, 10:08:20 AM12/22/23

to Blockly

I found it. The key is "Blockly.defineBlocksWithJsonArray()".

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

Reply all

Reply to author

Forward