diff --git a/packages/docs/docs/codelabs/css/blocks.mdx b/packages/docs/docs/codelabs/css/blocks.mdx index f600f21259b..3232244ef46 100644 --- a/packages/docs/docs/codelabs/css/blocks.mdx +++ b/packages/docs/docs/codelabs/css/blocks.mdx @@ -40,7 +40,7 @@ Notice that the block's `` element has classes for the block's type (`control #### Choose an element to use -Next, you need to decide what element to use in your colour rule. The `` element identifies the block but doesn't draw it. Instead, you can use the `` element's first child. This is a `` element with `fill` and `stroke` presentation attributes, which are easily overridden. +Next, decide which element to use in your colour rule. The `` element identifies the block but doesn't draw it. Instead, you can use the `` element's first child. This is a `` element with `fill` and `stroke` presentation attributes, which are easily overridden. Note that different renderers use different numbers of `` elements to draw a block: Thrasos uses a single `` element, Geras uses three `` @@ -131,7 +131,7 @@ Refresh your page, drag the `if do` block onto the workspace, and disable it. It /> ### Dropdown arrows -You now need to handle dropdown arrows. Drag a logic comparison block onto the workspace and look closely at the inverted triangle in the dropdown field -- it's blue even though the rest of the block is brown: +Next, handle dropdown arrows. Drag a logic comparison block onto the workspace and look closely at the inverted triangle in the dropdown field -- it's blue even though the rest of the block is brown: ` from other category `
`s is a generated `id` attribute (`blockly-1`). This isn't stable enough to use in a CSS rule -- for example, if you switched the order of two categories you'd also have to switch the selectors in their rules. -To solve this problem, you'll need to add a class to the +To solve this problem, add a class to the `blocklyToolboxCategory` `
` for the **Logic** category. Open the `toolbox.js` file and find the definition of the **Logic** category: @@ -87,7 +87,7 @@ Refresh your web page and click the **Logic** category. The row is highlighted w ### Update the other categories -Before you can write rules for the remaining categories, you need to replace `categorystyle` with `cssConfig` in each of their definitions: +Before writing rules for the remaining categories, replace `categorystyle` with `cssConfig` in each of their definitions: ```js { @@ -102,7 +102,7 @@ Before you can write rules for the remaining categories, you need to replace `ca // Repeat for remaining categories ``` -Next, add the following rules to `halloween.css`. These rules use the colours from themes codelab for the **Loops**, **Text**, and **Lists** categories and the colours from the Classic theme (the default theme) for the **Math**, **Variables**, and **Functions** categories. +Next, add the following rules to `halloween.css`. These rules use the colours from the themes codelab for the **Loops**, **Text**, and **Lists** categories and the colours from the Classic theme (the default theme) for the **Math**, **Variables**, and **Functions** categories. ```css .loop_category { diff --git a/packages/docs/docs/codelabs/css/components.mdx b/packages/docs/docs/codelabs/css/components.mdx index 4de651455aa..585051b00b3 100644 --- a/packages/docs/docs/codelabs/css/components.mdx +++ b/packages/docs/docs/codelabs/css/components.mdx @@ -30,7 +30,7 @@ Your first rule will set the background colour of the main workspace. In your Bl ``` -This seems like a good target for your rule, except that the `fill` property is already used to set the grid pattern. Instead, we'll set the `background-color` property of the `blocklySvg` element. To do this, add the following rule to `halloween.css`: +This seems like a good target for your rule, except that the `fill` property is already used to set the grid pattern. Instead, set the `background-color` property of the `blocklySvg` element. To do this, add the following rule to `halloween.css`: ```css /**************/ @@ -169,4 +169,4 @@ You might have also noticed that some rules use an `!important` declaration whil - **Inline styles:** These rules are included via a `style` attribute and can only be overridden by an `!important` declaration. As you will see later, the colour of the arrow in a dropdown field is set with an inline style and must be overridden with `!important`. -The easiest way to determine how a rule is set is to highlight the appropriate element in the element inspector and look at the corresponding style information. In a few cases, this isn't possible. For example, an insertion marker is created only when you drag a child near its parent and is deleted when you let go of the parent to highlight the insertion marker's element. In these cases, you will need to [search Blockly's rules](/guides/configure/appearance/css#blockly-css-rules). +The easiest way to determine how a rule is set is to highlight the appropriate element in the element inspector and look at the corresponding style information. In a few cases, this isn't possible. For example, an insertion marker is created only when you drag a child near its parent and is deleted when you let go of the parent to highlight the insertion marker's element. In these cases, [search Blockly's rules](/guides/configure/appearance/css#blockly-css-rules) instead. diff --git a/packages/docs/docs/codelabs/css/tour.mdx b/packages/docs/docs/codelabs/css/tour.mdx index 5b7454a3d12..c83cceeb406 100644 --- a/packages/docs/docs/codelabs/css/tour.mdx +++ b/packages/docs/docs/codelabs/css/tour.mdx @@ -47,4 +47,4 @@ Description DOM elements Widget, dropdown, tooltip divs
s ``` -One thing that's important to notice are the `blocklyXxxx` classes assigned to most elements. These explain how Blockly uses each element and will be the targets of many of your CSS rules. If you look closely, you'll notice that many elements have multiple classes -- for example, the `` element for the dropdown field in the `counts with` block has `blocklyField`, `blocklyDropdownField`, `blocklyVariableField`, and `blocklyEditableField` classes. Having multiple classes allows you to write CSS rules that affect different ranges of elements. +One thing that's important to notice are the `blocklyXxxx` classes assigned to most elements. These explain how Blockly uses each element and will be the targets of many of your CSS rules. If you look closely, you'll notice that many elements have multiple classes -- for example, the `` element for the dropdown field in the `count with` block has `blocklyField`, `blocklyDropdownField`, `blocklyVariableField`, and `blocklyEditableField` classes. Having multiple classes allows you to write CSS rules that affect different ranges of elements. diff --git a/packages/docs/docs/codelabs/custom-generator/generating-a-stack.mdx b/packages/docs/docs/codelabs/custom-generator/generating-a-stack.mdx index c4878f89659..86f9ec99190 100644 --- a/packages/docs/docs/codelabs/custom-generator/generating-a-stack.mdx +++ b/packages/docs/docs/codelabs/custom-generator/generating-a-stack.mdx @@ -30,4 +30,4 @@ jsonGenerator.scrub_ = function (block, code, thisOnly) { Create a stack of `member` blocks on the workspace. There should be generated code for all of the blocks, not just the first one. -Next, add an `object` block and drag the `member` blocks into it. This case tests `statementToCode`, and should generate code for all of of the blocks. +Next, add an `object` block and drag the `member` blocks into it. This case tests `statementToCode`, and should generate code for all of the blocks. diff --git a/packages/docs/docs/codelabs/custom-generator/member-block-generator.mdx b/packages/docs/docs/codelabs/custom-generator/member-block-generator.mdx index f6c09e25044..0144fa2bcbc 100644 --- a/packages/docs/docs/codelabs/custom-generator/member-block-generator.mdx +++ b/packages/docs/docs/codelabs/custom-generator/member-block-generator.mdx @@ -52,7 +52,7 @@ const code = `"${name}": ${value}`; ### Put it all together -All together, here is block generator for the member block: +All together, here is the block generator for the member block: ```js jsonGenerator.forBlock['member'] = function (block, generator) { diff --git a/packages/docs/docs/codelabs/custom-generator/object-block-generator.mdx b/packages/docs/docs/codelabs/custom-generator/object-block-generator.mdx index 4c663445dee..57ecabbfe7a 100644 --- a/packages/docs/docs/codelabs/custom-generator/object-block-generator.mdx +++ b/packages/docs/docs/codelabs/custom-generator/object-block-generator.mdx @@ -24,7 +24,7 @@ The generated code looks like this: ### Get the contents -We'll use `statementToCode` to get the code for the blocks attached to the statement input of the `object` block. +Use `statementToCode` to get the code for the blocks attached to the statement input of the `object` block. `statementToCode` does three things: @@ -69,4 +69,4 @@ Test it by generating code for an `object` block containing a single `member` bl } ``` -Next, add a second member block and rerun the generator. Did the resulting code change? Let's look at the next section to find out why not. +Next, add a second member block and rerun the generator. Did the resulting code change? The next section explains why not. diff --git a/packages/docs/docs/codelabs/custom-generator/setup.mdx b/packages/docs/docs/codelabs/custom-generator/setup.mdx index af7f64077f9..b7dc071de90 100644 --- a/packages/docs/docs/codelabs/custom-generator/setup.mdx +++ b/packages/docs/docs/codelabs/custom-generator/setup.mdx @@ -103,7 +103,7 @@ export const blocks = Blockly.common.createBlockDefinitionsFromJsonArray([ ]); ``` -This code creates the block definitions, but it doesn't register the definitions with Blockly to make the blocks usable. We'll do that in `src/index.js`. +This code creates the block definitions, but it doesn't register the definitions with Blockly to make the blocks usable. That happens in `src/index.js`. Currently, the app imports `blocks` from the original sample file, `text.js`. Instead, it should import the definitions that were just added. Remove the original import: ```js @@ -165,7 +165,7 @@ export const toolbox = { }; ``` -Our `index.js` file already handles importing the toolbox and using it in Blockly. +The `index.js` file already handles importing the toolbox and using it in Blockly. 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: @@ -175,4 +175,4 @@ If the server is already running, refresh the page to see changes. Otherwise, ru className="codelabImage" /> -The app is still trying to generate and run JavaScript for the workspace, instead of JSON. We will change that soon. +The app is still trying to generate and run JavaScript for the workspace, instead of JSON. The next section changes that. diff --git a/packages/docs/docs/codelabs/custom-generator/summary.mdx b/packages/docs/docs/codelabs/custom-generator/summary.mdx index 4f73963db53..ef32f0e63e7 100644 --- a/packages/docs/docs/codelabs/custom-generator/summary.mdx +++ b/packages/docs/docs/codelabs/custom-generator/summary.mdx @@ -24,4 +24,4 @@ JSON is a simple language, and there are many additional features that could be - Handling comments. - Handling parentheses with operator precedence. -Blockly ships with five language generators: Python, Dart, JavaScript, PHP, and Lua. The language generators and block generators can be found in the [generators directory](https://github.com/RaspberryPiFoundation/blockly/tree/main/generators). +Blockly ships with five language generators: Python, Dart, JavaScript, PHP, and Lua. The language generators and block generators can be found in the [generators directory](https://github.com/RaspberryPiFoundation/blockly/tree/main/packages/blockly/generators).