CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-04-26 23:20:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore(docs): remove ClassBlack component, add individual components instead

Browse Source 
Adds:
- CodelabImage
- CompareBlock
- TableHeader
This commit is contained in:
Greg Annandale
2026-03-31 14:48:24 +01:00
parent 8b2ea01584
commit 8ae59744db
36 changed files with 103 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docs/docs/codelabs/context-menu-option/add-a-context-menu-item.mdx
+2 -2
View File
@@ -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 ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Customizing context menus
@@ -80,6 +80,6 @@ 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.
<ClassBlock className="codelabImages"> ![A context menu. The last option says "Hello World".](../../../static/images/codelabs/context-menu-option/hello_world.png) </ClassBlock>
<CodelabImage> ![A context menu. The last option says "Hello World".](../../../static/images/codelabs/context-menu-option/hello_world.png) </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.
packages/docs/docs/codelabs/context-menu-option/setup.mdx
+2 -2
View File
@@ -3,7 +3,7 @@ slug: /codelabs/context-menu-option/setup/index.html
description: Setting up the "Customizing context menus" codelab.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Customizing context menus
@@ -33,4 +33,4 @@ 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.
<ClassBlock className="codelabImages">![A web page with the text "Context Menu Codelab" and a simple Blockly workspace.](../../../static/images/codelabs/context-menu-option/starter_workspace.png)</ClassBlock>
<CodelabImage>![A web page with the text "Context Menu Codelab" and a simple Blockly workspace.](../../../static/images/codelabs/context-menu-option/starter_workspace.png)</CodelabImage>
packages/docs/docs/codelabs/custom-generator/codelab-overview.mdx
+2 -2
View File
@@ -4,7 +4,7 @@ slug: /codelabs/custom-generator/codelab-overview/index.html
description: Overview of the "Build a custom generator" codelab.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Build a custom generator
@@ -21,7 +21,7 @@ import ClassBlock from '@site/src/components/ClassBlock';
You will build a JSON generator that implements the [JSON language spec](https://www.json.org/json-en.html).
<ClassBlock className="codelabImages">![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)</ClassBlock>
<CodelabImage>![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)</CodelabImage>
### What you'll need
packages/docs/docs/codelabs/custom-generator/setup.mdx
+2 -2
View File
@@ -3,7 +3,7 @@ slug: /codelabs/custom-generator/setup/index.html
description: Setting up the "Build a custom generator" codelab.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Build a custom generator
@@ -158,6 +158,6 @@ 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:
<ClassBlock className="codelabImages">![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)</ClassBlock>
<CodelabImage>![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)</CodelabImage>
The app is still trying to generate and run JavaScript for the workspace, instead of JSON. We will change that soon.
packages/docs/docs/codelabs/custom-generator/value-block-generators.mdx
+5 -5
View File
@@ -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 ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Build a custom generator
@@ -17,7 +17,7 @@ It will use `getFieldValue` on several types of fields.
The simplest block in this example is the `logic_null` block.
<ClassBlock className="codelabImages">![The null block simply returns "null".](../../../static/images/codelabs/custom-generator/null_block.png)</ClassBlock>
<CodelabImage>![The null block simply returns "null".](../../../static/images/codelabs/custom-generator/null_block.png)</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`:
@@ -33,7 +33,7 @@ jsonGenerator.forBlock['logic_null'] = function(block) {
Next is the `text` block.
<ClassBlock className="codelabImages">![The text block has an input for the user to type text into.](../../../static/images/codelabs/custom-generator/text_block.png)</ClassBlock>
<CodelabImage>![The text block has an input for the user to type text into.](../../../static/images/codelabs/custom-generator/text_block.png)</CodelabImage>
Unlike `logic_null`, there is a single text input field on this block. Use `getFieldValue`:
@@ -55,7 +55,7 @@ jsonGenerator.forBlock['text'] = function(block) {
The `math_number` block has a number field.
<ClassBlock className="codelabImages">![The number block has an input for a user to type a number](../../../static/images/codelabs/custom-generator/number_block.png)</ClassBlock>
<CodelabImage>![The number block has an input for a user to type a number](../../../static/images/codelabs/custom-generator/number_block.png)</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.
@@ -72,7 +72,7 @@ jsonGenerator.forBlock['math_number'] = function(block) {
The `logic_boolean` block has a dropdown field named `BOOL`.
<ClassBlock className="codelabImages">![The boolean block lets the user select 'true' or 'false' from a dropdown menu.](../../../static/images/codelabs/custom-generator/boolean_block.png)</ClassBlock>
<CodelabImage>![The boolean block lets the user select 'true' or 'false' from a dropdown menu.](../../../static/images/codelabs/custom-generator/boolean_block.png)</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`.
packages/docs/docs/codelabs/custom-toolbox/add-an-icon-to-your-category.mdx
+3 -3
View File
@@ -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 ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Customizing a Blockly toolbox
@@ -100,6 +100,6 @@ 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.
<ClassBlock className="codelabImages"> ![A white gear above the word "Logic" on a blue background.](../../../static/images/codelabs/custom-toolbox/category_gear.png) </ClassBlock>
<CodelabImage> ![A white gear above the word "Logic" on a blue background.](../../../static/images/codelabs/custom-toolbox/category_gear.png) </CodelabImage>
<ClassBlock className="codelabImages"> ![A blue gear above the word "Logic" on a white background.](../../../static/images/codelabs/custom-toolbox/category_gear_selected.png) </ClassBlock>
<CodelabImage> ![A blue gear above the word "Logic" on a white background.](../../../static/images/codelabs/custom-toolbox/category_gear_selected.png) </CodelabImage>
packages/docs/docs/codelabs/custom-toolbox/adding-a-custom-toolbox-item.mdx
+4 -4
View File
@@ -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 ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Customizing a Blockly toolbox
@@ -85,7 +85,7 @@ Next, we are going to return this element:
If you open the `index.html` file you should see a label above your first category.
<ClassBlock className="codelabImages"> ![The toolbox with a label at the top.](../../../static/images/codelabs/custom-toolbox/toolbox_label.png) </ClassBlock>
<CodelabImage> ![The toolbox with a label at the top.](../../../static/images/codelabs/custom-toolbox/toolbox_label.png) </CodelabImage>
### Add attributes to the toolbox definition
The above code is rather limiting since it only allows us to create a toolbox
@@ -119,7 +119,7 @@ All attributes on our toolbox definition get added to the `toolboxItemDef_`.
Open your `index.html` in a browser to see the updated label.
<ClassBlock className="codelabImages"> ![The toolbox with a label that now says "Custom Toolbox".](../../../static/images/codelabs/custom-toolbox/custom_label.png) </ClassBlock>
<CodelabImage> ![The toolbox with a label that now says "Custom Toolbox".](../../../static/images/codelabs/custom-toolbox/custom_label.png) </CodelabImage>
### Add some CSS
Similar to how we added `colour` and `name` above, we are going to add a custom
@@ -159,4 +159,4 @@ 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.
<ClassBlock className="codelabImages"> ![A toolbox with colored background and the blockly label above the category text.](../../../static/images/codelabs/custom-toolbox/final_toolbox.png) </ClassBlock>
<CodelabImage> ![A toolbox with colored background and the blockly label above the category text.](../../../static/images/codelabs/custom-toolbox/final_toolbox.png) </CodelabImage>
packages/docs/docs/codelabs/custom-toolbox/change-the-category-HTML.mdx
+2 -2
View File
@@ -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 ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Customizing a Blockly toolbox
@@ -34,4 +34,4 @@ createIconDom_() {
If you open `index.html` you should now see the blockly logo on top of all your
categories
<ClassBlock className="codelabImages"> ![A toolbox with the blockly logo on top of the category label.](../../../static/images/codelabs/custom-toolbox/image_toolbox.png) </ClassBlock>
<CodelabImage> ![A toolbox with the blockly logo on top of the category label.](../../../static/images/codelabs/custom-toolbox/image_toolbox.png) </CodelabImage>
packages/docs/docs/codelabs/custom-toolbox/change-the-look-of-a-category.mdx
+3 -3
View File
@@ -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 ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Customizing a Blockly toolbox
@@ -45,7 +45,7 @@ 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.
<ClassBlock className="codelabImages"> ![A toolbox with colors that expand the across the entire category.](../../../static/images/codelabs/custom-toolbox/colored_toolbox.png) </ClassBlock>
<CodelabImage> ![A toolbox with colors that expand the across the entire category.](../../../static/images/codelabs/custom-toolbox/colored_toolbox.png) </CodelabImage>
We are going to add some CSS to make it easier to read, and to space out our categories.
@@ -78,4 +78,4 @@ Copy and paste the following CSS into your `toolbox_style.css` file.
Open `index.html` to see your toolbox.
<ClassBlock className="codelabImages"> ![Toolbox with category corners that are rounded and white text.](../../../static/images/codelabs/custom-toolbox/styled_toolbox.png) </ClassBlock>
<CodelabImage> ![Toolbox with category corners that are rounded and white text.](../../../static/images/codelabs/custom-toolbox/styled_toolbox.png) </CodelabImage>
packages/docs/docs/codelabs/custom-toolbox/change-the-look-of-a-selected-category.mdx
+2 -2
View File
@@ -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 ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Customizing a Blockly toolbox
@@ -47,4 +47,4 @@ setSelected(isSelected){
Open `index.html` and click on the "Logic" category. You should now see a white
category with a colored label.
<ClassBlock className="codelabImages"> ![A toolbox with all categories colored except for the first category that has a white background.](../../../static/images/codelabs/custom-toolbox/category_selected.png) </ClassBlock>
<CodelabImage> ![A toolbox with all categories colored except for the first category that has a white background.](../../../static/images/codelabs/custom-toolbox/category_selected.png) </CodelabImage>
packages/docs/docs/codelabs/custom-toolbox/codelab-overview.mdx
+2 -2
View File
@@ -4,7 +4,7 @@ slug: /codelabs/custom-toolbox/codelab-overview/index.html
description: Overview of the "Customizing a Blockly toolbox" codelab.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Customizing a Blockly toolbox
@@ -26,7 +26,7 @@ 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.
<ClassBlock className="codelabImages"> ![A toolbox with colored background and the blockly label above the category text.](../../../static/images/codelabs/custom-toolbox/final_toolbox.png) </ClassBlock>
<CodelabImage> ![A toolbox with colored background and the blockly label above the category text.](../../../static/images/codelabs/custom-toolbox/final_toolbox.png) </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.
packages/docs/docs/codelabs/custom-toolbox/setup.mdx
+2 -2
View File
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/setup/index.html
description: Setting up the "Customizing a Blockly toolbox" codelab.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Customizing a Blockly toolbox
@@ -76,7 +76,7 @@ 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.
<ClassBlock className="codelabImages"> ![The default toolbox. A list of categories with a strip of colour to the left.](../../../static/images/codelabs/custom-toolbox/base_toolbox.png) </ClassBlock>
<CodelabImage> ![The default toolbox. A list of categories with a strip of colour to the left.](../../../static/images/codelabs/custom-toolbox/base_toolbox.png) </CodelabImage>
However, if you run the below commands in your console you will see that
your toolbox is now using the `CustomCategory` class.
packages/docs/docs/codelabs/getting-started/codelab-overview.mdx
+3 -3
View File
@@ -4,7 +4,7 @@ slug: /codelabs/getting-started/codelab-overview/index.html
description: Overview of the "Getting started with Blockly" codelab.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Getting started with Blockly
@@ -26,9 +26,9 @@ 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.
<ClassBlock className="codelabImages"> ![image](../../../static/images/codelabs/getting-started/play_mode.png) </ClassBlock>
<CodelabImage> ![image](../../../static/images/codelabs/getting-started/play_mode.png) </CodelabImage>
<ClassBlock className="codelabImages"> ![image](../../../static/images/codelabs/getting-started/d4_three_times.png) </ClassBlock>
<CodelabImage> ![image](../../../static/images/codelabs/getting-started/d4_three_times.png) </CodelabImage>
### What you'll need
packages/docs/docs/codelabs/getting-started/create-a-blockly-workspace.mdx
+3 -3
View File
@@ -3,7 +3,7 @@ slug: /codelabs/getting-started/create-a-blockly-workspace/index.html
description: How to add a workspace to your app.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Getting started with Blockly
@@ -17,7 +17,7 @@ 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).
<ClassBlock className="codelabImages"> ![image](../../../static/images/codelabs/getting-started/d4_three_times.png) </ClassBlock>
<CodelabImage> ![image](../../../static/images/codelabs/getting-started/d4_three_times.png) </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.
@@ -93,6 +93,6 @@ 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:
<ClassBlock className="codelabImages"> ![image](../../../static/images/codelabs/getting-started/workspace_with_loop.png) </ClassBlock>
<CodelabImage> ![image](../../../static/images/codelabs/getting-started/workspace_with_loop.png) </CodelabImage>
Drag and drop the available loop block to the workspace to test it out.
packages/docs/docs/codelabs/getting-started/create-a-custom-block.mdx
+3 -3
View File
@@ -3,7 +3,7 @@ slug: /codelabs/getting-started/create-a-custom-block/index.html
description: How to create a custom block.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Getting started with Blockly
@@ -11,7 +11,7 @@ import ClassBlock from '@site/src/components/ClassBlock';
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:
<ClassBlock className="codelabImages"> ![image](../../../static/images/codelabs/getting-started/play_sound_block.png) </ClassBlock>
<CodelabImage> ![image](../../../static/images/codelabs/getting-started/play_sound_block.png) </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.
@@ -98,7 +98,7 @@ const toolbox = {
Run the app one more time, and play around with the new `Play (sound)` block. It should look like this:
<ClassBlock className="codelabImages"> ![image](../../../static/images/codelabs/getting-started/workspace_with_toolbox.png) </ClassBlock>
<CodelabImage> ![image](../../../static/images/codelabs/getting-started/workspace_with_toolbox.png) </CodelabImage>
### The block factory
packages/docs/docs/codelabs/getting-started/explore-the-app.mdx
+3 -3
View File
@@ -3,7 +3,7 @@ slug: /codelabs/getting-started/explore-the-app/index.html
description: Explore Blockly's getting started app.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Getting started with Blockly
@@ -15,13 +15,13 @@ 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.
<ClassBlock className="codelabImages"> ![image](../../../static/images/codelabs/getting-started/play_mode.png) </ClassBlock>
<CodelabImage> ![image](../../../static/images/codelabs/getting-started/play_mode.png) </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.
<ClassBlock className="codelabImages"> ![image](../../../static/images/codelabs/getting-started/edit_mode_unimplemented.png) </ClassBlock>
<CodelabImage> ![image](../../../static/images/codelabs/getting-started/edit_mode_unimplemented.png) </CodelabImage>
You can go back to the play mode by tapping **SAVE** and then **DONE** buttons.
packages/docs/docs/codelabs/getting-started/generate-javaScript-code.mdx
+2 -2
View File
@@ -3,7 +3,7 @@ slug: /codelabs/getting-started/generate-javaScript-code/index.html
description: How to generate JavaScript code.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Getting started with Blockly
@@ -36,7 +36,7 @@ javascript.javascriptGenerator.forBlock['play_sound'] = function(block) {
With this translation function, the following `play_sound` block:
<ClassBlock className="codelabImages"> ![image](../../../static/images/codelabs/getting-started/play_sound_block.png) </ClassBlock>
<CodelabImage> ![image](../../../static/images/codelabs/getting-started/play_sound_block.png) </CodelabImage>
translates into the JavaScript code:
packages/docs/docs/codelabs/getting-started/run-generated-code.mdx
+2 -2
View File
@@ -3,7 +3,7 @@ slug: /codelabs/getting-started/run-generated-code/index.html
description: How to run generated code.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Getting started with Blockly
@@ -60,6 +60,6 @@ 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:
<ClassBlock className="codelabImages"> ![image](../../../static/images/codelabs/getting-started/d4_three_times.png) </ClassBlock>
<CodelabImage> ![image](../../../static/images/codelabs/getting-started/d4_three_times.png) </CodelabImage>
Save and exit the edit mode. Now if you tap this button, you should hear the D4 sound played 3 times.
packages/docs/docs/codelabs/validation-and-warnings/codelab-overview.mdx
+2 -2
View File
@@ -4,7 +4,7 @@ slug: /codelabs/validation-and-warnings/codelab-overview/index.html
description: Overview of the "Block validation and warnings" codelab.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Block validation and warnings
@@ -18,7 +18,7 @@ This codelab will show you how to ensure that custom blocks either:
### What you'll build
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:
<ClassBlock className="codelabImages">![Two instances of a custom block, one with a validation warning.](../../../static/images/codelabs/validation-and-warnings/final_range_blocks.png)</ClassBlock>
<CodelabImage>![Two instances of a custom block, one with a validation warning.](../../../static/images/codelabs/validation-and-warnings/final_range_blocks.png)</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.
packages/docs/docs/codelabs/validation-and-warnings/setup.mdx
+2 -2
View File
@@ -3,7 +3,7 @@ slug: /codelabs/validation-and-warnings/setup/index.html
description: Setting up the "Block validation and warnings" codelab.
---
import ClassBlock from '@site/src/components/ClassBlock';
import CodelabImage from '@site/src/components/CodelabImage';
# Block validation and warnings
@@ -77,7 +77,7 @@ 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:
<ClassBlock className="codelabImages">![A Blockly toolbox containing range, for-each, sum, print, and break blocks.](../../../static/images/codelabs/validation-and-warnings/completed_toolbox.png)</ClassBlock>
<CodelabImage>![A Blockly toolbox containing range, for-each, sum, print, and break blocks.](../../../static/images/codelabs/validation-and-warnings/completed_toolbox.png)</CodelabImage>
### Generating JavaScript code for the custom block
You can drag this block out from the toolbox into the workspace, but if you try to use it, you'll find that Blockly doesn't know how to generate JavaScript code from this block yet and error messages will appear in the browser console when it tries to update the display of the generated code. To fix this, add the following code below the custom block definition:
packages/docs/docs/guides/configure/web/configuration_struct.mdx
+2 -2
View File
@@ -4,7 +4,7 @@ description: Simple configuration options that Blockly surfaces during injection
image: images/blockly_banner.png
---
import ClassBlock from '@site/src/components/ClassBlock';
import TableHeader from '@site/src/components/TableHeader';
# Create a workspace
@@ -42,7 +42,7 @@ The configuration object implements
and has the following options. Note that several of these options change their
default value based on whether the provided toolbox has categories or not.
| <ClassBlock className="displayTableHeader"> Name </ClassBlock> | <ClassBlock className="displayTableHeader"> Type </ClassBlock> | <ClassBlock className="displayTableHeader"> Description </ClassBlock> |
| <TableHeader> Name </TableHeader> | <TableHeader> Type </TableHeader> | <TableHeader> Description </TableHeader> |
|-----------------------|-----------|-------------------------------------------------------------|
| `collapse` | boolean | Whether block context menus include an item to collapse or expand blocks. Defaults to `true` if the toolbox has categories, `false` otherwise.
| `comments` | boolean | Whether block context menus include an item to add or remove comments. Defaults to `true` if the toolbox has categories,`false` otherwise.
packages/docs/docs/guides/configure/web/context-menus.mdx
+2 -2
View File
@@ -5,7 +5,7 @@ image: images/blockly_banner.png
---
import Image from '@site/src/components/Image';
import ClassBlock from '@site/src/components/ClassBlock';
import TableHeader from '@site/src/components/TableHeader';
# Context menus
@@ -130,7 +130,7 @@ should be displayed.
It should return one of a set of strings: `'enabled'`, `'disabled'`, or
`'hidden'`.
| <ClassBlock className="displayTableHeader"> Value </ClassBlock>| <ClassBlock className="displayTableHeader"> Description </ClassBlock>| <ClassBlock className="displayTableHeader"> Image </ClassBlock>|
| <TableHeader> Value </TableHeader>| <TableHeader> Description </TableHeader>| <TableHeader> Image </TableHeader>|
| ------------ | ---------------------------------- | --------------------------------------------------- |
| `'enabled'` | Shows that the item is active. | <Image alt="An enabled option" src="/images/context-menus/enabled-option.png" width={150} /> |
| `'disabled'` | Shows that the item is not active. | <Image alt="A disabled option" src="/images/context-menus/disabled-option.png" width={150} /> |
packages/docs/docs/guides/configure/web/customization.mdx
+2 -2
View File
@@ -4,7 +4,7 @@ title: Advanced customization
image: images/blockly_banner.png
---
import ClassBlock from '@site/src/components/ClassBlock';
import TableHeader from '@site/src/components/TableHeader';
# Advanced customization
@@ -15,7 +15,7 @@ Blockly classes.
The following Blockly classes can be replaced:
| <ClassBlock className="displayTableHeader"> Blockly class </ClassBlock>| <ClassBlock className="displayTableHeader"> Interface </ClassBlock>| <ClassBlock className="displayTableHeader"> Registry type name </ClassBlock>|
| <TableHeader> Blockly class </TableHeader>| <TableHeader> Interface </TableHeader>| <TableHeader> Registry type name </TableHeader>|
| ------------------------------------ | -------------------------------- | -------------------------- |
| [`Blockly.dragging.Dragger`] | [`Blockly.IDragger`] | `blockDragger` |
| [`Blockly.ConnectionChecker`] | [`Blockly.IConnectionChecker`] | `connectionChecker` |
packages/docs/docs/guides/configure/web/toolboxes/appearance.mdx
+3 -3
View File
@@ -6,7 +6,7 @@ image: images/blockly_banner.png
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import ClassBlock from '@site/src/components/ClassBlock';
import TableHeader from '@site/src/components/TableHeader';
# Category appearance
@@ -49,7 +49,7 @@ The following table lists the types, descriptions, and default CSS classes of
each part of a category toolbox. If you're having trouble visualizing this, open
the developer tools in your browser and inspect the toolbox.
| <ClassBlock className="displayTableHeader"> Part type </ClassBlock> | <ClassBlock className="displayTableHeader"> Description </ClassBlock> | <ClassBlock className="displayTableHeader"> Default CSS class </ClassBlock> |
| <TableHeader> Part type </TableHeader> | <TableHeader> Description </TableHeader> | <TableHeader> Default CSS class </TableHeader> |
| ------------------- | ------------------------------------------------------------------------ | ---------------------------------- |
| contents | The `div` that contains all categories. | `blocklyToolboxCategoryGroup` |
| container | The `div` that contains a single category and its subcategories. | `blocklyToolboxCategoryContainer` |
@@ -60,7 +60,7 @@ the developer tools in your browser and inspect the toolbox.
CSS is also used to label the state of some parts of the toolbox.
| <ClassBlock className="displayTableHeader"> State </ClassBlock> | <ClassBlock className="displayTableHeader"> Description </ClassBlock> | <ClassBlock className="displayTableHeader"> Default CSS class </ClassBlock> |
| <TableHeader> State </TableHeader> | <TableHeader> Description </TableHeader> | <TableHeader> Default CSS class </TableHeader> |
| ------------------- | ------------------------------------------------------------------------ | ---------------------------------- |
| selected | Added to the "row" `div` when the category is selected. | `blocklyToolboxSelected` |
| openicon | Added to the "icon" `span` when a category with subcategories is open. | `blocklyToolboxCategoryIconOpen` |
packages/docs/docs/guides/contribute/samples/block_libraries.mdx
+5 -5
View File
@@ -5,7 +5,7 @@ image: images/blockly_banner.png
---
import Head from '@docusaurus/Head';
import ClassBlock from '@site/src/components/ClassBlock';
import CompareBlock from '@site/src/components/CompareBlock';
<Head>
<link
@@ -43,7 +43,7 @@ versatile and useful as possible, we've developed these guidelines.
installed.
- Use the JSON field registry instead of instantiating new fields directly.
- <ClassBlock className="compare-worse">
- <CompareBlock variant="worse">
Not Recommended - Instantiating a new field directly:
```js
@@ -54,9 +54,9 @@ versatile and useful as possible, we've developed these guidelines.
}
}
```
</ClassBlock>
</CompareBlock>
- <ClassBlock className="compare-better">
- <CompareBlock variant="better">
Recommended - JSON field registry:
```js
@@ -70,7 +70,7 @@ versatile and useful as possible, we've developed these guidelines.
}
}
```
</ClassBlock>
</CompareBlock>
- Using the field registry makes it easier for a user to replace the
implementation of the field used in your block without having to change
packages/docs/docs/guides/contribute/samples/naming.mdx
+7 -7
View File
@@ -4,7 +4,7 @@ title: Plugin naming conventions
image: images/blockly_banner.png
---
import ClassBlock from '@site/src/components/ClassBlock';
import TableHeader from '@site/src/components/TableHeader';
# Plugin naming conventions
@@ -30,7 +30,7 @@ field](/guides/create-custom-blocks/fields/customizing-fields/overview).
Loading a field plugin registers a new field type that can be used in all
Blockly workspaces on the page.
| <ClassBlock className="displayTableHeader"> First Party </ClassBlock> | <ClassBlock className="displayTableHeader"> Third Party </ClassBlock> | <ClassBlock className="displayTableHeader"> Example </ClassBlock> | <ClassBlock className="displayTableHeader"> Suggested tags </ClassBlock> |
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
| ------------------ | ----------------- | ------------------------- | ------------------------- |
| `@blockly/field-*` | `blockly-field-*` | [`@blockly/field-slider`] | `blockly-plugin`, `field` |
@@ -44,7 +44,7 @@ A theme plugin publishes a single Blockly
Loading a theme plugin defines a new theme that can then be used in all Blockly
workspaces on the page.
| <ClassBlock className="displayTableHeader"> First Party </ClassBlock> | <ClassBlock className="displayTableHeader"> Third Party </ClassBlock> | <ClassBlock className="displayTableHeader"> Example </ClassBlock> | <ClassBlock className="displayTableHeader"> Suggested tags </ClassBlock> |
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
| ------------------ | ----------------- | ------------------------- | ------------------------- |
| `@blockly/theme-*` | `blockly-theme-*` | [`@blockly/theme-modern`] | `blockly-plugin`, `theme` |
@@ -58,7 +58,7 @@ definitions](/guides/create-custom-blocks/overview).
Loading a block plugin defines those blocks for all Blockly workspaces on the
page.
| <ClassBlock className="displayTableHeader"> First Party </ClassBlock> | <ClassBlock className="displayTableHeader"> Third Party </ClassBlock> | <ClassBlock className="displayTableHeader"> Example </ClassBlock> | <ClassBlock className="displayTableHeader"> Suggested tags </ClassBlock> |
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
| --------------------- | -------------------- | ------------------------------ | ----------------------------------- |
| `@blockly/block(s)-*` | `blockly-block(s)-*` | [`@blockly/blocks-plus-minus`] | `blockly-plugin`, `block`, `blocks` |
@@ -73,7 +73,7 @@ be used to programmatically share behaviour between blocks.
Loading a block extension plugin registers the extensions for use on all Blockly
workspaces on the page.
| <ClassBlock className="displayTableHeader"> First Party </ClassBlock> | <ClassBlock className="displayTableHeader"> Third Party </ClassBlock> | <ClassBlock className="displayTableHeader"> Example </ClassBlock> | <ClassBlock className="displayTableHeader"> Suggested tags </ClassBlock> |
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
| ---------------------- | --------------------- | -------- | ---------------------------------- |
| `@blockly/extension-*` | `blockly-extension-*` | None yet | `blockly-plugin`,`block-extension` |
@@ -84,7 +84,7 @@ A workspace plugin adds behaviour to a single workspace.
Loading a workspace plugin does nothing until it is initialized on a Blockly
workspace.
| <ClassBlock className="displayTableHeader"> First Party </ClassBlock> | <ClassBlock className="displayTableHeader"> Third Party </ClassBlock> | <ClassBlock className="displayTableHeader"> Example </ClassBlock> | <ClassBlock className="displayTableHeader"> Suggested tags </ClassBlock> |
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
| ---------------------- | --------------------- | -------- | ---------------------------- |
| `@blockly/workspace-*` | `blockly-workspace-*` | None yet | `blockly-plugin`,`workspace` |
@@ -93,7 +93,7 @@ workspace.
This is the most general plugin type. Use this naming convention if your plugin
doesn't meet the requirements of any other plugin type.
| <ClassBlock className="displayTableHeader"> First Party </ClassBlock> | <ClassBlock className="displayTableHeader"> Third Party </ClassBlock> | <ClassBlock className="displayTableHeader"> Example </ClassBlock> | <ClassBlock className="displayTableHeader"> Suggested tags </ClassBlock> |
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
| ------------------- | ------------------ | ------------------------- | ---------------- |
| `@blockly/plugin-*` | `blockly-plugin-*` | [`@blockly/plugin-modal`] | `blockly-plugin` |
packages/docs/docs/guides/create-custom-blocks/define/block-anatomy.mdx
+4 -4
View File
@@ -5,7 +5,7 @@ image: images/blockly_banner.png
---
import Image from '@site/src/components/Image';
import ClassBlock from '@site/src/components/ClassBlock';
import TableHeader from '@site/src/components/TableHeader';
# Anatomy of a block
@@ -24,7 +24,7 @@ when you connect two blocks, you fit their connections together.
There are four types of connections:
| <ClassBlock className="displayTableHeader"> Connection type </ClassBlock> | <ClassBlock className="displayTableHeader"> Image </ClassBlock> |
| <TableHeader> Connection type </TableHeader> | <TableHeader> Image </TableHeader> |
|---------------------|--------------------------------------------------|
| Output connection | <Image alt="an output connection" src="/images/connections/output-connection.png" width={40} /> |
| Input connection | <Image alt="an input connection" src="/images/connections/input-connection.png" srcDark="/images/connections/input-connection-dark.png" width={45} /> |
@@ -104,7 +104,7 @@ inputs](/guides/create-custom-blocks/inputs/creating-custom-inputs),
which support [custom
rendering](/guides/create-custom-blocks/renderers/overview).
| <ClassBlock className="displayTableHeader"> Input type </ClassBlock> | <ClassBlock className="displayTableHeader"> Connection type </ClassBlock> | <ClassBlock className="displayTableHeader"> Image </ClassBlock> |
| <TableHeader> Input type </TableHeader> | <TableHeader> Connection type </TableHeader> | <TableHeader> Image </TableHeader> |
|------------------|------------------|-------------------------------------------------|
| Dummy input | None | <Image alt="dummy input" src="/images/connections/dummy-input.png" srcDark="/images/connections/dummy-input-dark.png" width={40} /> |
| End-of-row input | None | <Image alt="end-of-row input" src="/images/connections/dummy-input.png" srcDark="/images/connections/dummy-input-dark.png" width={40} /> |
@@ -216,7 +216,7 @@ For more information, see
Blocks, inputs, connections, fields, and icons are all JavaScript objects.
| <ClassBlock className="displayTableHeader"> Blockly component </ClassBlock> | <ClassBlock className="displayTableHeader"> Base class </ClassBlock> | <ClassBlock className="displayTableHeader"> Subclasses </ClassBlock> |
| <TableHeader> Blockly component </TableHeader> | <TableHeader> Base class </TableHeader> | <TableHeader> Subclasses </TableHeader> |
| ------------------|--------------|----------------------|
| Block | `Block` | `BlockSvg` |
| Input | `Input` | `DummyInput` |
packages/docs/docs/guides/create-custom-blocks/fields/anatomy-of-a-field.mdx
+3 -3
View File
@@ -4,7 +4,7 @@ title: Anatomy of a field
image: images/blockly_banner.png
---
import ClassBlock from '@site/src/components/ClassBlock';
import TableHeader from '@site/src/components/TableHeader';
# Anatomy of a field
@@ -89,7 +89,7 @@ complex, depending on its needs.
These are some examples of different on-block displays, in order of increasing
complexity.
| <ClassBlock className="displayTableHeader"> Field type </ClassBlock> | <ClassBlock className="displayTableHeader"> Description </ClassBlock> |
| <TableHeader> Field type </TableHeader> | <TableHeader> Description </TableHeader> |
| --------------- | ----------------------------------------------------------------------------------------------------- |
| Label | Contains only a text element. |
| Angle | Contains a background rect, text element, and a degree symbol. |
@@ -103,7 +103,7 @@ arbitrarily complex editor.
These are some examples of different editors, in order of increasing
complexity.
| <ClassBlock className="displayTableHeader"> Field type </ClassBlock> | <ClassBlock className="displayTableHeader"> Description </ClassBlock> |
| <TableHeader> Field type </TableHeader> | <TableHeader> Description </TableHeader> |
| --------------- | -------------------------------------------------------------------------------------------------------------------- |
| Checkbox | No editor when clicked. The on-block display updates. |
| Number input | Text editor overlaid above the on-block display. Users can type; the editor may change color to indicate bad values. |
packages/docs/docs/guides/create-custom-blocks/fields/built-in-fields/image.mdx
+2 -2
View File
@@ -6,7 +6,7 @@ image: images/blockly_banner.png
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import ClassBlock from '@site/src/components/ClassBlock';
import TableHeader from '@site/src/components/TableHeader';
# Image fields
@@ -63,7 +63,7 @@ collapsed.](/images/fields/image/collapsed.png)
</Tabs>
The image constructor takes in:
| <ClassBlock className="displayTableHeader"> Parameter </ClassBlock> | <ClassBlock className="displayTableHeader"> Description </ClassBlock> |
| <TableHeader> Parameter </TableHeader> | <TableHeader> Description </TableHeader> |
| ------------- | ------------------------------------------------------------ |
| `src` | A string that points to a [raster image](https://developer.mozilla.org/en-US/docs/Glossary/raster_image) file. |
| `width` | Must cast to a non-zero number. |
packages/docs/docs/guides/create-custom-blocks/fields/fields-vs-icons.mdx
+2 -2
View File
@@ -4,7 +4,7 @@ title: Fields vs icons
image: images/blockly_banner.png
---
import ClassBlock from '@site/src/components/ClassBlock';
import TableHeader from '@site/src/components/TableHeader';
# Fields vs icons
@@ -23,7 +23,7 @@ yourself, but does not affect how the block functions within the program.
## Comparison of functionality
| <ClassBlock className="displayTableHeader"> Attribute </ClassBlock> | <ClassBlock className="displayTableHeader"> Fields </ClassBlock> | <ClassBlock className="displayTableHeader"> Icons </ClassBlock> |
| <TableHeader> Attribute </TableHeader> | <TableHeader> Fields </TableHeader> | <TableHeader> Icons </TableHeader> |
| ------------- | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| Rendering | Fields can be made of whatever elements they want. | Icons can be made of whatever elements they want. |
| Number | Fields can each appear any number of times in a block. | Icons can each appear once in a block. |
packages/docs/docs/guides/create-custom-blocks/renderers/overview.mdx
+2 -2
View File
@@ -4,7 +4,7 @@ title: Renderers
image: images/blockly_banner.png
---
import ClassBlock from '@site/src/components/ClassBlock';
import TableHeader from '@site/src/components/TableHeader';
# Renderers
@@ -16,7 +16,7 @@ The shape of a block is determined by a renderer, based on the
Blockly provides three built-in renderers, each of which give a slightly
different feel to the program.
| <ClassBlock className="displayTableHeader"> Renderer </ClassBlock> | <ClassBlock className="displayTableHeader"> Description </ClassBlock> | <ClassBlock className="displayTableHeader"> Image </ClassBlock> |
| <TableHeader> Renderer </TableHeader> | <TableHeader> Description </TableHeader> | <TableHeader> Image </TableHeader> |
| -------- | ------------------------------------------------------------------------------------------------------------------- | ------------------- |
| Thrasos | The recommended renderer. It is a more modern take on the geras renderer, with more even spacing and solid borders. | ![thrasos][thrasos] |
| Geras | The default renderer. It is the original renderer that Blockly was built with. | ![geras][geras] |
packages/docs/docs/guides/get-started/workspace-anatomy.mdx
+3 -3
View File
@@ -5,7 +5,7 @@ image: images/blockly_banner.png
---
import Image from '@site/src/components/Image';
import ClassBlock from '@site/src/components/ClassBlock';
import TableHeader from '@site/src/components/TableHeader';
[workspace]: /guides/configure/web/configuration_struct
[category-toolbox]: /guides/configure/web/toolboxes/category
@@ -129,7 +129,7 @@ contained by an [input](#inputs).
A [connection][connection] is a place on a block other blocks can connect to.
| <ClassBlock className="displayTableHeader"> Connection </ClassBlock> | <ClassBlock className="displayTableHeader"> Image </ClassBlock> |
| <TableHeader> Connection </TableHeader> | <TableHeader> Image </TableHeader> |
|------------------|------------------------------------------------------|
| Output | <Image alt="an output connection" src="/images/connections/output-connection.png" width={40} /> |
| Input | <Image alt="an input connection" src="/images/connections/input-connection.png" srcDark="/images/connections/input-connection-dark.png" width={45} /> |
@@ -146,7 +146,7 @@ is built by rendering its inputs in one or more rows like bricks.
All inputs can contain fields. Only value and statement inputs can contain a
connection.
| <ClassBlock className="displayTableHeader"> Input type </ClassBlock> | <ClassBlock className="displayTableHeader"> Connection type </ClassBlock> | <ClassBlock className="displayTableHeader"> Notes </ClassBlock>|
| <TableHeader> Input type </TableHeader> | <TableHeader> Connection type </TableHeader> | <TableHeader> Notes </TableHeader>|
|------------|-----------------|---------------------------------------|
| Dummy | None | |
| End-of-row | None | Forces next input to start a new row. |
packages/docs/src/components/ClassBlock.js
-14
View File
@@ -1,14 +0,0 @@
import React from 'react';
/**
* ClassBlock Component
* Renders a block of content with a CSS class applied
* Used for styling specific content blocks (e.g., compare-worse, compare-better)
*
* @param {string} className - The CSS class name to apply
* @param {React.ReactNode} children - The content to render
* @returns {JSX.Element}
*/
export default function ClassBlock({ className, children }) {
return <p className={className}>{children}</p>;
}
packages/docs/src/components/CodelabImage.js
+5
View File
@@ -0,0 +1,5 @@
import React from 'react';
export default function CodelabImage({ children }) {
return <p className="codelabImages">{children}</p>;
}
packages/docs/src/components/CompareBlock.js
+5
View File
@@ -0,0 +1,5 @@
import React from 'react';
export default function CompareBlock({ variant, children }) {
return <p className={`compare-${variant}`}>{children}</p>;
}
packages/docs/src/components/TableHeader.js
+5
View File
@@ -0,0 +1,5 @@
import React from 'react';
export default function TableHeader({ children }) {
return <p className="displayTableHeader">{children}</p>;
}