Skip to content

Fix: Migrating every theme to TypeScript.#2474

Merged
cpcallen merged 11 commits into
RaspberryPiFoundation:masterfrom
tgbhy:master
May 21, 2025
Merged

Fix: Migrating every theme to TypeScript.#2474
cpcallen merged 11 commits into
RaspberryPiFoundation:masterfrom
tgbhy:master

Conversation

@tgbhy

@tgbhy tgbhy commented Dec 30, 2024

Copy link
Copy Markdown
Contributor

The basics

The details

Resolves

Fixes #2158

Proposed Changes

Migrate every theme sample to TypeScript.

Reason for Changes

It would be usable in TypeScript like explained in the fixed issue.

Test Coverage

Manually tested with a Windows 10 PC and Brave Browser.
I tested on using a default installation of Blockly and recreating the schema of each readme-media/Theme.png

@tgbhy tgbhy requested a review from a team as a code owner December 30, 2024 22:36
@tgbhy tgbhy requested review from cpcallen and removed request for a team December 30, 2024 22:36
@google-cla

google-cla Bot commented Dec 30, 2024

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@cpcallen cpcallen added the category: plugin Anything in the plugins folder label Jan 9, 2025
@cpcallen

cpcallen commented Jan 9, 2025

Copy link
Copy Markdown
Collaborator

Hi @tgbhy. Thanks for this useful PR! The changes look good but there are some additional steps needed before we can accept the PR:

  • You'll need to agree to the CLA.
  • eslint is unhappy about all the properties with underscores in their name. You'll need to disable this rule for these declarations.
  • You'll also need to run npm run format to run Prettier and thereby fix the formatting.

@tgbhy

tgbhy commented Jan 18, 2025

Copy link
Copy Markdown
Contributor Author

Working on it !

@tgbhy tgbhy requested a review from cpcallen January 19, 2025 11:07
Comment thread plugins/theme-deuteranopia/src/index.ts Outdated
Comment thread plugins/theme-deuteranopia/package.json Outdated
@tgbhy tgbhy requested a review from cpcallen February 17, 2025 17:06
Comment thread plugins/theme-dark/package-lock.json
Comment thread plugins/theme-dark/package.json Outdated
Comment thread plugins/theme-deuteranopia/package-lock.json
Comment thread plugins/theme-deuteranopia/src/index.ts Outdated
Comment thread plugins/theme-hackermode/package-lock.json
Comment thread plugins/theme-highcontrast/package-lock.json
Comment thread plugins/theme-modern/package-lock.json
Comment thread plugins/theme-tritanopia/package-lock.json
@tgbhy

tgbhy commented Feb 24, 2025

Copy link
Copy Markdown
Contributor Author

This is fine now ?

Comment thread plugins/theme-deuteranopia/src/index.ts Outdated
@tgbhy

tgbhy commented Mar 10, 2025

Copy link
Copy Markdown
Contributor Author

Wait, it's already the case ?
Where did you see that, it's already the case of being "colourBlocks" in every themes...

@tgbhy

tgbhy commented May 5, 2025

Copy link
Copy Markdown
Contributor Author

Bump here

@maribethb

Copy link
Copy Markdown
Contributor

Hi @tgbhy we can't merge this because renaming the properties will break them. I'm not sure how you tested the change, but the way themes work are that they correlate a category name to a set of styles. The category names like colour_blocks are set in core, so changing them here and not in core would break the theme as there is no category name called colourBlocks. And we are not interested in changing the category names in core.

We can accept this PR after you address Christopher's comment here https://github.com/google/blockly-samples/pull/2474/files#r1929130761

Please let us know if you have further questions. Thanks for your work on this and for following up!

@tgbhy

tgbhy commented May 9, 2025

Copy link
Copy Markdown
Contributor Author

oh okay, I don't know why it was working perfectly for me...
I'll do the change, you can come back in less than an hour I think ;)

@maribethb

Copy link
Copy Markdown
Contributor

You will need to fix this for all of the defaultBlockStyles and categoryStyles, not just the colour_blocks.

@tgbhy

tgbhy commented May 11, 2025

Copy link
Copy Markdown
Contributor Author

So wait, I need to do this only for defaultBlockStyle (-> default_block_style) and categoryStyles (-> category_style) ?
After that it's finish ?

Because I really don't understand why you ask me that because it was working fine for me but whatever, just confirm me that and I'll do the changes.

@maribethb

Copy link
Copy Markdown
Contributor

You can check how a theme is supposed to look on the published plugin showcase page. Here's what the highcontrast theme is supposed to look like, for example: https://google.github.io/blockly-samples/plugins/theme-highcontrast/test/index.html

You can test your change by running npm start from the plugin's directory. When I checkout your PR and run npm start from the highcontrast plugin, here's what I see:

Screenshot 2025-05-12 at 9 17 32 AM

All of the blocks are black and the toolbox is missing the little color stripe for the category. This means your theme is broken.

You can read more about how themes work here.

The properties in the theme like defaultBlockStyle and categoryStyle are supposed to be camel case. However, those properties are objects where the keys are arbitrary values set by the owner of the blocks. If an application owner creates their own block category and decides to call it mY_SpEcIaL_BlOcKs, that's what would have to go in as the object key, so that blockly can match that name from the toolbox definition to the theme definition. The themes you're editing provide values for the default blocks and categories that Blockly ships with (like logic_blocks, math_blocks, and so on). Since Blockly uses snake case for these values, the theme has to as well.

This PR shouldn't change any object keys as part of the change. You should revert all of those kinds of changes. If the key was previously logic_blocks it needs to remain that way. If the key was previously defaultBlockStyles it needs to remain that way. Does that help?

@tgbhy

tgbhy commented May 12, 2025

Copy link
Copy Markdown
Contributor Author

Okay thank you, I will do all the edits right now.

@tgbhy

tgbhy commented May 12, 2025

Copy link
Copy Markdown
Contributor Author

And done !

@tgbhy tgbhy requested a review from cpcallen May 12, 2025 17:38
@tgbhy

tgbhy commented May 14, 2025

Copy link
Copy Markdown
Contributor Author

Give me a sec I have an idea
I'm really sorry for this ^^'

@tgbhy

tgbhy commented May 14, 2025

Copy link
Copy Markdown
Contributor Author

And the work is done !
Sorry, I'll pay attention to that the next time ^^

@tgbhy

tgbhy commented May 19, 2025

Copy link
Copy Markdown
Contributor Author

Any news here ?

@cpcallen cpcallen left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Thanks for the changes; they look great—and sorry for the delayed review: we were busy with the Blockly v12 release.

@tgbhy

tgbhy commented May 21, 2025

Copy link
Copy Markdown
Contributor Author

No problem. Will it be merged now, or does it need more modifications?

@cpcallen cpcallen merged commit 78ab1fc into RaspberryPiFoundation:master May 21, 2025
6 of 8 checks passed
@cpcallen cpcallen mentioned this pull request May 21, 2025
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

category: plugin Anything in the plugins folder

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Convert theme plugins to ts

3 participants