mirror of
https://github.com/google/blockly.git
synced 2026-05-02 18:10:11 +02:00
chore(docs): fix incorrect image paths in Markdown and Image component
Both images declared through ![]() in Markdown, and using the Image component had output paths that were incorrect
This commit is contained in:
Greg Annandale
@@ -1,233 +0,0 @@
|
||||
---
|
||||
description: How to properly attribute Blockly.
|
||||
title: Attribute Blockly
|
||||
image: images/blockly_banner.png
|
||||
---
|
||||
|
||||
<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.
|
||||
|
||||
However, we do encourage developers who are using Blockly to reference the
|
||||
product in their website, app, or product. This page describes the best
|
||||
practices for referring to Blockly and attributing it as well as appropriate
|
||||
uses of the logo.
|
||||
|
||||
<a class="button button-primary downloadAsset"
|
||||
href="/images/logos/blockly_logos_all.zip" target="_blank">Download all assets</a>
|
||||
|
||||
## How to refer to Blockly
|
||||
|
||||
### Describing and attributing Blockly in text
|
||||
|
||||
Upon first reference in a paragraph, use the primary one-line description:
|
||||
|
||||
> Blockly is an open-source developer library from the Raspberry Pi Foundation, originally developed at Google.
|
||||
It creates a visual programming interface that uses drag-and-drop blocks.
|
||||
|
||||
When referring to Blockly in the context of another app which uses Blockly
|
||||
you should use the phrase "Built with Blockly".
|
||||
|
||||
When giving Blockly attribution, this phrase should be used for blog posts,
|
||||
press interviews, the app, and on your website.
|
||||
|
||||
### Reference do's and don'ts
|
||||
|
||||
<p><span class="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>
|
||||
|
||||
<p><span class="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>
|
||||
|
||||
## How to visually represent Blockly
|
||||
|
||||
### Attributing Blockly with a logo
|
||||
|
||||
To give Blockly attribution in your app or website, please use one of the
|
||||
following logos, depending on background color:
|
||||
|
||||
<table>
|
||||
<theader>
|
||||
<tr>
|
||||
<th style="background-color:white">
|
||||
<img src="/images/logos/built-with-blockly-badge-white.png"
|
||||
alt="Built on Blockly white"
|
||||
width="240">
|
||||
</th>
|
||||
<th style="background-color:white">
|
||||
<img src="/images/logos/built-with-blockly-badge-black.png"
|
||||
alt="Built on Blockly black" width="250">
|
||||
</th>
|
||||
</tr>
|
||||
</theader>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>For light backgrounds with overlapping shapes or varied patterns, and for solid dark backgrounds (no shapes or patterns) with high contrast.</td>
|
||||
<td>For dark backgrounds with overlapping shapes or varied patterns.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="assetDownloadLink" href="/images/logos/built-with-blockly-badge-white.png" target="_blank">PNG</a>
|
||||
<a class="assetDownloadLink" href="/images/logos/built-with-blockly-badge-white.svg" target="_blank">SVG</a></td>
|
||||
<td><a class="assetDownloadLink" href="/images/logos/built-with-blockly-badge-black.png" target="_blank">PNG</a>
|
||||
<a class="assetDownloadLink" href="/images/logos/built-with-blockly-badge-black.svg" target="_blank">SVG</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Please hyperlink the badge to Blockly's home page: [https://www.blockly.com](https://www.blockly.com)
|
||||
|
||||
### Badge sizing and spacing
|
||||
|
||||
<div style="display: flex; align-items: flex-start; gap: 20px;">
|
||||
<div style="flex: 1 1 50%;">
|
||||
<p>To ensure legibility, badges should not be used with a height smaller than 24px.</p>
|
||||
<p>For lockups, provide at least x-height and width x1 white space around the
|
||||
logo. Never crowd or overlap the logo with other elements.</p>
|
||||
</div>
|
||||
<div style="flex: 1 1 50%;">
|
||||
<img src="/images/logos/blockly-badge.png" class="blockly-badge-light" alt="Blockly Badge" />
|
||||
<img src="/images/logos/blockly-badge-dark.png" class="blockly-badge-dark" alt="Blockly Badge" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Other uses of the Blockly logo
|
||||
|
||||
Do not use the Blockly mark or any variant of the Blockly mark in conjunction
|
||||
with the overall name of your application, product, service, or website without
|
||||
permission from the Blockly team (please email support@blockly.com to
|
||||
request permission). Do not alter or use the Blockly mark in a way that may be
|
||||
confusing or misleading, and never use Blockly branding as the most prominent
|
||||
element on your page.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td style="background-color:white; vertical-align:middle">
|
||||
<img src="/images/logos/logo_standard.png"
|
||||
alt="Standard Blockly logo">
|
||||
</td>
|
||||
<td>
|
||||
<h2>Standard lockup</h2>
|
||||
<p>The standard lockup can be used in slide decks and blog posts.</p>
|
||||
<p>
|
||||
Whenever possible, the logo should be represented as a horizontal lockup
|
||||
with a full color logomark and neutral 700 (#5F6368) or solid white
|
||||
logotype.
|
||||
</p>
|
||||
<a class="assetDownloadLink" href="/images/logos/logo_standard.png" target="_blank">PNG</a>
|
||||
<a class="assetDownloadLink" href="/images/logos/logo_standard.svg" target="_blank">SVG</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table style="table-layout:fixed">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="background-color:white; text-align:center">
|
||||
<img src="/images/logos/logo_vertical.png"
|
||||
alt="Blockly vertical logo"
|
||||
height="120" class="logo-version">
|
||||
</th>
|
||||
<th style="background-color:white; text-align:center">
|
||||
<img src="/images/logos/logo_only.png"
|
||||
alt="Blockly logomark"
|
||||
height="120" class="logo-version">
|
||||
</th>
|
||||
<th style="background-color:white; text-align:center">
|
||||
<img src="/images/logos/logo_knockout_with_bg.png"
|
||||
alt="Blockly knockout logo"
|
||||
height="120" class="logo-version">
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>When there is limited horizontal space, a vertical lockup can be used
|
||||
with the full color logomark and neutral 700 (#5F6368) or solid white
|
||||
logotype.
|
||||
</td>
|
||||
<td>When there is limited vertical and horizontal space, the logomark can
|
||||
be used by itself without the logotype.
|
||||
</td>
|
||||
<td>When the color of the logomark has poor contrast with the background,
|
||||
a solid white knockout version can be used.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a class="assetDownloadLink" href="/images/logos/logo_vertical.png" target="_blank">PNG</a>
|
||||
<a class="assetDownloadLink" href="/images/logos/logo_vertical.svg" target="_blank">SVG</a></td>
|
||||
<td><a class="assetDownloadLink" href="/images/logos/logo_only.png" target="_blank">PNG</a>
|
||||
<a class="assetDownloadLink" href="/images/logos/logo_only.svg" target="_blank">SVG</a></td>
|
||||
<td><a class="assetDownloadLink" href="/images/logos/logo_knockout_with_bg.png" target="_blank">PNG</a>
|
||||
<a class="assetDownloadLink" href="/images/logos/logo_knockout_with_bg.svg" target="_blank">SVG</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<style>
|
||||
@media screen and (max-width: 1440px) {
|
||||
.logo-version {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
### Logo colours
|
||||
|
||||
<table style="table-layout:fixed">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="background-color:#4285f4; text-align:center">
|
||||
</th>
|
||||
<th style="background-color:#c8d1db; text-align:center">
|
||||
</th>
|
||||
<th style="background-color:#5f6368; text-align:center">
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>Blockly blue</b>
|
||||
<p>#4285f4 or hsla(217, 89%, 61%, 1)</p>
|
||||
</td>
|
||||
<td>
|
||||
<b>Blockly gray</b>
|
||||
<p>#c8d1db or hsla(212, 21%, 82%, 1)</p>
|
||||
</td>
|
||||
<td>
|
||||
<b>Neutral 700</b>
|
||||
<p>#5f6368 or hsla(213, 5%, 39%, 1)</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div style="display: flex; align-items: flex-start; gap: 20px;">
|
||||
<div style="flex: 1 1 60%;">
|
||||
<h3>Sizing and spacing</h3>
|
||||
<p>To ensure legibility, the logo should not be used with a height
|
||||
smaller than 24px.</p>
|
||||
<p>For lockups, provide at least x-height x2 white space around the
|
||||
logo. Never crowd or overlap the logo with other elements.</p>
|
||||
<h3>Common errors</h3>
|
||||
<span class="compare-worse">Do not...</span>
|
||||
<ul>
|
||||
<li>Alter or distort the logo in any way</li>
|
||||
<li>Use the white knockout in any color but white</li>
|
||||
<li>Alter color, shape, or angles</li>
|
||||
<li>Rotate or flip in any direction</li>
|
||||
<li>Alter proportions, positioning, or placement</li>
|
||||
<li>Replace the logotype with a different typeface</li>
|
||||
<li>Use the old Blockly logo (existing uses should be updated when convenient)</li>
|
||||
<li>Use the logo on a poorly contrasting background (e.g. the knockout logo on a light gray background)</li>
|
||||
<li>Overlap or crowd the logo with other elements</li>
|
||||
<li>Redraw the logo</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="flex: 1 1 40%;">
|
||||
<img src="/images/logos/logo_x_height.png"
|
||||
alt="Height references for padding the logo" width="380">
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,216 @@
|
||||
---
|
||||
description: How to properly attribute Blockly.
|
||||
title: Attribute Blockly
|
||||
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.
|
||||
|
||||
However, we do encourage developers who are using Blockly to reference the
|
||||
product in their website, app, or product. This page describes the best
|
||||
practices for referring to Blockly and attributing it as well as appropriate
|
||||
uses of the logo.
|
||||
|
||||
<a className="button button-primary downloadAsset"
|
||||
href="/images/logos/blockly_logos_all.zip" target="_blank">Download all assets</a>
|
||||
|
||||
## How to refer to Blockly
|
||||
|
||||
### Describing and attributing Blockly in text
|
||||
|
||||
Upon first reference in a paragraph, use the primary one-line description:
|
||||
|
||||
> Blockly is an open-source developer library from the Raspberry Pi Foundation, originally developed at Google.
|
||||
It creates a visual programming interface that uses drag-and-drop blocks.
|
||||
|
||||
When referring to Blockly in the context of another app which uses Blockly
|
||||
you should use the phrase "Built with Blockly".
|
||||
|
||||
When giving Blockly attribution, this phrase should be used for blog posts,
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
## How to visually represent Blockly
|
||||
|
||||
### Attributing Blockly with a logo
|
||||
|
||||
To give Blockly attribution in your app or website, please use one of the
|
||||
following logos, depending on background color:
|
||||
|
||||
<table>
|
||||
<theader>
|
||||
<tr>
|
||||
<th style={{backgroundColor: "white"}}>
|
||||
<Image src="/images/logos/built-with-blockly-badge-white.png"
|
||||
alt="Built on Blockly white"
|
||||
width="240" />
|
||||
</th>
|
||||
<th style={{backgroundColor: "white"}}>
|
||||
<Image src="/images/logos/built-with-blockly-badge-black.png"
|
||||
alt="Built on Blockly black" width="250" />
|
||||
</th>
|
||||
</tr>
|
||||
</theader>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>For light backgrounds with overlapping shapes or varied patterns, and for solid dark backgrounds (no shapes or patterns) with high contrast.</td>
|
||||
<td>For dark backgrounds with overlapping shapes or varied patterns.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a className="assetDownloadLink" href="/images/logos/built-with-blockly-badge-white.png" target="_blank">PNG</a>
|
||||
<a className="assetDownloadLink" href="/images/logos/built-with-blockly-badge-white.svg" target="_blank">SVG</a></td>
|
||||
<td><a className="assetDownloadLink" href="/images/logos/built-with-blockly-badge-black.png" target="_blank">PNG</a>
|
||||
<a className="assetDownloadLink" href="/images/logos/built-with-blockly-badge-black.svg" target="_blank">SVG</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Please hyperlink the badge to Blockly's home page: [https://www.blockly.com](https://www.blockly.com)
|
||||
|
||||
### Badge sizing and spacing
|
||||
|
||||
<div style={{display: "flex", alignItems: "flex-start", gap: "20px"}}>
|
||||
<div style={{flex: "1 1 50%"}}>
|
||||
<p>To ensure legibility, badges should not be used with a height smaller than 24px.</p>
|
||||
<p>For lockups, provide at least x-height and width x1 white space around the
|
||||
logo. Never crowd or overlap the logo with other elements.</p>
|
||||
</div>
|
||||
<div style={{flex: "1 1 50%"}}>
|
||||
<Image src="/images/logos/blockly-badge.png" className="blockly-badge-light" alt="Blockly Badge" />
|
||||
<Image src="/images/logos/blockly-badge-dark.png" className="blockly-badge-dark" alt="Blockly Badge" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Other uses of the Blockly logo
|
||||
|
||||
Do not use the Blockly mark or any variant of the Blockly mark in conjunction
|
||||
with the overall name of your application, product, service, or website without
|
||||
permission from the Blockly team (please email support@blockly.com to
|
||||
request permission). Do not alter or use the Blockly mark in a way that may be
|
||||
confusing or misleading, and never use Blockly branding as the most prominent
|
||||
element on your page.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td style={{backgroundColor: "white", verticalAlign: "middle"}}>
|
||||
<Image src="/images/logos/logo_standard.png"
|
||||
alt="Standard Blockly logo" />
|
||||
</td>
|
||||
<td>
|
||||
<h2>Standard lockup</h2>
|
||||
<p>The standard lockup can be used in slide decks and blog posts.</p>
|
||||
<p>Whenever possible, the logo should be represented as a horizontal lockup with a full color logomark and neutral 700 (#5F6368) or solid white logotype.</p>
|
||||
<a className="assetDownloadLink" href="/images/logos/logo_standard.png" target="_blank">PNG</a>
|
||||
<a className="assetDownloadLink" href="/images/logos/logo_standard.svg" target="_blank">SVG</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table style={{tableLayout: "fixed"}}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style={{backgroundColor: "white", textAlign: "center"}}>
|
||||
<Image src="/images/logos/logo_vertical.png"
|
||||
alt="Blockly vertical logo"
|
||||
height="120" className="logo-version" />
|
||||
</th>
|
||||
<th style={{backgroundColor: "white", textAlign: "center"}}>
|
||||
<Image src="/images/logos/logo_only.png"
|
||||
alt="Blockly logomark"
|
||||
height="120" className="logo-version" />
|
||||
</th>
|
||||
<th style={{backgroundColor: "white", textAlign: "center"}}>
|
||||
<Image src="/images/logos/logo_knockout_with_bg.png"
|
||||
alt="Blockly knockout logo"
|
||||
height="120" className="logo-version" />
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>When there is limited horizontal space, a vertical lockup can be used with the full color logomark and neutral 700 (#5F6368) or solid white logotype.</td>
|
||||
<td>When there is limited vertical and horizontal space, the logomark can be used by itself without the logotype.</td>
|
||||
<td>When the color of the logomark has poor contrast with the background, a solid white knockout version can be used.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a className="assetDownloadLink" href="/images/logos/logo_vertical.png" target="_blank">PNG</a>
|
||||
<a className="assetDownloadLink" href="/images/logos/logo_vertical.svg" target="_blank">SVG</a></td>
|
||||
<td><a className="assetDownloadLink" href="/images/logos/logo_only.png" target="_blank">PNG</a>
|
||||
<a className="assetDownloadLink" href="/images/logos/logo_only.svg" target="_blank">SVG</a></td>
|
||||
<td><a className="assetDownloadLink" href="/images/logos/logo_knockout_with_bg.png" target="_blank">PNG</a>
|
||||
<a className="assetDownloadLink" href="/images/logos/logo_knockout_with_bg.svg" target="_blank">SVG</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Logo colours
|
||||
|
||||
<table style={{tableLayout: "fixed"}}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style={{backgroundColor: "#4285f4", textAlign: "center"}}>
|
||||
</th>
|
||||
<th style={{backgroundColor: "#c8d1db", textAlign: "center"}}>
|
||||
</th>
|
||||
<th style={{backgroundColor: "#5f6368", textAlign: "center"}}>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>Blockly blue</b>
|
||||
<p>#4285f4 or hsla(217, 89%, 61%, 1)</p>
|
||||
</td>
|
||||
<td>
|
||||
<b>Blockly gray</b>
|
||||
<p>#c8d1db or hsla(212, 21%, 82%, 1)</p>
|
||||
</td>
|
||||
<td>
|
||||
<b>Neutral 700</b>
|
||||
<p>#5f6368 or hsla(213, 5%, 39%, 1)</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div style={{display: "flex", alignItems: "flex-start", gap: "20px"}}>
|
||||
<div style={{flex: "1 1 60%"}}>
|
||||
<h3>Sizing and spacing</h3>
|
||||
<p>To ensure legibility, the logo should not be used with a height
|
||||
smaller than 24px.</p>
|
||||
<p>For lockups, provide at least x-height x2 white space around the
|
||||
logo. Never crowd or overlap the logo with other elements.</p>
|
||||
<h3>Common errors</h3>
|
||||
<span className="compare-worse">Do not...</span>
|
||||
<ul>
|
||||
<li>Alter or distort the logo in any way</li>
|
||||
<li>Use the white knockout in any color but white</li>
|
||||
<li>Alter color, shape, or angles</li>
|
||||
<li>Rotate or flip in any direction</li>
|
||||
<li>Alter proportions, positioning, or placement</li>
|
||||
<li>Replace the logotype with a different typeface</li>
|
||||
<li>Use the old Blockly logo (existing uses should be updated when convenient)</li>
|
||||
<li>Use the logo on a poorly contrasting background (e.g. the knockout logo on a light gray background)</li>
|
||||
<li>Overlap or crowd the logo with other elements</li>
|
||||
<li>Redraw the logo</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style={{flex: "1 1 40%"}}>
|
||||
<Image src="/images/logos/logo_x_height.png"
|
||||
alt="Height references for padding the logo" width="380" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,10 +111,6 @@ rendering](/guides/create-custom-blocks/renderers/overview).
|
||||
| Value input | Input connection | <Image alt="value input" src="/images/connections/input-connection.png" srcDark="/images/connections/input-connection-dark.png" width={45} /> |
|
||||
| Statement input | Next connection | <Image alt="statement input" src="/images/connections/statement-input.png" srcDark="/images/connections/statement-input-dark.png" width={50} /> |
|
||||
|
||||
[dummy-img]: /images/connections/dummy-input.png
|
||||
[value-img]: /images/connections/input-connection.png
|
||||
[statement-img]: /images/connections/statement-input.png
|
||||
|
||||
We will introduce these inputs through a series of examples. For information
|
||||
about defining the inputs, connections, and fields that make up a block, see
|
||||
[Block structure in
|
||||
|
||||
@@ -8,29 +8,9 @@ import Image from '@site/src/components/Image';
|
||||
import ClassBlock from '@site/src/components/ClassBlock';
|
||||
|
||||
[workspace]: /guides/configure/web/configuration_struct
|
||||
[workspace-img]: /images/glossary/workspace.png
|
||||
[output-img]: /images/connections/output-connection.png
|
||||
[input-img]: /images/connections/input-connection.png
|
||||
[inputs-img]: /images/glossary/inputs.png
|
||||
[previous-img]: /images/connections/previous-connection.png
|
||||
[next-img]: /images/connections/next-connection.png
|
||||
[category-toolbox]: /guides/configure/web/toolboxes/category
|
||||
[category-toolbox-img]: /images/glossary/category-toolbox.png
|
||||
[category-with-flyout-toolbox-img]: /images/glossary/category-with-flyout-toolbox.png
|
||||
[flyout-toolbox]: /guides/configure/web/toolboxes/flyout
|
||||
[flyout-toolbox-img]: /images/glossary/flyout-toolbox.png
|
||||
[trashcan-img]: /images/glossary/trashcan.png
|
||||
[zoom-controls-img]: /images/glossary/zoom-controls.png
|
||||
[context-menu-img]: /images/glossary/context-menu.png
|
||||
[blocks-img]: /images/glossary/blocks.png
|
||||
[block-stack-img]: /images/glossary/block-stack.png
|
||||
[shadow-block]: /guides/configure/web/toolboxes/preset#shadow-blocks
|
||||
[shadow-blocks-img]: /images/glossary/shadow-blocks.png
|
||||
[insertion-marker-img]: /images/glossary/insertion-marker.png
|
||||
[statement-img]: /images/connections/statement-input.png
|
||||
[fields-img]: /images/glossary/fields.png
|
||||
[icons-img]: /images/glossary/icons.png
|
||||
[bubbles-img]: /images/bubbles/bubbles.png
|
||||
[toolbox]: /guides/configure/web/toolboxes/toolbox
|
||||
[zoom-controls]: /guides/configure/web/zoom
|
||||
[context-menu]: /guides/configure/web/context-menus
|
||||
@@ -40,7 +20,6 @@ import ClassBlock from '@site/src/components/ClassBlock';
|
||||
[field]: /guides/create-custom-blocks/define/block-anatomy#fields
|
||||
[icon]: /guides/create-custom-blocks/define/block-anatomy#icons
|
||||
|
||||
|
||||
# Visual glossary
|
||||
|
||||
Blockly has a lot of vocabulary for its different visual components. This
|
||||
@@ -79,9 +58,7 @@ which is displayed at all times.
|
||||
If you click a category item it opens a flyout that displays the blocks in the
|
||||
category.
|
||||
|
||||
![The same workspace and category toolbox as in the previous image, except that
|
||||
the Logic category is open, showing seven logic blocks (if-do, comparison,
|
||||
and-or, etc.).][category-with-flyout-toolbox-img]
|
||||
|
||||
|
||||
### Trashcan
|
||||
|
||||
@@ -89,14 +66,14 @@ The trashcan lets you delete blocks by dragging and dropping them. You can also
|
||||
click the trashcan to open a flyout containing the blocks you've deleted so you
|
||||
can get them back.
|
||||
|
||||
![A workspace with a trashcan in the lower right corner.][trashcan-img]
|
||||
|
||||
|
||||
### Zoom controls
|
||||
|
||||
The [zoom controls][zoom-controls] zoom the workspace in and out when you click
|
||||
them.
|
||||
|
||||
![A workspace with zoom controls above the trashcan.][zoom-controls-img]
|
||||
|
||||
|
||||
### Context menu
|
||||
|
||||
@@ -104,25 +81,21 @@ The [context menu][context-menu] appears when you right-click or long-press on
|
||||
certain elements of the workspace (for example, the workspace background, or
|
||||
blocks). It displays a list of actions you can perform on that element.
|
||||
|
||||
![A context menu is open over an if-do block. The menu has the items,
|
||||
"Duplicate", "Add Comments", "Inline Inputs", "Collapse Block", "Disable Block",
|
||||
"Delete Block", and "Help".][context-menu-img]
|
||||
|
||||
|
||||
## Blocks
|
||||
|
||||
[Blocks][block] are what you use to program. They represent expressions and
|
||||
statements in text-based programming languages.
|
||||
|
||||
![An if-do block, a number block, and a block for creating a list.][blocks-img]
|
||||
|
||||
|
||||
### Block stack
|
||||
|
||||
A block stack is any collection of connected blocks. They could be connected
|
||||
horizontally or vertically.
|
||||
|
||||
![An if-do block with two blocks connected to it. A numeric comparison block is
|
||||
connected to the if input and a repeat block is connected to the do
|
||||
input.][block-stack-img]
|
||||
|
||||
|
||||
### Shadow block
|
||||
|
||||
@@ -137,8 +110,7 @@ overwrite them.
|
||||
An insertion marker is a preview of where a stack of blocks will be connected if
|
||||
it is dropped. It looks like a grey version of a block.
|
||||
|
||||
![An if-do block with a marker showing where another block will be
|
||||
inserted.][insertion-marker-img]
|
||||
|
||||
|
||||
## Block parts
|
||||
|
||||
@@ -151,8 +123,7 @@ A [field][field] is a visual element that lives on a block. It could be editable
|
||||
(like a text input), or only informational (like a label). A field is always
|
||||
contained by an [input](#inputs).
|
||||
|
||||
![A block with three fields: the label "repeat", a dropdown with the "while"
|
||||
option chosen, and the label "do".][fields-img]
|
||||
|
||||
|
||||
### Connections
|
||||
|
||||
@@ -187,11 +158,9 @@ connection.
|
||||
An [icon][icon] is a visual element that lives on a block. They always live
|
||||
in the top-start corner of the block, and they often create bubbles.
|
||||
|
||||
![An if-do block with a mutator icon and a comment icons.][icons-img]
|
||||
|
||||
|
||||
![The same block with the mutator and comment bubbles open. The mutator bubble
|
||||
lets you add else clauses to the block and the comment bubble lets you enter a
|
||||
comment about the block.][bubbles-img]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import {useColorMode} from '@docusaurus/theme-common';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
/**
|
||||
* Image component for use in MDX docs
|
||||
@@ -20,6 +21,9 @@ export default function Image({ src, srcDark, alt, width, height, className, sty
|
||||
// Select image source based on current theme
|
||||
const imageSrc = colorMode === 'dark' && srcDark ? srcDark : src;
|
||||
|
||||
// Prepend baseUrl to the image path
|
||||
const resolvedSrc = useBaseUrl(imageSrc);
|
||||
|
||||
const imgStyle = {
|
||||
maxWidth: '100%',
|
||||
height: 'auto',
|
||||
@@ -35,7 +39,7 @@ export default function Image({ src, srcDark, alt, width, height, className, sty
|
||||
|
||||
return (
|
||||
<img
|
||||
src={imageSrc}
|
||||
src={resolvedSrc}
|
||||
alt={alt}
|
||||
className={className}
|
||||
style={{ ...imgStyle }}
|
||||
|
||||
Reference in New Issue
Block a user