diff --git a/mailpoet/assets/js/src/automation/editor/index.tsx b/mailpoet/assets/js/src/automation/editor/index.tsx
index 14809c45dd..b0dd5e48b9 100644
--- a/mailpoet/assets/js/src/automation/editor/index.tsx
+++ b/mailpoet/assets/js/src/automation/editor/index.tsx
@@ -1,7 +1,24 @@
+import classnames from 'classnames';
import ReactDOM from 'react-dom';
+import { InterfaceSkeleton } from '@wordpress/interface';
+
+// See: https://github.com/WordPress/gutenberg/blob/9601a33e30ba41bac98579c8d822af63dd961488/packages/edit-post/src/components/layout/index.js
function Editor(): JSX.Element {
- return
Automation editor
;
+ const className = classnames(
+ 'edit-post-layout',
+ 'interface-interface-skeleton',
+ );
+
+ return (
+ Header}
+ content={Content
}
+ sidebar={Sidebar
}
+ secondarySidebar={Secondary sidebar
}
+ />
+ );
}
window.addEventListener('DOMContentLoaded', () => {
diff --git a/mailpoet/assets/js/src/types/index.ts b/mailpoet/assets/js/src/types/index.ts
index ddfe3989da..2f15aecd3a 100644
--- a/mailpoet/assets/js/src/types/index.ts
+++ b/mailpoet/assets/js/src/types/index.ts
@@ -1,5 +1,7 @@
import { ColorPalette, FontSizePicker } from '@wordpress/components';
+import './wordpress_modules';
+
export * from '../segments/dynamic/types';
// Inspired by: https://neliosoftware.com/blog/adding-typescript-to-wordpress-data-stores/
diff --git a/mailpoet/assets/js/src/types/wordpress_modules.ts b/mailpoet/assets/js/src/types/wordpress_modules.ts
new file mode 100644
index 0000000000..0f36e9307a
--- /dev/null
+++ b/mailpoet/assets/js/src/types/wordpress_modules.ts
@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any -- some general types in this file need to use "any" */
+
+// there are no @types/wordpress__interface yet
+declare module '@wordpress/interface' {
+ export const InterfaceSkeleton: any;
+}