From 3cbca376a9d4d8888d16fe8ecdff6d1bfe667623 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Mon, 13 Jan 2025 11:21:29 +0000
Subject: [PATCH] Implement dragndrop for StreamField with sortable.js

---
 .../StreamField/blocks/BaseSequenceBlock.js   |  32 ++-
 .../StreamField/blocks/ListBlock.js           |   2 +
 .../StreamField/blocks/ListBlock.test.js      |   7 +
 .../StreamField/blocks/StreamBlock.js         |   2 +
 .../StreamField/blocks/StreamBlock.test.js    |   9 +
 .../StreamField/blocks/StructBlock.test.js    |   2 +
 .../__snapshots__/ListBlock.test.js.snap      | 252 +++++++++++-------
 .../__snapshots__/StreamBlock.test.js.snap    | 196 +++++++++-----
 .../typed_table_block.test.js                 |   2 +
 wagtail/blocks/list_block.py                  |   1 +
 wagtail/blocks/stream_block.py                |   1 +
 wagtail/tests/test_blocks.py                  |   7 +
 12 files changed, 349 insertions(+), 164 deletions(-)

diff --git a/client/src/components/StreamField/blocks/BaseSequenceBlock.js b/client/src/components/StreamField/blocks/BaseSequenceBlock.js
index be573c2795..40c22d0859 100644
--- a/client/src/components/StreamField/blocks/BaseSequenceBlock.js
+++ b/client/src/components/StreamField/blocks/BaseSequenceBlock.js
@@ -4,6 +4,7 @@
 
 import EventEmitter from 'events';
 import { v4 as uuidv4 } from 'uuid';
+import Sortable from 'sortablejs';
 import { escapeHtml as h } from '../../../utils/text';
 import {
   initCollapsiblePanel,
@@ -21,9 +22,7 @@ class ActionButton {
       this.sequenceChild.strings[this.labelIdentifier] || this.labelIdentifier;
 
     this.dom = $(`
-      <button type="button" class="button button--icon text-replace white" title="${h(
-        label,
-      )}">
+      <button type="button" class="button button--icon text-replace white" data-streamfield-action="${this.labelIdentifier}" title="${h(label)}">
         <svg class="icon icon-${h(this.icon)}" aria-hidden="true">
           <use href="#icon-${h(this.icon)}"></use>
         </svg>
@@ -87,6 +86,14 @@ class MoveDownButton extends ActionButton {
   }
 }
 
+class DragButton extends ActionButton {
+  enableEvent = 'enableDrag';
+  disableEvent = 'disableDrag';
+  initiallyDisabled = false;
+  icon = 'grip';
+  labelIdentifier = 'DRAG';
+}
+
 class DuplicateButton extends ActionButton {
   enableEvent = 'enableDuplication';
   disableEvent = 'disableDuplication';
@@ -138,7 +145,7 @@ export class BaseSequenceChild extends EventEmitter {
     const blockTypeLabel = h(this.blockDef.meta.label);
 
     const dom = $(`
-      <div ${
+      <div data-streamfield-child ${
         this.id
           ? `data-contentpath="${h(this.id)}"`
           : 'data-contentpath-disabled'
@@ -198,6 +205,7 @@ export class BaseSequenceChild extends EventEmitter {
 
     this.addActionButton(new MoveUpButton(this));
     this.addActionButton(new MoveDownButton(this));
+    this.addActionButton(new DragButton(this));
     this.addActionButton(new DuplicateButton(this));
     this.addActionButton(new DeleteButton(this));
 
@@ -580,6 +588,22 @@ export class BaseSequenceBlock {
     this.blockCountChanged();
   }
 
+  initDragNDrop() {
+    this.sortable = Sortable.create(this.sequenceContainer.get(0), {
+      handle: '[data-streamfield-action="DRAG"]',
+      animation: 200,
+      // Only drag blocks, not insertion controls.
+      draggable: '[data-streamfield-child]',
+      onEnd: (e) => {
+        // Only consider StreamField blocks, not the insertion controls.
+        const { oldDraggableIndex, newDraggableIndex } = e;
+        if (oldDraggableIndex !== newDraggableIndex) {
+          this.moveBlock(oldDraggableIndex, newDraggableIndex);
+        }
+      },
+    });
+  }
+
   moveBlock(oldIndex, newIndex) {
     if (oldIndex === newIndex) return;
     const inserterToMove = this.inserters[oldIndex];
diff --git a/client/src/components/StreamField/blocks/ListBlock.js b/client/src/components/StreamField/blocks/ListBlock.js
index 1840d72912..7990400fd0 100644
--- a/client/src/components/StreamField/blocks/ListBlock.js
+++ b/client/src/components/StreamField/blocks/ListBlock.js
@@ -133,6 +133,8 @@ export class ListBlock extends BaseSequenceBlock {
     if (initialError) {
       this.setError(initialError);
     }
+
+    this.initDragNDrop();
   }
 
   /**
diff --git a/client/src/components/StreamField/blocks/ListBlock.test.js b/client/src/components/StreamField/blocks/ListBlock.test.js
index 29a3622056..24d8e39642 100644
--- a/client/src/components/StreamField/blocks/ListBlock.test.js
+++ b/client/src/components/StreamField/blocks/ListBlock.test.js
@@ -117,6 +117,7 @@ describe('telepath: wagtail.blocks.ListBlock', () => {
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
@@ -338,6 +339,7 @@ describe('telepath: wagtail.blocks.ListBlock with maxNum set', () => {
       strings: {
         MOVE_UP: 'Move up',
         MOVE_DOWN: 'Move down',
+        DRAG: 'Drag',
         DELETE: 'Delete',
         DUPLICATE: 'Duplicate',
         ADD: 'Add',
@@ -474,6 +476,7 @@ describe('telepath: wagtail.blocks.ListBlock with minNum set', () => {
       strings: {
         MOVE_UP: 'Move up',
         MOVE_DOWN: 'Move down',
+        DRAG: 'Drag',
         DELETE: 'Delete',
         DUPLICATE: 'Duplicate',
         ADD: 'Add',
@@ -579,6 +582,7 @@ describe('telepath: wagtail.blocks.ListBlock with StreamBlock child', () => {
           strings: {
             MOVE_UP: 'Move up',
             MOVE_DOWN: 'Move down',
+            DRAG: 'Drag',
             DELETE: 'Delete',
             DUPLICATE: 'Duplicate',
             ADD: 'Add',
@@ -595,6 +599,7 @@ describe('telepath: wagtail.blocks.ListBlock with StreamBlock child', () => {
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
@@ -660,6 +665,7 @@ describe('telepath: wagtail.blocks.ListBlock inside a StreamBlock', () => {
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
@@ -684,6 +690,7 @@ describe('telepath: wagtail.blocks.ListBlock inside a StreamBlock', () => {
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
diff --git a/client/src/components/StreamField/blocks/StreamBlock.js b/client/src/components/StreamField/blocks/StreamBlock.js
index 31a8b9634e..753b2f6392 100644
--- a/client/src/components/StreamField/blocks/StreamBlock.js
+++ b/client/src/components/StreamField/blocks/StreamBlock.js
@@ -224,6 +224,8 @@ export class StreamBlock extends BaseSequenceBlock {
     if (initialError) {
       this.setError(initialError);
     }
+
+    this.initDragNDrop();
   }
 
   getBlockGroups() {
diff --git a/client/src/components/StreamField/blocks/StreamBlock.test.js b/client/src/components/StreamField/blocks/StreamBlock.test.js
index 162ad188e3..86470c63f8 100644
--- a/client/src/components/StreamField/blocks/StreamBlock.test.js
+++ b/client/src/components/StreamField/blocks/StreamBlock.test.js
@@ -112,6 +112,7 @@ describe('telepath: wagtail.blocks.StreamBlock', () => {
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
@@ -364,6 +365,7 @@ describe('telepath: wagtail.blocks.StreamBlock with nested stream block', () =>
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
@@ -388,6 +390,7 @@ describe('telepath: wagtail.blocks.StreamBlock with nested stream block', () =>
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
@@ -480,6 +483,7 @@ describe('telepath: wagtail.blocks.StreamBlock with labels that need escaping',
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete & kill with fire',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
@@ -559,6 +563,7 @@ describe('telepath: wagtail.blocks.StreamBlock with maxNum set', () => {
       strings: {
         MOVE_UP: 'Move up',
         MOVE_DOWN: 'Move down',
+        DRAG: 'Drag',
         DELETE: 'Delete & kill with fire',
         DUPLICATE: 'Duplicate',
         ADD: 'Add',
@@ -794,6 +799,7 @@ describe('telepath: wagtail.blocks.StreamBlock with minNum set', () => {
       strings: {
         MOVE_UP: 'Move up',
         MOVE_DOWN: 'Move down',
+        DRAG: 'Drag',
         DELETE: 'Delete & kill with fire',
         DUPLICATE: 'Duplicate',
         ADD: 'Add',
@@ -946,6 +952,7 @@ describe('telepath: wagtail.blocks.StreamBlock with blockCounts.max_num set', ()
       strings: {
         MOVE_UP: 'Move up',
         MOVE_DOWN: 'Move down',
+        DRAG: 'Drag',
         DELETE: 'Delete & kill with fire',
         DUPLICATE: 'Duplicate',
         ADD: 'Add',
@@ -1181,6 +1188,7 @@ describe('telepath: wagtail.blocks.StreamBlock with blockCounts.min_num set', ()
       strings: {
         MOVE_UP: 'Move up',
         MOVE_DOWN: 'Move down',
+        DRAG: 'Drag',
         DELETE: 'Delete & kill with fire',
         DUPLICATE: 'Duplicate',
         ADD: 'Add',
@@ -1302,6 +1310,7 @@ describe('telepath: wagtail.blocks.StreamBlock with unique block type', () => {
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
diff --git a/client/src/components/StreamField/blocks/StructBlock.test.js b/client/src/components/StreamField/blocks/StructBlock.test.js
index eac55c83a6..1d6be5cc51 100644
--- a/client/src/components/StreamField/blocks/StructBlock.test.js
+++ b/client/src/components/StreamField/blocks/StructBlock.test.js
@@ -366,6 +366,7 @@ describe('telepath: wagtail.blocks.StructBlock in stream block', () => {
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
@@ -415,6 +416,7 @@ describe('telepath: wagtail.blocks.StructBlock in stream block', () => {
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
diff --git a/client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap b/client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap
index e3c926b62c..74a6586aa1 100644
--- a/client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap
+++ b/client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap
@@ -10,7 +10,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
 
         <div data-streamfield-list-container=""><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="11111111-1111-1111-1111-111111111111">
+      </button><div data-streamfield-child="" data-contentpath="11111111-1111-1111-1111-111111111111">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="0">
         <input type="hidden" name="the-prefix-0-type" value="">
@@ -38,19 +38,23 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -72,7 +76,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
         </section>
       </div><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="22222222-2222-2222-2222-222222222222">
+      </button><div data-streamfield-child="" data-contentpath="22222222-2222-2222-2222-222222222222">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="1">
         <input type="hidden" name="the-prefix-1-type" value="">
@@ -100,19 +104,23 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -134,7 +142,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
         </section>
       </div><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="fake-uuid-v4-value">
+      </button><div data-streamfield-child="" data-contentpath="fake-uuid-v4-value">
         <input type="hidden" name="the-prefix-2-deleted" value="">
         <input type="hidden" name="the-prefix-2-order" value="2">
         <input type="hidden" name="the-prefix-2-type" value="">
@@ -162,19 +170,23 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -210,7 +222,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
 
         <div data-streamfield-list-container=""><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="22222222-2222-2222-2222-222222222222">
+      </button><div data-streamfield-child="" data-contentpath="22222222-2222-2222-2222-222222222222">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="0">
         <input type="hidden" name="the-prefix-1-type" value="">
@@ -238,19 +250,23 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -272,7 +288,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
         </section>
       </div><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="11111111-1111-1111-1111-111111111111">
+      </button><div data-streamfield-child="" data-contentpath="11111111-1111-1111-1111-111111111111">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="1">
         <input type="hidden" name="the-prefix-0-type" value="">
@@ -300,19 +316,23 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -348,7 +368,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
 
         <div data-streamfield-list-container=""><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="22222222-2222-2222-2222-222222222222">
+      </button><div data-streamfield-child="" data-contentpath="22222222-2222-2222-2222-222222222222">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="0">
         <input type="hidden" name="the-prefix-1-type" value="">
@@ -376,19 +396,23 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -410,7 +434,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
         </section>
       </div><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="11111111-1111-1111-1111-111111111111">
+      </button><div data-streamfield-child="" data-contentpath="11111111-1111-1111-1111-111111111111">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="1">
         <input type="hidden" name="the-prefix-0-type" value="">
@@ -438,19 +462,23 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -486,7 +514,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
 
         <div data-streamfield-list-container=""><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="11111111-1111-1111-1111-111111111111">
+      </button><div data-streamfield-child="" data-contentpath="11111111-1111-1111-1111-111111111111">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="0">
         <input type="hidden" name="the-prefix-0-type" value="">
@@ -514,19 +542,23 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -548,7 +580,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
         </section>
       </div><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath-disabled="">
+      </button><div data-streamfield-child="" data-contentpath-disabled="">
         <input type="hidden" name="the-prefix-2-deleted" value="">
         <input type="hidden" name="the-prefix-2-order" value="1">
         <input type="hidden" name="the-prefix-2-type" value="">
@@ -576,19 +608,23 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -610,7 +646,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
         </section>
       </div><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="22222222-2222-2222-2222-222222222222">
+      </button><div data-streamfield-child="" data-contentpath="22222222-2222-2222-2222-222222222222">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="2">
         <input type="hidden" name="the-prefix-1-type" value="">
@@ -638,19 +674,23 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -686,7 +726,7 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
 
         <div data-streamfield-list-container=""><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="11111111-1111-1111-1111-111111111111">
+      </button><div data-streamfield-child="" data-contentpath="11111111-1111-1111-1111-111111111111">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="0">
         <input type="hidden" name="the-prefix-0-type" value="">
@@ -714,19 +754,23 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -748,7 +792,7 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
         </section>
       </div><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button" style="display: none;" aria-hidden="true">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="22222222-2222-2222-2222-222222222222" style="display: none;" aria-hidden="true">
+      </button><div data-streamfield-child="" data-contentpath="22222222-2222-2222-2222-222222222222" style="display: none;" aria-hidden="true">
         <input type="hidden" name="the-prefix-1-deleted" value="1">
         <input type="hidden" name="the-prefix-1-order" value="1">
         <input type="hidden" name="the-prefix-1-type" value="">
@@ -776,19 +820,23 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -824,7 +872,7 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
 
         <div data-streamfield-list-container=""><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="11111111-1111-1111-1111-111111111111">
+      </button><div data-streamfield-child="" data-contentpath="11111111-1111-1111-1111-111111111111">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="0">
         <input type="hidden" name="the-prefix-0-type" value="">
@@ -852,19 +900,23 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -886,7 +938,7 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
         </section>
       </div><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="22222222-2222-2222-2222-222222222222">
+      </button><div data-streamfield-child="" data-contentpath="22222222-2222-2222-2222-222222222222">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="1">
         <input type="hidden" name="the-prefix-1-type" value="">
@@ -914,19 +966,23 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -962,7 +1018,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
 
         <div data-streamfield-list-container=""><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="11111111-1111-1111-1111-111111111111">
+      </button><div data-streamfield-child="" data-contentpath="11111111-1111-1111-1111-111111111111">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="0">
         <input type="hidden" name="the-prefix-0-type" value="">
@@ -990,19 +1046,23 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -1024,7 +1084,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
         </section>
       </div><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="22222222-2222-2222-2222-222222222222">
+      </button><div data-streamfield-child="" data-contentpath="22222222-2222-2222-2222-222222222222">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="1">
         <input type="hidden" name="the-prefix-1-type" value="">
@@ -1052,19 +1112,23 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -1100,7 +1164,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
 
         <div data-streamfield-list-container=""><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="11111111-1111-1111-1111-111111111111">
+      </button><div data-streamfield-child="" data-contentpath="11111111-1111-1111-1111-111111111111">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="0">
         <input type="hidden" name="the-prefix-0-type" value="">
@@ -1128,19 +1192,23 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -1162,7 +1230,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
         </section>
       </div><button type="button" title="Add" data-streamfield-list-add="" class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
-      </button><div data-contentpath="22222222-2222-2222-2222-222222222222">
+      </button><div data-streamfield-child="" data-contentpath="22222222-2222-2222-2222-222222222222">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="1">
         <input type="hidden" name="the-prefix-1-type" value="">
@@ -1190,19 +1258,23 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
diff --git a/client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap b/client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap
index 67e9c29336..b41d168057 100644
--- a/client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap
+++ b/client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap
@@ -11,7 +11,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="false">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="1">
+      </div><div data-streamfield-child="" data-contentpath="1">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="0">
         <input type="hidden" name="the-prefix-0-type" value="test_block_a">
@@ -39,19 +39,23 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -75,7 +79,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="false">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="2">
+      </div><div data-streamfield-child="" data-contentpath="2">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="1">
         <input type="hidden" name="the-prefix-1-type" value="test_block_b">
@@ -103,19 +107,23 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -139,7 +147,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="false">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="fake-uuid-v4-value">
+      </div><div data-streamfield-child="" data-contentpath="fake-uuid-v4-value">
         <input type="hidden" name="the-prefix-2-deleted" value="">
         <input type="hidden" name="the-prefix-2-order" value="2">
         <input type="hidden" name="the-prefix-2-type" value="test_block_b">
@@ -167,19 +175,23 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -218,7 +230,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="false">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="2">
+      </div><div data-streamfield-child="" data-contentpath="2">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="0">
         <input type="hidden" name="the-prefix-1-type" value="test_block_b">
@@ -246,19 +258,23 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -282,7 +298,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="false">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="1">
+      </div><div data-streamfield-child="" data-contentpath="1">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="1">
         <input type="hidden" name="the-prefix-0-type" value="test_block_a">
@@ -310,19 +326,23 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -361,7 +381,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="false">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="2">
+      </div><div data-streamfield-child="" data-contentpath="2">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="0">
         <input type="hidden" name="the-prefix-1-type" value="test_block_b">
@@ -389,19 +409,23 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -425,7 +449,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="false">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="1">
+      </div><div data-streamfield-child="" data-contentpath="1">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="1">
         <input type="hidden" name="the-prefix-0-type" value="test_block_a">
@@ -453,19 +477,23 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -504,7 +532,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="false">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="1">
+      </div><div data-streamfield-child="" data-contentpath="1">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="0">
         <input type="hidden" name="the-prefix-0-type" value="test_block_a">
@@ -532,19 +560,23 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -568,7 +600,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="false">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="2">
+      </div><div data-streamfield-child="" data-contentpath="2">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="1">
         <input type="hidden" name="the-prefix-1-type" value="test_block_b">
@@ -596,19 +628,23 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -647,7 +683,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="false">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="1">
+      </div><div data-streamfield-child="" data-contentpath="1">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="0">
         <input type="hidden" name="the-prefix-0-type" value="test_block_a">
@@ -675,19 +711,23 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -711,7 +751,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="true">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      <div data-tippy-root="" id="tippy-5" style="z-index: 9999; visibility: visible; transition: none; position: absolute; left: 0px; top: 0px; margin: 0px;"><div class="tippy-box" data-state="hidden" tabindex="-1" data-theme="dropdown" data-animation="fade" style="max-width: 350px; transition-duration: 0ms;" role="tooltip"><div class="tippy-content" data-state="hidden" style="transition-duration: 0ms;"><div><div class="w-combobox"><label id="downshift-0-label" for="downshift-0-input" class="w-sr-only">Search options…</label><div class="w-combobox__field"><input aria-activedescendant="" aria-autocomplete="list" aria-controls="downshift-0-menu" aria-expanded="false" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" role="combobox" type="text" placeholder="Search options…" value=""></div><div id="downshift-0-menu" role="listbox" aria-labelledby="downshift-0-label" class="w-combobox__menu"><div class="w-combobox__optgroup"><div role="option" aria-selected="false" id="downshift-0-item-0" class="w-combobox__option w-combobox__option--col1"><div class="w-combobox__option-icon"><svg class="icon icon-placeholder" aria-hidden="true"><use href="#icon-placeholder"></use></svg></div><div class="w-combobox__option-text">Test Block A</div></div><div role="option" aria-selected="false" id="downshift-0-item-1" class="w-combobox__option w-combobox__option--col2"><div class="w-combobox__option-icon"><svg class="icon icon-pilcrow" aria-hidden="true"><use href="#icon-pilcrow"></use></svg></div><div class="w-combobox__option-text">Test Block B</div></div></div></div></div></div></div></div></div></div><div data-contentpath="2">
+      <div data-tippy-root="" id="tippy-5" style="z-index: 9999; visibility: visible; transition: none; position: absolute; left: 0px; top: 0px; margin: 0px;"><div class="tippy-box" data-state="hidden" tabindex="-1" data-theme="dropdown" data-animation="fade" style="max-width: 350px; transition-duration: 0ms;" role="tooltip"><div class="tippy-content" data-state="hidden" style="transition-duration: 0ms;"><div><div class="w-combobox"><label id="downshift-0-label" for="downshift-0-input" class="w-sr-only">Search options…</label><div class="w-combobox__field"><input aria-activedescendant="" aria-autocomplete="list" aria-controls="downshift-0-menu" aria-expanded="false" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" role="combobox" type="text" placeholder="Search options…" value=""></div><div id="downshift-0-menu" role="listbox" aria-labelledby="downshift-0-label" class="w-combobox__menu"><div class="w-combobox__optgroup"><div role="option" aria-selected="false" id="downshift-0-item-0" class="w-combobox__option w-combobox__option--col1"><div class="w-combobox__option-icon"><svg class="icon icon-placeholder" aria-hidden="true"><use href="#icon-placeholder"></use></svg></div><div class="w-combobox__option-text">Test Block A</div></div><div role="option" aria-selected="false" id="downshift-0-item-1" class="w-combobox__option w-combobox__option--col2"><div class="w-combobox__option-icon"><svg class="icon icon-pilcrow" aria-hidden="true"><use href="#icon-pilcrow"></use></svg></div><div class="w-combobox__option-text">Test Block B</div></div></div></div></div></div></div></div></div></div><div data-streamfield-child="" data-contentpath="2">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="1">
         <input type="hidden" name="the-prefix-1-type" value="test_block_b">
@@ -739,19 +779,23 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -790,7 +834,7 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="false">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="1">
+      </div><div data-streamfield-child="" data-contentpath="1">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="0">
         <input type="hidden" name="the-prefix-0-type" value="test_block_a">
@@ -818,19 +862,23 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -854,7 +902,7 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
         <button type="button" title="Insert a block" class="c-sf-add-button" aria-expanded="false">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="2">
+      </div><div data-streamfield-child="" data-contentpath="2">
         <input type="hidden" name="the-prefix-1-deleted" value="">
         <input type="hidden" name="the-prefix-1-order" value="1">
         <input type="hidden" name="the-prefix-1-type" value="test_block_b">
@@ -882,19 +930,23 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
@@ -935,7 +987,7 @@ exports[`telepath: wagtail.blocks.StreamBlock with unique block type it can add
         <button type="button" title="Insert a block" class="c-sf-add-button">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
-      </div><div data-contentpath="fake-uuid-v4-value" style="display: none;">
+      </div><div data-streamfield-child="" data-contentpath="fake-uuid-v4-value" style="display: none;">
         <input type="hidden" name="the-prefix-0-deleted" value="">
         <input type="hidden" name="the-prefix-0-order" value="0">
         <input type="hidden" name="the-prefix-0-type" value="test_block_a">
@@ -963,19 +1015,23 @@ exports[`telepath: wagtail.blocks.StreamBlock with unique block type it can add
               </svg>
             </a>
             <div class="w-panel__divider"></div>
-            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" title="Move up" disabled="disabled">
+            <div class="w-panel__controls" data-panel-controls=""><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_UP" title="Move up" disabled="disabled">
         <svg class="icon icon-arrow-up" aria-hidden="true">
           <use href="#icon-arrow-up"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Move down" disabled="disabled">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="MOVE_DOWN" title="Move down" disabled="disabled">
         <svg class="icon icon-arrow-down" aria-hidden="true">
           <use href="#icon-arrow-down"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Duplicate">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DRAG" title="Drag">
+        <svg class="icon icon-grip" aria-hidden="true">
+          <use href="#icon-grip"></use>
+        </svg>
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DUPLICATE" title="Duplicate">
         <svg class="icon icon-copy" aria-hidden="true">
           <use href="#icon-copy"></use>
         </svg>
-      </button><button type="button" class="button button--icon text-replace white" title="Delete">
+      </button><button type="button" class="button button--icon text-replace white" data-streamfield-action="DELETE" title="Delete">
         <svg class="icon icon-bin" aria-hidden="true">
           <use href="#icon-bin"></use>
         </svg>
diff --git a/client/src/entrypoints/contrib/typed_table_block/typed_table_block.test.js b/client/src/entrypoints/contrib/typed_table_block/typed_table_block.test.js
index 8bceddd326..c7f2f942c1 100644
--- a/client/src/entrypoints/contrib/typed_table_block/typed_table_block.test.js
+++ b/client/src/entrypoints/contrib/typed_table_block/typed_table_block.test.js
@@ -265,6 +265,7 @@ describe('wagtail.contrib.typed_table_block.blocks.TypedTableBlock in StreamBloc
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
@@ -317,6 +318,7 @@ describe('wagtail.contrib.typed_table_block.blocks.TypedTableBlock in StreamBloc
         strings: {
           MOVE_UP: 'Move up',
           MOVE_DOWN: 'Move down',
+          DRAG: 'Drag',
           DELETE: 'Delete',
           DUPLICATE: 'Duplicate',
           ADD: 'Add',
diff --git a/wagtail/blocks/list_block.py b/wagtail/blocks/list_block.py
index f446eb4f15..3fcbdcff9e 100644
--- a/wagtail/blocks/list_block.py
+++ b/wagtail/blocks/list_block.py
@@ -458,6 +458,7 @@ class ListBlockAdapter(Adapter):
             "strings": {
                 "MOVE_UP": _("Move up"),
                 "MOVE_DOWN": _("Move down"),
+                "DRAG": _("Drag"),
                 "DUPLICATE": _("Duplicate"),
                 "DELETE": _("Delete"),
                 "ADD": _("Add"),
diff --git a/wagtail/blocks/stream_block.py b/wagtail/blocks/stream_block.py
index 42de7c9ad1..a8ab0f7010 100644
--- a/wagtail/blocks/stream_block.py
+++ b/wagtail/blocks/stream_block.py
@@ -839,6 +839,7 @@ class StreamBlockAdapter(Adapter):
             "strings": {
                 "MOVE_UP": _("Move up"),
                 "MOVE_DOWN": _("Move down"),
+                "DRAG": _("Drag"),
                 "DUPLICATE": _("Duplicate"),
                 "DELETE": _("Delete"),
                 "ADD": _("Add"),
diff --git a/wagtail/tests/test_blocks.py b/wagtail/tests/test_blocks.py
index 74368b7151..3ef4b6c556 100644
--- a/wagtail/tests/test_blocks.py
+++ b/wagtail/tests/test_blocks.py
@@ -2818,6 +2818,7 @@ class TestListBlock(WagtailTestUtils, SimpleTestCase):
                     "DUPLICATE": "Duplicate",
                     "MOVE_DOWN": "Move down",
                     "MOVE_UP": "Move up",
+                    "DRAG": "Drag",
                     "ADD": "Add",
                 },
             },
@@ -2853,6 +2854,7 @@ class TestListBlock(WagtailTestUtils, SimpleTestCase):
                     "DUPLICATE": "Duplicate",
                     "MOVE_DOWN": "Move down",
                     "MOVE_UP": "Move up",
+                    "DRAG": "Drag",
                     "ADD": "Add",
                 },
             },
@@ -3028,6 +3030,7 @@ class TestListBlock(WagtailTestUtils, SimpleTestCase):
                     "DUPLICATE": "Duplicate",
                     "MOVE_DOWN": "Move down",
                     "MOVE_UP": "Move up",
+                    "DRAG": "Drag",
                     "ADD": "Add",
                 },
             },
@@ -3064,6 +3067,7 @@ class TestListBlock(WagtailTestUtils, SimpleTestCase):
                     "DUPLICATE": "Duplicate",
                     "MOVE_DOWN": "Move down",
                     "MOVE_UP": "Move up",
+                    "DRAG": "Drag",
                     "ADD": "Add",
                 },
             },
@@ -3708,6 +3712,7 @@ class TestStreamBlock(WagtailTestUtils, SimpleTestCase):
                     "DUPLICATE": "Duplicate",
                     "MOVE_DOWN": "Move down",
                     "MOVE_UP": "Move up",
+                    "DRAG": "Drag",
                     "ADD": "Add",
                 },
             },
@@ -4437,6 +4442,7 @@ class TestStreamBlock(WagtailTestUtils, SimpleTestCase):
                     "DUPLICATE": "Duplicate",
                     "MOVE_DOWN": "Move down",
                     "MOVE_UP": "Move up",
+                    "DRAG": "Drag",
                     "ADD": "Add",
                 },
             },
@@ -4542,6 +4548,7 @@ class TestStreamBlock(WagtailTestUtils, SimpleTestCase):
                     "DUPLICATE": "Duplicate",
                     "MOVE_DOWN": "Move down",
                     "MOVE_UP": "Move up",
+                    "DRAG": "Drag",
                     "ADD": "Add",
                 },
             },