diff --git a/codelabs/context_menu_option/context_menu_option.md b/codelabs/context_menu_option/context_menu_option.md index 6200945ade..d3647b13c2 100644 --- a/codelabs/context_menu_option/context_menu_option.md +++ b/codelabs/context_menu_option/context_menu_option.md @@ -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. diff --git a/codelabs/custom_generator/custom_generator.md b/codelabs/custom_generator/custom_generator.md index 5f8db1134d..c29f8f354f 100644 --- a/codelabs/custom_generator/custom_generator.md +++ b/codelabs/custom_generator/custom_generator.md @@ -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`: @@ -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`. diff --git a/codelabs/custom_toolbox/custom_toolbox.md b/codelabs/custom_toolbox/custom_toolbox.md index 7e78918a66..e8392bdf2f 100644 --- a/codelabs/custom_toolbox/custom_toolbox.md +++ b/codelabs/custom_toolbox/custom_toolbox.md @@ -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. @@ -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 @@ -254,7 +254,7 @@ to be: ``` 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 diff --git a/codelabs/getting_started/getting_started.md b/codelabs/getting_started/getting_started.md index 226995504f..b7b1df9919 100644 --- a/codelabs/getting_started/getting_started.md +++ b/codelabs/getting_started/getting_started.md @@ -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 toolbox documentation. +For more information on this JSON format and toolbox configuration, including category creation, please see our toolbox documentation. ### Define the toolbox @@ -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 @@ -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. @@ -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 @@ -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. diff --git a/codelabs/theme_extension/theme_extension.md b/codelabs/theme_extension/theme_extension.md index 676b890f5d..34c1acfbda 100644 --- a/codelabs/theme_extension/theme_extension.md +++ b/codelabs/theme_extension/theme_extension.md @@ -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. @@ -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). diff --git a/codelabs/validation_and_warnings/validation_and_warnings.md b/codelabs/validation_and_warnings/validation_and_warnings.md index 95c309d3b7..8c6e7cfae3 100644 --- a/codelabs/validation_and_warnings/validation_and_warnings.md +++ b/codelabs/validation_and_warnings/validation_and_warnings.md @@ -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 @@ -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, @@ -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); } ``` @@ -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) diff --git a/examples/validation-and-warnings-codelab/complete-code/index.js b/examples/validation-and-warnings-codelab/complete-code/index.js index d5706a4e86..cdd841fc2c 100644 --- a/examples/validation-and-warnings-codelab/complete-code/index.js +++ b/examples/validation-and-warnings-codelab/complete-code/index.js @@ -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); } });