CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-04-26 23:20:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore(docs): remove TableHeader component, simplify tables in Markdown

Browse Source 
Component was superfluous, we can achieve the same with regular Markdown table syntax and a very small amount of CSS
This commit is contained in:
Greg Annandale
2026-03-31 15:34:40 +01:00
parent 8839c16e0b
commit ec19340c06
13 changed files with 27 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docs/docs/guides/configure/web/configuration_struct.mdx
+1 -3
View File
@@ -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.
| <TableHeader> Name </TableHeader> | <TableHeader> Type </TableHeader> | <TableHeader> Description </TableHeader> |
| 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.
packages/docs/docs/guides/configure/web/context-menus.mdx
+1 -2
View File
@@ -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'`.
| <TableHeader> Value </TableHeader>| <TableHeader> Description </TableHeader>| <TableHeader> Image </TableHeader>|
| Value | Description | Image |
| ------------ | ---------------------------------- | --------------------------------------------------- |
| `'enabled'` | Shows that the item is active. | <Image alt="An enabled option" src="/images/context-menus/enabled-option.png" width={150} /> |
| `'disabled'` | Shows that the item is not active. | <Image alt="A disabled option" src="/images/context-menus/disabled-option.png" width={150} /> |
packages/docs/docs/guides/configure/web/customization.mdx
+1 -3
View File
@@ -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:
| <TableHeader> Blockly class </TableHeader>| <TableHeader> Interface </TableHeader>| <TableHeader> Registry type name </TableHeader>|
| Blockly class | Interface | Registry type name |
| ------------------------------------ | -------------------------------- | -------------------------- |
| [`Blockly.dragging.Dragger`] | [`Blockly.IDragger`] | `blockDragger` |
| [`Blockly.ConnectionChecker`] | [`Blockly.IConnectionChecker`] | `connectionChecker` |
packages/docs/docs/guides/configure/web/toolboxes/appearance.mdx
+2 -3
View File
@@ -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.
| <TableHeader> Part type </TableHeader> | <TableHeader> Description </TableHeader> | <TableHeader> Default CSS class </TableHeader> |
| 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.
| <TableHeader> State </TableHeader> | <TableHeader> Description </TableHeader> | <TableHeader> Default CSS class </TableHeader> |
| 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` |
packages/docs/docs/guides/contribute/samples/naming.mdx
+6 -8
View File
@@ -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.
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
| 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.
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
| 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.
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
| 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.
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
| 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.
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
| 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.
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
| First Party | Third Party | Example | Suggested tags |
| ------------------- | ------------------ | ------------------------- | ---------------- |
| `@blockly/plugin-*` | `blockly-plugin-*` | [`@blockly/plugin-modal`] | `blockly-plugin` |
packages/docs/docs/guides/create-custom-blocks/define/block-anatomy.mdx
+3 -4
View File
@@ -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:
| <TableHeader> Connection type </TableHeader> | <TableHeader> Image </TableHeader> |
| Connection type | Image |
|---------------------|--------------------------------------------------|
| Output connection | <Image alt="an output connection" src="/images/connections/output-connection.png" width={40} /> |
| Input connection | <Image alt="an input connection" src="/images/connections/input-connection.png" srcDark="/images/connections/input-connection-dark.png" width={45} /> |
@@ -104,7 +103,7 @@ inputs](/guides/create-custom-blocks/inputs/creating-custom-inputs),
which support [custom
rendering](/guides/create-custom-blocks/renderers/overview).
| <TableHeader> Input type </TableHeader> | <TableHeader> Connection type </TableHeader> | <TableHeader> Image </TableHeader> |
| Input type | Connection type | Image |
|------------------|------------------|-------------------------------------------------|
| Dummy input | None | <Image alt="dummy input" src="/images/connections/dummy-input.png" srcDark="/images/connections/dummy-input-dark.png" width={40} /> |
| End-of-row input | None | <Image alt="end-of-row input" src="/images/connections/dummy-input.png" srcDark="/images/connections/dummy-input-dark.png" width={40} /> |
@@ -216,7 +215,7 @@ For more information, see
Blocks, inputs, connections, fields, and icons are all JavaScript objects.
| <TableHeader> Blockly component </TableHeader> | <TableHeader> Base class </TableHeader> | <TableHeader> Subclasses </TableHeader> |
| Blockly component | Base class | Subclasses |
| ------------------|--------------|----------------------|
| Block | `Block` | `BlockSvg` |
| Input | `Input` | `DummyInput` |
packages/docs/docs/guides/create-custom-blocks/fields/anatomy-of-a-field.mdx
+2 -4
View File
@@ -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.
| <TableHeader> Field type </TableHeader> | <TableHeader> Description </TableHeader> |
| 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.
| <TableHeader> Field type </TableHeader> | <TableHeader> Description </TableHeader> |
| 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. |
packages/docs/docs/guides/create-custom-blocks/fields/built-in-fields/image.mdx
+1 -2
View File
@@ -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)
</Tabs>
The image constructor takes in:
| <TableHeader> Parameter </TableHeader> | <TableHeader> Description </TableHeader> |
| 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. |
packages/docs/docs/guides/create-custom-blocks/fields/fields-vs-icons.mdx
+1 -3
View File
@@ -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
| <TableHeader> Attribute </TableHeader> | <TableHeader> Fields </TableHeader> | <TableHeader> Icons </TableHeader> |
| 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. |
packages/docs/docs/guides/create-custom-blocks/renderers/overview.mdx
+1 -3
View File
@@ -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.
| <TableHeader> Renderer </TableHeader> | <TableHeader> Description </TableHeader> | <TableHeader> Image </TableHeader> |
| 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] |
packages/docs/docs/guides/get-started/workspace-anatomy.mdx
+2 -3
View File
@@ -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.
| <TableHeader> Connection </TableHeader> | <TableHeader> Image </TableHeader> |
| Connection | Image |
|------------------|------------------------------------------------------|
| Output | <Image alt="an output connection" src="/images/connections/output-connection.png" width={40} /> |
| Input | <Image alt="an input connection" src="/images/connections/input-connection.png" srcDark="/images/connections/input-connection-dark.png" width={45} /> |
@@ -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.
| <TableHeader> Input type </TableHeader> | <TableHeader> Connection type </TableHeader> | <TableHeader> Notes </TableHeader>|
| Input type | Connection type | Notes |
|------------|-----------------|---------------------------------------|
| Dummy | None | |
| End-of-row | None | Forces next input to start a new row. |
packages/docs/src/components/TableHeader.js
-5
View File
@@ -1,5 +0,0 @@
import React from 'react';
export default function TableHeader({ children }) {
return <p className="displayTableHeader">{children}</p>;
}
packages/docs/src/css/custom.css
+6 -3
View File
@@ -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;