This is a Google Blockly Test

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">

  <script src="https://unpkg.com/google-blockly@1.0.0/blockly_compressed.js"></script>
  <script src="https://unpkg.com/google-blockly@1.0.0/javascript_compressed.js"></script>
  <script src="https://unpkg.com/google-blockly@1.0.0/blocks_compressed.js"></script>
  <script src="https://unpkg.com/google-blockly@1.0.0/msg/js/en.js"></script>

</head>

<body>

  <div class="container py-5">

    <h1 class="text-center">Blockly Test</h1>

    <div class="row my-3">
      <div class="col">
        <div id="blocklyDiv" class="blockly-container"></div>
      </div>
    </div>

    <div class="row my-3">
      <div class="col-md-8">
        <h2>Output</h2>
        <p id="code"></p>
      </div>
      <div class="col-md">
        <button type="button" class="btn btn-success" onclick="saveWorkspace();">Save</button>
        <button type="button" class="btn btn-info" onclick="restoreWorkspace();">Restore</button>
        <button type="button" class="btn btn-danger" onclick="deleteWorkspace();">Delete</button>
      </div>
    </div>

  </div>

  <xml id="toolbox" style="display: none">
    <category name="Variables" custom="VARIABLE" colour="330"></category>
    <category name="Functions" custom="PROCEDURE" colour="330"></category>
    <category name="Logic" colour="210">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_boolean"></block>
    </category>
    <category name="Loops" colour="120">
      <block type="controls_whileUntil"></block>
      <block type="controls_repeat_ext"></block>
      <block type="controls_for"></block>
    </category>
    <category name="Math" colour="230">
      <block type="math_number"></block>
      <block type="math_arithmetic"></block>
    </category>
    <category name="Functions" colour="290" custom="PROCEDURE"></category>
    <category name="Text" colour="150">
      <block type="text"></block>
      <block type="text_print"></block>
    </category>
    <category name="Electricity" colour="300">
      <block type="power_type"></block>
    </category>
    <category name="Conversions" colour="360">
      <block type="f_to_c"></block>
    </category>
  </xml>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="script.js"></script>
  <script src="custom-blocks.js"></script>

</body>

</html>

let workspacePlayground = Blockly.inject('blocklyDiv', {
      toolbox: document.getElementById('toolbox')
    });
    
function myUpdateFunction(event) {
  
  let code = Blockly.JavaScript.workspaceToCode(workspacePlayground);
  document.getElementById('code').innerHTML = code
  
}

workspacePlayground.addChangeListener(myUpdateFunction);

// save blocks
function saveWorkspace() {
  
  let xml = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
  let domToPretty = Blockly.Xml.domToPrettyText(xml);
  window.localStorage.setItem("myProgram", domToPretty);
  
}

// restore blocks
function restoreWorkspace() {
  
  let program = window.localStorage.getItem("myProgram");
  Blockly.mainWorkspace.clear();
  
  let textToDom = Blockly.Xml.textToDom(program);
  Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, textToDom);
  
}

// delete blocks
function deleteWorkspace() {
  
  window.localStorage.clear();
  
}

// Variables
const variables = ['voltage', 'current', 'temperature']

variables.forEach((item) => {
  Blockly.getMainWorkspace().createVariable(item);  
});

console.log(Blockly.JavaScript)

/* Styles go here */

.blockly-container {
  
  height: 80vh; 
  width: 100%;
  
}

This is a Test of Google Blockly library

// Calculate Power from Current and Voltage
Blockly.Blocks['power_type'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("power equals to");
    this.appendValueInput("current")
        .setCheck("Number")
        .appendField("current");
    this.appendDummyInput()
        .setAlign(Blockly.ALIGN_CENTRE)
        .appendField("by");
    this.appendValueInput("voltage")
        .setCheck("Number")
        .appendField("voltage");
    this.setInputsInline(true);
    this.setOutput(true, "Number");
    this.setColour(300);
 this.setTooltip("Calculate Power");
 this.setHelpUrl("");
  }
};

Blockly.JavaScript['power_type'] = function(block) {
  var value_current = Blockly.JavaScript.valueToCode(block, 'current', Blockly.JavaScript.ORDER_ATOMIC);
  var value_voltage = Blockly.JavaScript.valueToCode(block, 'voltage', Blockly.JavaScript.ORDER_ATOMIC);
  var code = '';
  
  if (value_current && value_voltage) {
    code = `${value_current} * ${value_voltage}`;
  }
  
  return [code, Blockly.JavaScript.ORDER_NONE];
};


// From Farenheit to Celsius conversion
Blockly.Blocks['f_to_c'] = {
  init: function() {
    this.appendValueInput("temperature")
        .setCheck("Number")
        .appendField("Farenheit");
    this.appendDummyInput()
        .appendField("to Celcius");
    this.setInputsInline(true);
    this.setOutput(true, "Number");
    this.setColour(360);
 this.setTooltip("Farenheit to Celsius Converter");
 this.setHelpUrl("");
  }
};

Blockly.JavaScript['f_to_c'] = function(block) {
  let value_temperature = Blockly.JavaScript.valueToCode(block, 'temperature', Blockly.JavaScript.ORDER_ATOMIC);
  let code = '';
  
  if (value_temperature) {
    code = `(${value_temperature} - 32) * (5/9)`;
  }
 
  // TODO: Change ORDER_NONE to the correct strength.
  return [code, Blockly.JavaScript.ORDER_NONE];
};