How to customize the look and feel of blockly blocks

956 Views Asked by At

I am trying to customize the look and feel of blocks provided by framework Blockly.

Please see the link: Blockly Input Text

But as I understood and researched, I can only modify the color of particular block.

'blockStyles': {
    'my_block': {
      'colourPrimary': '#dedede',
      'colourSecondary': '#AD7BE9',
      'colourTertiary': '#CDB6E9'
    }
  }

Is there any way, I can modify block like shape, height, width, input text height / width.

Is there any option to add custom CSS like normal HTML div elements ?

Please let me know if anyone has faced similar problem.

1

There are 1 best solutions below

0
On

you can use Blockly Developer Tools instead of typing code js or JSON code it is a service provided by blockly to generate blocks using blockly blocks. there is a video to explain how to use it in the link. link: https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools and if you want to change the property of the block after you create them you can. this is documentation to update blocks: https://developers.google.com/blockly/guides/create-custom-blocks/fields/customizing-fields/upgrading