Skip to content

docs: refactor toolbox codelab to use sample app#10115

Merged
zspriggs merged 16 commits into
RaspberryPiFoundation:mainfrom
zspriggs:codelabs-refactor
Jul 17, 2026
Merged

docs: refactor toolbox codelab to use sample app#10115
zspriggs merged 16 commits into
RaspberryPiFoundation:mainfrom
zspriggs:codelabs-refactor

Conversation

@zspriggs

@zspriggs zspriggs commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

The basics

The details

Proposed Changes

Refactors the "Customizing a Blockly toolbox" codelab to use the sample app as starter code, rather than custom starter code. This is one of the more extensive refactors, because the original codelab used an XML toolbox, but the sample app uses a JSON toolbox, so the codelab had to be changed accordingly in a few different places.

There are also a few other changes in this refactor that were made for consistency and/or clarity:

  • Moved setup of custom class from Setup step to new Make a Custom Category step. This makes this codelab more consistent with other codelabs, which have very minimal Setup steps that don't include any coding.
  • Added call to super() in setSelected() override and explained why. The old codelab set the ARIA state in the override without really explaining it, so I changed it to use super for slightly better form and added an explanation.
  • Changed Blockly logo to toolbox emoji. Previously the Blockly logo svg was shipped with the starter code, but since the starter code is now the sample app, I switched it to a toolbox emoji so that users don't have to deal with a separate download.

@zspriggs
zspriggs requested a review from a team as a code owner July 8, 2026 15:45
@zspriggs
zspriggs requested a review from maribethb July 8, 2026 15:45
@zspriggs
zspriggs requested a review from gonfunko July 15, 2026 20:59
@zspriggs
zspriggs removed the request for review from maribethb July 15, 2026 20:59
Comment thread packages/docs/docs/codelabs/custom-toolbox/codelab-overview.mdx Outdated
Comment thread packages/docs/docs/codelabs/custom-toolbox/setup.mdx
Comment thread packages/docs/docs/codelabs/custom-toolbox/setup.mdx Outdated
Comment thread packages/docs/docs/codelabs/custom-toolbox/add-a-custom-category.mdx Outdated
Comment thread packages/docs/docs/codelabs/custom-toolbox/add-a-custom-category.mdx Outdated
Comment thread packages/docs/docs/codelabs/custom-toolbox/adding-a-custom-toolbox-item.mdx Outdated
Comment on lines +15 to +16
import { CustomCategory, registerCustomCategory } from './custom_category.js';
import { ToolboxLabel, registerToolboxLabel } from './toolbox_label.js';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The classes themselves don't seem to be used and could be removed in favor of just importing the registration functions

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, and adjusted in the .mdx files too

Comment thread packages/docs/docs/codelabs/custom-toolbox/add-a-custom-category.mdx Outdated
Comment thread packages/docs/docs/codelabs/custom-toolbox/adding-a-custom-toolbox-item.mdx Outdated
Comment on lines +15 to +16
this.label.setAttribute('role', 'treeitem');
this.label.setAttribute('aria-roledescription', 'label');

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optional, but might be worth using Blockly.utils.aria here

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call, done here and in the .mdx file

Comment thread packages/docs/docs/codelabs/custom-toolbox/adding-a-custom-toolbox-item.mdx Outdated

@gonfunko gonfunko left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One minor nit but feel free to submit after, thanks!

Comment thread packages/docs/docs/codelabs/custom-toolbox/complete-code/src/toolbox_label.js Outdated
@zspriggs
zspriggs merged commit cf2a23c into RaspberryPiFoundation:main Jul 17, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants