Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion codelabs/context_menu_option/context_menu_option.md
Original file line number Diff line number Diff line change
Expand Up @@ -357,4 +357,4 @@ In this codelab you have learned how to create and modify context menu options.

- [Context menu documentation](https://developers.google.com/blockly/guides/configure/web/context-menus)

- You can also define [block context menus](https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks#context_menus) directly on a block definition, which is equivalent to adding a precondition based on the type of the block.
- You can also define [block context menus](https://developers.google.com/blockly/guides/configure/web/context-menus#customize_per_block) directly on a block definition, which is equivalent to adding a precondition based on the type of the block.
4 changes: 2 additions & 2 deletions codelabs/custom_generator/custom_generator.md
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ sampleGenerator.forBlock['left_turn_block'] = function(block, generator) {

Value blocks represent code that returns a value.

A value block's generator returns an array containing a string and a [precedence value](https://developers.google.com/blockly/guides/create-custom-blocks/operator-precedence). The built-in generators have predefined operator precedence values exported as an `Order` enum.
A value block's generator returns an array containing a string and a [precedence value](https://developers.google.com/blockly/guides/create-custom-blocks/code-generation/operator-precedence). The built-in generators have predefined operator precedence values exported as an `Order` enum.

This code defines a block generator that always returns `1 + 1`:

Expand All @@ -301,7 +301,7 @@ Operator precedence rules determine how the correct order of operations is maint

--> Read more about [operator precedence in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence).

--> Read more about [operator precedence in Blockly](https://developers.google.com/blockly/guides/create-custom-blocks/operator-precedence).
--> Read more about [operator precedence in Blockly](https://developers.google.com/blockly/guides/create-custom-blocks/code-generation/operator-precedence).

Since JSON does not allow values that are expressions, the code does not need to consider operator precedence for the generator being built in this codelab. The same value can be used everywhere a precedence value is required. Since parentheses never need to be added to the JSON, call this value `ATOMIC`.

Expand Down
8 changes: 4 additions & 4 deletions codelabs/custom_toolbox/custom_toolbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ The code samples are written in ES6 syntax. You can find the code for the [compl
- A browser.
- A text editor.
- Basic knowledge of HTML, CSS, and JavaScript.
- Basic understanding of the [Blockly toolbox](https://developers.google.com/blockly/guides/configure/web/toolbox).
- Basic understanding of the [Blockly toolbox](https://developers.google.com/blockly/guides/configure/web/toolboxes/toolbox).

Throughout various parts of this codelab we will be talking about [toolbox definitions](https://developers.google.com/blockly/guides/configure/web/toolbox#xml).
Throughout various parts of this codelab we will be talking about [toolbox definitions](https://developers.google.com/blockly/guides/configure/web/toolboxes/category#xml).
The toolbox definition can be written in XML or JSON. We will be using an XML
toolbox definition that can be found in the provided code.

Expand Down Expand Up @@ -149,7 +149,7 @@ The logic_category style looks like:
"colour": "210"
}
```
For more information on Blockly styles please visit the [themes documentation](https://developers.google.com/blockly/guides/configure/web/themes#category_style).
For more information on Blockly styles please visit the [themes documentation](https://developers.google.com/blockly/guides/configure/web/appearance/themes#category_style).

### Add some CSS

Expand Down Expand Up @@ -254,7 +254,7 @@ to be:
<category css-icon="customIcon fa fa-cog" name="Logic" categorystyle="logic_category">
```
All the classes used to create a category can be set similar to how we set the
icon class above. See the [Blockly toolbox documentation](https://developers.google.com/blockly/guides/configure/web/toolbox#category_css) for more information.
icon class above. See the [Blockly toolbox documentation](https://developers.google.com/blockly/guides/configure/web/toolboxes/appearance#category_css) for more information.

### Add some CSS
If you open `index.html` you will notice that the gear icon is positioned
Expand Down
10 changes: 5 additions & 5 deletions codelabs/getting_started/getting_started.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ The toolbox may be organized into categories, and may contain both single blocks

A toolbox is defined as a JavaScript object and passed into the workspace constructor through an options struct.

For more information on this JSON format and toolbox configuration, including category creation, please see our <a href="https://developers.google.com/blockly/guides/configure/web/toolbox">toolbox documentation</a>.
For more information on this JSON format and toolbox configuration, including category creation, please see our <a href="https://developers.google.com/blockly/guides/configure/web/toolboxes/toolbox">toolbox documentation</a>.


### Define the toolbox
Expand Down Expand Up @@ -204,7 +204,7 @@ Let's look at the options we used to initialize your blockly editor:
- `horizontalLayout`: Whether to display the toolbox horizontally or vertically in the workspace.
- `toolboxPosition`: Whether to show the toolbox at the top or bottom of the workspace.

The `options` struct gives you significant control over your Blockly instance. You can pass options to set Blockly's theme, modify scrolling behaviour, set the renderer, and more. For more information, head over to Blockly's developer site and check out the [configuration](https://developers.google.com/blockly/guides/get-started/web#configuration) section.
The `options` struct gives you significant control over your Blockly instance. You can pass options to set Blockly's theme, modify scrolling behaviour, set the renderer, and more. For more information, head over to Blockly's developer site and check out the [configuration](https://developers.google.com/blockly/guides/configure/web/configuration_struct#the_options_dictionary) section.

### Check your work

Expand All @@ -222,7 +222,7 @@ Since this is a music maker app, we want a block that plays sounds. We could cre

In Blockly, a *block definition* describes how a block looks and behaves. This includes its text, colour, and shape. It may also include which other blocks it can connect to.

Blocks can be defined in either JavaScript or JSON. The developer site has a full article on [how to define a block](https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks).
Blocks can be defined in either JavaScript or JSON. The developer site has a full article on [how to define a block](https://developers.google.com/blockly/guides/create-custom-blocks/define/block-definitions#how_to_create_block_definitions).

In this codelab we will simply provide the block definition for you to copy and use.

Expand Down Expand Up @@ -395,7 +395,7 @@ translates into the JavaScript code:
MusicMaker.queueSound('Sounds/c4.m4a');
```

For more information on generators, read the [generating code](https://developers.google.com/blockly/guides/create-custom-blocks/generating-code) page on the developer site.
For more information on block generators, read the [generating code](https://developers.google.com/blockly/guides/create-custom-blocks/code-generation/overview#block-code_generators) page on the developer site.

## Run generated code

Expand Down Expand Up @@ -458,6 +458,6 @@ Save and exit the edit mode. Now if you tap this button, you should hear the D4

And with that, you're done with the Blockly codelab! If you'd like to continue playing with the app, we suggest adding or changing the available blocks. There are sample sound files in the `sounds` folder - try hooking them up to a new block!

For more documentation, visit the [Blockly developer site](https://developers.google.com/blockly/).
For more documentation, visit the [Blockly developer site](https://developers.google.com/blockly/guides/get-started/what-is-blockly).

Additionally, Blockly has an active [developer forum](https://groups.google.com/forum/#!forum/blockly). Please drop by and say hello. We're happy to answer any questions or give advice on best practices for building an app with Blockly. Feel free to show us your prototypes early; collectively we have a lot of experience and can offer hints which will save you time.
6 changes: 3 additions & 3 deletions codelabs/theme_extension/theme_extension.md
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ Clicking on a category will highlight the row with your new colour.
## Customize Block Styles
A block style currently only holds three different colour properties. They are 'colourPrimary',
'colourSecondary' and 'colourTertiary'. This value can either be defined as a hex value or as a hue.
For more information on block styles visit our themes [documentation](https://developers.google.com/blockly/guides/configure/web/themes#block_style)
For more information on block styles visit our themes [documentation](https://developers.google.com/blockly/guides/configure/web/appearance/themes#block_style)

Update the Theme definition to have the block styles as below.

Expand Down Expand Up @@ -245,6 +245,6 @@ In this codelab you have learned how to extend and customize themes for the bloc

### Additional information

- [Themes documentation](https://developers.google.com/blockly/guides/configure/web/themes)
- [Themes documentation](https://developers.google.com/blockly/guides/configure/web/appearance/themes)

- You can also customize the font styles. Details are available in the [documentation](https://developers.google.com/blockly/guides/configure/web/themes#font_styles).
- You can also customize the font styles. Details are available in the [documentation](https://developers.google.com/blockly/guides/configure/web/appearance/themes#font_styles).
18 changes: 9 additions & 9 deletions codelabs/validation_and_warnings/validation_and_warnings.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ You can find the code for the [completed custom block](https://github.com/google
- A browser.
- A text editor.
- Basic knowledge of JavaScript.
- Basic understanding of the [Blockly toolbox](https://developers.google.com/blockly/guides/configure/web/toolbox).
- Basic understanding of [using JSON to define custom blocks](https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks).
- Basic understanding of the [Blockly toolbox](https://developers.google.com/blockly/guides/configure/web/toolboxes/toolbox).
- Basic understanding of [using JSON to define custom blocks](https://developers.google.com/blockly/guides/create-custom-blocks/define/structure-json).

## Setup

Expand Down Expand Up @@ -239,7 +239,7 @@ Depending on the severity of the issue, this might be sufficient for your custom

![A Blockly workspace with disabled break and continue blocks.](disabled_break.png)

You can disable a block using `this.setEnabled(false)`, although there are some caveats: disabled blocks can't be dragged out of the toolbox flyout, and the act of disabling a block usually adds an event to Blockly's undo history. That's probably not the behavior you want when validating a block, so you can avoid both of these effects with the following code, which you should put inside the change listener function after setting the warning text:
You can disable a block using `this.setDisabledReason(true, 'reason')`, although there are some caveats: disabled blocks can't be dragged out of the toolbox flyout, and the act of disabling a block usually adds an event to Blockly's undo history. That's probably not the behavior you want when validating a block, so you can avoid both of these effects with the following code, which you should put inside the change listener function after setting the warning text:

```js
// Disable invalid blocks (unless it's in a toolbox flyout,
Expand All @@ -248,7 +248,7 @@ You can disable a block using `this.setEnabled(false)`, although there are some
const initialGroup = Blockly.Events.getGroup();
// Make it so the move and the disable event get undone together.
Blockly.Events.setGroup(event.group);
this.setEnabled(valid);
this.setDisabledReason(!valid, 'Invalid range');
Blockly.Events.setGroup(initialGroup);
}
```
Expand All @@ -270,10 +270,10 @@ You can find the code for the [completed custom block](https://github.com/google

### Resources
For more information related topics, check out the documentation:
* [Defining the toolbox](https://developers.google.com/blockly/guides/configure/web/toolbox)
* [Defining custom blocks](https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks)
* [Generating code from blocks](https://developers.google.com/blockly/guides/create-custom-blocks/generating-code)
* [Creating extensions](https://developers.google.com/blockly/guides/create-custom-blocks/extensions)
* [Defining the toolbox](https://developers.google.com/blockly/guides/configure/web/toolboxes/toolbox)
* [Defining custom blocks](https://developers.google.com/blockly/guides/create-custom-blocks/overview)
* [Generating code from blocks](https://developers.googlehttps.com/blockly/guides/create-custom-blocks/code-generation/overview)
* [Creating extensions](https://developers.google.com/blockly/guides/create-custom-blocks/define/extensions#extensions)
* [Listening for change events](https://developers.google.com/blockly/guides/configure/web/events)
* [Custom validators](https://developers.google.com/blockly/guides/create-custom-blocks/fields/validators)
* [Custom block style guide](https://developers.google.com/blockly/guides/create-custom-blocks/style-guide)
* [Custom block style guide](https://developers.google.com/blockly/guides/design/blocks)
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ Blockly.Extensions.register('list_range_validation', function () {
const initialGroup = Blockly.Events.getGroup();
// Make it so the move and the disable event get undone together.
Blockly.Events.setGroup(event.group);
this.setEnabled(valid);
this.setDisabledReason(!valid, 'Invalid range');
Blockly.Events.setGroup(initialGroup);
}
});
Expand Down
Loading