Skip to main content

Block translations

If you want to make it possible to translate your custom block, you need to use Tripetto's built-in gettext functions (based on the GNU gettext system) for all the static translatable labels and texts in your block.

🏗️ Builder part​

For the builder part of your block, you need to pull all your static labels and texts through one of the translation functions. The builder package contains the following functions for translating the builder part of a block:

  • _ (the default function to use)
  • _n (the default function to use for plural forms)
  • npgettext
  • pgettext
tip

In most situations you just want to use the _ and _n functions.

Example​

Here is an example of a translatable block:

info

Pay special attention to the block label in the @tripetto decorator. We need to define that property using a getter. This assures that the correct translation is used for the block label.

import { _, tripetto, slots, definition, editor, isBoolean, NodeBlock, Slots, Forms } from "@tripetto/builder";
import icon from "./icon.svg";

@tripetto({
  type: "node",
  identifier: "text-input",
  get label() {
    return _("Text input");
  },
  icon
})
class TextInputBlock extends NodeBlock {
  @definition
  isMultiline?: boolean;

  // Add a field that holds a reference to the slot
  valueSlot!: Slots.String;

  @slots
  onSlots(): void {
    this.valueSlot = this.slots.static({
      type: Slots.String,
      reference: "value",
      label: _("Text input value")
    });
  }

  @editor
  onEdit(): void {
    this.editor.groups.general();
    this.editor.name();
    this.editor.placeholder();
    this.editor.groups.settings();
    this.editor.required(this.valueSlot);
    this.editor.alias(this.valueSlot);
    this.editor.exportable(this.valueSlot);

    this.editor.option({
      name: _("Input mode"),
      form: {
        title: _("Text input mode"),
        controls: [
          new Forms.Checkbox(
            _("Allow multi-line text input"),
            Forms.Checkbox.bind(this, "isMultiline", false, true)
          )
        ],
      },
      activated: isBoolean(this.isMultiline)
    });
  }
}

🏃 Runner part​

For the runner part, the procedure is identical to that for the builder part. You need to pull all your static labels and texts through one of the translation functions. The Runner library contains the following functions for translating the runner part of a block:

Stock runners

If you are building the runner part of a block for use in one of the stock runners, you should use the l10n property that is supplied to the render method, as shown in the following example:

import { tripetto, NodeBlock } from "@tripetto/runner";
import { namespace, IAutoscrollRenderProps, IAutoscrollRendering } from "@tripetto/runner-autoscroll";
import { ReactNode } from "react";

@tripetto({
    type: "node",
    namespace,
    identifier: "your-custom-block",
})
export class YourCustomBlock extends NodeBlock implements IAutoscrollRendering {
    render(props: IAutoscrollRenderProps): ReactNode {
        return (
            <>
                {props.l10n._("Welcome to your custom block!")}
            </>
        );
    }
}

🌎 Creating translations​

If you want to create translations for your block, you first need to generate the POT file for it. You can use the xgettext tool for that. This will extract all translatable strings from your block code. Have a look at the block boilerplate for an example of how to do that.

📂 Loading translations​

▶️ More information about loading builder part translations in the Builder localization guide.

▶️ More information about loading runner part translations in the Stock runner localization guide.