CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-06-16 16:15:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore(docs): replace CompareBlock component with admonition syntax

Browse Source
This commit is contained in:
Greg Annandale
2026-04-07 10:19:06 +01:00
parent 541c8d645a
commit 059a9c741d
4 changed files with 35 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docs/docs/guides/app-integration/attribution.mdx
+10 -19
View File
@@ -6,13 +6,6 @@ image: images/blockly_banner.png
import Image from '@site/src/components/Image';
<head>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
</head>
# Attribute Blockly
Blockly's code is open source and free to use without attribution.
@@ -46,18 +39,16 @@ press interviews, the app, and on your website.
### Reference do's and don'ts
<p>
<span className="compare-better">Do</span> — Call Blockly "beginner friendly"
instead of "kid friendly." Blockly is used for a variety of applications, not
all of which are kid focused.
</p>
:::tip[Do]
Call Blockly "beginner friendly" instead of "kid friendly." Blockly is used for
a variety of applications, not all of which are kid focused.
:::
<p>
<span className="compare-worse">Don't</span> — Refer to Blockly as a language
(for example, as a "block-based programming language"). Blockly is not a
language, it's a library that developers use to make a block-based visual
programming interface.
</p>
:::danger[Don't]
Refer to Blockly as a language (for example, as a "block-based programming
language"). Blockly is not a language, it's a library that developers use to
make a block-based visual programming interface.
:::
## How to visually represent Blockly
@@ -324,7 +315,7 @@ element on your page.
Never crowd or overlap the logo with other elements.
</p>
<h3>Common errors</h3>
<span className="compare-worse">Do not...</span>
<b>Do not...</b>
<ul>
<li>Alter or distort the logo in any way</li>
<li>Use the white knockout in any color but white</li>
packages/docs/docs/guides/contribute/samples/block_libraries.mdx
+25 -37
View File
@@ -4,17 +4,6 @@ title: Publish block libraries
image: images/blockly_banner.png
---
import Head from '@docusaurus/Head';
import CompareBlock from '@site/src/components/CompareBlock';
<Head>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
</Head>
# Publish block libraries
Plugins that provide libraries of block definitions are a great way to share
@@ -42,35 +31,34 @@ versatile and useful as possible, we've developed these guidelines.
pieces they need without worrying that pieces they don't will be
installed.
- Use the JSON field registry instead of instantiating new fields directly.
- <CompareBlock variant="worse">
Not Recommended - Instantiating a new field directly:
:::danger[Not Recommended]
Instantiating a new field directly:
```js
const myCustomBlock = {
init: function() {
this.appendDummyInput()
.appendField(new Blockly.FieldNumber(123), 'NAME');
}
}
```
</CompareBlock>
```js
const myCustomBlock = {
init: function() {
this.appendDummyInput()
.appendField(new Blockly.FieldNumber(123), 'NAME');
}
}
```
:::
- <CompareBlock variant="better">
Recommended - JSON field registry:
:::tip[Recommended]
Use the JSON field registry:
```js
export const myCustomBlock = {
init: function() {
this.appendDummyInput()
.appendField(Blockly.fieldRegistry.fromJson({
name: 'field_number',
value: 123,
}), 'NAME');
}
}
```
</CompareBlock>
```js
export const myCustomBlock = {
init: function() {
this.appendDummyInput()
.appendField(Blockly.fieldRegistry.fromJson({
name: 'field_number',
value: 123,
}), 'NAME');
}
}
```
:::
- 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