feat: support cat-blocks as an optional theme #374

KManolov3 · 2025-11-04T15:14:45Z

Resolves

https://scratchfoundation.atlassian.net/browse/UEPR-416

Proposed Changes

Rename "theme" to "color mode" in most places in the code to better align with its current meaning.
Extract a reusable component for persistent editor settings
Add a new theme menu, with an option for cat-blocks

Reason for Changes

As part of the membership initiative, we want to reintroduce the cat blocks theme as an optional theme for supporters of Scratch

github-actions · 2025-11-04T15:17:40Z

Test report for scratch-gui

2 files ±0 62 suites ±0 9m 35s ⏱️ -33s
398 tests ±0 390 ✅ ±0 8 💤 ±0 0 ❌ ±0
416 runs ±0 408 ✅ ±0 8 💤 ±0 0 ❌ ±0

Results for commit a0dd45d. ± Comparison against base commit 9e87362.

This pull request removes 15 and adds 15 tests. Note that renamed tests count towards both.

Menu bar settings Theme picker shows themes ‑ Menu bar settings Theme picker shows themes
Menu bar settings Theme picker switches to high contrast ‑ Menu bar settings Theme picker switches to high contrast
Monitor Component it selects the correct colors based on dark mode theme ‑ Monitor Component it selects the correct colors based on dark mode theme
Monitor Component it selects the correct colors based on default theme ‑ Monitor Component it selects the correct colors based on default theme
themes block helpers bypasses updates if using the default theme ‑ themes block helpers bypasses updates if using the default theme
themes block helpers updates extension block colors based on theme ‑ themes block helpers updates extension block colors based on theme
themes block helpers updates extension block icon based on theme ‑ themes block helpers updates extension block icon based on theme
themes block helpers updates extension category based on theme ‑ themes block helpers updates extension category based on theme
themes core functionality provides the default theme colors ‑ themes core functionality provides the default theme colors
themes core functionality returns the dark mode ‑ themes core functionality returns the dark mode
…

Menu bar settings Color mode picker shows color modes ‑ Menu bar settings Color mode picker shows color modes
Menu bar settings Color mode picker switches to high contrast ‑ Menu bar settings Color mode picker switches to high contrast
Monitor Component it selects the correct colors based on dark mode ‑ Monitor Component it selects the correct colors based on dark mode
Monitor Component it selects the correct colors based on default color mode ‑ Monitor Component it selects the correct colors based on default color mode
color modes block helpers bypasses updates if using the default color mode ‑ color modes block helpers bypasses updates if using the default color mode
color modes block helpers updates extension block colors based on color mode ‑ color modes block helpers updates extension block colors based on color mode
color modes block helpers updates extension block icon based on color mode ‑ color modes block helpers updates extension block icon based on color mode
color modes block helpers updates extension category based on color mode ‑ color modes block helpers updates extension category based on color mode
color modes color mode persistence clears color mode when matching system preferences ‑ color modes color mode persistence clears color mode when matching system preferences
color modes color mode persistence persists color mode to cookie ‑ color modes color mode persistence persists color mode to cookie
…

♻️ This comment has been updated with latest results.

adzhindzhi

Great start! It does raise some UX questions, such as how we would toggle this on/off, where it would live in the UI, and whether we'd want to use it along with the high contrast theme (likely yes), etc. But that's not something we need to figure out now.

…nent

cwillisf · 2025-11-24T22:46:05Z

packages/scratch-gui/src/components/gui/gui.jsx

+    // TODO: Make this depend on membership status
    canChangeTheme: true,


I don't think any change is necessary right now, but I can imagine a world where everyone can change themes, but some specific themes are exclusive. It might be that the theme menu should show up if .some(theme => theme.isAvailable(me)) or something like that. That could work if, for example, we still want cat blocks for everyone once a year.

cwillisf · 2025-11-24T22:47:52Z

packages/scratch-gui/src/containers/blocks.jsx

    customProceduresVisible: state.scratchGui.customProcedures.active,
    workspaceMetrics: state.scratchGui.workspaceMetrics,
-    useCatBlocks: isTimeTravel2020(state)
+    useCatBlocks: isTimeTravel2020(state) || state.scratchGui.settings.theme === CAT_BLOCKS_THEME


cwillisf · 2025-11-24T22:49:22Z

packages/scratch-gui/src/lib/settings/color-mode/persistence.js

+// Technically what we are persisting is the color mode, but for historical reasons,
+// we should continue using 'scratchtheme' as the cookie key.
+const COOKIE_KEY = 'scratchtheme';


We might want to migrate this to a new key at some point, but I'd wait until we have a clearer picture of the future of themes and color modes first.

… poc/uepr-400-cat-blocks

github-actions · 2025-11-26T18:59:56Z

Test report for task-herder

14 tests ±0 14 ✅ ±0 0s ⏱️ ±0s
6 suites ±0 0 💤 ±0
1 files ±0 0 ❌ ±0

Results for commit a0dd45d. ± Comparison against base commit 9e87362.

♻️ This comment has been updated with latest results.

github-actions · 2025-11-26T19:00:07Z

Test report for scratch-svg-renderer

1 files ±0 60 suites ±0 0s ⏱️ ±0s
124 tests ±0 124 ✅ ±0 0 💤 ±0 0 ❌ ±0
276 runs ±0 275 ✅ ±0 1 💤 ±0 0 ❌ ±0

Results for commit a0dd45d. ± Comparison against base commit 9e87362.

♻️ This comment has been updated with latest results.

github-actions · 2025-11-26T19:00:15Z

Test report for scratch-render

1 files ±0 55 suites ±0 2s ⏱️ ±0s
209 tests ±0 209 ✅ ±0 0 💤 ±0 0 ❌ ±0
279 runs ±0 279 ✅ ±0 0 💤 ±0 0 ❌ ±0

Results for commit a0dd45d. ± Comparison against base commit 9e87362.

♻️ This comment has been updated with latest results.

github-actions · 2025-11-26T19:02:19Z

Test report for scratch-vm

1 files ±0 763 suites ±0 1m 4s ⏱️ -1s
1 666 tests ±0 1 666 ✅ ±0 0 💤 ±0 0 ❌ ±0
4 855 runs ±0 4 825 ✅ ±0 30 💤 ±0 0 ❌ ±0

Results for commit a0dd45d. ± Comparison against base commit 9e87362.

♻️ This comment has been updated with latest results.

cwillisf · 2025-11-26T20:24:26Z

Looks like there's a legitimate test failure related to the settings menu. I played around with it locally, and the language & color mode menus weren't consistently closing each other as they should. I think it's related to clicking the submenus rather than hovering over them.

…c/uepr-400-cat-blocks

KManolov3 · 2025-11-27T13:13:54Z

Looks like there's a legitimate test failure related to the settings menu. I played around with it locally, and the language & color mode menus weren't consistently closing each other as they should. I think it's related to clicking the submenus rather than hovering over them.

Yeah, that was my bad, I seem to have been a bit overzealous in refactoring 😅. I've returned the corresponding redux actions ensuring only one sibling menu is open.

feat: make cat-blocks a configurable theme

a33649e

KManolov3 requested a review from a team as a code owner November 4, 2025 15:14

KManolov3 requested review from adzhindzhi and cwillisf November 4, 2025 15:14

KManolov3 marked this pull request as draft November 4, 2025 15:16

KManolov3 changed the title ~~feat: make cat-blocks a configurable theme~~ poc: make cat-blocks a configurable theme Nov 4, 2025

adzhindzhi reviewed Nov 5, 2025

View reviewed changes

KManolov3 added 3 commits November 13, 2025 17:31

feat: adhere to scratch-blocks interface when passing theme

55f6bba

feat: rename theme to colorMode and abstract away a preferences compo…

a52a1e7

…nent

feat: add theme settings menu and a cat-blocks theme option

a702b4f

KManolov3 changed the title ~~poc: make cat-blocks a configurable theme~~ feat: make cat-blocks a configurable theme Nov 18, 2025

KManolov3 changed the title ~~feat: make cat-blocks a configurable theme~~ feat: support cat-blocks as an optional theme Nov 18, 2025

cwillisf approved these changes Nov 24, 2025

View reviewed changes

KManolov3 added 2 commits November 25, 2025 15:58

Merge remote-tracking branch 'origin/release/membership-program' into…

ded7a3f

… poc/uepr-400-cat-blocks

feat: implement optional themes functionality

bd17600

KManolov3 marked this pull request as ready for review November 26, 2025 14:05

fix: snapshot

4a5acba

adzhindzhi approved these changes Nov 26, 2025

View reviewed changes

KManolov3 and others added 3 commits November 26, 2025 17:09

fix: make theme availability check more explicit

e0e44ff

fix: extract check to gui component effect

ac43139

feat(deps): update scratch-blocks to v1.3.0

8d23bcb

KManolov3 added 3 commits November 27, 2025 12:11

fix: add color mode and theme menus to the redux menu control mechanism

8c2aa5e

Merge remote-tracking branch 'origin/poc/uepr-400-cat-blocks' into po…

6d30052

…c/uepr-400-cat-blocks

feat: introduce isFetchingUserData param to GUI

a0dd45d

KManolov3 changed the base branch from develop to release/membership-program November 27, 2025 10:44

KManolov3 merged commit b265755 into release/membership-program Nov 27, 2025
14 checks passed

github-actions bot locked and limited conversation to collaborators Nov 27, 2025

		// TODO: Make this depend on membership status
		canChangeTheme: true,

feat: support cat-blocks as an optional theme #374

feat: support cat-blocks as an optional theme #374

Uh oh!

Conversation

KManolov3 commented Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Resolves

Proposed Changes

Reason for Changes

Uh oh!

github-actions bot commented Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test report for scratch-gui

Uh oh!

adzhindzhi left a comment

Choose a reason for hiding this comment

Uh oh!

cwillisf Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

cwillisf Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

cwillisf Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

cwillisf Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test report for task-herder

Uh oh!

github-actions bot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test report for scratch-svg-renderer

Uh oh!

github-actions bot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test report for scratch-render

Uh oh!

github-actions bot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test report for scratch-vm

Uh oh!

cwillisf commented Nov 26, 2025

Uh oh!

KManolov3 commented Nov 27, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

KManolov3 commented Nov 4, 2025 •

edited

Loading

github-actions bot commented Nov 4, 2025 •

edited

Loading

github-actions bot commented Nov 26, 2025 •

edited

Loading

github-actions bot commented Nov 26, 2025 •

edited

Loading

github-actions bot commented Nov 26, 2025 •

edited

Loading

github-actions bot commented Nov 26, 2025 •

edited

Loading