diff --git a/packages/docs/docs/codelabs/context-menu-option/setup.mdx b/packages/docs/docs/codelabs/context-menu-option/setup.mdx index 12a5160377a..be96bba57f5 100644 --- a/packages/docs/docs/codelabs/context-menu-option/setup.mdx +++ b/packages/docs/docs/codelabs/context-menu-option/setup.mdx @@ -22,7 +22,7 @@ git clone https://github.com/RaspberryPiFoundation/blockly.git If you downloaded the source as a zip, unpacking it should give you a root folder named `blockly-main`. -The relevant files are in `docs/docs/codelabs/context-menu-option`. There are two versions of the app: +The relevant files are in `packages/docs/docs/codelabs/context-menu-option`. There are two versions of the app: - `starter-code/`: The starter code that you'll build upon in this codelab. - `complete-code/`: The code after completing the codelab, in case you get lost or want to compare to your version. diff --git a/packages/docs/docs/codelabs/css/setup.mdx b/packages/docs/docs/codelabs/css/setup.mdx index b20fce6d786..94ba778dbce 100644 --- a/packages/docs/docs/codelabs/css/setup.mdx +++ b/packages/docs/docs/codelabs/css/setup.mdx @@ -21,7 +21,7 @@ git clone https://github.com/RaspberryPiFoundation/blockly.git If you downloaded the source as a zip, unpacking it should give you a root folder named `blockly-main`. -The relevant files are in `docs/docs/codelabs/css`. There are two versions of the app: +The relevant files are in `packages/docs/docs/codelabs/css`. There are two versions of the app: - `starter-code/`: The starter code that you'll build upon in this codelab. - `complete-code/`: The code after completing the codelab, in case you get lost or want to compare to your version. diff --git a/packages/docs/docs/codelabs/custom-generator/setup.mdx b/packages/docs/docs/codelabs/custom-generator/setup.mdx index 625363a002f..872104674da 100644 --- a/packages/docs/docs/codelabs/custom-generator/setup.mdx +++ b/packages/docs/docs/codelabs/custom-generator/setup.mdx @@ -21,7 +21,7 @@ Use the [`npx @blockly/create-package app`](https://www.npmjs.com/package/@block The initial application has one custom block and includes JavaScript generator definitions for that block. Since this codelab will be creating a JSON generator instead, it will remove that custom block and add its own. -The complete code used in this codelab can be viewed in the `blockly` repository under [docs/docs/codelabs/custom-generator](https://github.com/RaspberryPiFoundation/blockly/docs/docs/codelabs/custom-generator/complete-code). +The complete code used in this codelab can be viewed in the `blockly` repository under [packages/docs/docs/codelabs/custom-generator](https://github.com/RaspberryPiFoundation/blockly/tree/main/packages/docs/docs/codelabs/custom-generator/complete-code). Before setting up the rest of the application, change the storage key used for this codelab application. This will ensure that the workspace is saved in its own storage, separate from the regular sample app, so that it doesn't interfere with other demos. In `serialization.js`, change the value of `storageKey` to some unique string. `jsonGeneratorWorkspace` will work: diff --git a/packages/docs/docs/codelabs/custom-renderer/define-and-register-a-custom-renderer.mdx b/packages/docs/docs/codelabs/custom-renderer/define-and-register-a-custom-renderer.mdx index 4751a607f60..3201a122099 100644 --- a/packages/docs/docs/codelabs/custom-renderer/define-and-register-a-custom-renderer.mdx +++ b/packages/docs/docs/codelabs/custom-renderer/define-and-register-a-custom-renderer.mdx @@ -35,7 +35,7 @@ Blockly.blockRendering.register('custom_renderer', CustomRenderer); To use the custom renderer, import the new file at the top of `src/index.js`: ```js -import './renderers/javascript'; +import './renderers/custom'; ``` Now, add the the `renderer` property into the configuration struct passed to `Blockly.inject` so that it now looks like this: diff --git a/packages/docs/docs/codelabs/custom-renderer/setup.mdx b/packages/docs/docs/codelabs/custom-renderer/setup.mdx index 6d62959715d..3680f539d11 100644 --- a/packages/docs/docs/codelabs/custom-renderer/setup.mdx +++ b/packages/docs/docs/codelabs/custom-renderer/setup.mdx @@ -19,7 +19,7 @@ Use the Use the [`npx @blockly/create-package`](https://www.npmjs.com/package/@b The initial application uses the default renderer and contains no code or definitions for a custom renderer. -The complete code used in this codelab can be viewed in the `blockly` repository under [docs/docs/codelabs/custom-renderer](https://github.com/RaspberryPiFoundation/blockly/docs/docs/codelabs/custom-renderer/complete-code). +The complete code used in this codelab can be viewed in the `blockly` repository under [packages/docs/docs/codelabs/custom-renderer](https://github.com/RaspberryPiFoundation/blockly/tree/main/packages/docs/docs/codelabs/custom-renderer/complete-code). Before setting up the rest of the application, change the storage key used for this codelab application. This will ensure that the workspace is saved in its own storage, separate from the regular sample app, so that it doesn't interfere with other demos. In `serialization.js`, change the value of `storageKey` to some unique string. `customRenderersWorkspace` will work: diff --git a/packages/docs/docs/codelabs/custom-toolbox/adding-a-custom-toolbox-item.mdx b/packages/docs/docs/codelabs/custom-toolbox/adding-a-custom-toolbox-item.mdx index 140955f6a7c..bccedc99fab 100644 --- a/packages/docs/docs/codelabs/custom-toolbox/adding-a-custom-toolbox-item.mdx +++ b/packages/docs/docs/codelabs/custom-toolbox/adding-a-custom-toolbox-item.mdx @@ -149,7 +149,7 @@ Navigate to your toolbox definition in `index.html` and modify it to look like the below line. ```xml - + ``` Any item that begins with `css-` will be added to a `cssconfig` object stored on diff --git a/packages/docs/docs/codelabs/custom-toolbox/codelab-overview.mdx b/packages/docs/docs/codelabs/custom-toolbox/codelab-overview.mdx index 6a6ca97ff14..9d5c050cd88 100644 --- a/packages/docs/docs/codelabs/custom-toolbox/codelab-overview.mdx +++ b/packages/docs/docs/codelabs/custom-toolbox/codelab-overview.mdx @@ -33,7 +33,7 @@ The resulting toolbox is shown below. className="codelabImage" /> -The code samples are written in ES6 syntax. You can find the code for the [completed custom toolbox](https://github.com/RaspberryPiFoundation/blockly/docs/docs/codelabs/custom-toolbox/complete-code) on GitHub. +The code samples are written in ES6 syntax. You can find the code for the [completed custom toolbox](https://github.com/RaspberryPiFoundation/blockly/tree/main/packages/docs/docs/codelabs/custom-toolbox/complete-code) on GitHub. ### What you'll need diff --git a/packages/docs/docs/codelabs/custom-toolbox/setup.mdx b/packages/docs/docs/codelabs/custom-toolbox/setup.mdx index e5f17a131ea..a0e2fe013c6 100644 --- a/packages/docs/docs/codelabs/custom-toolbox/setup.mdx +++ b/packages/docs/docs/codelabs/custom-toolbox/setup.mdx @@ -22,7 +22,7 @@ git clone https://github.com/RaspberryPiFoundation/blockly.git If you downloaded the source as a zip, unpacking it should give you a root folder named `blockly-main`. -The relevant files are in `docs/docs/codelabs/custom-toolbox`. There are two versions of the app: +The relevant files are in `packages/docs/docs/codelabs/custom-toolbox`. There are two versions of the app: - `starter-code/`: The starter code that you'll build upon in this codelab. - `complete-code/`: The code after completing the codelab, in case you get lost or want to compare to your version. diff --git a/packages/docs/docs/codelabs/getting-started/codelab-overview.mdx b/packages/docs/docs/codelabs/getting-started/codelab-overview.mdx index 72d6ea81606..28d502b73f7 100644 --- a/packages/docs/docs/codelabs/getting-started/codelab-overview.mdx +++ b/packages/docs/docs/codelabs/getting-started/codelab-overview.mdx @@ -11,7 +11,7 @@ import Image from '@site/src/components/Image'; ### What you'll learn -This codelab will teach you how to modify a simple web app to include the [Blockly](/blockly) visual programming library. +This codelab will teach you how to modify a simple web app to include the [Blockly](/guides/get-started/what-is-blockly) visual programming library. ### What is Blockly? diff --git a/packages/docs/docs/codelabs/getting-started/setup.mdx b/packages/docs/docs/codelabs/getting-started/setup.mdx index bb1b653ee7d..2f46ec0c102 100644 --- a/packages/docs/docs/codelabs/getting-started/setup.mdx +++ b/packages/docs/docs/codelabs/getting-started/setup.mdx @@ -20,7 +20,7 @@ git clone https://github.com/RaspberryPiFoundation/blockly.git If you downloaded the source as a zip, unpacking it should give you a root folder named `blockly-main`. -The relevant files are in `docs/docs/codelabs/getting-started`. There are two versions of the app: +The relevant files are in `packages/docs/docs/codelabs/getting-started`. There are two versions of the app: - `starter-code/`: The starter code that you'll build upon in this codelab. - `complete-code/`: The code after completing the codelab, in case you get lost or want to compare to your version. diff --git a/packages/docs/docs/codelabs/theme-extension-identifier/setup.mdx b/packages/docs/docs/codelabs/theme-extension-identifier/setup.mdx index d864ea70e92..28ecc26a1ef 100644 --- a/packages/docs/docs/codelabs/theme-extension-identifier/setup.mdx +++ b/packages/docs/docs/codelabs/theme-extension-identifier/setup.mdx @@ -20,7 +20,7 @@ git clone https://github.com/RaspberryPiFoundation/blockly.git If you downloaded the source as a zip, unpacking it should give you a root folder named `blockly-main`. -The relevant files are in `docs/docs/codelabs/theme-extension-identifier`. There are two versions of the app: +The relevant files are in `packages/docs/docs/codelabs/theme-extension-identifier`. There are two versions of the app: - `starter-code/`: The starter code that you'll build upon in this codelab. - `complete-code/`: The code after completing the codelab, in case you get lost or want to compare to your version. diff --git a/packages/docs/docs/codelabs/validation-and-warnings/codelab-overview.mdx b/packages/docs/docs/codelabs/validation-and-warnings/codelab-overview.mdx index 0ef4d83c615..f402ac3b412 100644 --- a/packages/docs/docs/codelabs/validation-and-warnings/codelab-overview.mdx +++ b/packages/docs/docs/codelabs/validation-and-warnings/codelab-overview.mdx @@ -26,7 +26,7 @@ In this codelab, you'll create a new custom block type that generates a list of className="codelabImage" /> -You can find the code for the [completed custom block](https://github.com/RaspberryPiFoundation/blockly/docs/docs/codelabs/validation-and-warnings/complete-code/index.js) on GitHub. +You can find the code for the [completed custom block](https://github.com/RaspberryPiFoundation/blockly/tree/main/packages/docs/docs/codelabs/validation-and-warnings/complete-code/index.js) on GitHub. ### What you'll need diff --git a/packages/docs/docs/codelabs/validation-and-warnings/setup.mdx b/packages/docs/docs/codelabs/validation-and-warnings/setup.mdx index 3154e4e78c2..5d5533b2819 100644 --- a/packages/docs/docs/codelabs/validation-and-warnings/setup.mdx +++ b/packages/docs/docs/codelabs/validation-and-warnings/setup.mdx @@ -22,7 +22,7 @@ git clone https://github.com/RaspberryPiFoundation/blockly.git If you downloaded the source as a zip, unpacking it should give you a root folder named `blockly-main`. -The relevant files are in `docs/docs/codelabs/validation-and-warnings`. There are two versions of the app: +The relevant files are in `packages/docs/docs/codelabs/validation-and-warnings`. There are two versions of the app: - `starter-code/`: The starter code that you'll build upon in this codelab. - `complete-code/`: The code after completing the codelab, in case you get lost or want to compare to your version. @@ -74,8 +74,8 @@ Then, to make this block available from the toolbox, find the toolbox definition ```js { - 'kind': 'block', - 'type': 'list_range', + kind: 'block', + type: 'list_range', }, ``` @@ -93,7 +93,7 @@ You can drag this block out from the toolbox into the workspace, but if you try ```js // Define how to generate JavaScript from the custom block. -javascript.javascriptGenerator['list_range'] = function (block) { +javascript.javascriptGenerator.forBlock['list_range'] = function (block) { const first = this.getFieldValue('FIRST'); const last = this.getFieldValue('LAST'); const numbers = []; diff --git a/packages/docs/docs/codelabs/validation-and-warnings/validating-blocks.mdx b/packages/docs/docs/codelabs/validation-and-warnings/validating-blocks.mdx index 9ed7bb85c00..4038a7000d4 100644 --- a/packages/docs/docs/codelabs/validation-and-warnings/validating-blocks.mdx +++ b/packages/docs/docs/codelabs/validation-and-warnings/validating-blocks.mdx @@ -13,20 +13,20 @@ When you're designing custom blocks, you may find that it doesn't make sense to Blockly generally allows users to enter negative values and decimal values for number fields, but for this custom block, let's make sure that only positive whole numbers are allowed. Add `'min': 0` and `'precision': 1` to the fields in the custom block definition so that they look like this: ```js - 'args0': [ + args0: [ { - 'type': 'field_number', - 'name': 'FIRST', - 'value': 0, - 'min': 0, - 'precision': 1, + type: 'field_number', + name: 'FIRST', + value: 0, + min: 0, + precision: 1, }, { - 'type': 'field_number', - 'name': 'LAST', - 'value': 5, - 'min': 0, - 'precision': 1, + type: 'field_number', + name: 'LAST', + value: 5, + min: 0, + precision: 1, }, ], ``` @@ -46,10 +46,10 @@ Let's give our custom block a new extension called `list_range_validation`. Add ```js Blockly.common.defineBlocksWithJsonArray([ { - 'type': 'list_range', + type: 'list_range', ... - 'style': 'list_blocks', - 'extensions': [ + style: 'list_blocks', + extensions: [ 'list_range_validation', ], }, diff --git a/packages/docs/static/images/codelabs/custom-toolbox/custom_label.png b/packages/docs/static/images/codelabs/custom-toolbox/custom_label.png index ef64708a50a..bc080a43b41 100644 Binary files a/packages/docs/static/images/codelabs/custom-toolbox/custom_label.png and b/packages/docs/static/images/codelabs/custom-toolbox/custom_label.png differ diff --git a/packages/docs/static/images/codelabs/custom-toolbox/toolbox_label.png b/packages/docs/static/images/codelabs/custom-toolbox/toolbox_label.png index ee59229e626..e22c18a1a89 100644 Binary files a/packages/docs/static/images/codelabs/custom-toolbox/toolbox_label.png and b/packages/docs/static/images/codelabs/custom-toolbox/toolbox_label.png differ