diff --git a/packages/docs/docs/guides/app-integration/attribution.mdx b/packages/docs/docs/guides/app-integration/attribution.mdx
index 4f7df2e81..53d321a84 100644
--- a/packages/docs/docs/guides/app-integration/attribution.mdx
+++ b/packages/docs/docs/guides/app-integration/attribution.mdx
@@ -6,13 +6,6 @@ image: images/blockly_banner.png
import Image from '@site/src/components/Image';
-
-
-
-
# 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
-
- Do — Call Blockly "beginner friendly"
- instead of "kid friendly." Blockly is used for a variety of applications, not
- all of which are kid focused.
-
+:::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.
+:::
-
- 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.
-
+:::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.
Common errors
- Do not...
+ Do not...
Alter or distort the logo in any way
Use the white knockout in any color but white
diff --git a/packages/docs/docs/guides/contribute/samples/block_libraries.mdx b/packages/docs/docs/guides/contribute/samples/block_libraries.mdx
index 2c414147a..134c24450 100644
--- a/packages/docs/docs/guides/contribute/samples/block_libraries.mdx
+++ b/packages/docs/docs/guides/contribute/samples/block_libraries.mdx
@@ -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';
-
-
-
-
-
-
# 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.
-
- -
- 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');
- }
- }
- ```
-
+ ```js
+ const myCustomBlock = {
+ init: function() {
+ this.appendDummyInput()
+ .appendField(new Blockly.FieldNumber(123), 'NAME');
+ }
+ }
+ ```
+ :::
- -
- 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');
- }
- }
- ```
-
+ ```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
diff --git a/packages/docs/src/components/CompareBlock.js b/packages/docs/src/components/CompareBlock.js
deleted file mode 100644
index 8bb0df421..000000000
--- a/packages/docs/src/components/CompareBlock.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function CompareBlock({ variant, children }) {
- return