diff --git a/packages/docs/docs/guides/configure/web/configuration_struct.mdx b/packages/docs/docs/guides/configure/web/configuration_struct.mdx
index fb08edb44..1827599fa 100644
--- a/packages/docs/docs/guides/configure/web/configuration_struct.mdx
+++ b/packages/docs/docs/guides/configure/web/configuration_struct.mdx
@@ -4,8 +4,6 @@ description: Simple configuration options that Blockly surfaces during injection
image: images/blockly_banner.png
---
-import TableHeader from '@site/src/components/TableHeader';
-
# Create a workspace
You can create a workspace and inject it into the DOM in a single call, or
@@ -42,7 +40,7 @@ The configuration object implements
and has the following options. Note that several of these options change their
default value based on whether the provided toolbox has categories or not.
-| Name | Type | Description |
+| Name | Type | Description |
|-----------------------|-----------|-------------------------------------------------------------|
| `collapse` | boolean | Whether block context menus include an item to collapse or expand blocks. Defaults to `true` if the toolbox has categories, `false` otherwise.
| `comments` | boolean | Whether block context menus include an item to add or remove comments. Defaults to `true` if the toolbox has categories,`false` otherwise.
diff --git a/packages/docs/docs/guides/configure/web/context-menus.mdx b/packages/docs/docs/guides/configure/web/context-menus.mdx
index 54a0eccb3..84488d1d8 100644
--- a/packages/docs/docs/guides/configure/web/context-menus.mdx
+++ b/packages/docs/docs/guides/configure/web/context-menus.mdx
@@ -5,7 +5,6 @@ image: images/blockly_banner.png
---
import Image from '@site/src/components/Image';
-import TableHeader from '@site/src/components/TableHeader';
# Context menus
@@ -130,7 +129,7 @@ should be displayed.
It should return one of a set of strings: `'enabled'`, `'disabled'`, or
`'hidden'`.
-| Value | Description | Image |
+| Value | Description | Image |
| ------------ | ---------------------------------- | --------------------------------------------------- |
| `'enabled'` | Shows that the item is active. | |
| `'disabled'` | Shows that the item is not active. | |
diff --git a/packages/docs/docs/guides/configure/web/customization.mdx b/packages/docs/docs/guides/configure/web/customization.mdx
index a53db477c..2cd2c96f8 100644
--- a/packages/docs/docs/guides/configure/web/customization.mdx
+++ b/packages/docs/docs/guides/configure/web/customization.mdx
@@ -4,8 +4,6 @@ title: Advanced customization
image: images/blockly_banner.png
---
-import TableHeader from '@site/src/components/TableHeader';
-
# Advanced customization
Blockly lets you customize certain functionality by replacing the corresponding
@@ -15,7 +13,7 @@ Blockly classes.
The following Blockly classes can be replaced:
-| Blockly class | Interface | Registry type name |
+| Blockly class | Interface | Registry type name |
| ------------------------------------ | -------------------------------- | -------------------------- |
| [`Blockly.dragging.Dragger`] | [`Blockly.IDragger`] | `blockDragger` |
| [`Blockly.ConnectionChecker`] | [`Blockly.IConnectionChecker`] | `connectionChecker` |
diff --git a/packages/docs/docs/guides/configure/web/toolboxes/appearance.mdx b/packages/docs/docs/guides/configure/web/toolboxes/appearance.mdx
index 5c4c63512..e5708b47f 100644
--- a/packages/docs/docs/guides/configure/web/toolboxes/appearance.mdx
+++ b/packages/docs/docs/guides/configure/web/toolboxes/appearance.mdx
@@ -6,7 +6,6 @@ image: images/blockly_banner.png
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
-import TableHeader from '@site/src/components/TableHeader';
# Category appearance
@@ -49,7 +48,7 @@ The following table lists the types, descriptions, and default CSS classes of
each part of a category toolbox. If you're having trouble visualizing this, open
the developer tools in your browser and inspect the toolbox.
-| Part type | Description | Default CSS class |
+| Part type | Description | Default CSS class |
| ------------------- | ------------------------------------------------------------------------ | ---------------------------------- |
| contents | The `div` that contains all categories. | `blocklyToolboxCategoryGroup` |
| container | The `div` that contains a single category and its subcategories. | `blocklyToolboxCategoryContainer` |
@@ -60,7 +59,7 @@ the developer tools in your browser and inspect the toolbox.
CSS is also used to label the state of some parts of the toolbox.
-| State | Description | Default CSS class |
+| State | Description | Default CSS class |
| ------------------- | ------------------------------------------------------------------------ | ---------------------------------- |
| selected | Added to the "row" `div` when the category is selected. | `blocklyToolboxSelected` |
| openicon | Added to the "icon" `span` when a category with subcategories is open. | `blocklyToolboxCategoryIconOpen` |
diff --git a/packages/docs/docs/guides/contribute/samples/naming.mdx b/packages/docs/docs/guides/contribute/samples/naming.mdx
index e084b0f07..a78395217 100644
--- a/packages/docs/docs/guides/contribute/samples/naming.mdx
+++ b/packages/docs/docs/guides/contribute/samples/naming.mdx
@@ -4,8 +4,6 @@ title: Plugin naming conventions
image: images/blockly_banner.png
---
-import TableHeader from '@site/src/components/TableHeader';
-
# Plugin naming conventions
## Overview
@@ -30,7 +28,7 @@ field](/guides/create-custom-blocks/fields/customizing-fields/overview).
Loading a field plugin registers a new field type that can be used in all
Blockly workspaces on the page.
-| First Party | Third Party | Example | Suggested tags |
+| First Party | Third Party | Example | Suggested tags |
| ------------------ | ----------------- | ------------------------- | ------------------------- |
| `@blockly/field-*` | `blockly-field-*` | [`@blockly/field-slider`] | `blockly-plugin`, `field` |
@@ -44,7 +42,7 @@ A theme plugin publishes a single Blockly
Loading a theme plugin defines a new theme that can then be used in all Blockly
workspaces on the page.
-| First Party | Third Party | Example | Suggested tags |
+| First Party | Third Party | Example | Suggested tags |
| ------------------ | ----------------- | ------------------------- | ------------------------- |
| `@blockly/theme-*` | `blockly-theme-*` | [`@blockly/theme-modern`] | `blockly-plugin`, `theme` |
@@ -58,7 +56,7 @@ definitions](/guides/create-custom-blocks/overview).
Loading a block plugin defines those blocks for all Blockly workspaces on the
page.
-| First Party | Third Party | Example | Suggested tags |
+| First Party | Third Party | Example | Suggested tags |
| --------------------- | -------------------- | ------------------------------ | ----------------------------------- |
| `@blockly/block(s)-*` | `blockly-block(s)-*` | [`@blockly/blocks-plus-minus`] | `blockly-plugin`, `block`, `blocks` |
@@ -73,7 +71,7 @@ be used to programmatically share behaviour between blocks.
Loading a block extension plugin registers the extensions for use on all Blockly
workspaces on the page.
-| First Party | Third Party | Example | Suggested tags |
+| First Party | Third Party | Example | Suggested tags |
| ---------------------- | --------------------- | -------- | ---------------------------------- |
| `@blockly/extension-*` | `blockly-extension-*` | None yet | `blockly-plugin`,`block-extension` |
@@ -84,7 +82,7 @@ A workspace plugin adds behaviour to a single workspace.
Loading a workspace plugin does nothing until it is initialized on a Blockly
workspace.
-| First Party | Third Party | Example | Suggested tags |
+| First Party | Third Party | Example | Suggested tags |
| ---------------------- | --------------------- | -------- | ---------------------------- |
| `@blockly/workspace-*` | `blockly-workspace-*` | None yet | `blockly-plugin`,`workspace` |
@@ -93,7 +91,7 @@ workspace.
This is the most general plugin type. Use this naming convention if your plugin
doesn't meet the requirements of any other plugin type.
-| First Party | Third Party | Example | Suggested tags |
+| First Party | Third Party | Example | Suggested tags |
| ------------------- | ------------------ | ------------------------- | ---------------- |
| `@blockly/plugin-*` | `blockly-plugin-*` | [`@blockly/plugin-modal`] | `blockly-plugin` |
diff --git a/packages/docs/docs/guides/create-custom-blocks/define/block-anatomy.mdx b/packages/docs/docs/guides/create-custom-blocks/define/block-anatomy.mdx
index b4452e898..5c1247bcc 100644
--- a/packages/docs/docs/guides/create-custom-blocks/define/block-anatomy.mdx
+++ b/packages/docs/docs/guides/create-custom-blocks/define/block-anatomy.mdx
@@ -5,7 +5,6 @@ image: images/blockly_banner.png
---
import Image from '@site/src/components/Image';
-import TableHeader from '@site/src/components/TableHeader';
# Anatomy of a block
@@ -24,7 +23,7 @@ when you connect two blocks, you fit their connections together.
There are four types of connections:
-| Connection type | Image |
+| Connection type | Image |
|---------------------|--------------------------------------------------|
| Output connection | |
| Input connection | |
@@ -104,7 +103,7 @@ inputs](/guides/create-custom-blocks/inputs/creating-custom-inputs),
which support [custom
rendering](/guides/create-custom-blocks/renderers/overview).
-| Input type | Connection type | Image |
+| Input type | Connection type | Image |
|------------------|------------------|-------------------------------------------------|
| Dummy input | None | |
| End-of-row input | None | |
@@ -216,7 +215,7 @@ For more information, see
Blocks, inputs, connections, fields, and icons are all JavaScript objects.
-| Blockly component | Base class | Subclasses |
+| Blockly component | Base class | Subclasses |
| ------------------|--------------|----------------------|
| Block | `Block` | `BlockSvg` |
| Input | `Input` | `DummyInput` |
diff --git a/packages/docs/docs/guides/create-custom-blocks/fields/anatomy-of-a-field.mdx b/packages/docs/docs/guides/create-custom-blocks/fields/anatomy-of-a-field.mdx
index dd6803102..56776a001 100644
--- a/packages/docs/docs/guides/create-custom-blocks/fields/anatomy-of-a-field.mdx
+++ b/packages/docs/docs/guides/create-custom-blocks/fields/anatomy-of-a-field.mdx
@@ -4,8 +4,6 @@ title: Anatomy of a field
image: images/blockly_banner.png
---
-import TableHeader from '@site/src/components/TableHeader';
-
# Anatomy of a field
## Value
@@ -89,7 +87,7 @@ complex, depending on its needs.
These are some examples of different on-block displays, in order of increasing
complexity.
-| Field type | Description |
+| Field type | Description |
| --------------- | ----------------------------------------------------------------------------------------------------- |
| Label | Contains only a text element. |
| Angle | Contains a background rect, text element, and a degree symbol. |
@@ -103,7 +101,7 @@ arbitrarily complex editor.
These are some examples of different editors, in order of increasing
complexity.
-| Field type | Description |
+| Field type | Description |
| --------------- | -------------------------------------------------------------------------------------------------------------------- |
| Checkbox | No editor when clicked. The on-block display updates. |
| Number input | Text editor overlaid above the on-block display. Users can type; the editor may change color to indicate bad values. |
diff --git a/packages/docs/docs/guides/create-custom-blocks/fields/built-in-fields/image.mdx b/packages/docs/docs/guides/create-custom-blocks/fields/built-in-fields/image.mdx
index 593c91bf9..bc071af4d 100644
--- a/packages/docs/docs/guides/create-custom-blocks/fields/built-in-fields/image.mdx
+++ b/packages/docs/docs/guides/create-custom-blocks/fields/built-in-fields/image.mdx
@@ -6,7 +6,6 @@ image: images/blockly_banner.png
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
-import TableHeader from '@site/src/components/TableHeader';
# Image fields
@@ -63,7 +62,7 @@ collapsed.](/images/fields/image/collapsed.png)
The image constructor takes in:
-| Parameter | Description |
+| Parameter | Description |
| ------------- | ------------------------------------------------------------ |
| `src` | A string that points to a [raster image](https://developer.mozilla.org/en-US/docs/Glossary/raster_image) file. |
| `width` | Must cast to a non-zero number. |
diff --git a/packages/docs/docs/guides/create-custom-blocks/fields/fields-vs-icons.mdx b/packages/docs/docs/guides/create-custom-blocks/fields/fields-vs-icons.mdx
index 581a0f730..13db3734c 100644
--- a/packages/docs/docs/guides/create-custom-blocks/fields/fields-vs-icons.mdx
+++ b/packages/docs/docs/guides/create-custom-blocks/fields/fields-vs-icons.mdx
@@ -4,8 +4,6 @@ title: Fields vs icons
image: images/blockly_banner.png
---
-import TableHeader from '@site/src/components/TableHeader';
-
# Fields vs icons
Fields and icons are both visual elements that appear on a block, but they have
@@ -23,7 +21,7 @@ yourself, but does not affect how the block functions within the program.
## Comparison of functionality
-| Attribute | Fields | Icons |
+| Attribute | Fields | Icons |
| ------------- | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| Rendering | Fields can be made of whatever elements they want. | Icons can be made of whatever elements they want. |
| Number | Fields can each appear any number of times in a block. | Icons can each appear once in a block. |
diff --git a/packages/docs/docs/guides/create-custom-blocks/renderers/overview.mdx b/packages/docs/docs/guides/create-custom-blocks/renderers/overview.mdx
index 70652ec2e..07aeb6363 100644
--- a/packages/docs/docs/guides/create-custom-blocks/renderers/overview.mdx
+++ b/packages/docs/docs/guides/create-custom-blocks/renderers/overview.mdx
@@ -4,8 +4,6 @@ title: Renderers
image: images/blockly_banner.png
---
-import TableHeader from '@site/src/components/TableHeader';
-
# Renderers
The shape of a block is determined by a renderer, based on the
@@ -16,7 +14,7 @@ The shape of a block is determined by a renderer, based on the
Blockly provides three built-in renderers, each of which give a slightly
different feel to the program.
-| Renderer | Description | Image |
+| Renderer | Description | Image |
| -------- | ------------------------------------------------------------------------------------------------------------------- | ------------------- |
| Thrasos | The recommended renderer. It is a more modern take on the geras renderer, with more even spacing and solid borders. | ![thrasos][thrasos] |
| Geras | The default renderer. It is the original renderer that Blockly was built with. | ![geras][geras] |
diff --git a/packages/docs/docs/guides/get-started/workspace-anatomy.mdx b/packages/docs/docs/guides/get-started/workspace-anatomy.mdx
index 5ea52e104..bf3d0dc48 100644
--- a/packages/docs/docs/guides/get-started/workspace-anatomy.mdx
+++ b/packages/docs/docs/guides/get-started/workspace-anatomy.mdx
@@ -5,7 +5,6 @@ image: images/blockly_banner.png
---
import Image from '@site/src/components/Image';
-import TableHeader from '@site/src/components/TableHeader';
[workspace]: /guides/configure/web/configuration_struct
[category-toolbox]: /guides/configure/web/toolboxes/category
@@ -129,7 +128,7 @@ contained by an [input](#inputs).
A [connection][connection] is a place on a block other blocks can connect to.
-| Connection | Image |
+| Connection | Image |
|------------------|------------------------------------------------------|
| Output | |
| Input | |
@@ -146,7 +145,7 @@ is built by rendering its inputs in one or more rows like bricks.
All inputs can contain fields. Only value and statement inputs can contain a
connection.
-| Input type | Connection type | Notes |
+| Input type | Connection type | Notes |
|------------|-----------------|---------------------------------------|
| Dummy | None | |
| End-of-row | None | Forces next input to start a new row. |
diff --git a/packages/docs/src/components/TableHeader.js b/packages/docs/src/components/TableHeader.js
deleted file mode 100644
index 758ead42a..000000000
--- a/packages/docs/src/components/TableHeader.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function TableHeader({ children }) {
- return {children}
;
-}
diff --git a/packages/docs/src/css/custom.css b/packages/docs/src/css/custom.css
index e07c39ea3..cbdbf815f 100644
--- a/packages/docs/src/css/custom.css
+++ b/packages/docs/src/css/custom.css
@@ -73,9 +73,12 @@
width: 200px;
}
-.displayTableHeader{
+table th {
text-align: left;
- margin-bottom: 0px;
+}
+
+table th p {
+ margin-bottom: 0;
}
[data-theme]:not([data-theme='dark']) .alert--secondary {
@@ -105,7 +108,7 @@
border-block-end: 1px solid var(--border-divider-footer);
}
-.footer__title{
+.footer__title {
font-weight: bold;
font-family: 'Google Sans', sans-serif;
font-size: 16px;