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 do corpo da página e defina o tamanho dele:

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

3. Injetar 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 div definido.

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

A variável workspace não é usada no momento, mas será importante mais tarde, quando 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 é 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.