Update backpack-demo to use JSON toolbox definitions instead of xml

[BeksOmega]

Category

• Examples

Component

backpack-demo

Is your feature request related to a problem? Please describe.

Many of the examples and plugins use XML toolboxes instead of the new JSON API. We should have our example code use the new APIs to best model what other developers can do with Blockly.

Describe the solution you'd like

Update the code in blockly-samples to use the JSON toolbox API.

Additional context

To work on this issue, first read the background information about how to contribute to samples and verify your changes.

1. Learn about defining a toolbox and read about the XML format vs the JSON format.
2. In blockly-samples, navigate to the backpack-demo example's directory. Some examples can be started with npm run start and some can be opened directly by opening the index.html file in a browser. The README may give specific instructions, or you can look in the package.json to see what scripts are defined. Note you may need to run npm install in the example directory. Either way, open the example's demo page to observe the toolbox and its contents.
3. Write a new copy of the toolbox definition in the JSON format instead of the XML format. Where exactly it should be declared will depend on the example. It will most likely make sense to declare the toolbox definition close to the location where it is used, i.e. where Blockly.inject is called.
4. Refresh the demo page and make sure the toolbox looks the same as it did before. You can compare against the version in master on the samples site to make sure the behavior hasn't changed. Note that not all demos are published on the samples site so it may not be there.
5. Follow the rest of the instructions in the Contributing docs to verify your change and open a PR.