How can i change default providing block style and message?

Dave

unread,

Mar 12, 2025, 2:01:38 PM3/12/25

to Blockly

I can't figure it out.
```

{
      kind: "category",
      name: "Control",
      categorystyle: "control_category",
      contents: [
        {type: "wait", kind: "block"},
        {
          type: "controls_if",
          kind: "block",
        },
        {
          type: "controls_repeat_ext",
          kind: "block",
          inputs: {
            TIMES: {
              shadow: {
                type: "math_number",
                fields: {NUM: 10},
              },
            },
          },
        },
    // ...
},

```

Aaron Dodson

unread,

Mar 13, 2025, 2:58:49 PM3/13/25

to Blockly

Hi,

The documentation on themes provides an overview of restyling blocks, mostly with regard to colors. For changing messages, I'd suggest creating a custom block of your own rather than overriding the messages/translations displayed on the built-in blocks, but the latter is possible; the translation docs have a brief example. If you could elaborate on what specifically you're wanting to style (colors, shapes, renderers, something else?) I'd be happy to point you towards more specific examples.

- Aaron

Message has been deleted

Dave

unread,

Mar 15, 2025, 11:10:50 AM3/15/25

to Blockly

I would like to follow scratch styles. Simple and predefined colors similar to Scratch.
Images and define codes.

from this

to this

code

    {
      kind: "category",
      name: "Operators",
      categorystyle: "operators_category",
      contents: [
        {
          kind: "block",
          type: "math_number",
          fields: {NUM: 123},
        },
        {type: "text", kind: "block", fields: {TEXT: ""}},
        {
          kind: "block",
          type: "math_arithmetic",
          fields: {OP: "ADD"},
          inputs: {
            A: {
              shadow: {
                type: "math_number",
                fields: {NUM: 1},
              },
            },
            B: {
              shadow: {
                type: "math_number",
                fields: {NUM: 1},
              },
            },
          },
        },
        {
          kind: "block",
          type: "math_random_int",
          inputs: {
            FROM: {
              shadow: {
                type: "math_number",
                fields: {NUM: 1},
              },
            },
            TO: {
              shadow: {
                type: "math_number",
                fields: {NUM: 100},
              },
            },
          },
        },
        {kind: "block", type: "logic_compare", fields: {OP: "EQ"}},
        {kind: "block", type: "logic_operation", fields: {OP: "AND"}},
        {kind: "block", type: "logic_negate"},
        {kind: "block", type: "logic_boolean", fields: {BOOL: "TRUE"}},
        {kind: "block", type: "logic_ternary"},
        {kind: "block", type: "string_sum"},
        {
          kind: "block",
          type: "text_append",
          fields: {name: "item"},
          inputs: {
            TEXT: {
              shadow: {
                type: "text",
                fields: {TEXT: ""},
              },
            },
          },
        },
        {
          kind: "block",
          type: "text_charAt",
          fields: {WHERE: "FROM_START"},
          inputs: {
            VALUE: {
              block: {
                type: "variables_get",
                fields: {VAR: {name: "text"}},
              },
            },
          },
        },
        {
          kind: "block",
          type: "text_length",
          inputs: {
            VALUE: {
              shadow: {
                type: "text",
                fields: {TEXT: "abc"},
              },
            },
          },
        },
        {
          kind: "block",
          type: "text_indexOf",
          fields: {END: "FIRST"},
          inputs: {
            VALUE: {
              block: {
                type: "variables_get",
                fields: {VAR: {name: "text"}},
              },
            },
            FIND: {
              shadow: {
                type: "text",
                fields: {TEXT: "abc"},
              },
            },
          },
        },
        {
          kind: "block",
          type: "math_round",
          fields: {OP: "ROUND"},
          inputs: {
            NUM: {
              shadow: {
                type: "math_number",
                fields: {NUM: 3.1},
              },
            },
          },
        },
        {
          kind: "block",
          type: "math_single",
          fields: {OP: "ABS"},
          inputs: {
            NUM: {

              shadow: {
                type: "math_number",
                fields: {

                  NUM: 0,

      ],
    },

Dave

unread,

Mar 17, 2025, 1:36:59 AM3/17/25

to Blockly

I figure it out! Thanks!
override basic theme to change default blocks message and style.

references
- https://github.com/google/blockly/blob/master/core/theme/classic.ts
- https://developers.google.com/blockly/guides/create-custom-blocks/localize-blocks
- https://developers.google.com/blockly/guides/configure/web/appearance/themes

Reply all

Reply to author

Forward