mirror of
https://github.com/google/blockly.git
synced 2026-05-01 09:30:11 +02:00
chore(docs): replace CodelabImage with standard Image component
This commit is contained in:
Greg Annandale
@@ -3,7 +3,7 @@ slug: /codelabs/context-menu-option/add-a-context-menu-item/index.html
|
||||
description: How to add a context menu item to the registry.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Customizing context menus
|
||||
|
||||
@@ -78,10 +78,10 @@ you will never need to make a new `ContextMenuRegistry`. Always use the singleto
|
||||
|
||||
Reload your web page and open a context menu on the workspace (right-click with a mouse, or press `Ctrl+Enter` (Windows) or `Command+Enter` (Mac) if you are navigating Blockly with the keyboard). You should see a new option labeled "Hello World" at the bottom of the context menu.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/context-menu-option/hello_world.png"
|
||||
alt='A context menu. The last option says "Hello World".'
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
Next, drag a block onto the workspace and open a context menu on the block. You'll see "Hello World" at the bottom of the block's context menu. Finally, open a context menu on the workspace and create a comment, then open a context menu on the comment's header. "Hello World" should be at the bottom of the context menu.
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/context-menu-option/setup/index.html
|
||||
description: Setting up the "Customizing context menus" codelab.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Customizing context menus
|
||||
|
||||
@@ -35,7 +35,8 @@ Each folder contains:
|
||||
|
||||
To run the code, simple open `starter-code/index.html` in a browser. You should see a Blockly workspace with an always-open flyout.
|
||||
|
||||
<CodelabImage>
|
||||
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/context-menu-option/starter_workspace.png"
|
||||
alt='A web page with the text "Context Menu Codelab" and a simple Blockly workspace.'
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
@@ -4,7 +4,7 @@ slug: /codelabs/custom-generator/codelab-overview/index.html
|
||||
description: Overview of the "Build a custom generator" codelab.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Build a custom generator
|
||||
|
||||
@@ -21,11 +21,11 @@ import CodelabImage from '@site/src/components/CodelabImage';
|
||||
|
||||
You will build a JSON generator that implements the [JSON language spec](https://www.json.org/json-en.html).
|
||||
|
||||
<CodelabImage>
|
||||
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-generator/json_workspace.png"
|
||||
alt="Screenshot of the toolbox and workspace built in this codelab. It contains blocks that implement the JSON spec, like member, object, lists, strings, and numbers."
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
### What you'll need
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/custom-generator/setup/index.html
|
||||
description: Setting up the "Build a custom generator" codelab.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Build a custom generator
|
||||
|
||||
@@ -162,10 +162,10 @@ Our `index.js` file already handles importing the toolbox and using it in Blockl
|
||||
|
||||
If the server is already running, refresh the page to see changes. Otherwise, run `npm start` to start the server. New blocks should now exist in the toolbox, like this:
|
||||
|
||||
<CodelabImage>
|
||||
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-generator/toolbox_blocks.png"
|
||||
alt="Screenshot of toolbox showing the added blocks, including the new member and object blocks, plus the built-in number, text, boolean, null, and list blocks."
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
The app is still trying to generate and run JavaScript for the workspace, instead of JSON. We will change that soon.
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/custom-generator/value-block-generators/index.html
|
||||
description: How to write a block code generator for a simple value block.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Build a custom generator
|
||||
|
||||
@@ -17,10 +17,11 @@ It will use `getFieldValue` on several types of fields.
|
||||
|
||||
The simplest block in this example is the `logic_null` block.
|
||||
|
||||
<CodelabImage>
|
||||
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-generator/null_block.png"
|
||||
alt='The null block simply returns "null".'
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
No matter what, it generates the code `'null'`. Notice that this is a string, because all generated code is a string.
|
||||
Add the following code to `src/generators/json.js`:
|
||||
@@ -35,10 +36,11 @@ jsonGenerator.forBlock['logic_null'] = function (block) {
|
||||
|
||||
Next is the `text` block.
|
||||
|
||||
<CodelabImage>
|
||||
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-generator/text_block.png"
|
||||
alt="The text block has an input for the user to type text into."
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
Unlike `logic_null`, there is a single text input field on this block. Use `getFieldValue`:
|
||||
|
||||
@@ -60,10 +62,11 @@ jsonGenerator.forBlock['text'] = function (block) {
|
||||
|
||||
The `math_number` block has a number field.
|
||||
|
||||
<CodelabImage>
|
||||
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-generator/number_block.png"
|
||||
alt="The number block has an input for a user to type a number"
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
Like the `text` block, the `math_number` block can use `getFieldValue`. Unlike the text block, the function doesn't need to wrap it in additional quotation marks, because in the JSON code, it won't be a string.
|
||||
|
||||
@@ -80,10 +83,11 @@ jsonGenerator.forBlock['math_number'] = function (block) {
|
||||
|
||||
The `logic_boolean` block has a dropdown field named `BOOL`.
|
||||
|
||||
<CodelabImage>
|
||||
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-generator/boolean_block.png"
|
||||
alt="The boolean block lets the user select 'true' or 'false' from a dropdown menu."
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
Calling `getFieldValue` on a dropdown field returns the value of the selected option, which may not be the same as the display text. In this case the dropdown has two possible values: `TRUE` and `FALSE`.
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/add-an-icon-to-your-category/index.html
|
||||
description: How to add an icon to your category.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Customizing a Blockly toolbox
|
||||
|
||||
@@ -113,14 +113,14 @@ Your `setSelected` method should look similar to below:
|
||||
If you open your `index.html` file, you should see a white gear above your "Logic"
|
||||
label, and it should change to blue when the category has been selected.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-toolbox/category_gear.png"
|
||||
alt='A white gear above the word "Logic" on a blue background.'
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-toolbox/category_gear_selected.png"
|
||||
alt='A blue gear above the word "Logic" on a white background.'
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/adding-a-custom-toolbox-item/index.html
|
||||
description: How to add a custom item to a toolbox.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Customizing a Blockly toolbox
|
||||
|
||||
@@ -94,11 +94,11 @@ Next, we are going to return this element:
|
||||
|
||||
If you open the `index.html` file you should see a label above your first category.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-toolbox/toolbox_label.png"
|
||||
alt="The toolbox with a label at the top."
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
### Add attributes to the toolbox definition
|
||||
|
||||
@@ -135,11 +135,11 @@ All attributes on our toolbox definition get added to the `toolboxItemDef_`.
|
||||
|
||||
Open your `index.html` in a browser to see the updated label.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-toolbox/custom_label.png"
|
||||
alt='The toolbox with a label that now says "Custom Toolbox".'
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
### Add some CSS
|
||||
|
||||
@@ -182,8 +182,8 @@ the below CSS to make the label bold.
|
||||
If you open `index.html` you should now see a bold dark gray label at the
|
||||
top of your toolbox.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-toolbox/final_toolbox.png"
|
||||
alt="A toolbox with colored background and the blockly label above the category text."
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/change-the-category-HTML/index.html
|
||||
description: How to change the HTML used by a category.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Customizing a Blockly toolbox
|
||||
|
||||
@@ -38,8 +38,8 @@ createIconDom_() {
|
||||
If you open `index.html` you should now see the blockly logo on top of all your
|
||||
categories
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-toolbox/image_toolbox.png"
|
||||
alt="A toolbox with the blockly logo on top of the category label."
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/change-the-look-of-a-category/index.html
|
||||
description: How to change the look of a category.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Customizing a Blockly toolbox
|
||||
|
||||
@@ -49,11 +49,11 @@ For more information on Blockly styles please visit the [themes documentation](/
|
||||
Open `index.html` to see your updated toolbox. Your toolbox should look
|
||||
similar to the below toolbox.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-toolbox/colored_toolbox.png"
|
||||
alt="A toolbox with colors that expand the across the entire category."
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
We are going to add some CSS to make it easier to read, and to space out our categories.
|
||||
|
||||
@@ -87,8 +87,8 @@ Copy and paste the following CSS into your `toolbox_style.css` file.
|
||||
|
||||
Open `index.html` to see your toolbox.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-toolbox/styled_toolbox.png"
|
||||
alt="Toolbox with category corners that are rounded and white text."
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
+6
-7
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/change-the-look-of-a-selected-category/index.html
|
||||
description: How to change the look of a selected category.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Customizing a Blockly toolbox
|
||||
|
||||
@@ -49,9 +49,8 @@ setSelected(isSelected){
|
||||
Open `index.html` and click on the "Logic" category. You should now see a white
|
||||
category with a colored label.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-toolbox/category_selected.png"
|
||||
alt="A toolbox with all categories colored except for the first category that has a white background."
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
@@ -4,7 +4,7 @@ slug: /codelabs/custom-toolbox/codelab-overview/index.html
|
||||
description: Overview of the "Customizing a Blockly toolbox" codelab.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Customizing a Blockly toolbox
|
||||
|
||||
@@ -28,11 +28,11 @@ Over the course of this codelab you will customize your toolbox categories as we
|
||||
as create a custom toolbox item.
|
||||
The resulting toolbox is shown below.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-toolbox/final_toolbox.png"
|
||||
alt="A toolbox with colored background and the blockly label above the category text."
|
||||
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.
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/setup/index.html
|
||||
description: Setting up the "Customizing a Blockly toolbox" codelab.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Customizing a Blockly toolbox
|
||||
|
||||
@@ -85,11 +85,11 @@ an error because we are overriding an existing class.
|
||||
To test, open `index.html` in a browser. Your toolbox should look the same as it
|
||||
did before.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/custom-toolbox/base_toolbox.png"
|
||||
alt="The default toolbox. A list of categories with a strip of colour to the left."
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
However, if you run the below commands in your console you will see that
|
||||
your toolbox is now using the `CustomCategory` class.
|
||||
|
||||
@@ -4,7 +4,7 @@ slug: /codelabs/getting-started/codelab-overview/index.html
|
||||
description: Overview of the "Getting started with Blockly" codelab.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Getting started with Blockly
|
||||
|
||||
@@ -26,15 +26,17 @@ Blockly includes everything you need for defining and rendering blocks in a drag
|
||||
|
||||
MusicMaker, a web app where you can program buttons to play different sounds, using Blockly.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/getting-started/play_mode.png"
|
||||
alt="image"
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/getting-started/d4_three_times.png"
|
||||
alt="image"
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
### What you'll need
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/getting-started/create-a-blockly-workspace/index.html
|
||||
description: How to add a workspace to your app.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Getting started with Blockly
|
||||
|
||||
@@ -18,10 +18,11 @@ A Blockly workspace has two main components:
|
||||
- The area where the user assembles their blocks (the white area).
|
||||
- A toolbox that contains all blocks that are available to the user (the grey area).
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/getting-started/d4_three_times.png"
|
||||
alt="image"
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
The toolbox may be organized into categories, and may contain both single blocks and groups of blocks. A well-organized toolbox helps the user to explore the available blocks and understand the capabilities of the underlying system.
|
||||
|
||||
@@ -98,9 +99,10 @@ The `options` struct gives you significant control over your Blockly instance. Y
|
||||
|
||||
Now refresh the page. Select the EDIT mode, then tap on one of the buttons. You should see a Blockly editor:
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/getting-started/workspace_with_loop.png"
|
||||
alt="image"
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
Drag and drop the available loop block to the workspace to test it out.
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/getting-started/create-a-custom-block/index.html
|
||||
description: How to create a custom block.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Getting started with Blockly
|
||||
|
||||
@@ -11,10 +11,11 @@ import CodelabImage from '@site/src/components/CodelabImage';
|
||||
|
||||
Since this is a music maker app, we want a block that plays sounds. We could create one block per sound, but instead we will create a single block with a dropdown to select which note to play:
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/getting-started/play_sound_block.png"
|
||||
alt="image"
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
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.
|
||||
|
||||
@@ -101,10 +102,11 @@ const toolbox = {
|
||||
|
||||
Run the app one more time, and play around with the new `Play (sound)` block. It should look like this:
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/getting-started/workspace_with_toolbox.png"
|
||||
alt="image"
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
### The block factory
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/getting-started/explore-the-app/index.html
|
||||
description: Explore Blockly's getting started app.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Getting started with Blockly
|
||||
|
||||
@@ -15,18 +15,20 @@ To run the app, simply open `starter-code/index.html` in a browser.
|
||||
|
||||
By default, the app launches in "**Play Mode**". In this mode, you can see 9 buttons. None of them can do anything yet. The idea is to let the user define custom behaviors for each button, using Blockly.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/getting-started/play_mode.png"
|
||||
alt="image"
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
### Edit mode
|
||||
|
||||
By tapping the **EDIT** button, you can switch to edit mode. In this mode, tapping a button will display an editor, which is where you can program how sounds should play for that button. For now, the editor screen is empty.
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/getting-started/edit_mode_unimplemented.png"
|
||||
alt="image"
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
You can go back to the play mode by tapping **SAVE** and then **DONE** buttons.
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/getting-started/generate-javaScript-code/index.html
|
||||
description: How to generate JavaScript code.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Getting started with Blockly
|
||||
|
||||
@@ -36,10 +36,11 @@ javascript.javascriptGenerator.forBlock['play_sound'] = function (block) {
|
||||
|
||||
With this translation function, the following `play_sound` block:
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/getting-started/play_sound_block.png"
|
||||
alt="image"
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
translates into the JavaScript code:
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/getting-started/run-generated-code/index.html
|
||||
description: How to run generated code.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Getting started with Blockly
|
||||
|
||||
@@ -65,9 +65,10 @@ Executing scripts with eval is not always the safest option - we use it here for
|
||||
|
||||
Run the app and try it out! Edit one of the buttons to play a D4 sound 3 times:
|
||||
|
||||
<CodelabImage>
|
||||
{' '}
|
||||
{' '}
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/getting-started/d4_three_times.png"
|
||||
alt="image"
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
Save and exit the edit mode. Now if you tap this button, you should hear the D4 sound played 3 times.
|
||||
|
||||
@@ -4,7 +4,7 @@ slug: /codelabs/validation-and-warnings/codelab-overview/index.html
|
||||
description: Overview of the "Block validation and warnings" codelab.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Block validation and warnings
|
||||
|
||||
@@ -21,10 +21,11 @@ This codelab will show you how to ensure that custom blocks either:
|
||||
|
||||
In this codelab, you'll create a new custom block type that generates a list of numbers counting up within a given range. The block will validate itself and display a warning if the first number in the range is greater than the last number:
|
||||
|
||||
<CodelabImage>
|
||||
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/validation-and-warnings/final_range_blocks.png"
|
||||
alt="Two instances of a custom block, one with a validation warning."
|
||||
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.
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ slug: /codelabs/validation-and-warnings/setup/index.html
|
||||
description: Setting up the "Block validation and warnings" codelab.
|
||||
---
|
||||
|
||||
import CodelabImage from '@site/src/components/CodelabImage';
|
||||
import Image from '@site/src/components/Image';
|
||||
|
||||
# Block validation and warnings
|
||||
|
||||
@@ -82,10 +82,11 @@ Then, to make this block available from the toolbox, find the toolbox definition
|
||||
|
||||
Now, if you reload `index.html` and open the toolbox, you should see the new block at the top:
|
||||
|
||||
<CodelabImage>
|
||||
|
||||
</CodelabImage>
|
||||
<Image
|
||||
src="/images/codelabs/validation-and-warnings/completed_toolbox.png"
|
||||
alt="A Blockly toolbox containing range, for-each, sum, print, and break blocks."
|
||||
className="codelabImage"
|
||||
/>
|
||||
|
||||
### Generating JavaScript code for the custom block
|
||||
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function CodelabImage({ children }) {
|
||||
return <p className="codelabImages">{children}</p>;
|
||||
}
|
||||
@@ -316,8 +316,9 @@ h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.codelabImages {
|
||||
text-align: center;
|
||||
.codelabImage {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
|
||||
Reference in New Issue
Block a user