chore(docs): update docs config and paths (removing blockly/)

Also setting correct GitHub org name
2026-04-27 23:50:21 +02:00 · 2026-03-17 16:20:00 +00:00
parent 2b0e4c856a
commit f5d792b365
151 changed files with 924 additions and 924 deletions
@@ -13,6 +13,6 @@ In this codelab you have learned how to create and modify context menu options.

 ### Additional information

- [Context menu documentation](/blockly/guides/configure/web/context-menus)
+- [Context menu documentation](/guides/configure/web/context-menus)

- You can also define [block context menus](/blockly/guides/configure/web/context-menus#customize-per-block) directly on a block definition, which is equivalent to adding a precondition based on the type of the block.
+- You can also define [block context menus](/guides/configure/web/context-menus#customize-per-block) directly on a block definition, which is equivalent to adding a precondition based on the type of the block.
@@ -8,14 +8,14 @@ description: Styling blocks with CSS

 ## 6. Blocks

-In this section, you will create CSS rules to assign the colours used by the [blocks section](/blockly/codelabs/theme-extension-identifier/customize-block-styles/index.html) of the themes codelab to the logic, loops, text, and lists blocks. This is a bit more complex than setting component or category colours and you'll do it in several steps.
+In this section, you will create CSS rules to assign the colours used by the [blocks section](/codelabs/theme-extension-identifier/customize-block-styles/index.html) of the themes codelab to the logic, loops, text, and lists blocks. This is a bit more complex than setting component or category colours and you'll do it in several steps.

 ### Block fill and stroke

 Your first step is to set the `fill` and `stroke` of the logic blocks.

 Note that setting the `fill` and `stroke` is specific to the
-[renderer](/blockly/guides/create-custom-blocks/renderers/overview)
+[renderer](/guides/create-custom-blocks/renderers/overview)
 you are using. (In this codelab, you are using the Thrasos renderer.) An
 important consequence of this is that you need different CSS for different
 renderers.
@@ -61,7 +61,7 @@ The last step before writing your colour rules is to decide what colours to use.
 How these colours are used depends on the renderer. The Thrasos renderer uses
 the primary colour as the `fill` of the block, the tertiary colour as the
 `stroke`, and the secondary colour as the `fill` when the block is a
-[shadow block](/blockly/guides/configure/web/toolboxes/preset#shadow-blocks).
+[shadow block](/guides/configure/web/toolboxes/preset#shadow-blocks).
 #### Add your rules

 You're now ready to add your rules to set the `fill` and `stroke` of the logic blocks:
@@ -8,7 +8,7 @@ description: Styling toolbox categories with CSS

 ## 5. Toolbox categories

-In this section, you will create CSS rules to assign the colours used by the [categories section](/blockly/codelabs/theme-extension-identifier/customize-category-styles/index.html) of the themes codelab to the toolbox's categories.
+In this section, you will create CSS rules to assign the colours used by the [categories section](/codelabs/theme-extension-identifier/customize-category-styles/index.html) of the themes codelab to the toolbox's categories.

 ### Identify the category element

@@ -55,7 +55,7 @@ define rules that apply to all categories.
    },
 ```

-For a complete explanation of how `cssConfig` works, see [Custom CSS classes](/blockly/guides/configure/web/toolboxes/appearance#custom-css-classes) in the toolbox documentation.
+For a complete explanation of how `cssConfig` works, see [Custom CSS classes](/guides/configure/web/toolboxes/appearance#custom-css-classes) in the toolbox documentation.

 ### Add your rules

@@ -19,12 +19,12 @@ In this codelab you will learn how to use CSS to customize the colours of:

 If you don't need the fine-grained control provided by CSS, consider using
 themes instead. For more information, see the
-[Customizing your themes](/blockly/codelabs/theme-extension-identifier/codelab-overview/index.html)
+[Customizing your themes](/codelabs/theme-extension-identifier/codelab-overview/index.html)
 codelab.

 ### What you'll build

-A simple Blockly workspace that uses the same Halloween colours as the [Customizing your themes](/blockly/codelabs/theme-extension-identifier/codelab-overview/index.html) codelab.
+A simple Blockly workspace that uses the same Halloween colours as the [Customizing your themes](/codelabs/theme-extension-identifier/codelab-overview/index.html) codelab.

 ### What you'll need

@@ -8,7 +8,7 @@ description: Styling Blockly components with CSS

 ## 4. Components

-In this section, you will create CSS rules to assign the colours used by the [components section](/blockly/codelabs/theme-extension-identifier/customize-components/index.html) of the themes codelab to various components.
+In this section, you will create CSS rules to assign the colours used by the [components section](/codelabs/theme-extension-identifier/customize-components/index.html) of the themes codelab to various components.

 To start, create a file named `halloween.css` and add it to your `index.html` file:

@@ -152,4 +152,4 @@ You might have also noticed that some rules use an `!important` declaration whil

 - **Inline styles:** These rules are included via a `style` attribute and can only be overridden by an `!important` declaration. As you will see later, the colour of the arrow in a dropdown field is set with an inline style and must be overridden with `!important`.

-The easiest way to determine how a rule is set is to highlight the appropriate element in the element inspector and look at the corresponding style information. In a few cases, this isn't possible. For example, an insertion marker is created only when you drag a child near its parent and is deleted when you let go of the parent to highlight the insertion marker's element. In these cases, you will need to [search Blockly's rules](/blockly/guides/configure/web/appearance/css#blockly-css-rules).
+The easiest way to determine how a rule is set is to highlight the appropriate element in the element inspector and look at the corresponding style information. In a few cases, this isn't possible. For example, an insertion marker is created only when you drag a child near its parent and is deleted when you let go of the parent to highlight the insertion marker's element. In these cases, you will need to [search Blockly's rules](/guides/configure/web/appearance/css#blockly-css-rules).
@@ -9,4 +9,4 @@ description: Summary of the CSS in Blockly codelab

 In this codelab, you learned how to use CSS to set the colours of your Blockly editor.

-For more information, see [Style with CSS](/blockly/guides/configure/web/appearance/css) in the Blockly user guides.
+For more information, see [Style with CSS](/guides/configure/web/appearance/css) in the Blockly user guides.
@@ -35,7 +35,7 @@ sampleGenerator.forBlock['left_turn_block'] = function(block, generator) {

 Value blocks represent code that returns a value.

-A value block's generator returns an array containing a string and a [precedence value](/blockly/guides/create-custom-blocks/code-generation/operator-precedence). The built-in generators have predefined operator precedence values exported as an `Order` enum.
+A value block's generator returns an array containing a string and a [precedence value](/guides/create-custom-blocks/code-generation/operator-precedence). The built-in generators have predefined operator precedence values exported as an `Order` enum.

 This code defines a block generator that always returns `1 + 1`:

@@ -51,7 +51,7 @@ Operator precedence rules determine how the correct order of operations is maint

 --> Read more about [operator precedence in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence).

--> Read more about [operator precedence in Blockly](/blockly/guides/create-custom-blocks/code-generation/operator-precedence).
+--> Read more about [operator precedence in Blockly](/guides/create-custom-blocks/code-generation/operator-precedence).

 Since JSON does not allow values that are expressions, the code does not need to consider operator precedence for the generator being built in this codelab. The same value can be used everywhere a precedence value is required. Since parentheses never need to be added to the JSON, call this value `ATOMIC`.

@@ -15,7 +15,7 @@ The outline of the block is a single [SVG path](https://developer.mozilla.org/en

 Each sub-path is a string of [path commands](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands) that describe the appropriate shape. These commands must use relative (rather than absolute) coordinates.

-SVG path commands can be written as strings, but Blockly provides a set of [utility functions](/blockly/reference/js/blockly.utils_namespace.svgpaths_namespace) to make writing and reading paths easier.
+SVG path commands can be written as strings, but Blockly provides a set of [utility functions](/reference/js/blockly.utils_namespace.svgpaths_namespace) to make writing and reading paths easier.

 ### `init()`

@@ -28,7 +28,7 @@ to be:
 <category css-icon="customIcon fa fa-cog" name="Logic" categorystyle="logic_category">
 ```
 All the classes used to create a category can be set similar to how we set the
-icon class above. See the [Blockly toolbox documentation](/blockly/guides/configure/web/toolboxes/appearance#category-css) for more information.
+icon class above. See the [Blockly toolbox documentation](/guides/configure/web/toolboxes/appearance#category-css) for more information.

 ### Add some CSS
 If you open `index.html` you will notice that the gear icon is positioned
@@ -38,7 +38,7 @@ The logic_category style looks like:
    "colour": "210"
  }
 ```
-For more information on Blockly styles please visit the [themes documentation](/blockly/guides/configure/web/appearance/themes#category-style).
+For more information on Blockly styles please visit the [themes documentation](/guides/configure/web/appearance/themes#category-style).

 ### Add some CSS

@@ -34,8 +34,8 @@ The code samples are written in ES6 syntax. You can find the code for the [compl
 - A browser.
 - A text editor.
 - Basic knowledge of HTML, CSS, and JavaScript.
- Basic understanding of the [Blockly toolbox](/blockly/guides/configure/web/toolboxes/toolbox).
+- Basic understanding of the [Blockly toolbox](/guides/configure/web/toolboxes/toolbox).

-Throughout various parts of this codelab we will be talking about [toolbox definitions](/blockly/guides/configure/web/toolboxes/category?tab=xml).
+Throughout various parts of this codelab we will be talking about [toolbox definitions](/guides/configure/web/toolboxes/category?tab=xml).
 The toolbox definition can be written in XML or JSON. We will be using an XML
 toolbox definition that can be found in the provided code.
@@ -23,7 +23,7 @@ The toolbox may be organized into categories, and may contain both single blocks

 A toolbox is defined as a JavaScript object and passed into the workspace constructor through an options struct.

-For more information on this JSON format and toolbox configuration, including category creation, please see our <a href="/blockly/guides/configure/web/toolboxes/toolbox">toolbox documentation</a>.
+For more information on this JSON format and toolbox configuration, including category creation, please see our <a href="/guides/configure/web/toolboxes/toolbox">toolbox documentation</a>.

 ### Define the toolbox

@@ -87,7 +87,7 @@ Let's look at the options we used to initialize your blockly editor:
 - `horizontalLayout`: Whether to display the toolbox horizontally or vertically in the workspace.
 - `toolboxPosition`: Whether to show the toolbox at the top or bottom of the workspace.

-The `options` struct gives you significant control over your Blockly instance. You can pass options to set Blockly's theme, modify scrolling behaviour, set the renderer, and more. For more information, head over to Blockly's developer site and check out the [configuration](/blockly/guides/configure/web/configuration_struct#the-options-dictionary) section.
+The `options` struct gives you significant control over your Blockly instance. You can pass options to set Blockly's theme, modify scrolling behaviour, set the renderer, and more. For more information, head over to Blockly's developer site and check out the [configuration](/guides/configure/web/configuration_struct#the-options-dictionary) section.

 ### Check your work

@@ -15,7 +15,7 @@ Since this is a music maker app, we want a block that plays sounds. We could cre

 In Blockly, a *block definition* describes how a block looks and behaves. This includes its text, colour, and shape. It may also include which other blocks it can connect to.

-Blocks can be defined in either JavaScript or JSON. The developer site has a full article on [how to define a block](/blockly/guides/create-custom-blocks/define/block-definitions#how-to-create-block-definitions).
+Blocks can be defined in either JavaScript or JSON. The developer site has a full article on [how to define a block](/guides/create-custom-blocks/define/block-definitions#how-to-create-block-definitions).

 In this codelab we will simply provide the block definition for you to copy and use.

@@ -102,4 +102,4 @@ Run the app one more time, and play around with the new `Play (sound)` block. It

 ### The block factory

-This step discussed how to manually define custom blocks in Blockly. Once you've completed the entire codelab, we recommend that you check out our [block factory tool](/blockly/guides/create-custom-blocks/blockly-developer-tools), which helps automate part of this process.
+This step discussed how to manually define custom blocks in Blockly. Once you've completed the entire codelab, we recommend that you check out our [block factory tool](/guides/create-custom-blocks/blockly-developer-tools), which helps automate part of this process.
@@ -44,4 +44,4 @@ translates into the JavaScript code:
 MusicMaker.queueSound('Sounds/c4.m4a');
 ```

-For more information on block generators, read the [generating code](/blockly/guides/create-custom-blocks/code-generation/overview#block-code-generators) page on the developer site.
+For more information on block generators, read the [generating code](/guides/create-custom-blocks/code-generation/overview#block-code-generators) page on the developer site.
@@ -10,6 +10,6 @@ description: Summary of the "Getting started with Blockly" codelab.

 And with that, you're done with the Blockly codelab! If you'd like to continue playing with the app, we suggest adding or changing the available blocks. There are sample sound files in the `sounds` folder - try hooking them up to a new block!

-For more documentation, visit the [Blockly developer site](/blockly/guides/get-started/what-is-blockly).
+For more documentation, visit the [Blockly developer site](/guides/get-started/what-is-blockly).

 Additionally, Blockly has an active [developer forum](https://groups.google.com/g/blockly). Please drop by and say hello. We're happy to answer any questions or give advice on best practices for building an app with Blockly. Feel free to show us your prototypes early; collectively we have a lot of experience and can offer hints which will save you time.
@@ -15,49 +15,49 @@ Blockly Codelabs provide a guided, tutorial, hands-on coding experience of Block
  <CodelabCard
  level="beginner"
  title="Getting started with Blockly"
-  href="/blockly/codelabs/getting-started/codelab-overview/index.html">
-  <Image alt="Blockly icon" src="/blockly/images/codelabs/card_thumbnails_getting-started.png" srcDark="/blockly/images/codelabs/card_thumbnails_getting-started-dark.png" />
+  href="/codelabs/getting-started/codelab-overview">
+  <Image alt="Blockly icon" src="/images/codelabs/card_thumbnails_getting-started.png" srcDark="/images/codelabs/card_thumbnails_getting-started-dark.png" />
  </CodelabCard>
  <CodelabCard
  level="beginner"
  title="Customizing a Blockly toolbox"
-  href="/blockly/codelabs/custom-toolbox/codelab-overview/index.html">
-  <Image alt="Blockly icon" src="/blockly/images/codelabs/card_thumbnails_blockly-toolbox.png" srcDark="/blockly/images/codelabs/card_thumbnails_blockly-toolbox-dark.png" />
+  href="/codelabs/custom-toolbox/codelab-overview">
+  <Image alt="Blockly icon" src="/images/codelabs/card_thumbnails_blockly-toolbox.png" srcDark="/images/codelabs/card_thumbnails_blockly-toolbox-dark.png" />
  </CodelabCard>
  <CodelabCard
  level="beginner"
  title="Customizing your themes"
-  href="/blockly/codelabs/theme-extension-identifier/codelab-overview/index.html">
-  <Image alt="Blockly icon" src="/blockly/images/codelabs/card_thumbnails_themes.png" srcDark="/blockly/images/codelabs/card_thumbnails_themes-dark.png" />
+  href="/codelabs/theme-extension-identifier/codelab-overview">
+  <Image alt="Blockly icon" src="/images/codelabs/card_thumbnails_themes.png" srcDark="/images/codelabs/card_thumbnails_themes-dark.png" />
  </CodelabCard>
  <CodelabCard
  level="Intermediate"
  title="Customizing context menus"
-  href="/blockly/codelabs/context-menu-option/codelab-overview/index.html">
-  <Image alt="Blockly icon" src="/blockly/images/codelabs/card_thumbnails_context-menus.png" srcDark="/blockly/images/codelabs/card_thumbnails_context-menus-dark.png" />
+  href="/codelabs/context-menu-option/codelab-overview">
+  <Image alt="Blockly icon" src="/images/codelabs/card_thumbnails_context-menus.png" srcDark="/images/codelabs/card_thumbnails_context-menus-dark.png" />
  </CodelabCard>
  <CodelabCard
  level="Intermediate"
  title="Block validation and warnings"
-  href="/blockly/codelabs/validation-and-warnings/codelab-overview/index.html">
-  <Image alt="Blockly icon" src="/blockly/images/codelabs/card_thumbnails_validating-and-displaying.png" srcDark="/blockly/images/codelabs/card_thumbnails_validating-and-displaying-dark.png" />
+  href="/codelabs/validation-and-warnings/codelab-overview">
+  <Image alt="Blockly icon" src="/images/codelabs/card_thumbnails_validating-and-displaying.png" srcDark="/images/codelabs/card_thumbnails_validating-and-displaying-dark.png" />
  </CodelabCard>
  <CodelabCard
  level="Intermediate"
  title="Use CSS in Blockly"
-  href="/blockly/codelabs/css/codelab-overview/index.html">
-  <Image alt="Blockly icon" src="/blockly/images/codelabs/card_thumbnails_css.png" srcDark="/blockly/images/codelabs/card_thumbnails_css-dark.png" />
+  href="/codelabs/css/codelab-overview">
+  <Image alt="Blockly icon" src="/images/codelabs/card_thumbnails_css.png" srcDark="/images/codelabs/card_thumbnails_css-dark.png" />
  </CodelabCard>
  <CodelabCard
  level="Advanced"
  title="Build a custom generator"
-  href="/blockly/codelabs/custom-generator/codelab-overview/index.html">
-  <Image alt="Blockly icon" src="/blockly/images/codelabs/card_thumbnails_custom-generator.png" srcDark="/blockly/images/codelabs/card_thumbnails_custom-generator-dark.png" />
+  href="/codelabs/custom-generator/codelab-overview">
+  <Image alt="Blockly icon" src="/images/codelabs/card_thumbnails_custom-generator.png" srcDark="/images/codelabs/card_thumbnails_custom-generator-dark.png" />
  </CodelabCard>
  <CodelabCard
  level="Advanced"
  title="Build custom renderers"
-  href="/blockly/codelabs/custom-renderer/codelab-overview/index.html">
-  <Image alt="Blockly icon" src="/blockly/images/codelabs/card_thumbnails_custom-renderers.png" srcDark="/blockly/images/codelabs/card_thumbnails_custom-renderers-dark.png" />
+  href="/codelabs/custom-renderer/codelab-overview">
+  <Image alt="Blockly icon" src="/images/codelabs/card_thumbnails_custom-renderers.png" srcDark="/images/codelabs/card_thumbnails_custom-renderers-dark.png" />
  </CodelabCard>
 </CodelabGrid>
@@ -9,7 +9,7 @@ description: How to use a theme to set the colours of blocks.

 A block style currently only holds three different colour properties. They are 'colourPrimary',
 'colourSecondary' and 'colourTertiary'. This value can either be defined as a hex value or as a hue.
-For more information on block styles visit our themes [documentation](/blockly/guides/configure/web/appearance/themes#block-style)
+For more information on block styles visit our themes [documentation](/guides/configure/web/appearance/themes#block-style)

 Update the Theme definition to have the block styles as below.

@@ -13,6 +13,6 @@ In this codelab you have learned how to extend and customize themes for the bloc

 ### Additional information

- [Themes documentation](/blockly/guides/configure/web/appearance/themes)
+- [Themes documentation](/guides/configure/web/appearance/themes)

- You can also customize the font styles. Details are available in the [documentation](/blockly/guides/configure/web/appearance/themes#font-styles).
+- You can also customize the font styles. Details are available in the [documentation](/guides/configure/web/appearance/themes#font-styles).
@@ -26,5 +26,5 @@ You can find the code for the [completed custom block](https://github.com/Raspbe
 - A browser.
 - A text editor.
 - Basic knowledge of JavaScript.
- Basic understanding of the [Blockly toolbox](/blockly/guides/configure/web/toolboxes/toolbox).
- Basic understanding of [using JSON to define custom blocks](/blockly/guides/create-custom-blocks/define/structure-json).
+- Basic understanding of the [Blockly toolbox](/guides/configure/web/toolboxes/toolbox).
+- Basic understanding of [using JSON to define custom blocks](/guides/create-custom-blocks/define/structure-json).
@@ -20,10 +20,10 @@ You can find the code for the [completed custom block](https://github.com/Raspbe

 ### Resources
 For more information related topics, check out the documentation:
-* [Defining the toolbox](/blockly/guides/configure/web/toolboxes/toolbox)
-* [Defining custom blocks](/blockly/guides/create-custom-blocks/overview)
-* [Generating code from blocks](/blockly/guides/create-custom-blocks/code-generation/overview)
-* [Creating extensions](/blockly/guides/create-custom-blocks/define/extensions#extensions)
-* [Listening for change events](/blockly/guides/configure/web/events)
-* [Custom validators](/blockly/guides/create-custom-blocks/fields/validators)
-* [Custom block style guide](/blockly/guides/design/blocks)
+* [Defining the toolbox](/guides/configure/web/toolboxes/toolbox)
+* [Defining custom blocks](/guides/create-custom-blocks/overview)
+* [Generating code from blocks](/guides/create-custom-blocks/code-generation/overview)
+* [Creating extensions](/guides/create-custom-blocks/define/extensions#extensions)
+* [Listening for change events](/guides/configure/web/events)
+* [Custom validators](/guides/create-custom-blocks/fields/validators)
+* [Custom block style guide](/guides/design/blocks)
@@ -18,7 +18,7 @@ practices for referring to Blockly and attributing it as well as appropriate
 uses of the logo.

 <a class="button button-primary downloadAsset"
-   href="/blockly/images/logos/blockly_logos_all.zip" target="_blank">Download all assets</a>
+   href="/images/logos/blockly_logos_all.zip" target="_blank">Download all assets</a>

 ## How to refer to Blockly

@@ -56,12 +56,12 @@ following logos, depending on background color:
  <theader>
    <tr>
      <th style="background-color:white">
-        <img src="/blockly/images/logos/built-with-blockly-badge-white.png"
+        <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="/blockly/images/logos/built-with-blockly-badge-black.png"
+        <img src="/images/logos/built-with-blockly-badge-black.png"
             alt="Built on Blockly black" width="250">
      </th>
    </tr>
@@ -72,10 +72,10 @@ following logos, depending on background color:
      <td>For dark backgrounds with overlapping shapes or varied patterns.</td>
    </tr>
    <tr>
-      <td><a class="assetDownloadLink" href="/blockly/images/logos/built-with-blockly-badge-white.png" target="_blank">PNG</a>
-        <a class="assetDownloadLink" href="/blockly/images/logos/built-with-blockly-badge-white.svg" target="_blank">SVG</a></td>
-      <td><a class="assetDownloadLink" href="/blockly/images/logos/built-with-blockly-badge-black.png" target="_blank">PNG</a>
-        <a class="assetDownloadLink" href="/blockly/images/logos/built-with-blockly-badge-black.svg" target="_blank">SVG</a></td>
+      <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>
@@ -91,8 +91,8 @@ Please hyperlink the badge to Blockly's home page: [https://www.blockly.com](htt
    logo. Never crowd or overlap the logo with other elements.</p>
  </div>
  <div style="flex: 1 1 50%;">
-    <img src="/blockly/images/logos/blockly-badge.png" class="blockly-badge-light" alt="Blockly Badge" />
-    <img src="/blockly/images/logos/blockly-badge-dark.png" class="blockly-badge-dark" alt="Blockly Badge" />
+    <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>

@@ -108,7 +108,7 @@ element on your page.
 <table>
  <tr>
    <td style="background-color:white; vertical-align:middle">
-      <img src="/blockly/images/logos/logo_standard.png"
+      <img src="/images/logos/logo_standard.png"
           alt="Standard Blockly logo">
    </td>
    <td>
@@ -119,8 +119,8 @@ element on your page.
      with a full color logomark and neutral 700 (#5F6368) or solid white
      logotype.
      </p>
-      <a class="assetDownloadLink" href="/blockly/images/logos/logo_standard.png" target="_blank">PNG</a>
-      <a class="assetDownloadLink" href="/blockly/images/logos/logo_standard.svg" target="_blank">SVG</a>
+      <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>
@@ -129,17 +129,17 @@ element on your page.
  <tbody>
    <tr>
      <th style="background-color:white; text-align:center">
-        <img src="/blockly/images/logos/logo_vertical.png"
+        <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="/blockly/images/logos/logo_only.png"
+        <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="/blockly/images/logos/logo_knockout_with_bg.png"
+        <img src="/images/logos/logo_knockout_with_bg.png"
             alt="Blockly knockout logo"
             height="120" class="logo-version">
      </th>
@@ -157,12 +157,12 @@ element on your page.
      </td>
    </tr>
    <tr>
-      <td><a class="assetDownloadLink" href="/blockly/images/logos/logo_vertical.png" target="_blank">PNG</a>
-        <a class="assetDownloadLink" href="/blockly/images/logos/logo_vertical.svg" target="_blank">SVG</a></td>
-      <td><a class="assetDownloadLink" href="/blockly/images/logos/logo_only.png" target="_blank">PNG</a>
-        <a class="assetDownloadLink" href="/blockly/images/logos/logo_only.svg" target="_blank">SVG</a></td>
-      <td><a class="assetDownloadLink" href="/blockly/images/logos/logo_knockout_with_bg.png" target="_blank">PNG</a>
-        <a class="assetDownloadLink" href="/blockly/images/logos/logo_knockout_with_bg.svg" target="_blank">SVG</a></td>
+      <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>
@@ -227,7 +227,7 @@ element on your page.
    </ul>
  </div>
  <div style="flex: 1 1 40%;">
-    <img src="/blockly/images/logos/logo_x_height.png"
+    <img src="/images/logos/logo_x_height.png"
         alt="Height references for padding the logo" width="380">
  </div>
 </div>
@@ -13,7 +13,7 @@ Your application can generate code at any time. For example, it might generate
 code when the end user clicks a button or every time the user makes a change.

 For an overview of code generation, see [Code
-generation](/blockly/guides/create-custom-blocks/code-generation/overview).
+generation](/guides/create-custom-blocks/code-generation/overview).

 ## Import a language code generator

@@ -140,12 +140,12 @@ Deciding how to execute it is very application-specific, and outside the scope
 of Blockly.

 If you want to execute JavaScript code, see [Generate and run
-JavaScript](/blockly/guides/app-integration/running-javascript). This discusses
+JavaScript](/guides/app-integration/running-javascript). This discusses
 some special features of the JavaScript code generator, as well as
 [JSInterpreter][jsinterpreter], which the Blockly team recommends as a way to
 safely execute JavaScript.

 Other languages require other tools.

-[event]: /blockly/guides/configure/web/events
+[event]: /guides/configure/web/events
 [jsinterpreter]: https://github.com/NeilFraser/JS-Interpreter
@@ -17,20 +17,20 @@ with the colours mirrored by the various toolbar categories in the demos:
 colour.](/images/standard-block-colors.png)

 Additional colours on the block are derived from the main colour. For example,
-[shadow blocks](/blockly/guides/configure/web/toolboxes/preset#shadow-blocks)
+[shadow blocks](/guides/configure/web/toolboxes/preset#shadow-blocks)
 are a desaturated version of the main colour, and border colours are a darker
 version.

 :::tip
 If you want more control over shadow block or border colours, learn about
-[defining a theme](/blockly/guides/configure/web/appearance/themes).
+[defining a theme](/guides/configure/web/appearance/themes).
 :::

 ## Set block colour

 The primary colour of a block can be defined in either JSON or JavaScript. You
 can pass the hue (preferred), RGB value, or color name; for more information,
-see [Colour formats](/blockly/guides/configure/web/appearance/colour-formats).
+see [Colour formats](/guides/configure/web/appearance/colour-formats).

 <Tabs groupId="group-1">
  <TabItem value="json" label="JSON" default>
@@ -53,11 +53,11 @@ see [Colour formats](/blockly/guides/configure/web/appearance/colour-formats).
 Note the British spelling. Failure to set the colour results in a black block.

 You can also set the block color using the
-[`Block.setColour(..)`](/blockly/reference/js/blockly.block_class.setcolour_1_method)
-function, or by using [themes](/blockly/guides/configure/web/appearance/themes)
+[`Block.setColour(..)`](/reference/js/blockly.block_class.setcolour_1_method)
+function, or by using [themes](/guides/configure/web/appearance/themes)
 and defining a block style.

 ## Accessibility

 For information about how colour affects accessibility, see [Colour and
-accessibility](/blockly/guides/configure/web/colour-a11y)
+accessibility](/guides/configure/web/colour-a11y)
@@ -58,7 +58,7 @@ W3C](https://www.w3.org/TR/css-color-3/#html4).
 Often, multiple blocks share the same colour, and centralizing the colour
 definitions simplifies managing the colours and adding new blocks of the correct
 colour. Block colours and toolbox categories can use [localization
-tokens](/blockly/guides/configure/web/translations#use-localization-tokens-in-json)
+tokens](/guides/configure/web/translations#use-localization-tokens-in-json)
 to do exactly that.

 Blockly includes nine colour constants in the string table, corresponding to the
@@ -77,7 +77,7 @@ toolbox categories, plus a distinct colour for dynamic variables:
 ```

 These string values can be used in both the JSON definitions and
-[`block.setColour(..)`](/blockly/reference/js/blockly.block_class.setcolour_1_method).
+[`block.setColour(..)`](/reference/js/blockly.block_class.setcolour_1_method).

 You can add your own colour constants by adding to `Blockly.Msg`:

@@ -17,10 +17,10 @@ You can use CSS to style your application:
 *   Add your own CSS classes to Blockly components for additional specificity.
 *   Use CSS classes and rules to style custom components.

-For a practical introduction to using CSS in blockly, see the [Use CSS in Blockly](/blockly/codelabs/css/codelab-overview/index.html)
+For a practical introduction to using CSS in blockly, see the [Use CSS in Blockly](/codelabs/css/codelab-overview/index.html)

 :::note
-The easiest way to style Blockly is with [themes](/blockly/guides/configure/web/appearance/themes). If you need finer-grained control, use CSS.
+The easiest way to style Blockly is with [themes](/guides/configure/web/appearance/themes). If you need finer-grained control, use CSS.
 :::

 ## CSS classes
@@ -67,12 +67,12 @@ To add or remove a CSS class from a workspace's injection `<div>`, call

 To add a CSS class to a button or a label in a toolbox, use the `web-class` key
 in your JSON definition of the toolbox. For more information, see [Buttons and
-labels](/blockly/guides/configure/web/toolboxes/buttons).
+labels](/guides/configure/web/toolboxes/buttons).

 To override the CSS classes used for the various parts of a category, use the
 `cssConfig` key in your JSON definition of the category. This allows you to
 style individual categories. For more information, see [Category
-CSS](/blockly/guides/configure/web/toolboxes/appearance#category-css).
+CSS](/guides/configure/web/toolboxes/appearance#category-css).

 #### Blocks

@@ -129,9 +129,9 @@ custom CSS classes:
    ```

    For more information, see [Customizing fields with
-    CSS](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#customizing-with-css)
+    CSS](/guides/create-custom-blocks/fields/customizing-fields/creating#customizing-with-css)
    or [Create the icon's
-    view](/blockly/guides/create-custom-blocks/icons/creating-custom-icons/basic-implementation#create-the-icons-view).
+    view](/guides/create-custom-blocks/icons/creating-custom-icons/basic-implementation#create-the-icons-view).

 *   When constructing an SVG element, pass your class to
    `Blockly.utils.dom.createSvgElement`:
@@ -289,7 +289,7 @@ tag. The rules in this tag come from:
    `Blockly.css.register`](https://github.com/search?q=repo%3ARaspberryPiFoundation%2Fblockly+css.register+path%3Acore&type=code).

 If you do not want to use these rules, set the [`css` configuration
-option](/blockly/guides/configure/web/configuration_struct#the-options-dictionary)
+option](/guides/configure/web/configuration_struct#the-options-dictionary)
 to `false`. In this case, you are responsible for providing an alternate set of
 CSS rules.

@@ -17,19 +17,19 @@ as a class on the injection `div`. This allows users to change the look of any
 unsupported components through CSS. Our main goal in creating themes is to
 empower developers to create Blockly experiences that are more accessible.

-For a practical introduction to using themes, see the [Customizing your themes](/blockly/codelabs/theme-extension-identifier/codelab-overview/index.html)
+For a practical introduction to using themes, see the [Customizing your themes](/codelabs/theme-extension-identifier/codelab-overview/index.html)

 :::note
-The easiest way to style Blockly is with themes. If you need finer-grained control, use [CSS](/blockly/guides/configure/web/appearance/css).
+The easiest way to style Blockly is with themes. If you need finer-grained control, use [CSS](/guides/configure/web/appearance/css).
 :::

 :::note
 If you only want to control the main colour of a block, rather than have
 more fine-grained control over the appearance, you can set the colour in the
-[block definition](/blockly/guides/configure/web/appearance/block-colour#set-block-colour)
+[block definition](/guides/configure/web/appearance/block-colour#set-block-colour)
 instead of creating a theme. If you want to change the shape of a block instead
 of its colour, learn more about
-[renderers](/blockly/guides/create-custom-blocks/renderers/overview).
+[renderers](/guides/create-custom-blocks/renderers/overview).
 :::

 ## Theme Properties
@@ -53,9 +53,9 @@ A block style is made up of four fields:
 -   `colourTertiary` (optional) - The border or highlight colour of the block.
 -   `hat` (optional) - Adds a hat to a block, if the value is set to `cap`.
    Learn more about
-    [hats](/blockly/guides/design/applications#event-driven-program).
+    [hats](/guides/design/applications#event-driven-program).

-<Image alt="Block with arrows pointing to primary, secondary and tertiary colour" src="/blockly/images/ColourExplanation.png" srcDark="/blockly/images/ColourExplanation-dark.png" width={450} />
+<Image alt="Block with arrows pointing to primary, secondary and tertiary colour" src="/images/ColourExplanation.png" srcDark="/images/ColourExplanation-dark.png" width={450} />

 ```js
 const listBlocks = {
@@ -92,7 +92,7 @@ A category style only holds a colour property.
    in the category. This makes it easy for users to tell which blocks belong in
    a given category.

-<Image alt="Screenshot of toolbox with different category colours" src="/blockly/images/CategoryColours.png" srcDark="/blockly/images/CategoryColours-dark.png" />
+<Image alt="Screenshot of toolbox with different category colours" src="/images/CategoryColours.png" srcDark="/images/CategoryColours-dark.png" />

 ```js
 const mathCategory = {
@@ -162,13 +162,13 @@ const fontStyle = {

 :::tip
 Learn more about the use cases of start hats on our
-[application design page](/blockly/guides/design/applications#event-driven-program).
+[application design page](/guides/design/applications#event-driven-program).
 :::

 If you set `startHats: true` directly in a theme object, a hat will be added to
 all blocks with no previous or output connections. If you want more control over
 exactly which blocks get a hat, you can instead use the
-[block style](/blockly/guides/configure/web/appearance/themes/#block-style) property.
+[block style](/guides/configure/web/appearance/themes/#block-style) property.

 ## Custom Themes

@@ -66,5 +66,5 @@ The ability to work with comments programmatically is not affected by the state
 of the block (such as whether it is editable or collapsed) or the setting of the
 `comments` configuration option.

-[editable]: /blockly/guides/create-custom-blocks/define/block-state#editable-state
-[config-option]: /blockly/guides/configure/web/configuration_struct#the-options-dictionary
+[editable]: /guides/create-custom-blocks/define/block-state#editable-state
+[config-option]: /guides/configure/web/configuration_struct#the-options-dictionary
@@ -12,7 +12,7 @@ text on the block, and so not a critical attribute. However, when choosing a
 block colour palette, colour blindness should be a consideration.

 Blockly provides [several
-themes](/blockly/guides/configure/web/appearance/themes#built-in) in an effort
+themes](/guides/configure/web/appearance/themes#built-in) in an effort
 to accommodate some types of colour vision deficiency. [This
 page](http://mkweb.bcgsc.ca/colorblind/palettes.mhtml#projecthome) includes
 example 8, 12, 15, and 24 colour palettes that attempt to maximize distinction
@@ -25,7 +25,7 @@ two are different and should not be confused.
 :::

 For more information, see [Create a
-workspace](/blockly/guides/get-started/workspace-creation).
+workspace](/guides/get-started/workspace-creation).

 ## Direct creation

@@ -38,7 +38,7 @@ directly.
 ## Configuration options{#the-options-dictionary}

 The configuration object implements
-[`Blockly.BlocklyOptions`](/blockly/reference/js/blockly.blocklyoptions_interface)
+[`Blockly.BlocklyOptions`](/reference/js/blockly.blocklyoptions_interface)
 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.

@@ -69,14 +69,14 @@ default value based on whether the provided toolbox has categories or not.
 | `trashcan`            | boolean   | Displays or hides the trashcan.  Defaults to `true` if the toolbox has categories, `false` otherwise.
 | `zoom`                | object    | Configures zooming behaviour. See [Zoom].                   |

-[Grid]: /blockly/guides/configure/web/grid
-[media]: /blockly/guides/configure/web/media
-[Move]: /blockly/guides/configure/web/move
-[setIsReadOnly]: /blockly/reference/js/blockly.workspace_class.setisreadonly_1_method
-[isReadOnly]: /blockly/reference/js/blockly.workspace_class.isreadonly_1_method
-[renderer]: /blockly/guides/create-custom-blocks/renderers/create-custom-renderers/basic-implementation
+[Grid]: /guides/configure/web/grid
+[media]: /guides/configure/web/media
+[Move]: /guides/configure/web/move
+[setIsReadOnly]: /reference/js/blockly.workspace_class.setisreadonly_1_method
+[isReadOnly]: /reference/js/blockly.workspace_class.isreadonly_1_method
+[renderer]: /guides/create-custom-blocks/renderers/create-custom-renderers/basic-implementation
 [RTL demo]: https://raspberrypifoundation.github.io/blockly-samples/examples/rtl-demo/
-[Themes]: /blockly/guides/configure/web/appearance/themes
-[defining the toolbox]: /blockly/guides/configure/web/toolboxes/toolbox
-[Zoom]: /blockly/guides/configure/web/zoom
-[replacement]: /blockly/guides/configure/web/customization#injecting-subclasses
+[Themes]: /guides/configure/web/appearance/themes
+[defining the toolbox]: /guides/configure/web/toolboxes/toolbox
+[Zoom]: /guides/configure/web/zoom
+[replacement]: /guides/configure/web/customization#injecting-subclasses
@@ -16,7 +16,7 @@ response to a right-click or a long press on a touch device. If you use the
 shown with a keyboard shortcut, which defaults to `Ctrl+Enter` on Windows or
 `Command+Enter` on Mac.

-<Image alt="The default context menu for a block" src="/blockly/images/context-menus/block-default-menu.png" width={200} />
+<Image alt="The default context menu for a block" src="/images/context-menus/block-default-menu.png" width={200} />

 Context menus are a good place to add actions that the user performs
 infrequently, such as downloading a screenshot. If you think an action will be
@@ -55,7 +55,7 @@ Blockly defines a standard set of templates for the context menus for
 workspaces, blocks, and workspace comments. It preloads the templates for
 workspaces and blocks into the registry. If you want to use the templates for
 workspace comments, you must [load them into the registry
-yourself](/blockly/guides/configure/web/workspace_comment#enable-workspace-comments).
+yourself](/guides/configure/web/workspace_comment#enable-workspace-comments).

 For information on how to add, delete, and modify templates in the registry, see
 [Customize the registry](#customize-the-registry).
@@ -80,7 +80,7 @@ context menu was invoked is stored in the `focusedNode` property as an object
 that implements [`IFocusableNode`][i-focusable-node]. (`IFocusableNode` is
 implemented by all components that users can focus on, including those that
 implement context menus. For more information, see [Focus
-system](/blockly/guides/configure/web/focus).)
+system](/guides/configure/web/focus).)

 The `Scope` object is passed to several of the functions in a template. In any
 function that gets a `Scope` object, you can decide what to do based on the type
@@ -132,8 +132,8 @@ It should return one of a set of strings: `'enabled'`, `'disabled'`, or

 | <ClassBlock className="displayTableHeader"> Value </ClassBlock>| <ClassBlock className="displayTableHeader"> Description </ClassBlock>| <ClassBlock className="displayTableHeader"> Image </ClassBlock>|
 | ------------ | ---------------------------------- | --------------------------------------------------- |
-| `'enabled'`  | Shows that the item is active.     | <Image alt="An enabled option" src="/blockly/images/context-menus/enabled-option.png" width={150} />  |
-| `'disabled'` | Shows that the item is not active. | <Image alt="A disabled option" src="/blockly/images/context-menus/disabled-option.png" width={150} /> |
+| `'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} /> |
 | `'hidden'`   | Hides the item.                    |                                                     |

 The `preconditionFn` is also passed a [`Scope`][Scope] which you can use to
@@ -329,7 +329,7 @@ Blockly.ContextMenuRegistry.registry.register(collapseTemplate);

 :::note
 Check out the [context menu
-codelab](/blockly/codelabs/context-menu-option/codelab-overview/index.html)
+codelab](/codelabs/context-menu-option/codelab-overview/index.html)
 for worked examples of adding context menu items.
 :::

@@ -453,17 +453,17 @@ steps:
 1.  [Add templates](#add-a-template) to the registry for your context menu
    items.

-[block-default-menu-image]: /blockly/images/context-menus/block-default-menu.png
+[block-default-menu-image]: /images/context-menus/block-default-menu.png
 [context-menu-items-source]: https://github.com/RaspberryPiFoundation/blockly/blob/main/core/contextmenu_items.ts
-[i-context-menu]: /blockly/reference/js/blockly.icontextmenu_interface
-[i-focusable-node]: /blockly/reference/js/blockly.ifocusablenode_interface
-[RegistryItem]: /blockly/reference/js/blockly.contextmenuregistry_namespace.registryitem_typealias
+[i-context-menu]: /reference/js/blockly.icontextmenu_interface
+[i-focusable-node]: /reference/js/blockly.ifocusablenode_interface
+[RegistryItem]: /reference/js/blockly.contextmenuregistry_namespace.registryitem_typealias
 [Scope]: #scope
-[enabled-image]: /blockly/images/context-menus/enabled-option.png
-[disabled-image]: /blockly/images/context-menus/disabled-option.png
-[customContextMenu]: /blockly/reference/js/blockly.blocksvg_class.customcontextmenu_property
-[configureContextMenu]: /blockly/reference/js/blockly.workspacesvg_class.configurecontextmenu_property
-[ContextMenuOption]: /blockly/reference/js/blockly.contextmenuregistry_namespace.contextmenuoption_typealias
-[LegacyContextMenuOption]: /blockly/reference/js/blockly.contextmenuregistry_namespace.legacycontextmenuoption_interface
-[coordinate-systems]: /blockly/guides/configure/web/metrics_manager#coordinate-systems
-[keyboard-navigation-plugin]: /blockly/guides/configure/web/keyboard-nav
+[enabled-image]: /images/context-menus/enabled-option.png
+[disabled-image]: /images/context-menus/disabled-option.png
+[customContextMenu]: /reference/js/blockly.blocksvg_class.customcontextmenu_property
+[configureContextMenu]: /reference/js/blockly.workspacesvg_class.configurecontextmenu_property
+[ContextMenuOption]: /reference/js/blockly.contextmenuregistry_namespace.contextmenuoption_typealias
+[LegacyContextMenuOption]: /reference/js/blockly.contextmenuregistry_namespace.legacycontextmenuoption_interface
+[coordinate-systems]: /guides/configure/web/metrics_manager#coordinate-systems
+[keyboard-navigation-plugin]: /guides/configure/web/keyboard-nav
@@ -152,16 +152,16 @@ find the paster associated with a given copy data from its `paster` property.
 Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());
 ```

-[implement-paster]: /blockly/guides/configure/web/copy-paste#implement-a-paster
-[ICopyable]: /blockly/reference/js/blockly.icopyable_interface
-[IDeletable]: /blockly/reference/js/blockly.ideletable_interface
-[IDraggable]: /blockly/reference/js/blockly.idraggable_interface
-[ICopyData]: /blockly/reference/js/blockly.icopyable_namespace.icopydata_interface
-[IPaster]: /blockly/reference/js/blockly.ipaster_interface
-[ISelectable]: /blockly/reference/js/blockly.iselectable_interface
-[default-keyboard-shortcuts]: /blockly/guides/configure/web/keyboard-shortcuts#default-shortcuts
-[context-menu-option]: /blockly/guides/configure/web/context-menus
-[custom-draggables]: /blockly/guides/configure/web/dragging/draggable
+[implement-paster]: /guides/configure/web/copy-paste#implement-a-paster
+[ICopyable]: /reference/js/blockly.icopyable_interface
+[IDeletable]: /reference/js/blockly.ideletable_interface
+[IDraggable]: /reference/js/blockly.idraggable_interface
+[ICopyData]: /reference/js/blockly.icopyable_namespace.icopydata_interface
+[IPaster]: /reference/js/blockly.ipaster_interface
+[ISelectable]: /reference/js/blockly.iselectable_interface
+[default-keyboard-shortcuts]: /guides/configure/web/keyboard-shortcuts#default-shortcuts
+[context-menu-option]: /guides/configure/web/context-menus
+[custom-draggables]: /guides/configure/web/dragging/draggable
 [multiselect-plugin]: https://www.npmjs.com/package/@mit-app-inventor/blockly-plugin-workspace-multiselect
 [cross-tab-copy-paste-plugin]: https://www.npmjs.com/package/@blockly/plugin-cross-tab-copy-paste
-[clipboard-namespace]: /blockly/reference/js/blockly.clipboard_namespace
+[clipboard-namespace]: /reference/js/blockly.clipboard_namespace
@@ -28,25 +28,25 @@ The following Blockly classes can be replaced:
 | [`Blockly.VariableModel`]            | [`Blockly.IVariableModel`]       | --                         |

 For information about how to replace a renderer, see [Create custom
-renderers](/blockly/guides/create-custom-blocks/renderers/create-custom-renderers/basic-implementation).
+renderers](/guides/create-custom-blocks/renderers/create-custom-renderers/basic-implementation).

-[`Blockly.dragging.Dragger`]: /blockly/reference/js/blockly.dragging_namespace.dragger_class
-[`Blockly.IDragger`]: /blockly/reference/js/blockly.idragger_interface
-[`Blockly.ConnectionChecker`]: /blockly/reference/js/blockly.connectionchecker_class
-[`Blockly.IConnectionChecker`]: /blockly/reference/js/blockly.iconnectionchecker_interface
-[`Blockly.InsertionMarkerPreviewer`]: /blockly/reference/js/blockly.insertionmarkerpreviewer_class
-[`Blockly.IConnectionPreviewer`]: /blockly/reference/js/blockly.iconnectionpreviewer_interface
-[`Blockly.HorizontalFlyout`]: /blockly/reference/js/blockly.horizontalflyout_class
-[`Blockly.VerticalFlyout`]: /blockly/reference/js/blockly.verticalflyout_class
-[`Blockly.IFlyout`]: /blockly/reference/js/blockly.iflyout_interface
-[`Blockly.MetricsManager`]: /blockly/reference/js/blockly.metricsmanager_class
-[`Blockly.IMetricsManager`]: /blockly/reference/js/blockly.imetricsmanager_interface
-[`Blockly.Toolbox`]: /blockly/reference/js/blockly.toolbox_class
-[`Blockly.IToolbox`]: /blockly/reference/js/blockly.itoolbox_interface
-[`Blockly.VariableMap`]: /blockly/reference/js/blockly.variablemap_class
-[`Blockly.IVariableMap`]: /blockly/reference/js/blockly.ivariablemap_interface
-[`Blockly.VariableModel`]: /blockly/reference/js/blockly.variablemodel_class
-[`Blockly.IVariableModel`]: /blockly/reference/js/blockly.ivariablemodel_interface
+[`Blockly.dragging.Dragger`]: /reference/js/blockly.dragging_namespace.dragger_class
+[`Blockly.IDragger`]: /reference/js/blockly.idragger_interface
+[`Blockly.ConnectionChecker`]: /reference/js/blockly.connectionchecker_class
+[`Blockly.IConnectionChecker`]: /reference/js/blockly.iconnectionchecker_interface
+[`Blockly.InsertionMarkerPreviewer`]: /reference/js/blockly.insertionmarkerpreviewer_class
+[`Blockly.IConnectionPreviewer`]: /reference/js/blockly.iconnectionpreviewer_interface
+[`Blockly.HorizontalFlyout`]: /reference/js/blockly.horizontalflyout_class
+[`Blockly.VerticalFlyout`]: /reference/js/blockly.verticalflyout_class
+[`Blockly.IFlyout`]: /reference/js/blockly.iflyout_interface
+[`Blockly.MetricsManager`]: /reference/js/blockly.metricsmanager_class
+[`Blockly.IMetricsManager`]: /reference/js/blockly.imetricsmanager_interface
+[`Blockly.Toolbox`]: /reference/js/blockly.toolbox_class
+[`Blockly.IToolbox`]: /reference/js/blockly.itoolbox_interface
+[`Blockly.VariableMap`]: /reference/js/blockly.variablemap_class
+[`Blockly.IVariableMap`]: /reference/js/blockly.ivariablemap_interface
+[`Blockly.VariableModel`]: /reference/js/blockly.variablemodel_class
+[`Blockly.IVariableModel`]: /reference/js/blockly.ivariablemodel_interface

 ## Create a replacement class

@@ -86,13 +86,13 @@ Blockly.registry.register(
 ### Inject your replacement class {#injecting-subclasses}

 You can also inject replacement classes using the `plugins` [configuration
-option](/blockly/guides/configure/web/configuration_struct#the-options-dictionary).
+option](/guides/configure/web/configuration_struct#the-options-dictionary).
 This is an object that uses [registry type names](#replaceable-classes) as
 property names and replacement classes or registered names as property values.

 (In spite of the `plugins` property's name, your class does not need to be
 packaged and distributed through npm like the [plugins used to extend
-Blockly](/blockly/guides/programming/plugin_overview).)
+Blockly](/guides/programming/plugin_overview).)

 Either pass your replacement class to `Blockly.inject`:

@@ -45,8 +45,8 @@ Blockly.Blocks['my_block'] = {
 }
 ```

-[draggable]: /blockly/guides/configure/web/dragging/draggable
-[draggable-implementation]: /blockly/guides/configure/web/dragging/draggable#implementation
-[setDragStrategy]: /blockly/reference/js/blockly.blocksvg_class.setdragstrategy_1_method
-[IDraggable]: /blockly/reference/js/blockly.idraggable_interface
-[IDragStrategy]: /blockly/reference/js/blockly.idragstrategy_interface
+[draggable]: /guides/configure/web/dragging/draggable
+[draggable-implementation]: /guides/configure/web/dragging/draggable#implementation
+[setDragStrategy]: /reference/js/blockly.blocksvg_class.setdragstrategy_1_method
+[IDraggable]: /reference/js/blockly.idraggable_interface
+[IDragStrategy]: /reference/js/blockly.idragstrategy_interface
@@ -227,16 +227,16 @@ and define an `IPaster` to allow it to be pasted.

 For more information about copying pasting see [Copy paste][copy-paste].

-[workspace-visual-glossary]: /blockly/guides/get-started/workspace-anatomy#workspace
+[workspace-visual-glossary]: /guides/get-started/workspace-anatomy#workspace
 [multiselect-plugin]: https://www.npmjs.com/package/@mit-app-inventor/blockly-plugin-workspace-multiselect
 {/* This doesn't exist yet */}
-[events]: /blockly/guides/configure/web/events
-[IRenderedElement]: /blockly/reference/js/blockly.irenderedelement_interface
-[IDraggable]: /blockly/reference/js/blockly.idraggable_interface
-[IDeletable]: /blockly/reference/js/blockly.ideletable_interface
-[ISelectable]: /blockly/reference/js/blockly.iselectable_interface
-[setSelected]: /blockly/reference/js/blockly.common_namespace.setselected_2_function
+[events]: /guides/configure/web/events
+[IRenderedElement]: /reference/js/blockly.irenderedelement_interface
+[IDraggable]: /reference/js/blockly.idraggable_interface
+[IDeletable]: /reference/js/blockly.ideletable_interface
+[ISelectable]: /reference/js/blockly.iselectable_interface
+[setSelected]: /reference/js/blockly.common_namespace.setselected_2_function
 [svg-group]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
-[Coordinate]: /blockly/reference/js/blockly.utils_namespace.coordinate_class
-[drag-target]: /blockly/reference/js/blockly.dragtarget_class
-[copy-paste]: /blockly/guides/configure/web/copy-paste
+[Coordinate]: /reference/js/blockly.utils_namespace.coordinate_class
+[drag-target]: /reference/js/blockly.dragtarget_class
+[copy-paste]: /guides/configure/web/copy-paste
@@ -169,7 +169,7 @@ const myWorkspace = Blockly.inject('blocklyDiv', {

 ```

-[draggable]: /blockly/guides/configure/web/dragging/draggable
-[drag-target]: /blockly/reference/js/blockly.dragtarget_class
+[draggable]: /guides/configure/web/dragging/draggable
+[drag-target]: /reference/js/blockly.dragtarget_class
 [scroll-options-plugin]: https://www.npmjs.com/package/@blockly/plugin-scroll-options
-[IDragger]: /blockly/reference/js/blockly.idragger_interface
+[IDragger]: /reference/js/blockly.idragger_interface
@@ -16,7 +16,7 @@ the before and after state of each change.

 Workspaces have `addChangeListener` and `removeChangeListener` methods that can
 be used to listen to the event stream.  One example is the
-[real-time generation of code](/blockly/guides/app-integration/run-code#continuous-updates).
+[real-time generation of code](/guides/app-integration/run-code#continuous-updates).
 Another example is the
 [maximum block limit demo](https://raspberrypifoundation.github.io/blockly-samples/examples/max-blocks-demo/).
 As is often the case, neither of these two examples care what the triggering
@@ -55,7 +55,7 @@ workspace.

 The function is added by calling `Block.setOnChange` with a function and can be
 done during initialization or via a [JSON
-extension](/blockly/guides/create-custom-blocks/define/extensions) if you plan
+extension](/guides/create-custom-blocks/define/extensions) if you plan
 to use it on all platforms.

 <Tabs groupId="group-1">
@@ -130,7 +130,7 @@ and causing side effects.

 ## Event types

-Refer to the [reference documentation](/blockly/reference/js/blockly.events_namespace)
+Refer to the [reference documentation](/reference/js/blockly.events_namespace)
 for information about individual events.

 ## Demo
@@ -11,7 +11,7 @@ The simplest way to put Blockly into a webpage is to inject it into an empty

 ## 1. Get the code

-[Get the code](/blockly/guides/get-started/get-the-code) in whatever
+[Get the code](/guides/get-started/get-the-code) in whatever
 way works best for your application.

 ## 2. Define the area
@@ -24,7 +24,7 @@ Add an empty `div` somewhere in the page's body and set its size:

 ## 3. Inject the workspace

-[Define the toolbox](/blockly/guides/configure/web/toolboxes/toolbox) structure:
+[Define the toolbox](/guides/configure/web/toolboxes/toolbox) structure:

 ```js
 const toolbox = {
@@ -121,7 +121,7 @@ Suppose a block with two fields has Blockly focus, as indicated by a highlight
 arrow:

 1.  The [keyboard navigation
-    plugin](/blockly/guides/configure/web/keyboard-nav):
+    plugin](/guides/configure/web/keyboard-nav):
    *   Receives a key press event.
    *   Asks the navigation system (a part of core Blockly) to move focus to the
        "next" component.
@@ -163,11 +163,11 @@ Here are some other examples:
 *   When a block is deleted, its `dispose` method calls the focus manager to
    move focus to the block's parent.

-*   [Keyboard shortcuts](/blockly/guides/configure/web/keyboard-shortcuts) use
+*   [Keyboard shortcuts](/guides/configure/web/keyboard-shortcuts) use
    `IFocusableNode` to identify the Blockly component to which the shortcut
    applies.

-*   [Context menus](/blockly/guides/configure/web/context-menus) use
+*   [Context menus](/guides/configure/web/context-menus) use
    `IFocusableNode` to identify the Blockly component on which the menu was
    invoked.

@@ -271,8 +271,8 @@ in an exception.

 If you write a custom component from scratch, you'll need to implement the focus
 interfaces yourself. See the reference documentation for
-[`IFocusableTree`](/blockly/reference/js/blockly.ifocusabletree_interface) and
-[`IFocusableNode`](/blockly/reference/js/blockly.ifocusablenode_interface) more
+[`IFocusableTree`](/reference/js/blockly.ifocusabletree_interface) and
+[`IFocusableNode`](/reference/js/blockly.ifocusablenode_interface) more
 information.

 After you have implemented your class, test it against the keyboard navigation
@@ -321,9 +321,9 @@ returnEphemeralFocus();
 ```

 If you use
-[`WidgetDiv`](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#widgetdiv-sample-code)
+[`WidgetDiv`](/guides/create-custom-blocks/fields/customizing-fields/creating#widgetdiv-sample-code)
 or
-[`DropDownDiv`](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#dropdowndiv-sample-code),
+[`DropDownDiv`](/guides/create-custom-blocks/fields/customizing-fields/creating#dropdowndiv-sample-code),
 they will handle ephemeral focus for you.

 ### Tab stops
@@ -367,7 +367,7 @@ manager just changes the actively focused node to passive focus.)

 Positionables are components that are positioned on top of the workspace and
 implement
-[`IPositionable`](/blockly/reference/js/blockly.ipositionable_interface).
+[`IPositionable`](/reference/js/blockly.ipositionable_interface).
 Examples are the trashcan and the backpack in the [backpack
 plugin](https://www.npmjs.com/package/@blockly/workspace-backpack).
 Positionables are not yet integrated into the focus system.
@@ -13,7 +13,7 @@ large area.

 The grid's settings are defined by an object that is part of Blockly's
 [configuration
-options](/blockly/guides/configure/web/configuration_struct#the-options-dictionary).
+options](/guides/configure/web/configuration_struct#the-options-dictionary).
 Here is an example:

 ```js
@@ -7,7 +7,7 @@ image: images/blockly_banner.png
 # Keyboard navigation

 Blockly provides keyboard navigation through the `@blockly/keyboard-navigation`
-plugin. This code uses the [focus system](/blockly/guides/configure/web/focus)
+plugin. This code uses the [focus system](/guides/configure/web/focus)
 and will eventually be integrated into Blockly core.

 You can [download the plugin from
@@ -34,17 +34,17 @@ user presses a key (or combination of keys), Blockly:
 ## Scope

 A
-[`Scope`](/blockly/reference/js/blockly.contextmenuregistry_namespace.scope_interface)
+[`Scope`](/reference/js/blockly.contextmenuregistry_namespace.scope_interface)
 object identifies the Blockly component that currently has focus. Scope objects
 are passed to `preconditionFn` and `callback`, which use them to decide whether
 a shortcut applies to a particular component and, if so, how to apply it.

 To use a `Scope` object, use its `focusedNode` property. This is an object that
 implements
-[`IFocusableNode`](/blockly/reference/js/blockly.ifocusablenode_interface). This
+[`IFocusableNode`](/reference/js/blockly.ifocusablenode_interface). This
 interface is implemented by all Blockly components that the user can focus on,
 including workspaces, blocks, fields, comments, and your own custom components;
-for more information, see [Focus system](/blockly/guides/configure/web/focus).
+for more information, see [Focus system](/guides/configure/web/focus).

 For example, a `preconditionFn` might use `focusedNode` to ensure that a
 shortcut only applies to blocks.
@@ -58,7 +58,7 @@ preconditionFn(workspace, scope) {
 ## The KeyboardShortcut interface

 Objects in the shortcut registry implement the
-[`KeyboardShortcut`](/blockly/reference/js/blockly.shortcutregistry_namespace.keyboardshortcut_interface)
+[`KeyboardShortcut`](/reference/js/blockly.shortcutregistry_namespace.keyboardshortcut_interface)
 interface. This contains the following properties.

 ### name (required)
@@ -135,7 +135,7 @@ it.

 An array of keys (or combinations of keys) that activate this shortcut. To
 identify keys, use the keycodes in
-[`Blockly.utils.KeyCodes`](/blockly/reference/js/blockly.utils_namespace.keycodes_enum).
+[`Blockly.utils.KeyCodes`](/reference/js/blockly.utils_namespace.keycodes_enum).
 For example:

 ```js
@@ -148,7 +148,7 @@ const logFieldsShortcut = {

 If you want map additional keys to an existing shortcut -- for example, you want
 to add keys to a [default shortcut](#default-shortcuts) -- you can call
-[`Blockly.ShortcutRegistry.registry.addKeyMapping`](/blockly/reference/js/blockly.shortcutregistry_class.addkeymapping_1_method).
+[`Blockly.ShortcutRegistry.registry.addKeyMapping`](/reference/js/blockly.shortcutregistry_class.addkeymapping_1_method).
 This is not common.

 #### Key combinations
@@ -272,7 +272,7 @@ The shortcuts are defined in the `registerXxxx` functions.

 ## Keyboard navigation shortcuts

-The [keyboard navigation plugin](/blockly/guides/configure/web/keyboard-nav)
+The [keyboard navigation plugin](/guides/configure/web/keyboard-nav)
 contains shortcuts that allow users to navigate Blockly with the keyboard, such
 as by using arrow keys. Keyboard navigation is essential for users who cannot
 use a mouse, such as those with motor or visual impairments. It is also useful
@@ -18,7 +18,7 @@ or if you want your application to only make HTTP requests to your domain:
    place them in your own media folder.
 1.  Replace any assets you want to customize.
 1.  Set the `media` property in the [configuration
-    options](/blockly/guides/configure/web/configuration_struct#the-options-dictionary)
+    options](/guides/configure/web/configuration_struct#the-options-dictionary)
    to the URL of your media folder. This can be an absolute URL or a path
    relative to the current file.
 1.  Deploy your media folder and all of its assets along with the rest of your
@@ -24,7 +24,7 @@ The toolbox metrics are composed of the `height`, `width` and `position` of a
 category toolbox. This does not include information on the flyout that is
 attached to the toolbox.

-<Image alt="The Blockly workspace with arrows showing the width and height of the toolbox." src="/blockly/images/metrics_manager/toolbox_metrics.png" width={300} />
+<Image alt="The Blockly workspace with arrows showing the width and height of the toolbox." src="/images/metrics_manager/toolbox_metrics.png" width={300} />

 The `position` of the toolbox is of the type `Blockly.utils.toolbox.Position`.

@@ -37,7 +37,7 @@ flyout toolbox. It is important to note, that this is not the flyout that is
 attached to the category toolbox. This only pertains to flyout toolboxes as
 shown in the below photo.

-<Image alt="The Blockly workspace with arrows showing the width and height of the flyout." src="/blockly/images/metrics_manager/flyout_toolbox_metrics.png" width={300} />
+<Image alt="The Blockly workspace with arrows showing the width and height of the flyout." src="/images/metrics_manager/flyout_toolbox_metrics.png" width={300} />

 The `position` of the flyout is of the type `Blockly.utils.toolbox.Position`.

@@ -49,7 +49,7 @@ The SVG metrics are composed of the `width` and `height` of the workspace's
 parent SVG. For the main workspace, this is the SVG with the `blocklySvg` class.
 This SVG includes the visible workspace as well as the toolbox.

-<Image alt="The Blockly workspace with a blue rectangle around it." src="/blockly/images/metrics_manager/svg_metrics.png" width={300} />
+<Image alt="The Blockly workspace with a blue rectangle around it." src="/images/metrics_manager/svg_metrics.png" width={300} />

 ### View Metrics

@@ -59,12 +59,12 @@ The view metrics are composed of the `height`, `width`, `top` and `left` of the
 viewport. The viewport is the portion of the workspace that is visible. This
 does not include either type of toolbox.

-<Image alt="The Blockly workspace with a blue rectangle around the area not including the toolbox." src="/blockly/images/metrics_manager/view_metrics.png" width={300} />
+<Image alt="The Blockly workspace with a blue rectangle around the area not including the toolbox." src="/images/metrics_manager/view_metrics.png" width={300} />

 The top left is relative to the workspace origin. As we drag around the
 workspace the top and left position of the viewport are updated.

-<Image alt="The Blockly workspace with a blue rectangle around the area not including the toolbox, and an origin shown offset from the top left corner." src="/blockly/images/metrics_manager/view_metrics_origin.png" width={300} />
+<Image alt="The Blockly workspace with a blue rectangle around the area not including the toolbox, and an origin shown offset from the top left corner." src="/images/metrics_manager/view_metrics_origin.png" width={300} />

 ### Absolute Metrics

@@ -74,8 +74,8 @@ The absolute metrics are composed of the `top` and `left` offset of the viewport
 from the pareng SVG. Depending on where the toolbox is positioned on the
 workspace, this is usually the width or height of the toolbox.

-<Image alt="The Blockly workspace with a blue line to the right of the toolbox and on top of the workspace." src="/blockly/images/metrics_manager/absolute_metrics.png" width={300} />
-<Image alt="The Blockly workspace with a horizontal toolbox. There is a blue line on the left of the workspace and below the toolbox." src="/blockly/images/metrics_manager/absolute_metrics_2.png" width={300} />
+<Image alt="The Blockly workspace with a blue line to the right of the toolbox and on top of the workspace." src="/images/metrics_manager/absolute_metrics.png" width={300} />
+<Image alt="The Blockly workspace with a horizontal toolbox. There is a blue line on the left of the workspace and below the toolbox." src="/images/metrics_manager/absolute_metrics_2.png" width={300} />

 ### Content Metrics

@@ -86,10 +86,10 @@ the bounding box around any blocks or workspace comments.

 :::note
 Content metrics do not take into account block comments, only [workspace
-comments](/blockly/reference/js/blockly.comments_namespace.workspacecomment_class/).
+comments](/reference/js/blockly.comments_namespace.workspacecomment_class/).
 :::

-<Image alt="The Blockly workspace with a blue box around the contents of the workspace." src="/blockly/images/metrics_manager/content_metrics.png" width={300} />
+<Image alt="The Blockly workspace with a blue box around the contents of the workspace." src="/images/metrics_manager/content_metrics.png" width={300} />

 ### Scroll Metrics

@@ -99,7 +99,7 @@ The scroll metrics are composed of the `height`, `width`, `top` and `left` of
 the scrollable area. For a movable workspace, the scrollable area is the content
 area plus some padding.

-<Image alt="The Blockly workspace with a large blue box surrounding it." src="/blockly/images/metrics_manager/scroll_metrics.png" width={300} />
+<Image alt="The Blockly workspace with a large blue box surrounding it." src="/images/metrics_manager/scroll_metrics.png" width={300} />

 ## Coordinate Systems

@@ -11,7 +11,7 @@ scrollbars, the mouse, or the mouse wheel.

 The move settings are defined by an object that is part of Blockly's
 [configuration
-options](/blockly/guides/configure/web/configuration_struct#the-options-dictionary).
+options](/guides/configure/web/configuration_struct#the-options-dictionary).
 Here is an example:

 ```js
@@ -28,7 +28,7 @@ of a table cell that fills the bottom of the screen.
 ## 2. Inject the workspace

 Injecting Blockly is the same as the process described in
-[injecting fixed-sized Blockly](/blockly/guides/configure/web/fixed-size).
+[injecting fixed-sized Blockly](/guides/configure/web/fixed-size).
 Add the code, the `blocklyDiv` element, a toolbox, and an injection call.

 Blockly should now be running on the page, just not located where it should be
@@ -8,7 +8,7 @@ image: images/blockly_banner.png

 Serialization is saving the state of your workspace so that it can be loaded
 back into the workspace later. This includes serializing the state of any
-blocks, variables, or [plugins](/blockly/guides/programming/plugin_overview)
+blocks, variables, or [plugins](/guides/programming/plugin_overview)
 that you want to save. You can convert all of the data you need to save into a
 text-based format for easy storage, and then load that data back into a fully
 functional workspace later.
@@ -76,7 +76,7 @@ prevent duplicating state within a save.

 When `Blockly.serialization.workspaces.load` is called, serializers are given
 state to deserialize in order of *priority*. This is explained further in the
-[Serializers](/blockly/guides/configure/web/serialization#serializer-hooks)
+[Serializers](/guides/configure/web/serialization#serializer-hooks)
 section, and its purpose is to allow serializers to depend on state from other
 systems.

@@ -91,7 +91,7 @@ The order for deserialization of built-in serializers is:
    2.  **Attributes are deserialized.** This includes properties that can apply
        to any block. For example: x, y, collapsed, disabled, and data.
 4.  **Extra state is deserialized.** See the
-    [Mutators](/blockly/guides/create-custom-blocks/mutators) documentation for
+    [Mutators](/guides/create-custom-blocks/mutators) documentation for
    more info.
 5.  **The block is connected to its parent (if one exists).**
    1.  **Icons are deserialized.** Individual icons are deserialized in an
@@ -117,7 +117,7 @@ However, if you have an input that only exists if a field has a certain value,
 you do not need to add info about the field to your extra state. This is because
 the state of your field will be deserialized first, and when it is, you can add
 the input to your block. Usually adding the input will be triggered by a
-[validator](/blockly/guides/create-custom-blocks/fields/validators#registering-a-local-validator).
+[validator](/guides/create-custom-blocks/fields/validators#registering-a-local-validator).

 Note that the rule about duplicating state should also take into account that
 block stacks, icons, fields, and input blocks are deserialized in an arbitrary
@@ -128,12 +128,12 @@ is deserialized before A.
 ### Block hooks

 For information about how to add extra serialization to blocks, see the
-[Mutators](/blockly/guides/create-custom-blocks/mutators) documentation.
+[Mutators](/guides/create-custom-blocks/mutators) documentation.

 ### Field hooks

 For information about how to serialize fields, see the [Custom
-fields](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#serialization)
+fields](/guides/create-custom-blocks/fields/customizing-fields/creating#serialization)
 documentation.

 ### Serializer hooks
@@ -167,10 +167,10 @@ When you register a serializer you must provide several things:
 *   A function to `clear` the state.
 *   A function to `load` the state.
 *   A `priority`, which is used to determine the [deserialization
-    order](/blockly/guides/configure/web/serialization#deserialization-order).
+    order](/guides/configure/web/serialization#deserialization-order).

    You can base the priority of your serializer on the [built-in
-    priorities](/blockly/reference/js/blockly.serialization_namespace.priorities_namespace)
+    priorities](/reference/js/blockly.serialization_namespace.priorities_namespace)

 When `Blockly.serialization.workspaces.save` is called, each serializer's `save`
 function will be called, and its data will be added to the final JSON output:
@@ -215,17 +215,17 @@ For information on how to migrate to JSON, see the [migration guide].
 ### APIs

 For information about the XML system's APIs see the [reference
-documentation](/blockly/reference/js/blockly.xml_namespace).
+documentation](/reference/js/blockly.xml_namespace).

 ### Block hooks

 For information about how to add extra serialization to blocks, see the
-[Mutators](/blockly/guides/create-custom-blocks/mutators) documentation.
+[Mutators](/guides/create-custom-blocks/mutators) documentation.

 ### Field hooks

 For information about how to serialize fields, see the [Custom
-fields](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#serialization)
+fields](/guides/create-custom-blocks/fields/customizing-fields/creating#serialization)
 documentation.

 ## Choosing between JSON and XML
@@ -13,7 +13,7 @@ import ClassBlock from '@site/src/components/ClassBlock';
 Blockly provides a default categories UI, and with it some basic options for
 styling. If you want information about how to do more advanced
 styling/configuration of the UI check out the [Customizing a Blockly toolbox
-codelab](/blockly/codelabs/custom-toolbox/codelab-overview/index.html)
+codelab](/codelabs/custom-toolbox/codelab-overview/index.html)
 and the [2021 Toolbox APIs
 talk](https://www.youtube.com/watch?v=JJVX_YuKDbo&list=PLSIUOFhnxEiCjoIwJ0jAdwpTZET73CK7d&index=9&t=1s).

@@ -133,7 +133,7 @@ class to assign the label color:

 ## Themes

-[Themes](/blockly/guides/configure/web/appearance/themes) allow you to specify all of the
+[Themes](/guides/configure/web/appearance/themes) allow you to specify all of the
 colours of your workspace at once, including the colours of your categories.
 If you need finer-grained control, use CSS.

@@ -195,4 +195,4 @@ spelling.
  </TabItem>
 </Tabs>
 Note that we also support using localizable [colour
-references](/blockly/guides/configure/web/appearance/colour-formats#colour-references).
+references](/guides/configure/web/appearance/colour-formats#colour-references).
@@ -18,7 +18,7 @@ blocks.](/images/toolbox-categories.png)

 To create a category toolbox, pass JSON or XML describing the toolbox to the
 `toolbox` property of the [configuration
-options](/blockly/guides/configure/web/configuration_struct#the-options-dictionary).
+options](/guides/configure/web/configuration_struct#the-options-dictionary).

 <Tabs groupId="group-1" queryString="tab">
  <TabItem value="json" label="JSON" default>
@@ -62,7 +62,7 @@ category.show();
 ## Expand categories

 This only applies to categories which contain other [nested
-categories](/blockly/guides/configure/web/toolboxes/nested).
+categories](/guides/configure/web/toolboxes/nested).

 An expanded category will show you its sub categories. By default, nested
 categories are collapsed, and need to be clicked to be expanded.
@@ -132,5 +132,5 @@ _Note: The word 'procedure' is used throughout the Blockly codebase, but the
 word 'function' has found to be more understandable by students.
 Sorry for the mismatch._

-[untyped-variable]: /blockly/guides/create-custom-blocks/variables#untyped-variable-blocks
-[typed-variable]: /blockly/guides/create-custom-blocks/variables#typed-variable-blocks
+[untyped-variable]: /guides/create-custom-blocks/variables#untyped-variable-blocks
+[typed-variable]: /guides/create-custom-blocks/variables#typed-variable-blocks
@@ -16,7 +16,7 @@ blocks.](/images/toolbox-minimal.png)

 To create a flyout toolbox, pass JSON or XML describing the toolbox to the
 `toolbox` property of the [configuration
-options](/blockly/guides/configure/web/configuration_struct#the-options-dictionary).
+options](/guides/configure/web/configuration_struct#the-options-dictionary).

 <Tabs groupId="group-1">
  <TabItem value="json" label="JSON" default>
@@ -171,7 +171,7 @@ out.](/images/toolbox-disabled.png)
  </TabItem>
 </Tabs>
 You can also programmatically disable or enable a block by using
-[`setDisabledReason`](/blockly/reference/js/blockly.block_class.setdisabledreason_1_method).
+[`setDisabledReason`](/reference/js/blockly.block_class.setdisabledreason_1_method).

 ## Configure your blocks

@@ -9,9 +9,9 @@ image: images/blockly_banner.png
 The toolbox is the place where users get blocks. Usually it is displayed on one
 side of the workspace.

-A [flyout toolbox](/blockly/guides/configure/web/toolboxes/flyout) has a single
+A [flyout toolbox](/guides/configure/web/toolboxes/flyout) has a single
 set of blocks that are displayed at all times. A [category
-toolbox](/blockly/guides/configure/web/toolboxes/category) has multiple sets of
+toolbox](/guides/configure/web/toolboxes/category) has multiple sets of
 blocks that are arranged into different categories.

 Toolboxes can be defined using JSON (as of the [September 2020
@@ -21,8 +21,8 @@ The JSON format is preferred.
 This section mainly focuses on how to specify the *structure* of your toolbox
 (i.e. what categories it has, and what blocks they contain). If you want more
 details about how to change the *appearance* of your toolbox, see [Category
-appearance](/blockly/guides/configure/web/toolboxes/appearance), the
+appearance](/guides/configure/web/toolboxes/appearance), the
 [Customizing a Blockly toolbox
-codelab](/blockly/codelabs/custom-toolbox/codelab-overview/index.html),
+codelab](/codelabs/custom-toolbox/codelab-overview/index.html),
 and the [2021 Toolbox APIs
 talk](https://www.youtube.com/watch?v=JJVX_YuKDbo&list=PLSIUOFhnxEiCjoIwJ0jAdwpTZET73CK7d&index=9&t=1s).
@@ -197,7 +197,7 @@ Blockly.Msg['LISTS_REPEAT_TITLE'] = "إنشئ قائمة مع العنصر  %1 %

 For more information about how Blockly converts `message` keys into inputs and
 fields, see [Define block structure in
-JSON](/blockly/guides/create-custom-blocks/define/structure-json).
+JSON](/guides/create-custom-blocks/define/structure-json).

 ### Use localization tokens in JavaScript

@@ -330,14 +330,14 @@ Blockly uses these functions to resolve token references in the `messageN`,
 One place you might need to use `replaceMessageReferences` is in custom fields.
 If your custom field accepts token references in any of its options, use
 `replaceMessageReferences` to resolve them. For more information, see [JSON and
-registration](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#json-and-registration).
+registration](/guides/create-custom-blocks/fields/customizing-fields/creating#json-and-registration).

 ## Related topics

 *   Right-to-left languages: See the [RTL
    demo](https://raspberrypifoundation.github.io/blockly-samples/examples/rtl-demo/).
 *   Help localize Blockly's text: See
-    [Translating](/blockly/guides/contribute/core/translating) in the section on
+    [Translating](/guides/contribute/core/translating) in the section on
    contributing to Blockly.

 ## Appendix: Where token references are allowed {#where}
@@ -355,7 +355,7 @@ following JSON keys:
    *   `colour`
 *   In the options passed to all fields:
    *   `tooltip`
-*   In the [nested arrays](/blockly/guides/create-custom-blocks/fields/built-in-fields/dropdown#creation)
+*   In the [nested arrays](/guides/create-custom-blocks/fields/built-in-fields/dropdown#creation)
    passed to `options` in `field_dropdown`:
    *   The first element, when the first element is a string
    *   The value of `alt`, when the first element is an object describing an
@@ -387,4 +387,4 @@ And in the XML definition of a toolbox in the following attributes of
 *   `colour`

 For more information about using token references as colour values, see [Colour
-references](/blockly/guides/configure/web/appearance/colour-formats#colour-references).
+references](/guides/configure/web/appearance/colour-formats#colour-references).
@@ -12,7 +12,7 @@ A workspace comment is a graphical element that you can enter text into. Usually
 it's used to document things about your code, just like comments in a text-based
 programming language.

-<Image alt="Workspace comment" src="/blockly/images/workspace-comments/workspace-comment.png" width={150} />
+<Image alt="Workspace comment" src="/images/workspace-comments/workspace-comment.png" width={150} />

 :::note
 workspace comments cannot be added to the [flyout][flyout].
@@ -56,7 +56,7 @@ the colour of the comment top bar and the border of the comment.
 }
 ```

-<Image alt="A workspace comment with the colours changed" src="/blockly/images/workspace-comments/coloured-comment.png" width={150} />
+<Image alt="A workspace comment with the colours changed" src="/images/workspace-comments/coloured-comment.png" width={150} />

 ### CSS classes

@@ -65,15 +65,15 @@ view, which allow you to modify the elements' styling.

 | CSS class(es)                                | Image                                                                                                                 |
 | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| `blocklyComment`, `blocklyDraggable`         | <Image alt="Workspace comment" src="/blockly/images/workspace-comments/workspace-comment-outline.png" width={150} />                                                  |
-| `blocklySelected`, `blocklyCommentHighlight` | <Image alt="Selected comment" src="/blockly/images/workspace-comments/selected-comment.png" width={150} /> <Image alt="Selected collapsed comment" src="/blockly/images/workspace-comments/selected-collapsed.png" width={150} /> |                                                                                                                     :
-| `blocklyCollapsed`                           | <Image alt="Collapsed workspace comment" src="/blockly/images/workspace-comments/collapsed-outline.png" width={150} />                                                |
-| `blocklyCommentTopbar`                       | <Image alt="Workspace comment topbar" src="/blockly/images/workspace-comments/top-bar-outline.png" width={150} />                                                     |
-| `blocklyFoldoutIcon`                         | <Image alt="Foldout icon" src="/blockly/images/workspace-comments/foldout-icon-outline.png" width={150} />                                                            |
-| `blocklyCommentPreview`, `blocklyText`       | <Image alt="Comment preview" src="/blockly/images/workspace-comments/preview-text-outline.png" width={150} />                                                         |
-| `blocklyDeleteIcon`                          | <Image alt="Delete icon" src="/blockly/images/workspace-comments/delete-icon-outline.png" width={150} />                                                              |
-| `blocklyText`                                | <Image alt="Text" src="/blockly/images/workspace-comments/text-input-outline.png" width={150} />                                                                            |
-| `blocklyResizeHandle`                        | <Image alt="Resize icon" src="/blockly/images/workspace-comments/resize-handle-outline.png" width={150} />                                                            |
+| `blocklyComment`, `blocklyDraggable`         | <Image alt="Workspace comment" src="/images/workspace-comments/workspace-comment-outline.png" width={150} />                                                  |
+| `blocklySelected`, `blocklyCommentHighlight` | <Image alt="Selected comment" src="/images/workspace-comments/selected-comment.png" width={150} /> <Image alt="Selected collapsed comment" src="/images/workspace-comments/selected-collapsed.png" width={150} /> |                                                                                                                     :
+| `blocklyCollapsed`                           | <Image alt="Collapsed workspace comment" src="/images/workspace-comments/collapsed-outline.png" width={150} />                                                |
+| `blocklyCommentTopbar`                       | <Image alt="Workspace comment topbar" src="/images/workspace-comments/top-bar-outline.png" width={150} />                                                     |
+| `blocklyFoldoutIcon`                         | <Image alt="Foldout icon" src="/images/workspace-comments/foldout-icon-outline.png" width={150} />                                                            |
+| `blocklyCommentPreview`, `blocklyText`       | <Image alt="Comment preview" src="/images/workspace-comments/preview-text-outline.png" width={150} />                                                         |
+| `blocklyDeleteIcon`                          | <Image alt="Delete icon" src="/images/workspace-comments/delete-icon-outline.png" width={150} />                                                              |
+| `blocklyText`                                | <Image alt="Text" src="/images/workspace-comments/text-input-outline.png" width={150} />                                                                            |
+| `blocklyResizeHandle`                        | <Image alt="Resize icon" src="/images/workspace-comments/resize-handle-outline.png" width={150} />                                                            |

 #### Basic CSS use

@@ -86,7 +86,7 @@ class:
 }
 ```

-<Image alt="A workspace comment with a taller top bar" src="/blockly/images/workspace-comments/tall-top-bar.png" width={150} />
+<Image alt="A workspace comment with a taller top bar" src="/images/workspace-comments/tall-top-bar.png" width={150} />

 #### CSS for text

@@ -105,9 +105,9 @@ the renderer.
 }
 ```

-<Image alt="A workspace comment with blue preview text" src="/blockly/images/workspace-comments/blue-preview-text.png" width={150} />
+<Image alt="A workspace comment with blue preview text" src="/images/workspace-comments/blue-preview-text.png" width={150} />

-<Image alt="A workspace comment with blue input text" src="/blockly/images/workspace-comments/blue-text.png" width={150} />
+<Image alt="A workspace comment with blue input text" src="/images/workspace-comments/blue-text.png" width={150} />

 #### CSS for selected highlights

@@ -144,9 +144,9 @@ image in your [media folder][media].

 | Image name          | Image                                                      |
 | ------------------- | ---------------------------------------------------------- |
-| `foldout-icon.svg`  | <Image alt="Foldout icon" src="/blockly/images/workspace-comments/foldout-icon-outline.png" width={150} /> |
-| `delete-icon.svg`   | <Image alt="Delete icon" src="/blockly/images/workspace-comments/delete-icon-outline.png" width={150} />   |
-| `resize-handle.svg` | <Image alt="Resize icon" src="/blockly/images/workspace-comments/resize-handle-outline.png" width={150} /> |
+| `foldout-icon.svg`  | <Image alt="Foldout icon" src="/images/workspace-comments/foldout-icon-outline.png" width={150} /> |
+| `delete-icon.svg`   | <Image alt="Delete icon" src="/images/workspace-comments/delete-icon-outline.png" width={150} />   |
+| `resize-handle.svg` | <Image alt="Resize icon" src="/images/workspace-comments/resize-handle-outline.png" width={150} /> |

 #### Delete icon

@@ -168,23 +168,23 @@ To set the default comment size, set the static property
 Blockly.comments.CommentView.defaultCommentSize = new Blockly.utils.Size(200, 200);
 ```

-[context-menus]: /blockly/guides/configure/web/context-menus
-[flyout]: /blockly/guides/get-started/workspace-anatomy#flyout-toolbox
-[themes]: /blockly/guides/configure/web/appearance/themes
+[context-menus]: /guides/configure/web/context-menus
+[flyout]: /guides/get-started/workspace-anatomy#flyout-toolbox
+[themes]: /guides/configure/web/appearance/themes
 [svg-image-element]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
-[media]: /blockly/guides/configure/web/media
-[workspace-comment-image]: /blockly/images/workspace-comments/workspace-comment.png
-[coloured-workspace-comment-image]: /blockly/images/workspace-comments/coloured-comment.png
-[workspace-comment-outline-image]: /blockly/images/workspace-comments/workspace-comment-outline.png
-[collapsed-outline-image]: /blockly/images/workspace-comments/collapsed-outline.png
-[top-bar-outline-image]: /blockly/images/workspace-comments/top-bar-outline.png
-[foldout-icon-outline-image]: /blockly/images/workspace-comments/foldout-icon-outline.png
-[preview-text-outline-image]: /blockly/images/workspace-comments/preview-text-outline.png
-[delete-icon-outline-image]: /blockly/images/workspace-comments/delete-icon-outline.png
-[text-outline-image]: /blockly/images/workspace-comments/text-input-outline.png
-[resize-handle-outline-image]: /blockly/images/workspace-comments/resize-handle-outline.png
-[taller-top-bar-image]: /blockly/images/workspace-comments/tall-top-bar.png
-[blue-input-text-image]: /blockly/images/workspace-comments/blue-text.png
-[blue-preview-text-image]: /blockly/images/workspace-comments/blue-preview-text.png
-[selected-comment]: /blockly/images/workspace-comments/selected-comment.png
-[selected-collapsed]: /blockly/images/workspace-comments/selected-collapsed.png
+[media]: /guides/configure/web/media
+[workspace-comment-image]: /images/workspace-comments/workspace-comment.png
+[coloured-workspace-comment-image]: /images/workspace-comments/coloured-comment.png
+[workspace-comment-outline-image]: /images/workspace-comments/workspace-comment-outline.png
+[collapsed-outline-image]: /images/workspace-comments/collapsed-outline.png
+[top-bar-outline-image]: /images/workspace-comments/top-bar-outline.png
+[foldout-icon-outline-image]: /images/workspace-comments/foldout-icon-outline.png
+[preview-text-outline-image]: /images/workspace-comments/preview-text-outline.png
+[delete-icon-outline-image]: /images/workspace-comments/delete-icon-outline.png
+[text-outline-image]: /images/workspace-comments/text-input-outline.png
+[resize-handle-outline-image]: /images/workspace-comments/resize-handle-outline.png
+[taller-top-bar-image]: /images/workspace-comments/tall-top-bar.png
+[blue-input-text-image]: /images/workspace-comments/blue-text.png
+[blue-preview-text-image]: /images/workspace-comments/blue-preview-text.png
+[selected-comment]: /images/workspace-comments/selected-comment.png
+[selected-collapsed]: /images/workspace-comments/selected-collapsed.png
@@ -11,7 +11,7 @@ or statically by the developer.

 The zoom settings are defined by an object that is part of Blockly's
 [configuration
-options](/blockly/guides/configure/web/configuration_struct#the-options-dictionary).
+options](/guides/configure/web/configuration_struct#the-options-dictionary).
 Here is an example:

 ```js
@@ -118,5 +118,5 @@ render.
 There are also a few places in core where it triggers immediate renders for
 backwards compatibility reasons. These are planned to be removed in v11.

-[renderer]: /blockly/guides/create-custom-blocks/renderers/overview
+[renderer]: /guides/create-custom-blocks/renderers/overview
 [requestFrame]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
@@ -130,6 +130,6 @@ string.
 Blockly.Msg.LOGIC_HUE = '210';
 ```

-[translatewiki]: /blockly/guides/contribute/core/translating
-[localization]: /blockly/guides/configure/web/translations
-[block-colour]: /blockly/guides/configure/web/appearance/block-colour#set-block-colour
+[translatewiki]: /guides/contribute/core/translating
+[localization]: /guides/configure/web/translations
+[block-colour]: /guides/configure/web/appearance/block-colour#set-block-colour
@@ -6,7 +6,7 @@ image: images/blockly_banner.png

 # Advanced compilation

-The regular [build process](/blockly/guides/contribute/core/building) uses Google's online JavaScript compiler to reduce Blockly to a half a dozen files totaling about 720kb (160kb zipped).  Alternatively one can use the Google's offline JavaScript compiler in "advanced compilation" mode which has a number of advantages:
+The regular [build process](/guides/contribute/core/building) uses Google's online JavaScript compiler to reduce Blockly to a half a dozen files totaling about 720kb (160kb zipped).  Alternatively one can use the Google's offline JavaScript compiler in "advanced compilation" mode which has a number of advantages:

  * Total Blockly size reduced to 300kb (100kb zipped) due to tree shaking.
  * Faster build times and no network traffic due to local compiler execution.
@@ -10,7 +10,7 @@ image: images/blockly_banner.png
 Unless you are modifying the Blockly source code directly, you probably
 don't need to build Blockly run any of the scripts documented below yourself.
 Instead, follow the instructions in [the "Get the Code"
-section](/blockly/guides/get-started/get-the-code#get-the-code-1) of the [Get Started](/blockly/guides/get-started/get-the-code) page to install [the `blockly` NPM package](
+section](/guides/get-started/get-the-code#get-the-code-1) of the [Get Started](/guides/get-started/get-the-code) page to install [the `blockly` NPM package](
 https://www.npmjs.com/package/blockly) or download the `.tgz` file attached to
 [the latest release on GitHub](
 https://github.com/RaspberryPiFoundation/blockly/releases/latest).
@@ -71,7 +71,7 @@ this alternative terminology is potentially confusing and discouraged.
 Unless you are modifying the Blockly source code directly, you probably
 don't need to build Blockly run any of the scripts documented below yourself.
 Instead, follow the instructions in [the "Get the Code"
-section](/blockly/guides/get-started/get-the-code#get-the-code-1) of the [Get Started](/blockly/guides/get-started/get-the-code) page to install [the `blockly` NPM package](
+section](/guides/get-started/get-the-code#get-the-code-1) of the [Get Started](/guides/get-started/get-the-code) page to install [the `blockly` NPM package](
 https://www.npmjs.com/package/blockly) or download the `.tgz` file attached to
 [the latest release on GitHub](
 https://github.com/RaspberryPiFoundation/blockly/releases/latest).
@@ -20,7 +20,7 @@ to create a PR.
 -   You must fill out the pull request template with the requested information.
 -   Code must conform to Google's [TypeScript Style
    Guide](https://google.github.io/styleguide/tsguide.html).
-   Use [conventional commits](/blockly/guides/contribute/get-started/commits)
+-   Use [conventional commits](/guides/contribute/get-started/commits)
    in your commit messages and pull request titles.
 -   User-visible strings must be in the `/msg/messages.js` file so they may be
    translated. Less than 6% of the world speaks English natively.
@@ -43,7 +43,7 @@ to create a PR.
 1.  Run `npm install` to install dependencies.
 1.  Run `npm run start` to start up a server running the playground. You can use
    this page to test the existing behavior. See the
-    [playground](/blockly/guides/contribute/get-started/playground) page for
+    [playground](/guides/contribute/get-started/playground) page for
    more information.
 1.  Make any necessary changes to the code.
 1.  If you've left the server running, refresh to see your changes. Otherwise,
@@ -49,7 +49,7 @@ translations or corrections -- whether for Klingon, or other languages.

 ## How?

-Most of [Blockly's translations](/blockly/guides/contribute/core/translating) are done by volunteers
+Most of [Blockly's translations](/guides/contribute/core/translating) are done by volunteers
 using Translatewiki.  Unfortunately, Klingon is not in their language matrix.
 As a result, Klingon contributors need to edit two files manually:

@@ -83,7 +83,7 @@ documentation](https://github.com/google/closure-compiler/wiki/Annotating-JavaSc
 Functions or properties that should only be accessed within the Blockly library
 should be annotated with `@internal`. This prevents these properties from
 appearing in the public documentation. Other [visibility
-modifiers](/blockly/guides/programming/using_blockly_apis) should be placed in
+modifiers](/guides/programming/using_blockly_apis) should be placed in
 the TypeScript code directly, not in the TSDoc.

 ### Properties
@@ -9,7 +9,7 @@ image: images/blockly_banner.png
 ## Introduction

 Codelabs are interactive tutorials written in Markdown syntax. They are 
-published as [part of our documentation](/blockly/codelabs/index). Codelabs use
+published as [part of our documentation](/codelabs/index). Codelabs use
 a mix of natural language, code samples, and screenshots to create a more
 interesting tutorial experience. The target user of a codelab is following along
 and running the code as they read.
@@ -29,13 +29,13 @@ understanding code to complete a specific task.
 ### Process

 If you have an idea for a codelab, you can tell us about it by making a
-[feature request](/blockly/guides/contribute/get-started/write_a_good_issue#feature-request)
+[feature request](/guides/contribute/get-started/write_a_good_issue#feature-request)
 in the blockly repository. Include a description of what you want to
 teach and what you will build in the codelab. We'll discuss and refine the idea.
 Then you can write it up and
-[submit a pull request](/blockly/guides/contribute/get-started/write_a_good_pr) for
+[submit a pull request](/guides/contribute/get-started/write_a_good_pr) for
 it. Once it's been through
-[review](/blockly/guides/contribute/get-started/pr_review_process), a member of the
+[review](/guides/contribute/get-started/pr_review_process), a member of the
 Blockly team will publish it.

 ## Directory structure
@@ -15,8 +15,8 @@ you are new to open source development.

 For information specific to Blockly that you should read before making a
 contribution, see the
-[Contributing to Core](/blockly/guides/contribute/core/index) and
-[Contributing to Samples](/blockly/guides/contribute/samples/index) sections.
+[Contributing to Core](/guides/contribute/core/index) and
+[Contributing to Samples](/guides/contribute/samples/index) sections.

 ## Which repository?

@@ -35,7 +35,7 @@ this repository if you want to create or modify a plugin or a sample.

 These are the general steps you will follow any time you make a change.

-1.  **Install** Git and Node, following the links in the [Tools](/blockly/guides/contribute/get-started/development_tools)
+1.  **Install** Git and Node, following the links in the [Tools](/guides/contribute/get-started/development_tools)
    section.
 1.  **Fork and clone the repository.** GitHub has a wonderful tutorial about
    [forking a repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo#fork-an-example-repository).
@@ -53,12 +53,12 @@ These are the general steps you will follow any time you make a change.
    terminal. The name should help you remember what you're working on.
 1.  **Make your changes.**
 1.  **Validate your changes,** following the guide for
-    [core](/blockly/guides/contribute/core/index) or
-    [samples](/blockly/guides/contribute/samples/index).
+    [core](/guides/contribute/core/index) or
+    [samples](/guides/contribute/samples/index).
 1.  **Save your changes** with `git commit -am "fix: My commit message"`.
    [Read more about commit messages](#).
 1.  **Push your changes** to GitHub with `git push origin myBranchName`.
 1.  **Open a pull request** when your code is ready. A member of the Blockly
    team will review your changes and merge them into Blockly if they are
    approved. For more information see
-    [PR Review Process](/blockly/guides/contribute/get-started/pr_review_process).
+    [PR Review Process](/guides/contribute/get-started/pr_review_process).
@@ -57,13 +57,13 @@ issue is currently in, so you can know what needs to be done next.

 *   **[Discussion](https://github.com/RaspberryPiFoundation/blockly-samples/labels/status%3A%20discussion):**
    These issues are in the
-    [discussion phase](/blockly/guides/contribute/samples/add_a_plugin#discussion),
+    [discussion phase](/guides/contribute/samples/add_a_plugin#discussion),
    which means there are still questions that need to be answered before
    implementation. If you have any thoughts related to this issue, feel free to
    leave a comment! We're always looking for more input.
 *   **[Implementation](https://github.com/RaspberryPiFoundation/blockly-samples/labels/status%3A%20implementation):**
    These issues have had enough discussion that they are clearly defined, and
-    have moved into the [implementation phase](/blockly/guides/contribute/samples/add_a_plugin#implementation).
+    have moved into the [implementation phase](/guides/contribute/samples/add_a_plugin#implementation).
    They are either waiting for implementation, or already being implemented. If
    you're interested in working on one of these, read through the whole issue
    and then leave a comment saying which part you want to work on, then go
@@ -106,15 +106,15 @@ working on plugins, these labels can help you find issues you're interested in.

 *   **[Codelab](https://github.com/RaspberryPiFoundation/blockly/labels/category%3A%20codelab):**
    These issues relate to Blockly
-    [codelabs](/blockly/guides/contribute/core/write_a_codelab/),
+    [codelabs](/guides/contribute/core/write_a_codelab/),
    a suite of interactive tutorials.
 *   **[Example](https://github.com/RaspberryPiFoundation/blockly-samples/labels/category%3A%20example):**
    These issues relate to Blockly
-    [examples](/blockly/guides/contribute/samples/repository_structure#examples),
+    [examples](/guides/contribute/samples/repository_structure#examples),
    a set of self-contained demos showcasing how to include and extend Blockly.
 *   **[Plugin](https://github.com/RaspberryPiFoundation/blockly-samples/labels/category%3A%20plugin):**
    These issues relate to Blockly
-    [plugins](/blockly/guides/contribute/samples/repository_structure#plugins),
+    [plugins](/guides/contribute/samples/repository_structure#plugins),
    a collection of extensions that add functionality Blockly.

 ### Project
@@ -24,7 +24,7 @@ playground in uncompiled mode, you must load it from a local web server.

 We have created a script that starts up a local server and loads all of the code
 required to load the Blockly modules. You will need to have
-[npm installed on your machine](/blockly/guides/contribute/get-started/development_tools#npm)
+[npm installed on your machine](/guides/contribute/get-started/development_tools#npm)
 and run `npm install` from the root of Blockly in order to install all
 dependencies.

@@ -118,7 +118,7 @@ the `test/playground.html` file in your browser. This is still possible with the
 simple and multi playgrounds, but it is no longer recommended. If you do this,
 the playground will detect that you are not running a local server and
 automatically use compressed Blockly files (see the
-[Building Blockly page](/blockly/guides/contribute/core/building) for more
+[Building Blockly page](/guides/contribute/core/building) for more
 info) and whenever you change something in core Blockly, you will have to
 rebuild core and stage the changes. You can still access these pages if hosted
 on a remote server, such as our example hosted on our demo site. The background
@@ -151,8 +151,8 @@ requests we will pursue.

 Here are the guidelines for each of the different categories of projects:

- [Blockly core](/blockly/guides/contribute/index)
- [Plugins](/blockly/guides/contribute/samples/add_a_plugin#first-party-criteria)
+- [Blockly core](/guides/contribute/index)
+- [Plugins](/guides/contribute/samples/add_a_plugin#first-party-criteria)
 - Examples: Show how to use only one or two Blockly features.
 - Codelabs: Show how to complete a single task or implement a single behaviour.

@@ -30,14 +30,14 @@ people working on the same thing. A team member will respond to confirm that
 it's yours.

 If you have an idea which is not covered by an issue, please [write one
-up](/blockly/guides/contribute/get-started/write_a_good_issue) before you begin work.
+up](/guides/contribute/get-started/write_a_good_issue) before you begin work.
 This gives the team a chance to discuss how best to build out the change
 *before* you start building, which saves you work in the long run.

 ### Get Set Up

 If this is your first time contributing to Blockly or blockly-samples, start at
-the [development setup](/blockly/guides/contribute/get-started/development_tools) page.
+the [development setup](/guides/contribute/get-started/development_tools) page.

 ### Keep it Small

@@ -60,9 +60,9 @@ In addition to eslint, please follow these guides:

 -   [Google JavaScript style
    guide](https://google.github.io/styleguide/jsguide.html).
-   [Commit Message Guide](/blockly/guides/contribute/get-started/commits)
-   [API visibility](/blockly/guides/programming/using_blockly_apis)
-   [Codelab style guide](/blockly/guides/contribute/core/write_a_codelab#writing-tips)
+-   [Commit Message Guide](/guides/contribute/get-started/commits)
+-   [API visibility](/guides/programming/using_blockly_apis)
+-   [Codelab style guide](/guides/contribute/core/write_a_codelab#writing-tips)

 ### Test your Change

@@ -12,23 +12,23 @@ contributions.

 ## How you can help

-   [File bugs](/blockly/guides/contribute/get-started/write_a_good_issue)
-   [File feature requests](/blockly/guides/contribute/get-started/write_a_good_issue#feature-request)
-   [Fix bugs](/blockly/guides/contribute/get-started/write_a_good_pr)
-   [Add tests](/blockly/guides/contribute/core/unit_testing)
-   [Write codelabs](/blockly/guides/contribute/core/write_a_codelab)
-   [Write plugins](/blockly/guides/contribute/samples/add_a_plugin)
+-   [File bugs](/guides/contribute/get-started/write_a_good_issue)
+-   [File feature requests](/guides/contribute/get-started/write_a_good_issue#feature-request)
+-   [Fix bugs](/guides/contribute/get-started/write_a_good_pr)
+-   [Add tests](/guides/contribute/core/unit_testing)
+-   [Write codelabs](/guides/contribute/core/write_a_codelab)
+-   [Write plugins](/guides/contribute/samples/add_a_plugin)
 -   [Answer questions](https://groups.google.com/g/blockly)

 ## Where to start

 -   If you're new to open source development, or you want to get more background
    knowledge, head over to the
-    [Getting Started contributing](/blockly/guides/contribute/get-started/index)
+    [Getting Started contributing](/guides/contribute/get-started/index)
    guides.
 -   If you are ready to jump in, check out the
-    [Contributing to Core](/blockly/guides/contribute/core/index) or
-    [Contributing to Samples](/blockly/guides/contribute/samples/index) guides.
+    [Contributing to Core](/guides/contribute/core/index) or
+    [Contributing to Samples](/guides/contribute/samples/index) guides.

 ### Talk to us!

@@ -11,7 +11,7 @@ describes is for creating first-party plugins, you can use it as a guideline for
 creating third-party plugins.

 For an overview of plugins,
-see [Plugins](/blockly/guides/programming/plugin_overview).
+see [Plugins](/guides/programming/plugin_overview).

 For a quick introduction to creating a plugin, see our [How to Build a Plugin
 talk
@@ -62,7 +62,7 @@ A plugin starts as a **suggestion**. You can suggest a plugin by creating a new
 issue with the [Feature
 Request](https://github.com/RaspberryPiFoundation/blockly-samples/issues/new?assignees=&labels=type%3A+feature+request%2C+triage&template=feature_request.yaml)
 template. For more information, read about [how to write a feature
-request](/blockly/guides/contribute/get-started/write_a_good_issue#feature-request).
+request](/guides/contribute/get-started/write_a_good_issue#feature-request).

 In addition to the basic feature request information, a plugin suggestion should
 include:
@@ -87,7 +87,7 @@ Next, a plugin goes into the **discussion** phase. This phase includes:
 -   Discussion of API changes in core Blockly.
 -   Breaking large plugins into implementation steps.
 -   Plugin naming, based on our [naming
-    conventions](/blockly/guides/contribute/samples/naming).
+    conventions](/guides/contribute/samples/naming).
 -   Confirming all [first party criteria](#first-party-criteria) will be met.

 This discussion generally happens on the GitHub issue. The smaller the scope of
@@ -234,7 +234,7 @@ to an input on a block, and watch the output change. Check that the preview of
 the block looks right, and that the code for each of the output sections is
 correct.

-[blockly-samples-development]: /blockly/guides/contribute/samples/index
+[blockly-samples-development]: /guides/contribute/samples/index
 [source-developer-tools]: https://github.com/RaspberryPiFoundation/blockly-samples/blob/main/examples/developer-tools
 [source-blocks-index]: https://github.com/RaspberryPiFoundation/blockly-samples/blob/main/examples/developer-tools/src/blocks/index.ts
 [source-blocks-fields]: https://github.com/RaspberryPiFoundation/blockly-samples/blob/main/examples/developer-tools/src/blocks/fields.ts
@@ -11,7 +11,7 @@ slug: /guides/contribute/samples/index
 content related to Blockly that isn't part of the core repository, including
 plugins and example code. For more details about each of these, see
 the [Repository
-Structure](/blockly/guides/contribute/samples/repository_structure) page.
+Structure](/guides/contribute/samples/repository_structure) page.

 ## Need to Know

@@ -27,7 +27,7 @@ order to create a PR.
    or [TypeScript Style
    Guide](https://google.github.io/styleguide/tsguide.html) depending on the
    language used.
-   Use [conventional commits](/blockly/guides/contribute/get-started/commits)
+-   Use [conventional commits](/guides/contribute/get-started/commits)
    in your commit messages and pull request titles.
 -   Any new code files must be prefixed with the Apache License v2.0:

@@ -47,7 +47,7 @@ order to create a PR.
    running the plugin's test page. You can use this page to see the existing
    behavior of a plugin, or if you're adding a new plugin you will need to make
    this a useful test page so that others can see what your plugin does. See
-    the [playground](/blockly/guides/contribute/get-started/playground) page for
+    the [playground](/guides/contribute/get-started/playground) page for
    more information.
 1.  Make any necessary changes to the plugin's code.
 1.  If you've left the server running, your changes will load automatically.
@@ -25,7 +25,7 @@ to find your plugin on npm.
 ### Field

 A field plugin publishes a single [custom
-field](/blockly/guides/create-custom-blocks/fields/customizing-fields/overview).
+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.
@@ -39,7 +39,7 @@ Blockly workspaces on the page.
 ### Theme

 A theme plugin publishes a single Blockly
-[theme](/blockly/guides/configure/web/appearance/themes).
+[theme](/guides/configure/web/appearance/themes).

 Loading a theme plugin defines a new theme that can then be used in all Blockly
 workspaces on the page.
@@ -53,7 +53,7 @@ workspaces on the page.
 ### Block

 A block plugin publishes one or more [block
-definitions](/blockly/guides/create-custom-blocks/overview).
+definitions](/guides/create-custom-blocks/overview).

 Loading a block plugin defines those blocks for all Blockly workspaces on the
 page.
@@ -67,7 +67,7 @@ page.
 ### Block Extension

 A block extension plugin publishes one or more [block
-extensions](/blockly/guides/create-custom-blocks/define/extensions), which can
+extensions](/guides/create-custom-blocks/define/extensions), which can
 be used to programmatically share behaviour between blocks.

 Loading a block extension plugin registers the extensions for use on all Blockly
@@ -97,7 +97,7 @@ generators.
 The Code Headers section shows the code you need to load the core Blockly
 library and the language generator you've chosen. There may be other
 configuration here too; for example, some fields you might include in a block
-are from Blockly [plugins](/blockly/guides/programming/plugin_overview). These
+are from Blockly [plugins](/guides/programming/plugin_overview). These
 plugins will have their own import statements and possibly other code you'll
 have to run to initialize the field. This code should be included before any of
 the following code sections.
@@ -170,15 +170,15 @@ following these steps:
    bug](https://github.com/RaspberryPiFoundation/blockly-samples/issues/new/choose) against
    blockly-samples and including the file that wouldn't parse.

-[legacy-block-factory]: /blockly/guides/create-custom-blocks/legacy-blockly-developer-tools
-[add-custom-blocks]: /blockly/guides/create-custom-blocks/overview
-[json-and-js]: /blockly/guides/create-custom-blocks/define/json-and-js
-[block-definitions]: /blockly/guides/create-custom-blocks/define/block-definitions
-[block-code-generator]: /blockly/guides/create-custom-blocks/code-generation/overview#block-code-generators
-[inputs]: /blockly/guides/get-started/workspace-anatomy#inputs
-[fields]: /blockly/guides/get-started/workspace-anatomy#fields
-[toolbox-preset]: /blockly/guides/configure/web/toolboxes/preset
-[mutators]: /blockly/guides/create-custom-blocks/mutators
-[loading-blockly]: /blockly/guides/get-started/get-the-code#get-the-code-1
-[code-generation]: /blockly/guides/create-custom-blocks/code-generation/overview#language-code-generators
-[sample-app]: /blockly/guides/get-started/get-the-code#create-package-script
+[legacy-block-factory]: /guides/create-custom-blocks/legacy-blockly-developer-tools
+[add-custom-blocks]: /guides/create-custom-blocks/overview
+[json-and-js]: /guides/create-custom-blocks/define/json-and-js
+[block-definitions]: /guides/create-custom-blocks/define/block-definitions
+[block-code-generator]: /guides/create-custom-blocks/code-generation/overview#block-code-generators
+[inputs]: /guides/get-started/workspace-anatomy#inputs
+[fields]: /guides/get-started/workspace-anatomy#fields
+[toolbox-preset]: /guides/configure/web/toolboxes/preset
+[mutators]: /guides/create-custom-blocks/mutators
+[loading-blockly]: /guides/get-started/get-the-code#get-the-code-1
+[code-generation]: /guides/create-custom-blocks/code-generation/overview#language-code-generators
+[sample-app]: /guides/get-started/get-the-code#create-package-script
@@ -131,7 +131,7 @@ field's value, call `getFieldValue`. What is returned is different from field to
 field. For example, text fields return the exact text entered by the user, but
 dropdown fields return a language-neutral string associated with the item the
 user selected. For more information, see the [documentation for built-in
-fields](/blockly/guides/create-custom-blocks/fields/built-in-fields/overview).
+fields](/guides/create-custom-blocks/fields/built-in-fields/overview).

 Depending on the field, you may need to transform the returned value before
 using it in code.
@@ -168,7 +168,7 @@ javascriptGenerator.forBlock['custom_if'] = function (block, generator) {


 For more information, see [Transform field
-values](/blockly/guides/create-custom-blocks/code-generation/fields).
+values](/guides/create-custom-blocks/code-generation/fields).

 ## Get code from inner blocks

@@ -238,7 +238,7 @@ the inner block's code as needed:
 You don't actually need to know whether `valueToCode` added parentheses. All you
 need to do is pass the precedence to `valueToCode` and add the returned code to
 your code string. For more information, see [valueToCode
-precedence](/blockly/guides/create-custom-blocks/code-generation/operator-precedence#valuetocode-precedence).
+precedence](/guides/create-custom-blocks/code-generation/operator-precedence#valuetocode-precedence).

 ### Inner statement blocks

@@ -276,7 +276,7 @@ type:
    precedence of the weakest operator in your code. `valueToCode` uses this to
    decide if your code needs to be wrapped in parentheses when your block is
    used as an inner block. For more information, see [Return
-    precedence](/blockly/guides/create-custom-blocks/code-generation/operator-precedence#return-precedence).
+    precedence](/guides/create-custom-blocks/code-generation/operator-precedence#return-precedence).

 *   **Statement blocks:** Return the code string.

@@ -307,7 +307,7 @@ javascriptGenerator.forBlock['custom_if'] = function (block, generator) {

 If you use the code of an inner value block multiple times in your code string,
 you should [cache the code from that
-block](/blockly/guides/create-custom-blocks/code-generation/caching-arguments)
+block](/guides/create-custom-blocks/code-generation/caching-arguments)
 to avoid subtle bugs and unwanted side-effects.

 ## Complete code generators
@@ -182,4 +182,4 @@ generator. It does not care about operators inside utility functions. So in the
 previous example the `valueToCode` call was changed to `Order.NONE` and the
 return tuple was changed to `Order.FUNCTION_CALL`.

-[parentheses]: /blockly/guides/create-custom-blocks/code-generation/operator-precedence
+[parentheses]: /guides/create-custom-blocks/code-generation/operator-precedence
@@ -12,7 +12,7 @@ Blocks imply parentheses. For example, when you see the following blocks, you
 assume it means `-(5 + 2)` not `-5 + 2` because the `5` and the `2` are part of
 one block, and the `-` is part of another block.

-<Image alt="blocks representing -(5 + 2)" src="/blockly/images/code-generation/parentheses/negation-and-addition.png" width={200} />
+<Image alt="blocks representing -(5 + 2)" src="/images/code-generation/parentheses/negation-and-addition.png" width={200} />

 But if you put parentheses around every block, it makes the code much less
 readable. Compare `(((5) * (2)) + (3))` with `5 * 2 + 3`. Both of these
@@ -47,7 +47,7 @@ For example, in the following blocks there is a unary negation operator and an
 addition operator. The unary negation has a stronger precedence than the
 addition operator.

-<Image alt="negate-and-addition" src="/blockly/images/code-generation/parentheses/negation-and-addition.png" width={200} />
+<Image alt="negate-and-addition" src="/images/code-generation/parentheses/negation-and-addition.png" width={200} />

 So if you don't add parentheses you get `-5 + 2`, and the `-` is evaluated
 before the `+`, which is doesn't match the blocks.
@@ -61,7 +61,7 @@ tuple specifies the precedence of the inner operator.

 Here is an example for a block that includes two operators:

-<Image alt="A block with a unary negation operator, and an addition operator, and a child block." src="/blockly/images/code-generation/parentheses/negate-plus-two-with-child.png" width={150} />
+<Image alt="A block with a unary negation operator, and an addition operator, and a child block." src="/images/code-generation/parentheses/negate-plus-two-with-child.png" width={150} />

 ```js
 import {javascriptGenerator, Order} from 'blockly/javascript';
@@ -85,7 +85,7 @@ For example, in the following blocks both the unary negation operator and the
 addition operator are acting on the code of the inner block. The unary negation
 is stronger, so that is the precedence you should pass to `valueToCode`.

-<Image alt="A block with a unary negation operator, and an addition operator, and a child block." src="/blockly/images/code-generation/parentheses/negate-plus-two-with-child.png" width={150} />
+<Image alt="A block with a unary negation operator, and an addition operator, and a child block." src="/images/code-generation/parentheses/negate-plus-two-with-child.png" width={150} />

 ```js
 // The - is the strongest operator acting on the inner code.
@@ -103,7 +103,7 @@ For example, the following block contains both a unary negation operator and an
 addition operator. The addition is weaker, so that is the precedence you should
 return from the block-code generator.

-<Image alt="A block with a unary negation operator, and an addition operator, and no child block" src="/blockly/images/code-generation/parentheses/negate-plus-two.png" width={150} />
+<Image alt="A block with a unary negation operator, and an addition operator, and no child block" src="/images/code-generation/parentheses/negate-plus-two.png" width={150} />

 ```js
 const code = `-${innerCode} + 2`;
@@ -149,9 +149,9 @@ precedences, `Order.ATOMIC` and `Order.NONE`.
 *   There are no operators acting on an inner block, so you pass it to
    `valueToCode`.

-[negate-and-addition]: /blockly/images/code-generation/parentheses/negation-and-addition.png
-[negate-plus-two-with-child]: /blockly/images/code-generation/parentheses/negate-plus-two-with-child.png
-[negate-plus-two]: /blockly/images/code-generation/parentheses/negate-plus-two.png
+[negate-and-addition]: /images/code-generation/parentheses/negation-and-addition.png
+[negate-plus-two-with-child]: /images/code-generation/parentheses/negate-plus-two-with-child.png
+[negate-plus-two]: /images/code-generation/parentheses/negate-plus-two.png
 [dart-order]: https://github.com/RaspberryPiFoundation/blockly/blob/dcd2d0e539f2b7aa34b58969d5dc812e7848800c/generators/dart/dart_generator.ts#L27
 [javascript-order]: https://github.com/RaspberryPiFoundation/blockly/blob/dcd2d0e539f2b7aa34b58969d5dc812e7848800c/generators/javascript/javascript_generator.ts#L27
 [lua-order]: https://github.com/RaspberryPiFoundation/blockly/blob/dcd2d0e539f2b7aa34b58969d5dc812e7848800c/generators/lua/lua_generator.ts#L28
@@ -64,7 +64,7 @@ pythonGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ..
 Block-code generators are called by language code generators.

 For more information, see [Block-code
-generators](/blockly/guides/create-custom-blocks/code-generation/block-code).
+generators](/guides/create-custom-blocks/code-generation/block-code).

 ## Generate and run code

@@ -76,7 +76,7 @@ Deciding how to execute it is very application-specific, and outside the scope
 of Blockly.

 For more information, see [Generate and run
-code](/blockly/guides/app-integration/run-code).
+code](/guides/app-integration/run-code).

-[custom-code-generator]: /blockly/codelabs/custom-generator/codelab-overview/index.html
+[custom-code-generator]: /codelabs/custom-generator/codelab-overview/index.html
 [js-code-generator]: https://github.com/RaspberryPiFoundation/blockly/blob/main/generators/javascript/javascript_generator.ts
@@ -26,10 +26,10 @@ There are four types of connections:

 | <ClassBlock className="displayTableHeader"> Connection type </ClassBlock> | <ClassBlock className="displayTableHeader"> Image </ClassBlock> |
 |---------------------|--------------------------------------------------|
-| Output connection   | <Image alt="an output connection" src="/blockly/images/connections/output-connection.png" width={40} />   |
-| Input connection    | <Image alt="an input connection" src="/blockly/images/connections/input-connection.png" srcDark="/blockly/images/connections/input-connection-dark.png" width={45} />     |
-| Previous connection | <Image alt="a previous connection" src="/blockly/images/connections/previous-connection.png" width={50} /> |
-| Next connection     | <Image alt="a next connection" src="/blockly/images/connections/next-connection.png" width={50} />       |
+| 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} />     |
+| Previous connection | <Image alt="a previous connection" src="/images/connections/previous-connection.png" width={50} /> |
+| Next connection     | <Image alt="a next connection" src="/images/connections/next-connection.png" width={50} />       |

 [output]: /images/connections/output-connection.png
 [input]: /images/connections/input-connection.png
@@ -39,10 +39,10 @@ There are four types of connections:
 Output connections and input connections can connect together, and next
 connections and previous connections can connect together. You can further
 restrict connections with [connection
-checks](/blockly/guides/create-custom-blocks/inputs/connection-checks).
+checks](/guides/create-custom-blocks/inputs/connection-checks).

 You can [customize the shapes of
-connections](/blockly/guides/create-custom-blocks/renderers/create-custom-renderers/connection-shapes)
+connections](/guides/create-custom-blocks/renderers/create-custom-renderers/connection-shapes)
 using a custom renderer.

 ### Top-level connections
@@ -54,7 +54,7 @@ connector on the leading edge of a block. An output connection passes a block's
 value (expression) to another block. A block with an output connection is called
 a **value block**.

-<Image alt="A math_number block." src="/blockly/images/block-anatomy/output-connection.png" srcDark="/blockly/images/block-anatomy/output-connection-dark.png" />
+<Image alt="A math_number block." src="/images/block-anatomy/output-connection.png" srcDark="/images/block-anatomy/output-connection-dark.png" />

 A block may have a previous connection on its top (represented as a notch) and a
 next connection on its bottom (represented as a tab). These allow blocks to be
@@ -62,10 +62,10 @@ stacked vertically, representing a sequence of statements. A block without an
 output connection is called a **statement block** and usually has both previous
 and next connections.

-<Image alt="A variables_set block." src="/blockly/images/block-anatomy/prev-next-connection.png" srcDark="/blockly/images/block-anatomy/prev-next-connection-dark.png" />
+<Image alt="A variables_set block." src="/images/block-anatomy/prev-next-connection.png" srcDark="/images/block-anatomy/prev-next-connection-dark.png" />

 For more information, see [Top-level
-connections](/blockly/guides/create-custom-blocks/define/top-level-connections).
+connections](/guides/create-custom-blocks/define/top-level-connections).

 ## Fields

@@ -75,15 +75,15 @@ string labels, dropdowns, checkboxes, images, and inputs for
 such as strings and numbers. For example, this loop block uses label fields, a
 dropdown field, and number fields.

-<Image alt="A block with multiple fields." src="/blockly/images/block-anatomy/loop.png" srcDark="/blockly/images/block-anatomy/loop-dark.png" />
+<Image alt="A block with multiple fields." src="/images/block-anatomy/loop.png" srcDark="/images/block-anatomy/loop-dark.png" />

 Blockly provides a number of [built-in
-fields](/blockly/guides/create-custom-blocks/fields/built-in-fields/overview),
+fields](/guides/create-custom-blocks/fields/built-in-fields/overview),
 including text inputs, color pickers, and images. You can also [create your own
-fields](/blockly/guides/create-custom-blocks/fields/customizing-fields/overview).
+fields](/guides/create-custom-blocks/fields/customizing-fields/overview).

 For more information, see
-[Fields](/blockly/guides/create-custom-blocks/fields/overview).
+[Fields](/guides/create-custom-blocks/fields/overview).

 ## Inputs

@@ -100,27 +100,27 @@ has been entered.
 There are four different types of inputs, all of which can contain fields
 (including labels) and two of which contain a single connection. You can also
 [create custom
-inputs](/blockly/guides/create-custom-blocks/inputs/creating-custom-inputs),
+inputs](/guides/create-custom-blocks/inputs/creating-custom-inputs),
 which support [custom
-rendering](/blockly/guides/create-custom-blocks/renderers/overview).
+rendering](/guides/create-custom-blocks/renderers/overview).

 | <ClassBlock className="displayTableHeader"> Input type </ClassBlock> | <ClassBlock className="displayTableHeader"> Connection type </ClassBlock> | <ClassBlock className="displayTableHeader"> Image </ClassBlock> |
 |------------------|------------------|-------------------------------------------------|
-| Dummy input      | None             | <Image alt="dummy input" src="/blockly/images/connections/dummy-input.png" srcDark="/blockly/images/connections/dummy-input-dark.png" width={40} />       |
-| End-of-row input | None             | <Image alt="end-of-row input" src="/blockly/images/connections/dummy-input.png" srcDark="/blockly/images/connections/dummy-input-dark.png" width={40} /> |
-| Value input      | Input connection | <Image alt="value input" src="/blockly/images/connections/input-connection.png" srcDark="/blockly/images/connections/input-connection-dark.png" width={45} />        |
-| Statement input  | Next connection  | <Image alt="statement input" src="/blockly/images/connections/statement-input.png" srcDark="/blockly/images/connections/statement-input-dark.png" width={50} /> |
+| 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} /> |
+| 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]: /blockly/images/connections/dummy-input.png
-[value-img]: /blockly/images/connections/input-connection.png
-[statement-img]: /blockly/images/connections/statement-input.png
+[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
-JSON](/blockly/guides/create-custom-blocks/define/structure-json) and [Block
+JSON](/guides/create-custom-blocks/define/structure-json) and [Block
 structure in
-JavaScript](/blockly/guides/create-custom-blocks/define/structure-js).
+JavaScript](/guides/create-custom-blocks/define/structure-js).

 ### Dummy inputs

@@ -128,17 +128,17 @@ A **dummy input** is just a container for fields -- it does not have a
 connection. For example, the following number block has a single dummy input
 that contains a single number field.

-<Image alt="A number block with a dummy input and a number field." src="/blockly/images/block-anatomy/dummy-input-simple.png" srcDark="/blockly/images/block-anatomy/dummy-input-simple-dark.png" />
+<Image alt="A number block with a dummy input and a number field." src="/images/block-anatomy/dummy-input-simple.png" srcDark="/images/block-anatomy/dummy-input-simple-dark.png" />

 As a more complex example, consider a block that adds two numbers together. This
 could be built from a single dummy input with three fields (number, label,
 number):

-<Image alt="An addition block built from a dummy input with three fields." src="/blockly/images/block-anatomy/dummy-input-1-3.png" srcDark="/blockly/images/block-anatomy/dummy-input-1-3-dark.png" />
+<Image alt="An addition block built from a dummy input with three fields." src="/images/block-anatomy/dummy-input-1-3.png" srcDark="/images/block-anatomy/dummy-input-1-3-dark.png" />

 or three dummy inputs, each with a single field:

-<Image alt="An addition block built from three dummy inputs, each wieht a single field." src="/blockly/images/block-anatomy/dummy-input-3-1.png" srcDark="/blockly/images/block-anatomy/dummy-input-3-1-dark.png" />
+<Image alt="An addition block built from three dummy inputs, each wieht a single field." src="/images/block-anatomy/dummy-input-3-1.png" srcDark="/images/block-anatomy/dummy-input-3-1-dark.png" />

 ### End-of-row inputs

@@ -151,7 +151,7 @@ connection. For example, here is the addition block built from an end-of-row
 input with two fields and a dummy input with one field. The end-of-row input
 forces the dummy input to be rendered in a new row.

-<Image alt="An addition block split into two rows by an end-of-row input." src="/blockly/images/block-anatomy/end-of-row-inputs.png" srcDark="/blockly/images/block-anatomy/end-of-row-inputs-dark.png" />
+<Image alt="An addition block split into two rows by an end-of-row input." src="/images/block-anatomy/end-of-row-inputs.png" srcDark="/images/block-anatomy/end-of-row-inputs-dark.png" />

 ### Value inputs

@@ -166,7 +166,7 @@ The following block replaces the number fields in the addition block with input
 connections. It is built from two value inputs -- the first does not contain any
 fields and the second contains a label field. Both end in input connections.

-<Image alt="An addition block with two value inputs." src="/blockly/images/block-anatomy/value-inputs-addition.png" srcDark="/blockly/images/block-anatomy/value-inputs-addition-dark.png" />
+<Image alt="An addition block with two value inputs." src="/images/block-anatomy/value-inputs-addition.png" srcDark="/images/block-anatomy/value-inputs-addition-dark.png" />

 ### Statement inputs

@@ -176,13 +176,13 @@ stack of statement blocks inside your block. For example, consider the following
 repeat block. The second row of this block consists of a statement input with a
 single label field and a next connection.

-<Image alt="A repeat block with a statement input to nest repeated statements." src="/blockly/images/block-anatomy/statement-input-repeat.png" srcDark="/blockly/images/block-anatomy/statement-input-repeat-dark.png" />
+<Image alt="A repeat block with a statement input to nest repeated statements." src="/images/block-anatomy/statement-input-repeat.png" srcDark="/images/block-anatomy/statement-input-repeat-dark.png" />

 Statement inputs are always rendered in their own row. You can see this in the
 following if-then-else block, which has a value input in its first row and
 statement inputs in the next two rows.

-<Image alt="An if-then-else block with separate statement inputs for then and else statements." src="/blockly/images/block-anatomy/statement-input-ite.png" srcDark="/blockly/images/block-anatomy/statement-input-ite-dark.png" />
+<Image alt="An if-then-else block with separate statement inputs for then and else statements." src="/images/block-anatomy/statement-input-ite.png" srcDark="/images/block-anatomy/statement-input-ite-dark.png" />

 ### Inline versus external inputs

@@ -196,7 +196,7 @@ inputs.](/images/set-inputs-inline.png)

 When you create a custom block, you can specify which to use or let Blockly
 decide for you. For more information, see [Inline vs. external
-inputs](/blockly/guides/create-custom-blocks/define/inline-vs-external).
+inputs](/guides/create-custom-blocks/define/inline-vs-external).

 ### Go play!

@@ -211,10 +211,10 @@ In addition to inputs, connections, and fields, blocks can have one or more
 block-level comments, or displaying the mutator UI. For example, here is a block
 with a comment icon and its associated editor.

-<Image alt="A block with a comment icon and an open comment editor." src="/blockly/images/block-anatomy/comment-icon.png" srcDark="/blockly/images/block-anatomy/comment-icon-dark.png" />
+<Image alt="A block with a comment icon and an open comment editor." src="/images/block-anatomy/comment-icon.png" srcDark="/images/block-anatomy/comment-icon-dark.png" />

 For more information, see
-[Icons](/blockly/guides/create-custom-blocks/icons/overview).
+[Icons](/guides/create-custom-blocks/icons/overview).

 ## Blocks and JavaScript objects

@@ -70,15 +70,15 @@ Because the definition functions are mixed in to the block object:

 *   The `this` keyword in definition functions refers to the block object. That
    is, it can be used to access the public methods and properties in the
-    [`Block`](/blockly/reference/js/blockly.block_class) (or
-    [`BlockSvg`](/blockly/reference/js/blockly.blocksvg_class)) class.
+    [`Block`](/reference/js/blockly.block_class) (or
+    [`BlockSvg`](/reference/js/blockly.blocksvg_class)) class.

 Blockly defines a small number of functions you can use to customize blocks. The
 most common of these is `init`, which Blockly calls to initialize a block and
 which is used to define the block's look and feel. For a complete list, see the
 function-valued properties in the
-[`Block`](/blockly/reference/js/blockly.block_class#properties) and
-[`BlockSvg`](/blockly/reference/js/blockly.blocksvg_class#properties) classes.
+[`Block`](/reference/js/blockly.block_class#properties) and
+[`BlockSvg`](/reference/js/blockly.blocksvg_class#properties) classes.
 These properties effectively form an interface for block definitions to
 implement; all of them are optional.

@@ -94,9 +94,9 @@ There are several different ways to create block definitions:
 *   Use the Blockly Developer Tools to define the look and feel of your block.
    Copy the generated JSON or JavaScript to your code and add custom code as
    needed. For more information, see [Blockly Developer
-    Tools](/blockly/guides/create-custom-blocks/blockly-developer-tools).
+    Tools](/guides/create-custom-blocks/blockly-developer-tools).
 *   Find a similar block, copy its definition, and modify it as needed. For more
    information, see [Modify existing
-    definitions](/blockly/guides/create-custom-blocks/define/modify-definitions).
+    definitions](/guides/create-custom-blocks/define/modify-definitions).
 *   Write a block definition by hand. For more information, see [JSON and
-    JavaScript](/blockly/guides/create-custom-blocks/define/json-and-js).
+    JavaScript](/guides/create-custom-blocks/define/json-and-js).
@@ -29,7 +29,7 @@ resources associated with the block that are no longer needed.
  ```
  
  In JSON, define a `destroy` hook with a
-  [mixin](/blockly/guides/create-custom-blocks/define/extensions#mixins).
+  [mixin](/guides/create-custom-blocks/define/extensions#mixins).
  </TabItem>
  <TabItem value="javascript" label="JavaScript">
  ```js
@@ -40,7 +40,7 @@ Blockly.Extensions.register(
 Extensions have to be "registered" so that they can be associated with a string
 key. Then you can assign this string key to the `extensions` property of your
 block type's [JSON
-definition](/blockly/guides/create-custom-blocks/define/json-and-js) to apply
+definition](/guides/create-custom-blocks/define/json-and-js) to apply
 the extension to the block.

 ```js
@@ -71,7 +71,7 @@ best. Assuming Blockly makes the right choice, leaving this field undefined
 is preferable since different language translations can automatically have
 different modes. See the example of `"set %1 to %2"` (external inputs) and
 `"put %2 in %1"` (inline inputs) in [Interpolation token
-order](/blockly/guides/create-custom-blocks/define/structure-json#interpolation-token-order).
+order](/guides/create-custom-blocks/define/structure-json#interpolation-token-order).

 Use inline inputs when a block is likely to have small inputs such as numbers.
 The user can toggle this option through the context menu.
@@ -12,11 +12,11 @@ import TabItem from '@theme/TabItem';
 Blockly has two ways of defining blocks: JSON objects, which use key-value
 pairs, and JavaScript functions, which call Blockly's API. The JSON format is
 preferred because it [simplifies
-localization](/blockly/guides/configure/web/translations#json-message-interpolation)
+localization](/guides/configure/web/translations#json-message-interpolation)
 and is easier to read and write. However, it cannot be used to directly define
 advanced features such as mutators or validators. These must be written in
 JavaScript, usually as
-[extensions](/blockly/guides/create-custom-blocks/define/extensions).
+[extensions](/guides/create-custom-blocks/define/extensions).

 :::info
 The "JSON" objects are, in fact, plain JavaScript objects. They are
@@ -60,7 +60,7 @@ can be defined in JSON or JavaScript as follows.
 ```

 `defineBlocksWithJsonArray` converts each JSON object into a
-[block definition object](/blockly/guides/create-custom-blocks/define/block-definitions)
+[block definition object](/guides/create-custom-blocks/define/block-definitions)
 with an `init` function. It stores these objects in `Blockly.Blocks`.

 </TabItem>
@@ -84,7 +84,7 @@ Blockly.Blocks['string_length'] = {
 ```

 Because
-[block definition objects](/blockly/guides/create-custom-blocks/define/block-definitions)
+[block definition objects](/guides/create-custom-blocks/define/block-definitions)
 are mixed in to block objects, the keyword `this` refers to the actual block
 being created.

@@ -160,7 +160,7 @@ This section summarizes the objects and functions used to define custom blocks.

 ### Blockly.Blocks

-[`Blockly.Blocks`](/blockly/reference/js/blockly.blocks_variable) is an object
+[`Blockly.Blocks`](/reference/js/blockly.blocks_variable) is an object
 that stores block definitions. Its keys are block type names and its values are
 block definition objects. Use `Blockly.Blocks` when defining blocks with
 JavaScript:
@@ -188,7 +188,7 @@ Blockly.Blocks['my_block'].setColour(150);

 ### defineBlocksWithJsonArray

-[`defineBlocksWithJsonArray`](/blockly/reference/js/blockly.common_namespace.defineblockswithjsonarray_1_function)
+[`defineBlocksWithJsonArray`](/reference/js/blockly.common_namespace.defineblockswithjsonarray_1_function)
 accepts an array of JSON objects, creates block definitions from them, and adds
 them to `Blockly.Blocks`.

@@ -211,7 +211,7 @@ Blockly.common.defineBlocksWithJsonArray([

 ### createBlockDefinitionsFromJsonArray and defineBlocks

-[`createBlockDefinitionsFromJsonArray`](/blockly/reference/js/blockly.common_namespace.createblockdefinitionsfromjsonarray_1_function)
+[`createBlockDefinitionsFromJsonArray`](/reference/js/blockly.common_namespace.createblockdefinitionsfromjsonarray_1_function)
 accepts an array of JSON objects and returns an object that maps block type
 names to block definitions. This is generally used with `defineBlocks`, which
 adds the block definitions to `Blockly.Blocks`.
@@ -238,7 +238,7 @@ Blockly.common.defineBlocks(myBlockDefinitions);

 ### Block.jsonInit

-[`jsonInit`](/blockly/reference/js/blockly.block_class.jsoninit_1_method)
+[`jsonInit`](/reference/js/blockly.block_class.jsoninit_1_method)
 accepts a JSON object and calls the corresponding methods on `Block`. For
 example, a JSON object with the key-value pair `colour: 150` results in a call
 to `this.setColour(150)`. Use `jsonInit` in an `init` function to load a JSON
@@ -32,8 +32,8 @@ monkeypatching and forking the code. Both are strongly discouraged, as you run
 the risk of breaking code that depends on the monkeypatched or forked code. Both
 techniques also make it difficult to integrate updates and bug fixes. For more
 information, see [What about
-monkeypatching?](/blockly/guides/programming/using_blockly_apis#what-about-monkeypatching)
-and [Fork Blockly](/blockly/guides/programming/forking_blockly).
+monkeypatching?](/guides/programming/using_blockly_apis#what-about-monkeypatching)
+and [Fork Blockly](/guides/programming/forking_blockly).

 ### Subclass an existing definition

@@ -62,7 +62,7 @@ magically replace just one line. There are several problems with this:
    function to copy -- it's generated at run time.
 *   It requires you to define your block using JavaScript, which may [cause
    problems with
-    localization](/blockly/guides/configure/web/translations#json-message-interpolation).
+    localization](/guides/configure/web/translations#json-message-interpolation).

 ### Overwrite the results of init

@@ -82,7 +82,7 @@ Blockly.Blocks['logic_null'].init = function() {
 Unfortunately, this is less useful that it seems. For example:

 *   Broadening [connection
-    checks](/blockly/guides/create-custom-blocks/inputs/connection-checks) or
+    checks](/guides/create-custom-blocks/inputs/connection-checks) or
    applying a less-restrictive field validator may invalidate assumptions made
    by block-code generators and event handlers.

@@ -90,7 +90,7 @@ Unfortunately, this is less useful that it seems. For example:
    field validators and may break event handlers. It may also be extremely
    difficult to do for localized blocks because different locales may result in
    blocks with [different types and orders of inputs and
-    fields](/blockly/guides/configure/web/translations#json-message-interpolation).
+    fields](/guides/configure/web/translations#json-message-interpolation).

 ### Overwrite a key-value pair in a JSON definition

@@ -168,7 +168,7 @@ definition](#overwrite-a-key-value-pair-in-a-json-definition).
 ### Reuse functions

 Blocks may define a number of [standard
-functions](/blockly/guides/create-custom-blocks/define/block-definitions#how-block-definitions-work),
+functions](/guides/create-custom-blocks/define/block-definitions#how-block-definitions-work),
 such as block-level event handlers, custom tooltips, field validators, and the
 functions used by mutators, as well as functions that provide custom behavior,
 such as a function that sets field values from external data, like the current
@@ -194,6 +194,6 @@ easier than writing and maintaining multiple blocks.

 If you have a set of blocks that represent different variations of the same
 programming structure, you may be able to create a single block that uses a
-[mutator](/blockly/guides/create-custom-blocks/mutators). For example, the
+[mutator](/guides/create-custom-blocks/mutators). For example, the
 built-in `controls_if` block can represent multiple variations of `if-then-else`
 statements.
@@ -13,16 +13,16 @@ import TabItem from '@theme/TabItem';
 In this document, we'll discuss how to use JavaScript to define the inputs and
 fields (including labels) in your block. If you're not familiar with these
 terms, see [Anatomy of a
-block](/blockly/guides/create-custom-blocks/define/block-anatomy) before
+block](/guides/create-custom-blocks/define/block-anatomy) before
 proceeding.

 You can also define your inputs, fields, and connections [in
-JSON](/blockly/guides/create-custom-blocks/define/structure-json).
+JSON](/guides/create-custom-blocks/define/structure-json).

 ## Append inputs

 The JavaScript API includes an `append` method for each [input
-type](/blockly/guides/create-custom-blocks/define/block-anatomy#inputs):
+type](/guides/create-custom-blocks/define/block-anatomy#inputs):

 <Tabs groupId="javascript">
  <TabItem value="javascript" label="JavaScript" default>
@@ -45,7 +45,7 @@ type](/blockly/guides/create-custom-blocks/define/block-anatomy#inputs):
  ```
  </TabItem>
 </Tabs>
-<Image alt='A block with four rows. The first row has the labels "for each" and "item" and a variable dropdown with "x" chosen. The second row has the label "in list" and a value input. The third row has the label "do" and a statement input. And the last row has the label "end".' src="/blockly/images/append-input.png" className="appendInputImg" />
+<Image alt='A block with four rows. The first row has the labels "for each" and "item" and a variable dropdown with "x" chosen. The second row has the label "in list" and a value input. The third row has the label "do" and a statement input. And the last row has the label "end".' src="/images/append-input.png" className="appendInputImg" />

 Each `appendInput` method can take an identifier string, which is used by code
 generators to retrieve code for the block connected to the input. Code
@@ -75,7 +75,7 @@ are three built-in methods used for configuring inputs.

 Once an input has been created and appended to a block with `appendInput`, one
 may optionally append any number of
-[fields](/blockly/guides/create-custom-blocks/define/block-anatomy#fields) to
+[fields](/guides/create-custom-blocks/define/block-anatomy#fields) to
 the input. These fields
 are often used as labels to describe what each input is for.

@@ -135,7 +135,7 @@ class name so that the label may be styled using a CSS rule.
 The `setCheck` method is used for type-checking connections. If given
 an argument of null, the default, then this input may be connected to any block.
 See [Connection
-checks](/blockly/guides/create-custom-blocks/inputs/connection-checks) for
+checks](/guides/create-custom-blocks/inputs/connection-checks) for
 details.

 ## Align fields
@@ -161,4 +161,4 @@ When a block is rendered in right-to-left mode (e.g. Arabic and Hebrew), left
 and right are reversed. Thus `Blockly.inputs.Align.RIGHT` would align fields to
 the left.

-[custom-inputs]: /blockly/guides/create-custom-blocks/inputs/creating-custom-inputs
+[custom-inputs]: /guides/create-custom-blocks/inputs/creating-custom-inputs
@@ -13,11 +13,11 @@ import Image from '@site/src/components/Image';
 In this document, we'll discuss how to use JSON to define the inputs, fields
 (including labels), and connections in your block. If you're not familiar with
 these terms, see [Anatomy of a
-block](/blockly/guides/create-custom-blocks/define/block-anatomy) before
+block](/guides/create-custom-blocks/define/block-anatomy) before
 proceeding.

 You can also define your inputs, fields, and connections [in
-JavaScript](/blockly/guides/create-custom-blocks/define/structure-js).
+JavaScript](/guides/create-custom-blocks/define/structure-js).

 ## Overview

@@ -57,10 +57,10 @@ is defined by the following JSON:
  </TabItem>
 </Tabs>
 The first interpolation token (`%1`) represents a [variable
-field](/blockly/guides/create-custom-blocks/fields/built-in-fields/variable)
+field](/guides/create-custom-blocks/fields/built-in-fields/variable)
 (`type: "field_variable"`). It is described by the first object in the `args0`
 array. The second token (`%2`) represents the input connection at the end of a
-[value input](/blockly/guides/create-custom-blocks/define/block-anatomy#value-inputs)
+[value input](/guides/create-custom-blocks/define/block-anatomy#value-inputs)
 (`type: "input_value"`). It is described by the second object in the `args0`
 array.

@@ -91,7 +91,7 @@ are created from them.
 This creates a single value input with three fields: a label (`"set"`), a
 variable field, and another label (`"to"`).

-<Image alt="Map the message to a value input with three fields." src="/blockly/images/structure-json/set-one-to-two.png" srcDark="/blockly/images/structure-json/set-one-to-two-dark.png"/>
+<Image alt="Map the message to a value input with three fields." src="/images/structure-json/set-one-to-two.png" srcDark="/images/structure-json/set-one-to-two-dark.png"/>

 ### Example 2

@@ -111,7 +111,7 @@ variable field, and another label (`"to"`).
 This creates two value inputs. The first has no fields and the second has one
 field (`"+"`).

-<Image alt="Map the message to two value inputs." src="/blockly/images/structure-json/one-plus-two.png" srcDark="/blockly/images/structure-json/one-plus-two-dark.png"/>
+<Image alt="Map the message to two value inputs." src="/images/structure-json/one-plus-two.png" srcDark="/images/structure-json/one-plus-two-dark.png"/>

 ### Example 3

@@ -132,12 +132,12 @@ field (`"+"`).
 This creates:

 *   A value input with no fields,
-*   An [end-of-row input](/blockly/guides/create-custom-blocks/define/block-anatomy#end-of-row-inputs)
+*   An [end-of-row input](/guides/create-custom-blocks/define/block-anatomy#end-of-row-inputs)
        with a label field (`"+"`), which causes the following value input to be
    rendered on a new row, and
 *   A value input with no fields.

-<Image alt="Map the message to two value inputs and an end-of-row input." src="/blockly/images/structure-json/one-plus-two-three.png" srcDark="/blockly/images/structure-json/one-plus-two-three-dark.png"/>
+<Image alt="Map the message to two value inputs and an end-of-row input." src="/images/structure-json/one-plus-two-three.png" srcDark="/images/structure-json/one-plus-two-three-dark.png"/>

 ## Dummy input at end of message

@@ -159,7 +159,7 @@ for you. For example, instead of defining a `lists_isEmpty` block like this:
  </TabItem>
 </Tabs>

-<Image alt="Map the message to a value input and an automatically created dummy input." src="/blockly/images/structure-json/is-empty-dummy.png" srcDark="/blockly/images/structure-json/is-empty-dummy-dark.png"/>
+<Image alt="Map the message to a value input and an automatically created dummy input." src="/images/structure-json/is-empty-dummy.png" srcDark="/images/structure-json/is-empty-dummy-dark.png"/>

 you can let Blockly add the dummy input and define it like this:

@@ -176,7 +176,7 @@ you can let Blockly add the dummy input and define it like this:
  </TabItem>
 </Tabs>

-<Image alt="Map the message to a value input and an automatically created dummy input." src="/blockly/images/structure-json/is-empty.png" srcDark="/blockly/images/structure-json/is-empty-dark.png"/>
+<Image alt="Map the message to a value input and an automatically created dummy input." src="/images/structure-json/is-empty.png" srcDark="/images/structure-json/is-empty-dark.png"/>

 The automatic addition of a tailing dummy input allows translators to change
 `message` without needing to modify the arguments that describe the
@@ -241,7 +241,7 @@ is to use more than one `message` and `args` properties:
 </Tabs>

 <Image alt="Map the message to a value input and an automatically created dummy input and the message to a statement
-input." src="/blockly/images/structure-json/controls-repeat-ext.png" srcDark="/blockly/images/structure-json/controls-repeat-ext-dark.png"/>
+input." src="/images/structure-json/controls-repeat-ext.png" srcDark="/images/structure-json/controls-repeat-ext-dark.png"/>

 Any number of `message`, `args`, and `implicitAlign` properties may be defined
 in the JSON format, starting with 0 and incrementing sequentially. Note that the
@@ -273,7 +273,7 @@ inputs.

 The ability to change the order of the interpolation tokens in a message makes
 localization easier. For more information, see [JSON message
-interpolation](/blockly/guides/configure/web/translations#json-message-interpolation).
+interpolation](/guides/configure/web/translations#json-message-interpolation).

 ## Text handling

@@ -298,7 +298,7 @@ string with an end-of-row input.
  </TabItem>
 </Tabs>

-<Image alt="Map the newline character to an end-of-row input." src="/blockly/images/structure-json/newline-character.png" srcDark="/blockly/images/structure-json/newline-character-dark.png"/>
+<Image alt="Map the newline character to an end-of-row input." src="/images/structure-json/newline-character.png" srcDark="/images/structure-json/newline-character-dark.png"/>

 ## Arguments arrays

@@ -313,17 +313,17 @@ Every object in the arguments array has a
 `type` string. The rest of the parameters vary depending on the type:


- * [**Fields**](/blockly/guides/create-custom-blocks/fields/overview):
-   * [`field_input`](/blockly/guides/create-custom-blocks/fields/built-in-fields/text-input)
-   * [`field_dropdown`](/blockly/guides/create-custom-blocks/fields/built-in-fields/dropdown)
-   * [`field_checkbox`](/blockly/guides/create-custom-blocks/fields/built-in-fields/checkbox)
+ * [**Fields**](/guides/create-custom-blocks/fields/overview):
+   * [`field_input`](/guides/create-custom-blocks/fields/built-in-fields/text-input)
+   * [`field_dropdown`](/guides/create-custom-blocks/fields/built-in-fields/dropdown)
+   * [`field_checkbox`](/guides/create-custom-blocks/fields/built-in-fields/checkbox)
   * [`field_colour`](https://www.npmjs.com/package/@blockly/field-colour)
-   * [`field_number`](/blockly/guides/create-custom-blocks/fields/built-in-fields/number)
+   * [`field_number`](/guides/create-custom-blocks/fields/built-in-fields/number)
   * [`field_angle`](https://www.npmjs.com/package/@blockly/field-angle)
-   * [`field_variable`](/blockly/guides/create-custom-blocks/fields/built-in-fields/variable)
-   * [`field_label`](/blockly/guides/create-custom-blocks/fields/built-in-fields/label)
-   * [`field_image`](/blockly/guides/create-custom-blocks/fields/built-in-fields/image).
- * [**Inputs**](/blockly/guides/create-custom-blocks/define/block-anatomy#inputs):
+   * [`field_variable`](/guides/create-custom-blocks/fields/built-in-fields/variable)
+   * [`field_label`](/guides/create-custom-blocks/fields/built-in-fields/label)
+   * [`field_image`](/guides/create-custom-blocks/fields/built-in-fields/image).
+ * [**Inputs**](/guides/create-custom-blocks/define/block-anatomy#inputs):
   * `input_value`
   * `input_statement`
   * `input_dummy`
@@ -367,5 +367,5 @@ An `alt` object may have its own `alt` object, thus allowing for chaining.
 Ultimately, if Blockly cannot create an object in the `args0` array (after
 attempting any `alt` objects) then that object is simply skipped.

-[custom-inputs]: /blockly/guides/create-custom-blocks/inputs/creating-custom-inputs
-[custom-fields]: /blockly/guides/create-custom-blocks/fields/customizing-fields/creating
+[custom-inputs]: /guides/create-custom-blocks/inputs/creating-custom-inputs
+[custom-fields]: /guides/create-custom-blocks/fields/customizing-fields/creating
@@ -23,7 +23,7 @@ to a block with no output connector. A statement block will usually have both
 a previous connection and a next connection.

 `nextStatement` and `previousStatement` connections can be
-[typed](/blockly/guides/create-custom-blocks/inputs/connection-checks),
+[typed](/guides/create-custom-blocks/inputs/connection-checks),
 but this feature is not utilized by standard blocks.

 ### Next Connection
@@ -31,7 +31,7 @@ but this feature is not utilized by standard blocks.
 Creates a point at the bottom of the block, so that other statements can be
 stacked below it.  A block with a next connection but no previous connection
 usually represents an event, and can be configured to render with
-[a hat](/blockly/guides/design/applications#event-driven-program).
+[a hat](/guides/design/applications#event-driven-program).

 ![A block with no fields and a tab on the
 bottom.](/images/set-next-statement.png)
@@ -33,17 +33,17 @@ Editable fields may show a rich editor when clicked.

 Editable fields include:

-+ [Checkbox](/blockly/guides/create-custom-blocks/fields/built-in-fields/checkbox)
+ [Checkbox](/guides/create-custom-blocks/fields/built-in-fields/checkbox)
 + [Colour](https://www.npmjs.com/package/@blockly/field-colour)
-+ [Dropdown](/blockly/guides/create-custom-blocks/fields/built-in-fields/dropdown)
-+ [Number](/blockly/guides/create-custom-blocks/fields/built-in-fields/number)
-+ [Text Input](/blockly/guides/create-custom-blocks/fields/built-in-fields/text-input)
+ [Dropdown](/guides/create-custom-blocks/fields/built-in-fields/dropdown)
+ [Number](/guides/create-custom-blocks/fields/built-in-fields/number)
+ [Text Input](/guides/create-custom-blocks/fields/built-in-fields/text-input)

 Non-editable fields include:

-+ [Label](/blockly/guides/create-custom-blocks/fields/built-in-fields/label)
-+ [Label Serializable](/blockly/guides/create-custom-blocks/fields/built-in-fields/label-serializable)
-+ [Image](/blockly/guides/create-custom-blocks/fields/built-in-fields/image)
+ [Label](/guides/create-custom-blocks/fields/built-in-fields/label)
+ [Label Serializable](/guides/create-custom-blocks/fields/built-in-fields/label-serializable)
+ [Image](/guides/create-custom-blocks/fields/built-in-fields/image)

 ## Serialization

@@ -53,17 +53,17 @@ fields' values are usually not dynamic, so they are usually not serialized.

 Serialized fields include:

-+ [Checkbox](/blockly/guides/create-custom-blocks/fields/built-in-fields/checkbox)
-+ [Colour](/blockly/guides/create-custom-blocks/fields/built-in-fields/colour)
-+ [Dropdown](/blockly/guides/create-custom-blocks/fields/built-in-fields/dropdown)
-+ [Number](/blockly/guides/create-custom-blocks/fields/built-in-fields/number)
-+ [Text Input](/blockly/guides/create-custom-blocks/fields/built-in-fields/text-input)
-+ [Label Serializable](/blockly/guides/create-custom-blocks/fields/built-in-fields/label-serializable)
+ [Checkbox](/guides/create-custom-blocks/fields/built-in-fields/checkbox)
+ [Colour](/guides/create-custom-blocks/fields/built-in-fields/colour)
+ [Dropdown](/guides/create-custom-blocks/fields/built-in-fields/dropdown)
+ [Number](/guides/create-custom-blocks/fields/built-in-fields/number)
+ [Text Input](/guides/create-custom-blocks/fields/built-in-fields/text-input)
+ [Label Serializable](/guides/create-custom-blocks/fields/built-in-fields/label-serializable)

 Non-serialized fields include:

-+ [Label](/blockly/guides/create-custom-blocks/fields/built-in-fields/label)
-+ [Image](/blockly/guides/create-custom-blocks/fields/built-in-fields/image)
+ [Label](/guides/create-custom-blocks/fields/built-in-fields/label)
+ [Image](/guides/create-custom-blocks/fields/built-in-fields/image)

 Note how the Label Serializable field is not editable, but is serializable. This
 means that it can only be edited programmatically, rather than through a
@@ -120,4 +120,4 @@ fields.
 Accessibility mode: users may be using a screenreader or similar technology to
 interact with Blockly.  The text of the field may be read out to the user.

-[field-generator]: /blockly/guides/create-custom-blocks/code-generation/block-code#get-field-values
+[field-generator]: /guides/create-custom-blocks/code-generation/block-code#get-field-values
@@ -116,7 +116,7 @@ This is a global property, so it will modify all checkbox fields when set.
 ## Creating a checkbox validator

 :::note
-For information on validators in general see [Validators](/blockly/guides/create-custom-blocks/fields/validators).
+For information on validators in general see [Validators](/guides/create-custom-blocks/fields/validators).
 :::

 A checkbox field's value is either `'TRUE'` or `'FALSE'` so a validator should
@@ -198,7 +198,7 @@ Blockly.Extensions.register('flag_with_text_extension',
 ```

 This is done using a JSON
-[extension](/blockly/guides/create-custom-blocks/define/extensions).
+[extension](/guides/create-custom-blocks/define/extensions).
 </TabItem>
 <TabItem value="javascript" label="JavaScript">
 ```js
@@ -281,7 +281,7 @@ Blockly.Extensions.register('dynamic_menu_extension',
 ```

 This is done using a JSON
-[extension](/blockly/guides/create-custom-blocks/define/extensions).
+[extension](/guides/create-custom-blocks/define/extensions).
 </TabItem>
 <TabItem value="javascript" label="JavaScript">
 ```js
@@ -544,7 +544,7 @@ just insert a space where the break should be. For example `'訪問 中國'` and
 ## Creating a dropdown validator

 :::note
-For information on validators in general see [Validators](/blockly/guides/create-custom-blocks/fields/validators).
+For information on validators in general see [Validators](/guides/create-custom-blocks/fields/validators).
 :::

 A dropdown field's value is a language-neutral string, so any validators must
@@ -79,7 +79,7 @@ Image fields are not serializable.
 ## Click handler

 :::note
-For information on validators in general see [Validators](/blockly/guides/create-custom-blocks/fields/validators).
+For information on validators in general see [Validators](/guides/create-custom-blocks/fields/validators).
 :::

 The image field does not accept a validator; instead it explicitly accepts a
@@ -88,7 +88,7 @@ can act like buttons that exist on blocks.

 The on click handler can be set in the [JavaScript Constructor](#creation) or
 using the
-[`setOnClickHandler`](/blockly/reference/js/blockly.fieldimage_class.setonclickhandler_1_method)
+[`setOnClickHandler`](/reference/js/blockly.fieldimage_class.setonclickhandler_1_method)
 function.

 Here is an example of an on click handler that collapses the block when
@@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem';

 # Serializable label fields

-Serializable labels work exactly the same as [normal labels](/blockly/guides/create-custom-blocks/fields/built-in-fields/label)
+Serializable labels work exactly the same as [normal labels](/guides/create-custom-blocks/fields/built-in-fields/label)
 except they also serialize to XML. They should only be used if you are editing
 the content of a label programmatically, and wish it to serialize to XML.

@@ -74,7 +74,7 @@ collapsed.](/images/fields/label/collapsed.png)
  ```
  </TabItem>
 </Tabs>
-The [`appendField`](/blockly/reference/js/blockly.input_class.appendfield_1_method)
+The [`appendField`](/reference/js/blockly.input_class.appendfield_1_method)
 function accepts both `FieldLabel` objects and, more commonly, strings to create
 labels.

@@ -86,7 +86,7 @@ Both default to an empty string.
 Label fields are not serializable.

 If you would like your label to be serialized, because it is being changed
-programmatically, see the [Serializable Label](/blockly/guides/create-custom-blocks/fields/built-in-fields/label-serializable)
+programmatically, see the [Serializable Label](/guides/create-custom-blocks/fields/built-in-fields/label-serializable)
 field.

 ## Validators
@@ -105,7 +105,7 @@ The `value` should cast to a number. If it does not 0 will be used.
 ## Constraints

 Constraints can be set in the field definition, or by using the
-[setConstraints](/blockly/reference/js/blockly.fieldnumber_class.setconstraints_1_method)
+[setConstraints](/reference/js/blockly.fieldnumber_class.setconstraints_1_method)
 function.

 ### Minimum value
@@ -11,18 +11,18 @@ image: images/blockly_banner.png

 Blockly provides a number of prebuilt fields that you can use when defining a
 block. There are also a number of fields available as
-[plugins](/blockly/guides/programming/plugin_overview).
+[plugins](/guides/programming/plugin_overview).

 Built-in fields:

-+ [Checkbox](/blockly/guides/create-custom-blocks/fields/built-in-fields/checkbox)
-+ [Dropdown](/blockly/guides/create-custom-blocks/fields/built-in-fields/dropdown)
-+ [Image](/blockly/guides/create-custom-blocks/fields/built-in-fields/image)
-+ [Label](/blockly/guides/create-custom-blocks/fields/built-in-fields/label)
-+ [Serializable label](/blockly/guides/create-custom-blocks/fields/built-in-fields/label-serializable)
-+ [Number](/blockly/guides/create-custom-blocks/fields/built-in-fields/number)
-+ [Text input](/blockly/guides/create-custom-blocks/fields/built-in-fields/text-input)
-+ [Variables](/blockly/guides/create-custom-blocks/fields/built-in-fields/variable)
+ [Checkbox](/guides/create-custom-blocks/fields/built-in-fields/checkbox)
+ [Dropdown](/guides/create-custom-blocks/fields/built-in-fields/dropdown)
+ [Image](/guides/create-custom-blocks/fields/built-in-fields/image)
+ [Label](/guides/create-custom-blocks/fields/built-in-fields/label)
+ [Serializable label](/guides/create-custom-blocks/fields/built-in-fields/label-serializable)
+ [Number](/guides/create-custom-blocks/fields/built-in-fields/number)
+ [Text input](/guides/create-custom-blocks/fields/built-in-fields/text-input)
+ [Variables](/guides/create-custom-blocks/fields/built-in-fields/variable)

 Plugin fields:

@@ -119,7 +119,7 @@ This applies to individual fields. If you want to modify all fields change the
 ## Creating a text input validator

 :::note
-For information on validators in general see [Validators](/blockly/guides/create-custom-blocks/fields/validators).
+For information on validators in general see [Validators](/guides/create-custom-blocks/fields/validators).
 :::

 A text input field's value is a string, so any validators must accept a string
@@ -115,7 +115,7 @@ types, and an optional default type.
    to an empty string, meaning the initial variable will be flexibly typed.

 → For more information on strict typing, see
-[Type Checks](/blockly/guides/create-custom-blocks/inputs/connection-checks).
+[Type Checks](/guides/create-custom-blocks/inputs/connection-checks).

 ## Serialization

@@ -172,7 +172,7 @@ types, and an optional default type.
 ## Creating a variable validator

 :::note
-For information on validators in general see [Validators](/blockly/guides/create-custom-blocks/fields/validators).
+For information on validators in general see [Validators](/guides/create-custom-blocks/fields/validators).
 :::

 A variable field's value is a string, so any validators must accept a string and
@@ -180,7 +180,7 @@ return a string, `null`, or `undefined`.

 Here's an example of a validator that only accepts some predefined variables as
 options. These variables would need to be defined with the
-[`Workspace.getVariableMap().createVariable`](/blockly/reference/js/blockly.ivariablemap_interface.createvariable_1_methodsignature)
+[`Workspace.getVariableMap().createVariable`](/reference/js/blockly.ivariablemap_interface.createvariable_1_methodsignature)
 function when the workspace is loaded.

 ```js
@@ -9,7 +9,7 @@ import Image from '@site/src/components/Image';
 # Create a custom field

 Before creating a new field type, consider if one of the [other
-methods](/blockly/guides/create-custom-blocks/fields/customizing-fields/overview)
+methods](/guides/create-custom-blocks/fields/customizing-fields/overview)
 for customizing fields suits your needs. If your application needs to store a
 new value type, or you wish to create a new UI for an existing value type, you
 probably need to create a new field type.
@@ -36,7 +36,7 @@ To create a new field, do the following:

 This section assumes that you have read and are familiar with the contents in
 [Anatomy of a
-Field](/blockly/guides/create-custom-blocks/fields/anatomy-of-a-field).
+Field](/guides/create-custom-blocks/fields/anatomy-of-a-field).

 For an example of a custom field see the [Custom Fields
 demo](https://raspberrypifoundation.github.io/blockly-samples/examples/pitch-field-demo/)
@@ -46,7 +46,7 @@ demo](https://raspberrypifoundation.github.io/blockly-samples/examples/pitch-fie

 The field's constructor is responsible for setting up the field's initial value
 and optionally setting up a [local
-validator](/blockly/guides/create-custom-blocks/fields/validators). The custom
+validator](/guides/create-custom-blocks/fields/validators). The custom
 field's constructor is called during the source block initialization regardless
 of whether the source block is defined in JSON or JavaScript. So, the custom
 field doesn't have access to the source block during construction.
@@ -72,7 +72,7 @@ default `Field` class, that value is `null`. If you don't want that default
 value, then be sure to pass a suitable value. The validator parameter is only
 present for editable fields and is typically marked as optional. Learn more
 about validators in the [Validators
-docs](/blockly/guides/create-custom-blocks/fields/validators).
+docs](/guides/create-custom-blocks/fields/validators).

 ### Structure

@@ -85,13 +85,13 @@ The logic inside of your constructor should follow this flow:
    constructor. Editable fields must be serializable, and fields are editable
    by default, so you should probably set this property to true unless you know
    it shouldn't be serializable.
-1.  Optional: Apply additional customization (for example, [Label fields](/blockly/guides/create-custom-blocks/fields/built-in-fields/label)
+1.  Optional: Apply additional customization (for example, [Label fields](/guides/create-custom-blocks/fields/built-in-fields/label)
    allow a css class to be passed, which is then applied to the text).

 ## JSON and registration

 In [JSON block
-definitions](/blockly/guides/create-custom-blocks/define/json-and-js), fields
+definitions](/guides/create-custom-blocks/define/json-and-js), fields
 are described by a string (e.g. `field_number`, `field_textinput`). Blockly
 maintains a map from these strings to field objects, and calls `fromJson` on the
 appropriate object during construction.
@@ -105,9 +105,9 @@ Blockly.fieldRegistry.register('field_generic', GenericField);

 You also need to define your `fromJson` function. Your implementation should
 first dereference any [references to localization
-tokens](/blockly/guides/configure/web/translations#use-localization-tokens-in-json)
+tokens](/guides/configure/web/translations#use-localization-tokens-in-json)
 using
-[`replaceMessageReferences`](/blockly/reference/js/blockly.utils_namespace.parsing_namespace.replacemessagereferences_1_function),
+[`replaceMessageReferences`](/reference/js/blockly.utils_namespace.parsing_namespace.replacemessagereferences_1_function),
 and then pass the values to the constructor.

 ```js
@@ -120,7 +120,7 @@ GenericField.fromJson = function(options) {
 :::note
 Local validators are not currently supported when using a JSON definition.
 But they can be applied via an
-[extension](/blockly/guides/create-custom-blocks/define/extensions).
+[extension](/guides/create-custom-blocks/define/extensions).
 :::

 ## Initializing
@@ -145,7 +145,7 @@ elements you can use the `createBorderRect_` or `createTextElement_` functions.
 #### Customizing DOM construction

 If your field is a generic text field (e.g. [Text
-Input](/blockly/guides/create-custom-blocks/fields/built-in-fields/text-input)),
+Input](/guides/create-custom-blocks/fields/built-in-fields/text-input)),
 DOM construction will be handled for you. Otherwise you will need to override
 the `initView` function to create the DOM elements that you will need during
 future rendering of your field.
@@ -166,7 +166,7 @@ The requirements of a field's on-block display are:
 +   All DOM elements must stay inside the reported dimensions of the field.

 See the
-[Rendering](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#updating-the-on-block-display)
+[Rendering](/guides/create-custom-blocks/fields/customizing-fields/creating#updating-the-on-block-display)
 section for more details on customizing and updating your on-block display.

 #### Adding Text Symbols
@@ -180,7 +180,7 @@ field's degree symbol) you can append the symbol element (usually contained in a

 By default fields register tooltip events, and mousedown events (to be used for
 showing
-[editors](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#creating-an-editor)).
+[editors](/guides/create-custom-blocks/fields/customizing-fields/creating#creating-an-editor)).
 If you want to listen for other kinds of events (e.g. if you want to handle
 dragging on a field) you should override the field's `bindEvents_` function.

@@ -222,11 +222,11 @@ When overriding `bindEvents_` you should always call the base function.
 :::

 To bind to an event you should generally use the
-[`Blockly.utils.browserEvents.conditionalBind`](/blockly/reference/js/blockly.utils_namespace.browserevents_namespace.conditionalbind_1_function)
+[`Blockly.utils.browserEvents.conditionalBind`](/reference/js/blockly.utils_namespace.browserevents_namespace.conditionalbind_1_function)
 function. This method of binding events filters out secondary touches during
 drags. If you want your handler to run even in the middle of an in-progress drag
 you can use the
-[`Blockly.browserEvents.bind`](/blockly/reference/js/blockly.utils_namespace.browserevents_namespace.bind_1_function)
+[`Blockly.browserEvents.bind`](/reference/js/blockly.utils_namespace.browserevents_namespace.bind_1_function)
 function.

 ## Disposing
@@ -239,28 +239,28 @@ When overriding dispose you should always call the base function.
 :::

 If you correctly [initialized the
-view](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#initializing)
+view](/guides/create-custom-blocks/fields/customizing-fields/creating#initializing)
 of your field (by appending all DOM elements to the `fieldGroup_`), then the
 field's DOM will be disposed of automatically.

 ## Value Handling

 → For information about a field's value vs its text see [Anatomy of a
-field](/blockly/guides/create-custom-blocks/fields/anatomy-of-a-field).
+field](/guides/create-custom-blocks/fields/anatomy-of-a-field).

 ### Validation order

-<Image alt="Flowchart describing the order in which validators are run" src="/blockly/images/validation-order.svg" srcDark="/blockly/images/validation-order-dark.svg"/>
+<Image alt="Flowchart describing the order in which validators are run" src="/images/validation-order.svg" srcDark="/images/validation-order-dark.svg"/>

 ### Implementing a class validator

 Fields should only accept certain values. For example, number fields should only
 accept numbers, colour fields should only accept colours etc. This is ensured
 through class and local
-[validators](/blockly/guides/create-custom-blocks/fields/validators). The class
+[validators](/guides/create-custom-blocks/fields/validators). The class
 validator follows the same rules as local validators except that it is also run
 in the
-[constructor](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#implementing-a-constructor)
+[constructor](/guides/create-custom-blocks/fields/customizing-fields/creating#implementing-a-constructor)
 and, as such, it should not reference the source block.

 To implement your field's class validator, override the `doClassValidation_`
@@ -286,7 +286,7 @@ If the value passed to a field with `setValue` is valid you will receive a
 `doValueUpdate_` callback. By default the `doValueUpdate_` function:

 +   Sets the `value_` property to `newValue`.
-+   Sets the [`isDirty_`](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#isdirty_)
+   Sets the [`isDirty_`](/guides/create-custom-blocks/fields/customizing-fields/creating#isdirty_)
    property to `true`.

 If you simply need to store the value, and don't want to do any custom handling,
@@ -319,15 +319,15 @@ If the value passed to the field with `setValue` is invalid you will receive a
 `doValueInvalid_` callback. By default the `doValueInvalid_` function does
 nothing. This means that by default invalid values will not be shown. It also
 means the field will not be rerendered, because the
-[`isDirty_`](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#isdirty_)
+[`isDirty_`](/guides/create-custom-blocks/fields/customizing-fields/creating#isdirty_)
 property will not be set.

 If you wish to display invalid values you should override `doValueInvalid_`.
 Under most circumstances you should set a `displayValue_` property to the
 invalid value, set
-[`isDirty_`](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#isdirty_)
+[`isDirty_`](/guides/create-custom-blocks/fields/customizing-fields/creating#isdirty_)
 to `true`, and [override
-render_](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#updating-the-on-block-display)
+render_](/guides/create-custom-blocks/fields/customizing-fields/creating#updating-the-on-block-display)
 for the on-block display to update based on the `displayValue_` instead of the
 `value_`.

@@ -376,19 +376,19 @@ at the end of the `doClassValidation_` function, if any individual property is
 invalid, the value is cached to the `cacheValidatedValue_` property before
 returning `null` (invalid). Caching the object with individually validated
 properties allows the
-[`doValueInvalid_`](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#handling-invalid-values)
+[`doValueInvalid_`](/guides/create-custom-blocks/fields/customizing-fields/creating#handling-invalid-values)
 function to handle them separately, simply by doing a
 `!this.cacheValidatedValue_.property` check, instead of re-validating each
 property individually.

 This pattern for validating multi-part values can also be used in [local
-validators](/blockly/guides/create-custom-blocks/fields/validators) but
+validators](/guides/create-custom-blocks/fields/validators) but
 currently there is no way to enforce this pattern.

 ### isDirty_

 `isDirty_` is a flag used in the
-[`setValue`](/blockly/reference/js/blockly.field_class.setvalue_1_method)
+[`setValue`](/reference/js/blockly.field_class.setvalue_1_method)
 function, as well as other parts of the field, to tell if the field needs to be
 re-rendered. If the field's display value has changed, `isDirty_` should usually
 be set to `true`.
@@ -397,11 +397,11 @@ be set to `true`.

 → For information about where a field's text is used and how it is different
 from the field's value, see [Anatomy of a
-field](/blockly/guides/create-custom-blocks/fields/anatomy-of-a-field).
+field](/guides/create-custom-blocks/fields/anatomy-of-a-field).

 If the text of your field is different than the value of your field, you should
 override the
-[`getText`](/blockly/reference/js/blockly.field_class.gettext_1_method)function
+[`getText`](/reference/js/blockly.field_class.gettext_1_method)function
 to provide the correct text.

 ```js
@@ -423,7 +423,7 @@ in your editor by wrapping it one of two special `div`s, called the

 :::info
 Updates to an editor's display should be handled during
-[rendering](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#updating-the-on-block-display),
+[rendering](/guides/create-custom-blocks/fields/customizing-fields/creating#updating-the-on-block-display),
 instead of being handled immediately. This allows validators to intercept the
 value before it is applied.
 :::
@@ -437,7 +437,7 @@ the `DropDownDiv`.

 ![Image of angle picker](/images/angle-picker.png)

-The [`WidgetDiv`](/blockly/reference/js/blockly.widgetdiv_namespace) is used to
+The [`WidgetDiv`](/reference/js/blockly.widgetdiv_namespace) is used to
 provide editors that do not live inside of a box. Number fields use the
 `WidgetDiv` to cover the field with an HTML text input box. While the
 `DropDownDiv` handles positioning for you, the `WidgetDiv` does not. Elements
@@ -445,7 +445,7 @@ will need to be manually positioned. The coordinate system is in pixel
 coordinates relative to the top left of the window. The text input editor is a
 good example of the `WidgetDiv`.

-<Image alt="Image of text input editor" src="/blockly/images/text-input-editor.png" width={200} />
+<Image alt="Image of text input editor" src="/images/text-input-editor.png" width={200} />

 ### DropDownDiv sample code

@@ -523,7 +523,7 @@ function when passing a dispose function, as shown in the above `DropDownDiv`
 and `WidgetDiv` examples.

 → For information about disposing not specific to disposing of editors see
-[Disposing](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#disposing).
+[Disposing](/guides/create-custom-blocks/fields/customizing-fields/creating#disposing).

 ## Updating the on-block display

@@ -538,14 +538,14 @@ Common examples include:
 :::info
 The field should never call `render_` directly. Instead rerenders
 should be triggered by setting the
-[`isDirty_`](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#isdirty_)
+[`isDirty_`](/guides/create-custom-blocks/fields/customizing-fields/creating#isdirty_)
 property to `true`.
 :::

 ### Defaults

 The default `render_` function sets the display text to the result of the
-[`getDisplayText_`](/blockly/reference/js/blockly.field_class.getdisplaytext__1_method)
+[`getDisplayText_`](/reference/js/blockly.field_class.getdisplaytext__1_method)
 function. The `getDisplayText_` function returns the field's `value_` property
 cast to a string, after it has been truncated to respect the maximum text
 length.
@@ -556,14 +556,14 @@ works for your field, you do not need to override `render_`.
 If the default text behavior works for your field, but your field's on-block
 display has additional static elements, you can call the default `render_`
 function, but you will still need to override it to [update the field's
-size](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#updating-size).
+size](/guides/create-custom-blocks/fields/customizing-fields/creating#updating-size).

 If the default text behavior does not work for your field, or your field's
 on-block display has additional dynamic elements, you will need to [customize
 the `render_`
-function](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#customizing-rendering).
+function](/guides/create-custom-blocks/fields/customizing-fields/creating#customizing-rendering).

-<Image alt="Flowchart describing how to make decision of whether to override render_" src="/blockly/images/override-render-decision.svg" srcDark="/blockly/images/override-render-decision-dark.svg"/>
+<Image alt="Flowchart describing how to make decision of whether to override render_" src="/images/override-render-decision.svg" srcDark="/images/override-render-decision-dark.svg"/>

 ### Customizing rendering

@@ -574,9 +574,9 @@ display text, to changing image elements, to updating background colours.
 All DOM attribute changes are legal, the only two things to remember are:

 1.  DOM *creation* should be handled during
-    [initialization](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#initializing),
+    [initialization](/guides/create-custom-blocks/fields/customizing-fields/creating#initializing),
    as it is more efficient.
-1.  You should always [update the `size_`](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#updating-size)
+1.  You should always [update the `size_`](/guides/create-custom-blocks/fields/customizing-fields/creating#updating-size)
    property to match the on-block display's size.

 ```js
@@ -620,7 +620,7 @@ render_() {
 :::info
 Always use `this.textContent_.nodeValue` to update the display text
 of your field. This helps support [text
-symbols](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#adding-text-symbols).
+symbols](/guides/create-custom-blocks/fields/customizing-fields/creating#adding-text-symbols).
 :::

 ### Updating size
@@ -677,7 +677,7 @@ applyColour() {
 :::note
 You may want to cache the colours in the `applyColour` method, so you can
 apply them to your
-[editor](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#creating-an-editor)
+[editor](/guides/create-custom-blocks/fields/customizing-fields/creating#creating-an-editor)
 when it is activated.
 :::

@@ -711,7 +711,7 @@ Messing with a field's cursor is fragile.

 ## Serialization

-[Serialization](/blockly/guides/configure/web/serialization) is about saving the
+[Serialization](/guides/configure/web/serialization) is about saving the
 state of your field so that it can be reloaded into the workspace later.

 The state of your workspace always includes the field's value, but it could also
@@ -832,7 +832,7 @@ it can be interacted with. It defaults to `true`.
 The `SERIALIZABLE` property determines if the field should be serialized. It
 defaults to `false`. If this property is `true`, you may need to provide
 serialization and deserialization functions (see
-[Serialization](/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#serialization)).
+[Serialization](/guides/create-custom-blocks/fields/customizing-fields/creating#serialization)).

 :::info
 If `EDITABLE` is `true` for your field `SERIALIZABLE` should also be
@@ -877,5 +877,5 @@ Before version 12.0.0, the `CURSOR` property determined the cursor. Its
 value was a valid CSS cursor string.
 :::

-[serializer]: /blockly/guides/configure/web/serialization#serializer-hooks
-[field-generator]: /blockly/guides/create-custom-blocks/code-generation/overview#block-code-generators
+[serializer]: /guides/configure/web/serialization#serializer-hooks
+[field-generator]: /guides/create-custom-blocks/code-generation/overview#block-code-generators
--- a/Show More
+++ b/Show More