From 703991ec994799d2e1f5c6eb014ba1a9ca2270ce Mon Sep 17 00:00:00 2001 From: Greg Annandale Date: Tue, 7 Apr 2026 09:53:36 +0100 Subject: [PATCH] chore(docs): replace CodelabImage with standard Image component --- .../add-a-context-menu-item.mdx | 12 +++--- .../codelabs/context-menu-option/setup.mdx | 11 +++--- .../custom-generator/codelab-overview.mdx | 12 +++--- .../docs/codelabs/custom-generator/setup.mdx | 12 +++--- .../value-block-generators.mdx | 38 ++++++++++--------- .../add-an-icon-to-your-category.mdx | 22 +++++------ .../adding-a-custom-toolbox-item.mdx | 32 ++++++++-------- .../change-the-category-HTML.mdx | 12 +++--- .../change-the-look-of-a-category.mdx | 22 +++++------ ...change-the-look-of-a-selected-category.mdx | 13 +++---- .../custom-toolbox/codelab-overview.mdx | 12 +++--- .../docs/codelabs/custom-toolbox/setup.mdx | 12 +++--- .../getting-started/codelab-overview.mdx | 20 +++++----- .../create-a-blockly-workspace.mdx | 20 +++++----- .../getting-started/create-a-custom-block.mdx | 20 +++++----- .../getting-started/explore-the-app.mdx | 20 +++++----- .../generate-javaScript-code.mdx | 11 +++--- .../getting-started/run-generated-code.mdx | 11 +++--- .../codelab-overview.mdx | 11 +++--- .../validation-and-warnings/setup.mdx | 11 +++--- packages/docs/src/components/CodelabImage.js | 5 --- packages/docs/src/css/custom.css | 5 ++- 22 files changed, 178 insertions(+), 166 deletions(-) delete mode 100644 packages/docs/src/components/CodelabImage.js diff --git a/packages/docs/docs/codelabs/context-menu-option/add-a-context-menu-item.mdx b/packages/docs/docs/codelabs/context-menu-option/add-a-context-menu-item.mdx index 5dbcc8578..a8a0096a4 100644 --- a/packages/docs/docs/codelabs/context-menu-option/add-a-context-menu-item.mdx +++ b/packages/docs/docs/codelabs/context-menu-option/add-a-context-menu-item.mdx @@ -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. - - {' '} - ![A context menu. The last option says "Hello - World".](../../../static/images/codelabs/context-menu-option/hello_world.png){' '} - +A context menu. The last option says "Hello World". 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. diff --git a/packages/docs/docs/codelabs/context-menu-option/setup.mdx b/packages/docs/docs/codelabs/context-menu-option/setup.mdx index fc9e4359e..5b197bb84 100644 --- a/packages/docs/docs/codelabs/context-menu-option/setup.mdx +++ b/packages/docs/docs/codelabs/context-menu-option/setup.mdx @@ -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. - - ![A web page with the text "Context Menu Codelab" and a simple Blockly - workspace.](../../../static/images/codelabs/context-menu-option/starter_workspace.png) - +A web page with the text "Context Menu Codelab" and a simple Blockly workspace. diff --git a/packages/docs/docs/codelabs/custom-generator/codelab-overview.mdx b/packages/docs/docs/codelabs/custom-generator/codelab-overview.mdx index 58b1f6b94..3907cfe13 100644 --- a/packages/docs/docs/codelabs/custom-generator/codelab-overview.mdx +++ b/packages/docs/docs/codelabs/custom-generator/codelab-overview.mdx @@ -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). - - ![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.](../../../static/images/codelabs/custom-generator/json_workspace.png) - +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. ### What you'll need diff --git a/packages/docs/docs/codelabs/custom-generator/setup.mdx b/packages/docs/docs/codelabs/custom-generator/setup.mdx index 48582bcfd..adc8ee36f 100644 --- a/packages/docs/docs/codelabs/custom-generator/setup.mdx +++ b/packages/docs/docs/codelabs/custom-generator/setup.mdx @@ -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: - - ![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.](../../../static/images/codelabs/custom-generator/toolbox_blocks.png) - +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. The app is still trying to generate and run JavaScript for the workspace, instead of JSON. We will change that soon. diff --git a/packages/docs/docs/codelabs/custom-generator/value-block-generators.mdx b/packages/docs/docs/codelabs/custom-generator/value-block-generators.mdx index e7102456e..65e7d68f6 100644 --- a/packages/docs/docs/codelabs/custom-generator/value-block-generators.mdx +++ b/packages/docs/docs/codelabs/custom-generator/value-block-generators.mdx @@ -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. - - ![The null block simply returns - "null".](../../../static/images/codelabs/custom-generator/null_block.png) - +The null block simply returns "null". 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. - - ![The text block has an input for the user to type text - into.](../../../static/images/codelabs/custom-generator/text_block.png) - +The text block has an input for the user to type text into. 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. - - ![The number block has an input for a user to type a - number](../../../static/images/codelabs/custom-generator/number_block.png) - +The number block has an input for a user to type a number 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`. - - ![The boolean block lets the user select 'true' or 'false' from a dropdown - menu.](../../../static/images/codelabs/custom-generator/boolean_block.png) - +The boolean block lets the user select 'true' or 'false' from a dropdown menu. 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`. diff --git a/packages/docs/docs/codelabs/custom-toolbox/add-an-icon-to-your-category.mdx b/packages/docs/docs/codelabs/custom-toolbox/add-an-icon-to-your-category.mdx index 9a58f7dcb..9249afd3b 100644 --- a/packages/docs/docs/codelabs/custom-toolbox/add-an-icon-to-your-category.mdx +++ b/packages/docs/docs/codelabs/custom-toolbox/add-an-icon-to-your-category.mdx @@ -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. - - {' '} - ![A white gear above the word "Logic" on a blue - background.](../../../static/images/codelabs/custom-toolbox/category_gear.png){' '} - +A white gear above the word "Logic" on a blue background. - - {' '} - ![A blue gear above the word "Logic" on a white - background.](../../../static/images/codelabs/custom-toolbox/category_gear_selected.png){' '} - +A blue gear above the word "Logic" on a white background. 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 03e2034c1..390ab37d0 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 @@ -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. - - {' '} - ![The toolbox with a label at the - top.](../../../static/images/codelabs/custom-toolbox/toolbox_label.png){' '} - +The toolbox with a label at the top. ### 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. - - {' '} - ![The toolbox with a label that now says "Custom - Toolbox".](../../../static/images/codelabs/custom-toolbox/custom_label.png){' '} - +The toolbox with a label that now says "Custom Toolbox". ### 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. - - {' '} - ![A toolbox with colored background and the blockly label above the category - text.](../../../static/images/codelabs/custom-toolbox/final_toolbox.png){' '} - +A toolbox with colored background and the blockly label above the category text. diff --git a/packages/docs/docs/codelabs/custom-toolbox/change-the-category-HTML.mdx b/packages/docs/docs/codelabs/custom-toolbox/change-the-category-HTML.mdx index f4db3904c..8c0e8f38c 100644 --- a/packages/docs/docs/codelabs/custom-toolbox/change-the-category-HTML.mdx +++ b/packages/docs/docs/codelabs/custom-toolbox/change-the-category-HTML.mdx @@ -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 - - {' '} - ![A toolbox with the blockly logo on top of the category - label.](../../../static/images/codelabs/custom-toolbox/image_toolbox.png){' '} - +A toolbox with the blockly logo on top of the category label. diff --git a/packages/docs/docs/codelabs/custom-toolbox/change-the-look-of-a-category.mdx b/packages/docs/docs/codelabs/custom-toolbox/change-the-look-of-a-category.mdx index 921b56d50..557f111ec 100644 --- a/packages/docs/docs/codelabs/custom-toolbox/change-the-look-of-a-category.mdx +++ b/packages/docs/docs/codelabs/custom-toolbox/change-the-look-of-a-category.mdx @@ -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. - - {' '} - ![A toolbox with colors that expand the across the entire - category.](../../../static/images/codelabs/custom-toolbox/colored_toolbox.png){' '} - +A toolbox with colors that expand the across the entire category. 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. - - {' '} - ![Toolbox with category corners that are rounded and white - text.](../../../static/images/codelabs/custom-toolbox/styled_toolbox.png){' '} - +Toolbox with category corners that are rounded and white text. diff --git a/packages/docs/docs/codelabs/custom-toolbox/change-the-look-of-a-selected-category.mdx b/packages/docs/docs/codelabs/custom-toolbox/change-the-look-of-a-selected-category.mdx index f63cbf3d4..d2cc4a50d 100644 --- a/packages/docs/docs/codelabs/custom-toolbox/change-the-look-of-a-selected-category.mdx +++ b/packages/docs/docs/codelabs/custom-toolbox/change-the-look-of-a-selected-category.mdx @@ -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. - - {' '} - ![A toolbox with all categories colored except for the first category that has - a white - background.](../../../static/images/codelabs/custom-toolbox/category_selected.png){' '} - +A toolbox with all categories colored except for the first category that has a white background. diff --git a/packages/docs/docs/codelabs/custom-toolbox/codelab-overview.mdx b/packages/docs/docs/codelabs/custom-toolbox/codelab-overview.mdx index 5e668c88b..02019df3e 100644 --- a/packages/docs/docs/codelabs/custom-toolbox/codelab-overview.mdx +++ b/packages/docs/docs/codelabs/custom-toolbox/codelab-overview.mdx @@ -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. - - {' '} - ![A toolbox with colored background and the blockly label above the category - text.](../../../static/images/codelabs/custom-toolbox/final_toolbox.png){' '} - +A toolbox with colored background and the blockly label above the category text. 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. diff --git a/packages/docs/docs/codelabs/custom-toolbox/setup.mdx b/packages/docs/docs/codelabs/custom-toolbox/setup.mdx index e24003bde..b391a875c 100644 --- a/packages/docs/docs/codelabs/custom-toolbox/setup.mdx +++ b/packages/docs/docs/codelabs/custom-toolbox/setup.mdx @@ -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. - - {' '} - ![The default toolbox. A list of categories with a strip of colour to the - left.](../../../static/images/codelabs/custom-toolbox/base_toolbox.png){' '} - +The default toolbox. A list of categories with a strip of colour to the left. However, if you run the below commands in your console you will see that your toolbox is now using the `CustomCategory` class. diff --git a/packages/docs/docs/codelabs/getting-started/codelab-overview.mdx b/packages/docs/docs/codelabs/getting-started/codelab-overview.mdx index f55fe04cf..abd9e6cd5 100644 --- a/packages/docs/docs/codelabs/getting-started/codelab-overview.mdx +++ b/packages/docs/docs/codelabs/getting-started/codelab-overview.mdx @@ -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. - - {' '} - ![image](../../../static/images/codelabs/getting-started/play_mode.png){' '} - +image - - {' '} - ![image](../../../static/images/codelabs/getting-started/d4_three_times.png){' '} - +image ### What you'll need diff --git a/packages/docs/docs/codelabs/getting-started/create-a-blockly-workspace.mdx b/packages/docs/docs/codelabs/getting-started/create-a-blockly-workspace.mdx index 89ee19212..8f8955161 100644 --- a/packages/docs/docs/codelabs/getting-started/create-a-blockly-workspace.mdx +++ b/packages/docs/docs/codelabs/getting-started/create-a-blockly-workspace.mdx @@ -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). - - {' '} - ![image](../../../static/images/codelabs/getting-started/d4_three_times.png){' '} - +image 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: - - {' '} - ![image](../../../static/images/codelabs/getting-started/workspace_with_loop.png){' '} - +image Drag and drop the available loop block to the workspace to test it out. diff --git a/packages/docs/docs/codelabs/getting-started/create-a-custom-block.mdx b/packages/docs/docs/codelabs/getting-started/create-a-custom-block.mdx index 9effdeba9..60f33f400 100644 --- a/packages/docs/docs/codelabs/getting-started/create-a-custom-block.mdx +++ b/packages/docs/docs/codelabs/getting-started/create-a-custom-block.mdx @@ -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: - - {' '} - ![image](../../../static/images/codelabs/getting-started/play_sound_block.png){' '} - +image 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: - - {' '} - ![image](../../../static/images/codelabs/getting-started/workspace_with_toolbox.png){' '} - +image ### The block factory diff --git a/packages/docs/docs/codelabs/getting-started/explore-the-app.mdx b/packages/docs/docs/codelabs/getting-started/explore-the-app.mdx index b2302c063..9f6599e7b 100644 --- a/packages/docs/docs/codelabs/getting-started/explore-the-app.mdx +++ b/packages/docs/docs/codelabs/getting-started/explore-the-app.mdx @@ -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. - - {' '} - ![image](../../../static/images/codelabs/getting-started/play_mode.png){' '} - +image ### 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. - - {' '} - ![image](../../../static/images/codelabs/getting-started/edit_mode_unimplemented.png){' '} - +image You can go back to the play mode by tapping **SAVE** and then **DONE** buttons. diff --git a/packages/docs/docs/codelabs/getting-started/generate-javaScript-code.mdx b/packages/docs/docs/codelabs/getting-started/generate-javaScript-code.mdx index bf8f9e7d6..8530bdff7 100644 --- a/packages/docs/docs/codelabs/getting-started/generate-javaScript-code.mdx +++ b/packages/docs/docs/codelabs/getting-started/generate-javaScript-code.mdx @@ -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: - - {' '} - ![image](../../../static/images/codelabs/getting-started/play_sound_block.png){' '} - +image translates into the JavaScript code: diff --git a/packages/docs/docs/codelabs/getting-started/run-generated-code.mdx b/packages/docs/docs/codelabs/getting-started/run-generated-code.mdx index a3b8000ff..f6dde8dce 100644 --- a/packages/docs/docs/codelabs/getting-started/run-generated-code.mdx +++ b/packages/docs/docs/codelabs/getting-started/run-generated-code.mdx @@ -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: - - {' '} - ![image](../../../static/images/codelabs/getting-started/d4_three_times.png){' '} - +image Save and exit the edit mode. Now if you tap this button, you should hear the D4 sound played 3 times. 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 9144ad971..5ed7e5ffd 100644 --- a/packages/docs/docs/codelabs/validation-and-warnings/codelab-overview.mdx +++ b/packages/docs/docs/codelabs/validation-and-warnings/codelab-overview.mdx @@ -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: - - ![Two instances of a custom block, one with a validation - warning.](../../../static/images/codelabs/validation-and-warnings/final_range_blocks.png) - +Two instances of a custom block, one with a validation warning. 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. diff --git a/packages/docs/docs/codelabs/validation-and-warnings/setup.mdx b/packages/docs/docs/codelabs/validation-and-warnings/setup.mdx index 2711ebe24..a2eff5513 100644 --- a/packages/docs/docs/codelabs/validation-and-warnings/setup.mdx +++ b/packages/docs/docs/codelabs/validation-and-warnings/setup.mdx @@ -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: - - ![A Blockly toolbox containing range, for-each, sum, print, and break - blocks.](../../../static/images/codelabs/validation-and-warnings/completed_toolbox.png) - +A Blockly toolbox containing range, for-each, sum, print, and break blocks. ### Generating JavaScript code for the custom block diff --git a/packages/docs/src/components/CodelabImage.js b/packages/docs/src/components/CodelabImage.js deleted file mode 100644 index 88216625a..000000000 --- a/packages/docs/src/components/CodelabImage.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -export default function CodelabImage({ children }) { - return

{children}

; -} diff --git a/packages/docs/src/css/custom.css b/packages/docs/src/css/custom.css index b100cbc85..42aef9b91 100644 --- a/packages/docs/src/css/custom.css +++ b/packages/docs/src/css/custom.css @@ -316,8 +316,9 @@ h3 { font-size: 20px; } -.codelabImages { - text-align: center; +.codelabImage { + display: block; + margin: 0 auto; } .tabs-container {