Skip to content

Commit 04eb226

Browse files
Review feedback
1 parent b312f22 commit 04eb226

File tree

5 files changed

+13
-13
lines changed

5 files changed

+13
-13
lines changed

Diff for: codelabs/getting_started/getting_started.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Blockly includes everything you need for defining and rendering blocks in a drag
2323

2424
### What you'll build
2525

26-
MusicMaker, a web app where you can program buttons to play different sounds, using Blockly.
26+
MusicMaker, a web app where you can program buttons to play different sounds, using Blockly.
2727

2828
![image](play_mode.png)
2929

@@ -101,7 +101,7 @@ Open `starter-code/index.html` in a text editor and scroll to the end. You can s
101101
Add Blockly just before these two scripts. The order is important, because you will use Blockly objects later in `main.js`.
102102

103103
```html
104-
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
104+
<script src="https://unpkg.com/blockly"></script>
105105
<script src="scripts/music_maker.js"></script>
106106
<script src="scripts/main.js"></script>
107107
```
@@ -140,7 +140,7 @@ For more information on this XML format and toolbox configuration, including cat
140140

141141
### Define the toolbox
142142

143-
Add the structure of the toolbox just after the `blockly-div`:
143+
Add the structure of the toolbox just after the `blocklyDiv`:
144144

145145
```xml
146146
<xml id="toolbox" style="display: none">
@@ -166,18 +166,18 @@ The function to call is `Blockly.inject(container, options)`, which takes two ar
166166
- `container` is where the Blockly workspace should be placed on the page. It can be an `Element`, an ID string, or a CSS selector.
167167
- `options` is a dictionary of configuration options.
168168

169-
For this codelab we will inject into a div with the id `"blockly-div"`, which you can find in `index.html`:
169+
For this codelab we will inject into a div with the id `"blocklyDiv"`, which you can find in `index.html`:
170170

171171
```html
172-
<div id="blockly-div" style="height: 480px; width: 400px;"></div>
172+
<div id="blocklyDiv" style="height: 480px; width: 400px;"></div>
173173
```
174174

175175
### Create the workspace
176176

177177
Now open `scripts/main.js`. Just before the end of the main function, add code to inject Blockly editor:
178178

179179
```js
180-
Blockly.inject('blockly-div', {
180+
Blockly.inject('blocklyDiv', {
181181
toolbox: document.getElementById('toolbox'),
182182
scrollbars: false
183183
});
@@ -268,13 +268,13 @@ Now we can update the toolbox to include the new sound block, by adding `<block
268268
</xml>
269269
```
270270

271-
Run the app one more time, and play around with the new "Play (sound)" block. It should look like this:
271+
Run the app one more time, and play around with the new `Play (sound)` block. It should look like this:
272272

273273
![image](workspace_with_toolbox.png)
274274

275275
### The block factory
276276

277-
This step discussed how to manually define custom blocks in Blockly. Once you've completed the entire codelab, we recommend that you check out our <a href="https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools">block factory tool</a>, which helps automate part of this process.
277+
This step discussed how to manually define custom blocks in Blockly. Once you've completed the entire codelab, we recommend that you check out our [block factory tool](https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools), which helps automate part of this process.
278278

279279
## Save/load workspace
280280

Diff for: examples/getting-started-codelab/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Blockly getting started codelab
22

3-
Code for the [Blockly getting started codelab](https://blocklycodelabs.dev/getting-started/index.html).
3+
Code for the [Blockly getting started codelab](https://blocklycodelabs.dev/codelabs/getting-started/index.html).
44

5-
In this codelab, you'll learn how to use Blockly JavaScript library
5+
In this codelab, you'll learn how to use the Blockly JavaScript library
66
to add a block code editor to a web application.
77

88
## What you'll learn

Diff for: examples/getting-started-codelab/complete-code/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ <h1 class="mode-edit mode-blockly">Music Maker Configuration</h1>
4242
</div>
4343

4444
<div class="blockly-editor">
45-
<div id="blockly-div" style="height: 480px; width: 400px;"></div>
45+
<div id="blocklyDiv" style="height: 480px; width: 400px;"></div>
4646
<xml id="toolbox" style="display: none">
4747
<block type="controls_repeat_ext">
4848
<value name="TIMES">

Diff for: examples/getting-started-codelab/complete-code/scripts/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565

6666
enableMakerMode();
6767

68-
Blockly.inject('blockly-div', {
68+
Blockly.inject('blocklyDiv', {
6969
toolbox: document.getElementById('toolbox'),
7070
scrollbars: false,
7171
});

Diff for: examples/getting-started-codelab/starter-code/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ <h1 class="mode-edit mode-blockly">Music Maker Configuration</h1>
4242
</div>
4343

4444
<div class="blockly-editor">
45-
<div id="blockly-div" style="height: 480px; width: 400px;"></div>
45+
<div id="blocklyDiv" style="height: 480px; width: 400px;"></div>
4646
</div>
4747

4848
<xml id="toolbox" style="display: none">

0 commit comments

Comments
 (0)