Creating Helper Blocks

Learn how to implement and use helper blocks to enhance your extension's functionality and user experience.

What are Helper Blocks?

Helper blocks are reusable UI components that provide additional functionality to your main blocks. They can include dropdowns, input fields, or any other UI elements that help users configure and customize their blocks more effectively.

Creating Your First Helper Block

Learn the basic structure and implementation of a helper block

To create a helper block, you'll need to define its structure and behavior. Here's a basic example:

class MyHelperBlock extends HelperBlock {
  constructor() {
    super("my_helper");
    this.setTooltip("Select an option");
  }

  // Define the UI elements
  createField() {
    const dropdown = document.createElement("select");
    dropdown.className = "helper-dropdown";
    
    // Add options
    const options = ["Option 1", "Option 2", "Option 3"];
    options.forEach(opt => {
      const option = document.createElement("option");
      option.value = opt.toLowerCase();
      option.textContent = opt;
      dropdown.appendChild(option);
    });

    // Handle changes
    dropdown.addEventListener("change", (e) => {
      this.setValue(e.target.value);
    });

    return dropdown;
  }

  // Get the selected value
  getValue() {
    return this.field.value;
  }
}

Best Practices

Always provide clear tooltips for your helper blocks
Implement proper validation to prevent invalid inputs
Use consistent styling across your helper blocks
Handle edge cases and error states gracefully
Provide feedback to users when values change

Integration Tips

When integrating helper blocks into your extension, consider the following:

Initialize helper blocks when your extension loads
Register helper blocks with your workspace
Handle cleanup when helper blocks are removed
Maintain state consistency between blocks

Next Steps

Now that you understand helper blocks, try creating your own custom helpers to enhance your extension's functionality. Experiment with different UI elements and interactions to create a better user experience.