Skip to content

Commit 8ae5974

Browse files
gregagrega
committed
chore(docs): remove ClassBlack component, add individual components instead
Adds: - CodelabImage - CompareBlock - TableHeader
1 parent 8b2ea01 commit 8ae5974

36 files changed

Lines changed: 103 additions & 102 deletions

‎packages/docs/docs/codelabs/context-menu-option/add-a-context-menu-item.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/context-menu-option/add-a-context-menu-item/index.html
33
description: How to add a context menu item to the registry.
44
---
55

6-
import ClassBlock from '@site/src/components/ClassBlock';
6+
import CodelabImage from '@site/src/components/CodelabImage';
77

88
# Customizing context menus
99

@@ -80,6 +80,6 @@ you will never need to make a new `ContextMenuRegistry`. Always use the singleto
8080

8181
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.
8282

83-
<ClassBlock className="codelabImages"> ![A context menu. The last option says "Hello World".](../../../static/images/codelabs/context-menu-option/hello_world.png) </ClassBlock>
83+
<CodelabImage> ![A context menu. The last option says "Hello World".](../../../static/images/codelabs/context-menu-option/hello_world.png) </CodelabImage>
8484

8585
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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/context-menu-option/setup/index.html
33
description: Setting up the "Customizing context menus" codelab.
44
---
55

6-
import ClassBlock from '@site/src/components/ClassBlock';
6+
import CodelabImage from '@site/src/components/CodelabImage';
77

88
# Customizing context menus
99

@@ -33,4 +33,4 @@ Each folder contains:
3333

3434
To run the code, simple open `starter-code/index.html` in a browser. You should see a Blockly workspace with an always-open flyout.
3535

36-
<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>
36+
<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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ slug: /codelabs/custom-generator/codelab-overview/index.html
44
description: Overview of the "Build a custom generator" codelab.
55
---
66

7-
import ClassBlock from '@site/src/components/ClassBlock';
7+
import CodelabImage from '@site/src/components/CodelabImage';
88

99
# Build a custom generator
1010

@@ -21,7 +21,7 @@ import ClassBlock from '@site/src/components/ClassBlock';
2121

2222
You will build a JSON generator that implements the [JSON language spec](https://www.json.org/json-en.html).
2323

24-
<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>
24+
<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>
2525

2626
### What you'll need
2727

‎packages/docs/docs/codelabs/custom-generator/setup.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-generator/setup/index.html
33
description: Setting up the "Build a custom generator" codelab.
44
---
55

6-
import ClassBlock from '@site/src/components/ClassBlock';
6+
import CodelabImage from '@site/src/components/CodelabImage';
77

88
# Build a custom generator
99

@@ -158,6 +158,6 @@ Our `index.js` file already handles importing the toolbox and using it in Blockl
158158

159159
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:
160160

161-
<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>
161+
<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>
162162

163163
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‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-generator/value-block-generators/index.html
33
description: How to write a block code generator for a simple value block.
44
---
55

6-
import ClassBlock from '@site/src/components/ClassBlock';
6+
import CodelabImage from '@site/src/components/CodelabImage';
77

88
# Build a custom generator
99

@@ -17,7 +17,7 @@ It will use `getFieldValue` on several types of fields.
1717

1818
The simplest block in this example is the `logic_null` block.
1919

20-
<ClassBlock className="codelabImages">![The null block simply returns "null".](../../../static/images/codelabs/custom-generator/null_block.png)</ClassBlock>
20+
<CodelabImage>![The null block simply returns "null".](../../../static/images/codelabs/custom-generator/null_block.png)</CodelabImage>
2121

2222
No matter what, it generates the code `'null'`. Notice that this is a string, because all generated code is a string.
2323
Add the following code to `src/generators/json.js`:
@@ -33,7 +33,7 @@ jsonGenerator.forBlock['logic_null'] = function(block) {
3333

3434
Next is the `text` block.
3535

36-
<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>
36+
<CodelabImage>![The text block has an input for the user to type text into.](../../../static/images/codelabs/custom-generator/text_block.png)</CodelabImage>
3737

3838
Unlike `logic_null`, there is a single text input field on this block. Use `getFieldValue`:
3939

@@ -55,7 +55,7 @@ jsonGenerator.forBlock['text'] = function(block) {
5555

5656
The `math_number` block has a number field.
5757

58-
<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>
58+
<CodelabImage>![The number block has an input for a user to type a number](../../../static/images/codelabs/custom-generator/number_block.png)</CodelabImage>
5959

6060
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.
6161

@@ -72,7 +72,7 @@ jsonGenerator.forBlock['math_number'] = function(block) {
7272

7373
The `logic_boolean` block has a dropdown field named `BOOL`.
7474

75-
<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>
75+
<CodelabImage>![The boolean block lets the user select 'true' or 'false' from a dropdown menu.](../../../static/images/codelabs/custom-generator/boolean_block.png)</CodelabImage>
7676

7777
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`.
7878

‎packages/docs/docs/codelabs/custom-toolbox/add-an-icon-to-your-category.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/add-an-icon-to-your-category/index.html
33
description: How to add an icon to your category.
44
---
55

6-
import ClassBlock from '@site/src/components/ClassBlock';
6+
import CodelabImage from '@site/src/components/CodelabImage';
77

88
# Customizing a Blockly toolbox
99

@@ -100,6 +100,6 @@ Your `setSelected` method should look similar to below:
100100
If you open your `index.html` file, you should see a white gear above your "Logic"
101101
label, and it should change to blue when the category has been selected.
102102

103-
<ClassBlock className="codelabImages"> ![A white gear above the word "Logic" on a blue background.](../../../static/images/codelabs/custom-toolbox/category_gear.png) </ClassBlock>
103+
<CodelabImage> ![A white gear above the word "Logic" on a blue background.](../../../static/images/codelabs/custom-toolbox/category_gear.png) </CodelabImage>
104104

105-
<ClassBlock className="codelabImages"> ![A blue gear above the word "Logic" on a white background.](../../../static/images/codelabs/custom-toolbox/category_gear_selected.png) </ClassBlock>
105+
<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‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/adding-a-custom-toolbox-item/index.html
33
description: How to add a custom item to a toolbox.
44
---
55

6-
import ClassBlock from '@site/src/components/ClassBlock';
6+
import CodelabImage from '@site/src/components/CodelabImage';
77

88
# Customizing a Blockly toolbox
99

@@ -85,7 +85,7 @@ Next, we are going to return this element:
8585

8686
If you open the `index.html` file you should see a label above your first category.
8787

88-
<ClassBlock className="codelabImages"> ![The toolbox with a label at the top.](../../../static/images/codelabs/custom-toolbox/toolbox_label.png) </ClassBlock>
88+
<CodelabImage> ![The toolbox with a label at the top.](../../../static/images/codelabs/custom-toolbox/toolbox_label.png) </CodelabImage>
8989

9090
### Add attributes to the toolbox definition
9191
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_`.
119119

120120
Open your `index.html` in a browser to see the updated label.
121121

122-
<ClassBlock className="codelabImages"> ![The toolbox with a label that now says "Custom Toolbox".](../../../static/images/codelabs/custom-toolbox/custom_label.png) </ClassBlock>
122+
<CodelabImage> ![The toolbox with a label that now says "Custom Toolbox".](../../../static/images/codelabs/custom-toolbox/custom_label.png) </CodelabImage>
123123

124124
### Add some CSS
125125
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.
159159
If you open `index.html` you should now see a bold dark gray label at the
160160
top of your toolbox.
161161

162-
<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>
162+
<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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/change-the-category-HTML/index.html
33
description: How to change the HTML used by a category.
44
---
55

6-
import ClassBlock from '@site/src/components/ClassBlock';
6+
import CodelabImage from '@site/src/components/CodelabImage';
77

88
# Customizing a Blockly toolbox
99

@@ -34,4 +34,4 @@ createIconDom_() {
3434
If you open `index.html` you should now see the blockly logo on top of all your
3535
categories
3636

37-
<ClassBlock className="codelabImages"> ![A toolbox with the blockly logo on top of the category label.](../../../static/images/codelabs/custom-toolbox/image_toolbox.png) </ClassBlock>
37+
<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‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/change-the-look-of-a-category/index.html
33
description: How to change the look of a category.
44
---
55

6-
import ClassBlock from '@site/src/components/ClassBlock';
6+
import CodelabImage from '@site/src/components/CodelabImage';
77

88
# Customizing a Blockly toolbox
99

@@ -45,7 +45,7 @@ For more information on Blockly styles please visit the [themes documentation](/
4545
Open `index.html` to see your updated toolbox. Your toolbox should look
4646
similar to the below toolbox.
4747

48-
<ClassBlock className="codelabImages"> ![A toolbox with colors that expand the across the entire category.](../../../static/images/codelabs/custom-toolbox/colored_toolbox.png) </ClassBlock>
48+
<CodelabImage> ![A toolbox with colors that expand the across the entire category.](../../../static/images/codelabs/custom-toolbox/colored_toolbox.png) </CodelabImage>
4949

5050
We are going to add some CSS to make it easier to read, and to space out our categories.
5151

@@ -78,4 +78,4 @@ Copy and paste the following CSS into your `toolbox_style.css` file.
7878

7979
Open `index.html` to see your toolbox.
8080

81-
<ClassBlock className="codelabImages"> ![Toolbox with category corners that are rounded and white text.](../../../static/images/codelabs/custom-toolbox/styled_toolbox.png) </ClassBlock>
81+
<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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/change-the-look-of-a-selected-category/index.html
33
description: How to change the look of a selected category.
44
---
55

6-
import ClassBlock from '@site/src/components/ClassBlock';
6+
import CodelabImage from '@site/src/components/CodelabImage';
77

88
# Customizing a Blockly toolbox
99

@@ -47,4 +47,4 @@ setSelected(isSelected){
4747
Open `index.html` and click on the "Logic" category. You should now see a white
4848
category with a colored label.
4949

50-
<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>
50+
<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>

0 commit comments

Comments
 (0)