fixed Uncaught TypeError: Cannot read properties of undefined (reading 'getTextLabel') in admin and missing stream blocks. (#10023)

Fixes #9990

CHANGELOG.txt

@@ -6,6 +6,7 @@ Changelog
 
  * Add `WAGTAILIMAGES_EXTENSIONS` setting to restrict image uploads to specific file types (Aman Pandey, Ananjan-R)
  * Update user list column level to `Access level` to be easier to understand (Vallabh Tiwari)
+ * Fix: Ensure `label_format` on StructBlock gracefully handles missing variables (Aadi jindal)
  * Docs: Add code block to make it easier to understand contribution docs (Suyash Singh)
  * Maintenance: Update djhtml (html formatting) library to v 1.5.2 (Loveth Omokaro)
  * Maintenance: Re-enable `strictPropertyInitialization` in tsconfig (Thibaud Colas)

CONTRIBUTORS.rst

@@ -686,6 +686,7 @@ Contributors
 * Beniamin Bucur
 * Ananjan-R
 * Yosr Karoui
+* Aadi jindal
 
 Translators
 ===========

client/src/components/StreamField/blocks/StructBlock.js

@@ -142,7 +142,7 @@ export class StructBlock {
         /\{(\w+)\}/g,
         (tag, blockName) => {
           const block = this.childBlocks[blockName];
-          if (block.getTextLabel) {
+          if (block && block.getTextLabel) {
             /* to be strictly correct, we should be adjusting opts.maxLength to account for the overheads
           in the format string, and dividing the remainder across all the placeholders in the string,
           rather than just passing opts on to the child. But that would get complicated, and this is

client/src/components/StreamField/blocks/StructBlock.test.js

@@ -188,6 +188,7 @@ describe('telepath: wagtail.blocks.StructBlock', () => {
 
 describe('telepath: wagtail.blocks.StructBlock with formTemplate', () => {
   let boundBlock;
+  let blockDefWithBadLabelFormat;
 
   beforeEach(() => {
     // Create mocks for callbacks
@@ -198,42 +199,48 @@ describe('telepath: wagtail.blocks.StructBlock with formTemplate', () => {
     focus = jest.fn();
 
     // Define a test block
+    const blockOpts = {
+      label: 'Heading block',
+      required: false,
+      icon: 'title',
+      formTemplate: `<div class="custom-form-template">
+        <p>here comes the first field:</p>
+        <div data-structblock-child="heading_text"></div>
+        <p>and here is the second:</p>
+        <div data-structblock-child="size"></div>
+      </div>`,
+      labelFormat: '{heading_text} - {size}',
+    };
+    const headingTextBlockDef = new FieldBlockDefinition(
+      'heading_text',
+      new DummyWidgetDefinition('Heading widget'),
+      {
+        label: 'Heading text',
+        required: true,
+        icon: 'placeholder',
+        classname: 'w-field w-field--char_field w-field--text_input',
+      },
+    );
+    const sizeBlockDef = new FieldBlockDefinition(
+      'size',
+      new DummyWidgetDefinition('Size widget'),
+      {
+        label: 'Size',
+        required: false,
+        icon: 'placeholder',
+        classname: 'w-field w-field--choice_field w-field--select',
+      },
+    );
+
     const blockDef = new StructBlockDefinition(
       'heading_block',
-      [
-        new FieldBlockDefinition(
-          'heading_text',
-          new DummyWidgetDefinition('Heading widget'),
-          {
-            label: 'Heading text',
-            required: true,
-            icon: 'placeholder',
-            classname: 'w-field w-field--char_field w-field--text_input',
-          },
-        ),
-        new FieldBlockDefinition(
-          'size',
-          new DummyWidgetDefinition('Size widget'),
-          {
-            label: 'Size',
-            required: false,
-            icon: 'placeholder',
-            classname: 'w-field w-field--choice_field w-field--select',
-          },
-        ),
-      ],
-      {
-        label: 'Heading block',
-        required: false,
-        icon: 'title',
-        formTemplate: `<div class="custom-form-template">
-          <p>here comes the first field:</p>
-          <div data-structblock-child="heading_text"></div>
-          <p>and here is the second:</p>
-          <div data-structblock-child="size"></div>
-        </div>`,
-        labelFormat: '{heading_text} - {size}',
-      },
+      [headingTextBlockDef, sizeBlockDef],
+      blockOpts,
+    );
+    blockDefWithBadLabelFormat = new StructBlockDefinition(
+      'heading_block',
+      [headingTextBlockDef, sizeBlockDef],
+      { ...blockOpts, labelFormat: '{bad_variable} - {size}' },
     );
 
     // Render it
@@ -307,6 +314,19 @@ describe('telepath: wagtail.blocks.StructBlock with formTemplate', () => {
       'label: the-prefix-heading_text - label: the-prefix-size',
     );
   });
+
+  test('getTextLabel() gracefully handles bad variables in labelFormat', () => {
+    document.body.innerHTML = '<div id="placeholder"></div>';
+    boundBlock = blockDefWithBadLabelFormat.render(
+      $('#placeholder'),
+      'the-prefix',
+      {
+        heading_text: 'Test heading text',
+        size: '123',
+      },
+    );
+    expect(boundBlock.getTextLabel()).toBe(' - label: the-prefix-size');
+  });
 });
 
 describe('telepath: wagtail.blocks.StructBlock in stream block', () => {

client/src/components/StreamField/blocks/__snapshots__/StructBlock.test.js.snap

@@ -76,8 +76,8 @@ exports[`telepath: wagtail.blocks.StructBlock setError passes error messages to
 
 exports[`telepath: wagtail.blocks.StructBlock with formTemplate it renders correctly 1`] = `
 "<div class=\\"custom-form-template\\">
-          <p>here comes the first field:</p>
-          <div class=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
+        <p>here comes the first field:</p>
+        <div class=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
         <div class=\\"w-field w-field--char_field w-field--text_input\\" data-field=\\"\\">
           <div class=\\"w-field__errors\\" id=\\"the-prefix-heading_text-errors\\" data-field-errors=\\"\\">
             <svg class=\\"icon icon-warning w-field__errors-icon\\" aria-hidden=\\"true\\" hidden=\\"\\"><use href=\\"#icon-warning\\"></use></svg>
@@ -88,8 +88,8 @@ exports[`telepath: wagtail.blocks.StructBlock with formTemplate it renders corre
           <div id=\\"the-prefix-heading_text-helptext\\" data-field-help=\\"\\"></div>
         </div>
       </div>
-          <p>and here is the second:</p>
-          <div class=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
+        <p>and here is the second:</p>
+        <div class=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
         <div class=\\"w-field w-field--choice_field w-field--select\\" data-field=\\"\\">
           <div class=\\"w-field__errors\\" id=\\"the-prefix-size-errors\\" data-field-errors=\\"\\">
             <svg class=\\"icon icon-warning w-field__errors-icon\\" aria-hidden=\\"true\\" hidden=\\"\\"><use href=\\"#icon-warning\\"></use></svg>
@@ -100,5 +100,5 @@ exports[`telepath: wagtail.blocks.StructBlock with formTemplate it renders corre
           <div id=\\"the-prefix-size-helptext\\" data-field-help=\\"\\"></div>
         </div>
       </div>
-        </div>"
+      </div>"
 `;

docs/releases/5.0.md

@@ -20,7 +20,7 @@ depth: 1
 
 ### Bug fixes
 
- * ...
+ * Ensure `label_format` on StructBlock gracefully handles missing variables (Aadi jindal)
 
 ### Documentation