Define bloques personalizados

Los bloques son lo que usas para programar. Representan expresiones y sentencias en lenguajes de programación basados en texto.

Para obtener más información sobre los bloques y sus partes, consulta el glosario visual.

Definición de bloque

Una definición de bloque especifica las conexiones y los campos de las piezas del rompecabezas en tu bloque. La mayor parte del aspecto y el estilo de tus bloques se especifica de otras maneras. La cadena (por lo general, código) a la que se convierte tu bloque se define como un generador de código de bloque.

La forma más sencilla de definir bloques simples es con JSON.

En este fragmento de código, se define un bloque "avanzar" con conexiones anteriores y siguientes, y un campo para la distancia.

// Create the definition.
const definitions = Blockly.common.createBlockDefinitionsFromJsonArray([
  {
    // The type is like the "class name" for your block. It is used to construct
    // new instances. E.g. in the toolbox.
    type: 'my_custom_block',
    // The message defines the basic text of your block, and where inputs or
    // fields will be inserted.
    message0: 'move forward %1',
    args0: [
      // Each arg is associated with a %# in the message.
      // This one gets substituted for %1.
      {
        // The type specifies the kind of input or field to be inserted.
        type: 'field_number',
        // The name allows you to reference the field and get its value.
        name: 'FIELD_NAME',
      }
    ],
    // Adds an untyped previous connection to the top of the block.
    previousStatement: null,
    // Adds an untyped next connection to the bottom of the block.
    nextStatement: null,
  }
]);

// Register the definition.
Blockly.common.defineBlocks(definitions);

Un bloque para avanzar

Para obtener más información sobre cómo definir tus bloques y agregarlos a tu caja de herramientas, consulta Descripción general de los bloques personalizados.