Espaço de trabalho de tamanho fixo

A maneira mais simples de colocar o Blockly em uma página da Web é injetá-lo em uma tag "div" vazia.

1. Acessar o código

Receba o código da maneira que funcionar melhor para seu aplicativo.

2. Definir a área

Adicione um div vazio em algum lugar no corpo da página e defina o tamanho dele:

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

3. Inserir o espaço de trabalho

Defina a estrutura da caixa de ferramentas:

const toolbox = {
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "controls_if"
    },
    {
      "kind": "block",
      "type": "controls_repeat_ext"
    },
    {
      "kind": "block",
      "type": "logic_compare"
    },
    {
      "kind": "block",
      "type": "math_number"
    },
    {
      "kind": "block",
      "type": "math_arithmetic"
    },
    {
      "kind": "block",
      "type": "text"
    },
    {
      "kind": "block",
      "type": "text_print"
    },
  ]
}

Por fim, chame o seguinte para injetar o Blockly no seu div definido.

const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

A variável workspace não é usada no momento, mas será importante mais tarde, quando você quiser salvar os blocos ou gerar código. Se mais de uma instância do Blockly for injetada na mesma página, verifique se cada espaço de trabalho retornado está armazenado em uma variável diferente.

Agora você pode testar a página em um navegador. O editor do Blockly vai preencher o div com sete blocos na caixa de ferramentas. Confira uma demonstração ao vivo.