+
Sizing and spacing
-
To ensure legibility, the logo should not be used with a height
- smaller than 24px.
-
For lockups, provide at least x-height x2 white space around the
- logo. Never crowd or overlap the logo with other elements.
+
+ To ensure legibility, the logo should not be used with a height smaller
+ than 24px.
+
+
+ For lockups, provide at least x-height x2 white space around the logo.
+ Never crowd or overlap the logo with other elements.
+
Common errors
Do not...
@@ -203,14 +332,23 @@ element on your page.
- Rotate or flip in any direction
- Alter proportions, positioning, or placement
- Replace the logotype with a different typeface
- - Use the old Blockly logo (existing uses should be updated when convenient)
- - Use the logo on a poorly contrasting background (e.g. the knockout logo on a light gray background)
+ -
+ Use the old Blockly logo (existing uses should be updated when
+ convenient)
+
+ -
+ Use the logo on a poorly contrasting background (e.g. the knockout logo
+ on a light gray background)
+
- Overlap or crowd the logo with other elements
- Redraw the logo
-
diff --git a/packages/docs/docs/guides/app-integration/run-code.mdx b/packages/docs/docs/guides/app-integration/run-code.mdx
index a13e75dd1..df06fc372 100644
--- a/packages/docs/docs/guides/app-integration/run-code.mdx
+++ b/packages/docs/docs/guides/app-integration/run-code.mdx
@@ -22,62 +22,46 @@ code generators with any of the following methods.
- ```js
- import {javascriptGenerator} from 'blockly/javascript';
- import {pythonGenerator} from 'blockly/python';
- import {phpGenerator} from 'blockly/php';
- import {luaGenerator} from 'blockly/lua';
- import {dartGenerator} from 'blockly/dart';
-
- // Generate code for all the blocks in the workspace.
- const jsCode = javascriptGenerator.workspaceToCode(workspace);
- const pythonCode = pythonGenerator.workspaceToCode(workspace);
- const phpCode = phpGenerator.workspaceToCode(workspace);
- const luaCode = luaGenerator.workspaceToCode(workspace);
- const dartCode = dartGenerator.workspaceToCode(workspace);
- ```
+ ```js import {javascriptGenerator} from 'blockly/javascript'; import{' '}
+ {pythonGenerator} from 'blockly/python'; import {phpGenerator} from
+ 'blockly/php'; import {luaGenerator} from 'blockly/lua'; import{' '}
+ {dartGenerator} from 'blockly/dart'; // Generate code for all the blocks in
+ the workspace. const jsCode =
+ javascriptGenerator.workspaceToCode(workspace); const pythonCode =
+ pythonGenerator.workspaceToCode(workspace); const phpCode =
+ phpGenerator.workspaceToCode(workspace); const luaCode =
+ luaGenerator.workspaceToCode(workspace); const dartCode =
+ dartGenerator.workspaceToCode(workspace); ```
- You must include the generator after you include Blockly.
-
- ```html
-
-
-
-
-
-
- ```
-
- ```js
- // Generate code for all the blocks in the workspace.
- const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
- const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
- const phpCode = php.phpGenerator.workspaceToCode(workspace);
- const luaCode = lua.luaGenerator.workspaceToCode(workspace);
- const dartCode = dart.dartGenerator.workspaceToCode(workspace);
- ```
+ You must include the generator after you include Blockly. ```html
+
+
+
+
+
+
+ ``` ```js // Generate code for all the blocks in the workspace. const jsCode
+ = javascript.javascriptGenerator.workspaceToCode(workspace); const
+ pythonCode = python.pythonGenerator.workspaceToCode(workspace); const
+ phpCode = php.phpGenerator.workspaceToCode(workspace); const luaCode =
+ lua.luaGenerator.workspaceToCode(workspace); const dartCode =
+ dart.dartGenerator.workspaceToCode(workspace); ```
- You must include the generator after you include Blockly.
-
- ```html
-
-
-
-
-
-
- ```
-
- ```js
- // Generate code for all the blocks in the workspace.
- const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
- const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
- const phpCode = php.phpGenerator.workspaceToCode(workspace);
- const luaCode = lua.luaGenerator.workspaceToCode(workspace);
- const dartCode = dart.dartGenerator.workspaceToCode(workspace);
- ```
+ You must include the generator after you include Blockly. ```html
+
+
+
+
+
+
+ ``` ```js // Generate code for all the blocks in the workspace. const jsCode
+ = javascript.javascriptGenerator.workspaceToCode(workspace); const
+ pythonCode = python.pythonGenerator.workspaceToCode(workspace); const
+ phpCode = php.phpGenerator.workspaceToCode(workspace); const luaCode =
+ lua.luaGenerator.workspaceToCode(workspace); const dartCode =
+ dart.dartGenerator.workspaceToCode(workspace); ```
## Generate code
@@ -121,7 +105,7 @@ start or after the end of the generated code.
```js
let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
-const preamble = 'import {MyLibrary} from \'/path/to/my/library\';\n'
+const preamble = "import {MyLibrary} from '/path/to/my/library';\n";
const postscript = 'MyLibrary.myKickoffFunction();\n';
code = preamble + code + postscript;
```
diff --git a/packages/docs/docs/guides/app-integration/running-javascript.mdx b/packages/docs/docs/guides/app-integration/running-javascript.mdx
index 91e997b9e..dfec8d90c 100644
--- a/packages/docs/docs/guides/app-integration/running-javascript.mdx
+++ b/packages/docs/docs/guides/app-integration/running-javascript.mdx
@@ -11,7 +11,7 @@ generally to run within a web page (possibly the same, or a embedded WebView).
Like any generator, the first step is to include the JavaScript generator.
```js
-import {javascriptGenerator} from 'blockly/javascript';
+import { javascriptGenerator } from 'blockly/javascript';
```
To generate JavaScript from the workspace, call:
@@ -73,7 +73,7 @@ highlighted.
## Infinite Loops
Although the resulting code is guaranteed to be syntactically correct at all
-times, it may contain infinite loops. Since solving the
+times, it may contain infinite loops. Since solving the
[Halting problem](https://en.wikipedia.org/wiki/Halting_problem) is beyond
Blockly's scope (!) the best approach for dealing with these cases is to
maintain a counter and decrement it every time an iteration is performed.
@@ -83,7 +83,8 @@ example:
```js
window.LoopTrap = 1000;
-javascriptGenerator.INFINITE_LOOP_TRAP = 'if(--window.LoopTrap == 0) throw "Infinite loop.";\n';
+javascriptGenerator.INFINITE_LOOP_TRAP =
+ 'if(--window.LoopTrap == 0) throw "Infinite loop.";\n';
var code = javascriptGenerator.workspaceToCode(workspace);
```
@@ -99,18 +100,18 @@ If you are serious about running the user's blocks properly, then the
[JS-Interpreter project](https://github.com/NeilFraser/JS-Interpreter) is the way to go.
This project is separate from Blockly, but was specifically written for Blockly.
- * Execute code at any speed.
- * Pause/resume/step-through execution.
- * Highlight blocks as they execute.
- * Completely isolated from browser's JavaScript.
+- Execute code at any speed.
+- Pause/resume/step-through execution.
+- Highlight blocks as they execute.
+- Completely isolated from browser's JavaScript.
### Run the Interpreter
First, download the JS-Interpreter from GitHub:
-* [Download zip file](https://github.com/NeilFraser/JS-Interpreter/zipball/master)
-* [Download tar file](https://github.com/NeilFraser/JS-Interpreter/tarball/master)
-* [View on GitHub](https://github.com/NeilFraser/JS-Interpreter)
+- [Download zip file](https://github.com/NeilFraser/JS-Interpreter/zipball/master)
+- [Download tar file](https://github.com/NeilFraser/JS-Interpreter/tarball/master)
+- [View on GitHub](https://github.com/NeilFraser/JS-Interpreter)
Then add it to your page:
@@ -155,18 +156,24 @@ But to start with, here is the API needed to support the alert and prompt blocks
```js
function initApi(interpreter, globalObject) {
// Add an API function for the alert() block.
- var wrapper = function(text) {
+ var wrapper = function (text) {
return alert(arguments.length ? text : '');
};
- interpreter.setProperty(globalObject, 'alert',
- interpreter.createNativeFunction(wrapper));
+ interpreter.setProperty(
+ globalObject,
+ 'alert',
+ interpreter.createNativeFunction(wrapper),
+ );
// Add an API function for the prompt() block.
- wrapper = function(text) {
+ wrapper = function (text) {
return prompt(text);
};
- interpreter.setProperty(globalObject, 'prompt',
- interpreter.createNativeFunction(wrapper));
+ interpreter.setProperty(
+ globalObject,
+ 'prompt',
+ interpreter.createNativeFunction(wrapper),
+ );
}
```
@@ -189,11 +196,14 @@ argument, and register it as a native function.
```js
function initApi(interpreter, globalObject) {
// Add an API function for highlighting blocks.
- var wrapper = function(id) {
+ var wrapper = function (id) {
return workspace.highlightBlock(id);
};
- interpreter.setProperty(globalObject, 'highlightBlock',
- interpreter.createNativeFunction(wrapper));
+ interpreter.setProperty(
+ globalObject,
+ 'highlightBlock',
+ interpreter.createNativeFunction(wrapper),
+ );
}
```
diff --git a/packages/docs/docs/guides/configure/web/appearance/colour-formats.mdx b/packages/docs/docs/guides/configure/web/appearance/colour-formats.mdx
index 958bfec61..49025227d 100644
--- a/packages/docs/docs/guides/configure/web/appearance/colour-formats.mdx
+++ b/packages/docs/docs/guides/configure/web/appearance/colour-formats.mdx
@@ -24,8 +24,8 @@ The saturation and values can be adapted for each application by calling the
following functions:
```js
-Blockly.utils.colour.setHsvSaturation(0.45) // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
-Blockly.utils.colour.setHsvValue(0.65) // 0 (inclusive) to 1 (exclusive), defaulting to 0.65
+Blockly.utils.colour.setHsvSaturation(0.45); // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
+Blockly.utils.colour.setHsvValue(0.65); // 0 (inclusive) to 1 (exclusive), defaulting to 0.65
```
Several colour pickers offer the HSV colour space, such as [HSV
@@ -65,15 +65,15 @@ Blockly includes nine colour constants in the string table, corresponding to the
toolbox categories, plus a distinct colour for dynamic variables:
```js
-'%{BKY_LOGIC_HUE}'
-'%{BKY_LOOPS_HUE}'
-'%{BKY_MATH_HUE}'
-'%{BKY_TEXTS_HUE}'
-'%{BKY_LISTS_HUE}'
-'%{BKY_COLOUR_HUE}'
-'%{BKY_VARIABLES_HUE}'
-'%{BKY_VARIABLES_DYNAMIC_HUE}'
-'%{BKY_PROCEDURES_HUE}'
+'%{BKY_LOGIC_HUE}';
+'%{BKY_LOOPS_HUE}';
+'%{BKY_MATH_HUE}';
+'%{BKY_TEXTS_HUE}';
+'%{BKY_LISTS_HUE}';
+'%{BKY_COLOUR_HUE}';
+'%{BKY_VARIABLES_HUE}';
+'%{BKY_VARIABLES_DYNAMIC_HUE}';
+'%{BKY_PROCEDURES_HUE}';
```
These string values can be used in both the JSON definitions and
diff --git a/packages/docs/docs/guides/configure/web/appearance/css.mdx b/packages/docs/docs/guides/configure/web/appearance/css.mdx
index 1c5feaa1d..e729f134d 100644
--- a/packages/docs/docs/guides/configure/web/appearance/css.mdx
+++ b/packages/docs/docs/guides/configure/web/appearance/css.mdx
@@ -13,9 +13,9 @@ are labeled with CSS classes that identify what they represent (e.g.
You can use CSS to style your application:
-* Override Blockly's CSS rules with your own rules.
-* Add your own CSS classes to Blockly components for additional specificity.
-* Use CSS classes and rules to style custom components.
+- Override Blockly's CSS rules with your own rules.
+- Add your own CSS classes to Blockly components for additional specificity.
+- Use CSS classes and rules to style custom components.
For a practical introduction to using CSS in blockly, see the [Use CSS in Blockly](/codelabs/css/codelab-overview/index.html)
@@ -33,22 +33,22 @@ provides finer-grained control than type (element) selectors.
Blockly uses CSS classes to provide the following kinds of information about the
HTML and SVG elements it uses.
-* **Type.** Most Blockly CSS classes identify what an element represents. For
- example, the root element of a block is labeled `blocklyBlock`. Some
- elements are labeled with multiple classes, each more specific than the
- last. For example, the root element of a text input field is labeled
- `blocklyField`, `blocklyInputField`, and `blocklyTextInputField`. Type
- classes remain the same for the life of a component.
+- **Type.** Most Blockly CSS classes identify what an element represents. For
+ example, the root element of a block is labeled `blocklyBlock`. Some
+ elements are labeled with multiple classes, each more specific than the
+ last. For example, the root element of a text input field is labeled
+ `blocklyField`, `blocklyInputField`, and `blocklyTextInputField`. Type
+ classes remain the same for the life of a component.
-* **State.** Blockly also uses CSS classes to specify the state of a
- component. For example, when the cursor is on a text input field, its root
- element is labeled with the `blocklyEditing` class. When the cursor is moved
- away, this class is removed.
+- **State.** Blockly also uses CSS classes to specify the state of a
+ component. For example, when the cursor is on a text input field, its root
+ element is labeled with the `blocklyEditing` class. When the cursor is moved
+ away, this class is removed.
-* **Additional information.** Blockly uses a few CSS classes to provide
- additional information. For example, the injection `
` has classes that
- provide the name of the workspace's current renderer and theme. These
- classes generally remain the same for the life of the application.
+- **Additional information.** Blockly uses a few CSS classes to provide
+ additional information. For example, the injection `
` has classes that
+ provide the name of the workspace's current renderer and theme. These
+ classes generally remain the same for the life of the application.
The easiest way to discover what CSS classes Blockly uses is to open your
browser's developer tools and inspect the elements used by your application.
@@ -80,20 +80,22 @@ To add CSS classes to a custom block, pass a string or array of strings to the
`classes` key.
```js
-Blockly.common.defineBlocksWithJsonArray([{
- "type": "string_length",
- "message0": 'length of %1',
- "args0": [
- {
- "type": "input_value",
- "name": "VALUE",
- "check": "String",
- }
- ],
- "classes": "myStringLengthBlock",
- "output": "Number",
- "colour": 160,
-}]);
+Blockly.common.defineBlocksWithJsonArray([
+ {
+ type: 'string_length',
+ message0: 'length of %1',
+ args0: [
+ {
+ type: 'input_value',
+ name: 'VALUE',
+ check: 'String',
+ },
+ ],
+ classes: 'myStringLengthBlock',
+ output: 'Number',
+ colour: 160,
+ },
+]);
```
You can also add or remove a CSS class from a block's `` element by calling
@@ -110,42 +112,44 @@ name to the label's constructor.
When constructing a custom component, use one of the following methods to add
custom CSS classes:
-* If your component is a subclass of `Field` or `Icon`, override the
- `initView` method. For example:
+- If your component is a subclass of `Field` or `Icon`, override the
+ `initView` method. For example:
- ```js
- class MyCustomField extends Blockly.FieldTextInput {
- ...
+ ```js
+ class MyCustomField extends Blockly.FieldTextInput {
+ ...
- initView() {
- super.initView();
+ initView() {
+ super.initView();
- // Add custom CSS class so we can style the field.
- if (this.fieldGroup_) {
- Blockly.utils.dom.addClass(this.fieldGroup_, 'myCustomField');
- }
+ // Add custom CSS class so we can style the field.
+ if (this.fieldGroup_) {
+ Blockly.utils.dom.addClass(this.fieldGroup_, 'myCustomField');
}
}
- ```
+ }
+ ```
- For more information, see [Customizing fields with
- CSS](/guides/create-custom-blocks/fields/customizing-fields/creating#customizing-with-css)
- or [Create the icon's
- view](/guides/create-custom-blocks/icons/creating-custom-icons/basic-implementation#create-the-icons-view).
+ For more information, see [Customizing fields with
+ CSS](/guides/create-custom-blocks/fields/customizing-fields/creating#customizing-with-css)
+ or [Create the icon's
+ view](/guides/create-custom-blocks/icons/creating-custom-icons/basic-implementation#create-the-icons-view).
-* When constructing an SVG element, pass your class to
- `Blockly.utils.dom.createSvgElement`:
+- When constructing an SVG element, pass your class to
+ `Blockly.utils.dom.createSvgElement`:
- ```js
- this.svgRoot = Blockly.utils.dom.createSvgElement(Svg.G, {'class': 'myCustomComponent'});
- ```
+ ```js
+ this.svgRoot = Blockly.utils.dom.createSvgElement(Svg.G, {
+ class: 'myCustomComponent',
+ });
+ ```
-* When constructing an HTML element, use `Blockly.utils.dom.addClass`:
+- When constructing an HTML element, use `Blockly.utils.dom.addClass`:
- ```js
- const myDiv = document.createElement('div');
- Blockly.utils.dom.addClass(myDiv, 'myInformation');
- ```
+ ```js
+ const myDiv = document.createElement('div');
+ Blockly.utils.dom.addClass(myDiv, 'myInformation');
+ ```
To add or remove classes after construction, use `Blockly.utils.dom.addClass` or
`Blockly.utils.dom.removeClass`.
@@ -193,7 +197,9 @@ attributes**) or in CSS rules. Thus, all of the following do the same thing.
```css
/* External CSS file.*/
-circle {fill:red;}
+circle {
+ fill: red;
+}
```
```svg
@@ -204,14 +210,14 @@ circle {fill:red;}
The list of SVG styling properties is related to but different from the list of
CSS properties:
-* **Same concept, same name.** For example, both SVG and CSS use `direction`
- to specify whether text is LTR or RTL.
-* **Same concept, different name.** For example, SVG uses `fill` to specify
- fill color; CSS uses `background-color`.
-* **CSS only.** CSS has many properties that are not in SVG, such as `margin`
- and `padding`.
-* **SVG only.** SVG has a few properties that are not in CSS, such as `x` and
- `y`.
+- **Same concept, same name.** For example, both SVG and CSS use `direction`
+ to specify whether text is LTR or RTL.
+- **Same concept, different name.** For example, SVG uses `fill` to specify
+ fill color; CSS uses `background-color`.
+- **CSS only.** CSS has many properties that are not in SVG, such as `margin`
+ and `padding`.
+- **SVG only.** SVG has a few properties that are not in CSS, such as `x` and
+ `y`.
Thus, if you're styling an SVG element, use [SVG styling
properties](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute#presentation_attributes).
@@ -237,25 +243,24 @@ these steps and stop when only one rule remains:
have an `!important` annotation.
1. Choose the rules with the highest
[specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity).
-
- * [SVG presentation attributes](#svg-style) have a specificity of zero.
- * Rules in a `