Groups keyboard shortcuts have been updated
Dismiss
See shortcuts

Custom blocks with inheritance...

42 views
Skip to first unread message

Alan Smith

unread,
Apr 9, 2025, 11:39:03 AMApr 9
to Blockly
I have 2 custom blocks that are very similar and I would like to have them inherit from a parent block with only the differences defined.    

What is the best way to do this?  (I am using typescript)

Thanks in advance,

Alan

Ronald Bourret

unread,
Apr 9, 2025, 4:42:45 PMApr 9
to blo...@googlegroups.com
You can't really subclass block definitions. The reason for this is that block definitions are mixins, not classes. There is, for example, no way to overwrite a colour property because the definition does not have a colour property. Instead, it has an init function that calls setColour to set the colour property on the block, and there's no way to magically reach inside the init function and change just the call to setColour.

Depending on how the code is written, it is also generally not possible to overwrite individual JSON properties. For example, the JSON objects used to define built-in blocks are written as object-literal arguments in calls to createBlockDefinitionsFromJsonArray (e.g. [1]), so there is no way to change them without overwriting core code. The only way this would work is if the JSON was defined in a publicly available object that you could override before it was passed to initJson or one of the functions used to define blocks.

Instead, the recommended way to modify existing block definitions is to copy them (and their block-code generators), make the changes you want, and add the definition to Blockly.Blocks.



Ronald Bourret
Technical Writer (Provided by Synergis)



--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/43ca17f7-1267-4224-a97c-c3c1c647dc30n%40googlegroups.com.

Mark Friedman

unread,
Apr 9, 2025, 6:33:36 PMApr 9
to blo...@googlegroups.com
I'm going to take a somewhat different take on this.  Note that I think that Alan is talking about completely custom blocks, which affected my thinking about it a bit.

There's no reason that you couldn't simply define a "parent" object which contained all the common properties for the two custom block definitions and mixed that parent object into each of the two custom blocks using Object.assign or the spread operator. If you factor your functions well enough you can probably avoid redefining any of the "parent"'s functions in the custom blocks.

Am I missing something?

-Mark


Maribeth Moffatt

unread,
Apr 9, 2025, 7:42:03 PMApr 9
to Blockly
I think you are both right. You cannot do a traditional "inheritance," but it is very possible to reuse the same logic between multiple blocks like Mark described.

Another idea I'll mention is that if your two blocks are very similar, you might want to use a mutator or field to have one block that users can modify to change the functionality. An example is the logic block in core that can be switched between comparing "and" or "or", instead of having two separate blocks to do these logical comparisons. Hard to say if that would be a good fit without knowing more about your blocks, but wanted to mention it in case you had not considered it.

Maribeth

ewpa...@gmail.com

unread,
Apr 10, 2025, 4:44:29 PMApr 10
to Blockly
Another approach technique that is adjacent to what Mark proposes is to copy the information to the second block definition from the first. For example, in App Inventor's procedure blocks we define procedures_defnoreturn (line 72) and procedures_defreturn (line 493) and the latter is mostly references to functions of the same name on the former. Newer JS syntaxes can make this even easier (e.g., the object spread operator).

Cheers,
Evan
Reply all
Reply to author
Forward
0 new messages