diff --git a/client/src/components/ElementEditor/Element.js b/client/src/components/ElementEditor/Element.js
index be75a647..b3287e7d 100644
--- a/client/src/components/ElementEditor/Element.js
+++ b/client/src/components/ElementEditor/Element.js
@@ -171,6 +171,7 @@ class Element extends Component {
     const {
       element,
       type,
+      areaId,
       HeaderComponent,
       ContentComponent,
       link,
@@ -215,6 +216,7 @@ class Element extends Component {
         <HeaderComponent
           element={element}
           type={type}
+          areaId={areaId}
           expandable={type.inlineEditable}
           link={link}
           previewExpanded={previewExpanded}
@@ -283,6 +285,7 @@ function mapDispatchToProps(dispatch, ownProps) {
 Element.propTypes = {
   element: elementType,
   type: elementTypeType.isRequired,
+  areaId: PropTypes.number.isRequired,
   link: PropTypes.string.isRequired,
   // Redux mapped props:
   activeTab: PropTypes.string,
diff --git a/client/src/components/ElementEditor/ElementActions.js b/client/src/components/ElementEditor/ElementActions.js
index a6079644..30d69df5 100644
--- a/client/src/components/ElementEditor/ElementActions.js
+++ b/client/src/components/ElementEditor/ElementActions.js
@@ -97,9 +97,12 @@ class ElementActions extends Component {
   }
 }
 
+// There's some extra prop types in here for registered transformations to consume
 ElementActions.propTypes = {
   // eslint-disable-next-line react/no-unused-prop-types
   element: elementType,
+  // eslint-disable-next-line react/no-unused-prop-types
+  areaId: PropTypes.number.isRequired,
   activeTab: PropTypes.string,
   editTabs: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string,
diff --git a/client/src/components/ElementEditor/ElementList.js b/client/src/components/ElementEditor/ElementList.js
index 7992d9f1..9cd703de 100644
--- a/client/src/components/ElementEditor/ElementList.js
+++ b/client/src/components/ElementEditor/ElementList.js
@@ -54,6 +54,7 @@ class ElementList extends Component {
       <div key={element.ID}>
         <ElementComponent
           element={element}
+          areaId={areaId}
           type={getElementTypeConfig(element.BlockSchema.typeName, elementTypes)}
           link={element.BlockSchema.actions.edit}
           onDragOver={onDragOver}
diff --git a/client/src/components/ElementEditor/Header.js b/client/src/components/ElementEditor/Header.js
index b3ffbe82..bca401f2 100644
--- a/client/src/components/ElementEditor/Header.js
+++ b/client/src/components/ElementEditor/Header.js
@@ -87,6 +87,7 @@ class Header extends Component {
     const {
       element,
       type,
+      areaId,
       previewExpanded,
       simple,
       disableTooltip,
@@ -148,6 +149,7 @@ class Header extends Component {
             >
               <ElementActionsComponent
                 element={element}
+                areaId={areaId}
                 activeTab={activeTab}
                 editTabs={type.editTabs}
                 handleEditTabsClick={handleEditTabsClick}
@@ -163,6 +165,7 @@ class Header extends Component {
 
 Header.propTypes = {
   element: elementType.isRequired,
+  areaId: PropTypes.number.isRequired,
   type: elementTypeType.isRequired,
   activeTab: PropTypes.string,
   simple: PropTypes.bool,
diff --git a/client/src/components/ElementEditor/tests/Element-test.js b/client/src/components/ElementEditor/tests/Element-test.js
index 7e04f812..4ce883b9 100644
--- a/client/src/components/ElementEditor/tests/Element-test.js
+++ b/client/src/components/ElementEditor/tests/Element-test.js
@@ -49,6 +49,7 @@ describe('Element', () => {
       const wrapper = shallow(
         <Element
           element={element}
+          areaId={1}
           type={type}
           link={'admin/pages/edit/EditForm/7/field/ElementalArea/item/2/edit?stage=Stage'}
           {...defaultProps}
@@ -66,6 +67,7 @@ describe('Element', () => {
             ...element,
             ID: ''
           }}
+          areaId={1}
           type={type}
           link={'admin/pages/edit/EditForm/7/field/ElementalArea/item/2/edit?stage=Stage'}
           {...defaultProps}
@@ -86,6 +88,7 @@ describe('Element', () => {
             ...element,
             IsPublished: false,
           }}
+          areaId={1}
           type={type}
           link="/"
           {...defaultProps}
@@ -103,6 +106,7 @@ describe('Element', () => {
             IsPublished: true,
             IsLiveVersion: false,
           }}
+          areaId={1}
           type={type}
           link="/"
           {...defaultProps}
@@ -120,6 +124,7 @@ describe('Element', () => {
             IsPublished: true,
             IsLiveVersion: true,
           }}
+          areaId={1}
           type={type}
           link="/"
           {...defaultProps}
diff --git a/client/src/components/ElementEditor/tests/ElementActions-test.js b/client/src/components/ElementEditor/tests/ElementActions-test.js
index f26121f4..2a658a94 100644
--- a/client/src/components/ElementEditor/tests/ElementActions-test.js
+++ b/client/src/components/ElementEditor/tests/ElementActions-test.js
@@ -21,6 +21,7 @@ describe('ElementActions', () => {
     it('should map input tabs into an array of buttons', () => {
       const wrapper = shallow(
         <ElementActions
+          areaId={1}
           editTabs={testTabs}
           ActionMenuComponent={ActionMenuComponent}
         />
@@ -38,6 +39,7 @@ describe('ElementActions', () => {
     it('should render the given "edit tabs" in the action menu', () => {
       const wrapper = shallow(
         <ElementActions
+          areaId={1}
           editTabs={testTabs}
           ActionMenuComponent={ActionMenuComponent}
         />
@@ -55,6 +57,7 @@ describe('ElementActions', () => {
     it('should render a divider when CMS tab actions and default actions are rendered', () => {
       const wrapper = shallow(
         <ElementActions
+          areaId={1}
           editTabs={testTabs}
           ActionMenuComponent={ActionMenuComponent}
         >
diff --git a/client/src/components/ElementEditor/tests/Header-test.js b/client/src/components/ElementEditor/tests/Header-test.js
index 85c14315..794757d1 100644
--- a/client/src/components/ElementEditor/tests/Header-test.js
+++ b/client/src/components/ElementEditor/tests/Header-test.js
@@ -31,6 +31,7 @@ describe('Header', () => {
       const wrapper = shallow(
         <Header
           element={element}
+          areaId={1}
           type={type}
           ElementActionsComponent={ElementActionsComponent}
         />
@@ -45,6 +46,7 @@ describe('Header', () => {
       const wrapper = shallow(
         <Header
           element={element}
+          areaId={1}
           type={type}
           ElementActionsComponent={ElementActionsComponent}
         />
@@ -58,6 +60,7 @@ describe('Header', () => {
       const wrapper = shallow(
         <Header
           element={element}
+          areaId={1}
           type={type}
           ElementActionsComponent={ElementActionsComponent}
         />
@@ -72,6 +75,7 @@ describe('Header', () => {
       const wrapper = shallow(
         <Header
           element={element}
+          areaId={1}
           type={type}
           expandable={false}
           ElementActionsComponent={ElementActionsComponent}
@@ -87,6 +91,7 @@ describe('Header', () => {
       const wrapper = shallow(
         <Header
           element={element}
+          areaId={1}
           type={type}
           expandable
           previewExpanded={false}
@@ -103,6 +108,7 @@ describe('Header', () => {
       const wrapper = shallow(
         <Header
           element={element}
+          areaId={1}
           type={type}
           expandable
           previewExpanded
@@ -119,6 +125,7 @@ describe('Header', () => {
       const wrapper = shallow(
         <Header
           element={element}
+          areaId={1}
           type={type}
           expandable
           ElementActionsComponent={ElementActionsComponent}
@@ -132,6 +139,7 @@ describe('Header', () => {
       const wrapper = shallow(
         <Header
           element={element}
+          areaId={1}
           type={type}
           expandable={false}
           ElementActionsComponent={ElementActionsComponent}
@@ -149,6 +157,7 @@ describe('Header', () => {
       const wrapper = shallow(
         <Header
           element={element}
+          areaId={1}
           type={type}
           ElementActionsComponent={ElementActionsComponent}
         />
@@ -164,6 +173,7 @@ describe('Header', () => {
       element.IsLiveVersion = false;
       const wrapper = shallow(
         <Header
+          areaId={1}
           type={type}
           ElementActionsComponent={ElementActionsComponent}
           element={element}
@@ -180,6 +190,7 @@ describe('Header', () => {
       element.IsLiveVersion = true;
       const wrapper = shallow(
         <Header
+          areaId={1}
           type={type}
           ElementActionsComponent={ElementActionsComponent}
           element={element}