Make strings translatable

.tx/config

@@ -109,3 +109,9 @@ file_filter = wagtail/contrib/simple_translation/locale/<lang>/LC_MESSAGES/djang
 source_file = wagtail/contrib/simple_translation/locale/en/LC_MESSAGES/django.po
 source_lang = en
 type = PO
+
+[wagtail.wagtailtypedtableblock]
+file_filter = wagtail/contrib/typed_table_block/locale/<lang>/LC_MESSAGES/django.po
+source_file = wagtail/contrib/typed_table_block/locale/en/LC_MESSAGES/django.po
+source_lang = en
+type = PO

client/src/entrypoints/contrib/typed_table_block/typed_table_block.js

@@ -38,6 +38,7 @@ export class TypedTableBlock {
       this.childBlockDefsByName[childBlockDef.name] = childBlockDef;
     });
 
+    const strings = this.blockDef.meta.strings;
     const dom = $(`
       <div class="typed-table-block ${h(this.blockDef.meta.classname || '')}">
         <input type="hidden" name="${h(prefix)}-column-count" data-column-count value="0">
@@ -47,14 +48,14 @@ export class TypedTableBlock {
           <thead>
             <tr><th>
               <button type="button" class="button button-small button-secondary" data-append-column>
-                Add columns
+                ${h(strings.ADD_COLUMNS)}
               </button>
             </th></tr>
           </thead>
           <tbody>
           </tbody>
         </table>
-        <button type="button" class="button button-small button-secondary" data-add-row>Add row</button>
+        <button type="button" class="button button-small button-secondary" data-add-row>${h(strings.ADD_ROW)}</button>
       </div>
     `);
     $(placeholder).replaceWith(dom);
@@ -151,7 +152,7 @@ export class TypedTableBlock {
     const headerRow = this.thead.children[0];
     // delete all header cells except for the final one containing the 'append column' button
     headerRow.replaceChildren(headerRow.lastElementChild);
-    this.appendColumnButton.text('Add columns');
+    this.appendColumnButton.text(this.blockDef.meta.strings.ADD_COLUMNS);
 
     // delete all body rows
     this.tbody.replaceChildren();
@@ -197,11 +198,12 @@ export class TypedTableBlock {
 
     column.headingInput = document.createElement('input');
     column.headingInput.name = this.prefix + '-column-' + column.id + '-heading';
-    column.headingInput.placeholder = 'Column heading';
+    column.headingInput.placeholder = this.blockDef.meta.strings.COLUMN_HEADING;
     newHeaderCell.appendChild(column.headingInput);
 
     const prependColumnButton = $(`<button type="button"
-      class="button button-small button-secondary prepend-column" title="Insert column here">+</button>`);
+      class="button button-small button-secondary prepend-column"
+      title="${h(this.blockDef.meta.strings.INSERT_COLUMN_HERE)}">+</button>`);
     $(newHeaderCell).append(prependColumnButton);
     prependColumnButton.on('click', () => {
       this.toggleAddColumnMenu(prependColumnButton, (chosenBlockDef) => {
@@ -210,7 +212,8 @@ export class TypedTableBlock {
     });
 
     const deleteColumnButton = $(`<button type="button"
-      class="button button-small button-secondary delete-column" title="Delete column">x</button>`);
+      class="button button-small button-secondary delete-column"
+      title="${h(this.blockDef.meta.strings.DELETE_COLUMN)}">x</button>`);
     $(newHeaderCell).append(deleteColumnButton);
     deleteColumnButton.on('click', () => {
       this.deleteColumn(column.position);
@@ -302,14 +305,15 @@ export class TypedTableBlock {
     controlCell.appendChild(row.positionInput);
 
     const prependRowButton = $(`<button type="button"
-      class="button button-small button-secondary prepend-row" title="Insert row here">+</button>`);
+      class="button button-small button-secondary prepend-row"
+      title="${h(this.blockDef.meta.strings.INSERT_ROW_HERE)}">+</button>`);
     $(controlCell).append(prependRowButton);
     prependRowButton.on('click', () => {
       this.insertRow(row.position);
     });
 
     const deleteRowButton = $(`<button type="button"
-      class="button button-small button-secondary" title="Delete row">x</button>`);
+      class="button button-small button-secondary" title="${h(this.blockDef.meta.strings.DELETE_ROW)}">x</button>`);
     $(controlCell).append(deleteRowButton);
     deleteRowButton.on('click', () => {
       this.deleteRow(row.position);

wagtail/contrib/typed_table_block/blocks.py

@@ -2,6 +2,7 @@ from django import forms
 from django.core.exceptions import ValidationError
 from django.template.loader import render_to_string
 from django.utils.functional import cached_property
+from django.utils.translation import gettext as _
 
 from wagtail.admin.staticfiles import versioned_static
 from wagtail.core.blocks.base import Block, DeclarativeSubBlocksMetaclass, get_help_icon
@@ -282,6 +283,15 @@ class TypedTableBlockAdapter(Adapter):
     def js_args(self, block):
         meta = {
             'label': block.label, 'required': block.required, 'icon': block.meta.icon,
+            'strings': {
+                'ADD_COLUMNS': _("Add columns"),
+                'ADD_ROW': _("Add row"),
+                'COLUMN_HEADING': _("Column heading"),
+                'INSERT_COLUMN_HERE': _("Insert column here"),
+                'DELETE_COLUMN': _("Delete column"),
+                'INSERT_ROW_HERE': _("Insert row here"),
+                'DELETE_ROW': _("Delete row"),
+            },
         }
 
         help_text = getattr(block.meta, 'help_text', None)

wagtail/contrib/typed_table_block/locale/en/LC_MESSAGES/django.po

@@ -0,0 +1,47 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
+# This file is distributed under the same license as the PACKAGE package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: PACKAGE VERSION\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2021-10-08 02:05+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: blocks.py:287
+msgid "Add columns"
+msgstr ""
+
+#: blocks.py:288
+msgid "Add row"
+msgstr ""
+
+#: blocks.py:289
+msgid "Column heading"
+msgstr ""
+
+#: blocks.py:290
+msgid "Insert column here"
+msgstr ""
+
+#: blocks.py:291
+msgid "Delete column"
+msgstr ""
+
+#: blocks.py:292
+msgid "Insert row here"
+msgstr ""
+
+#: blocks.py:293
+msgid "Delete row"
+msgstr ""