From 2273dd9e16b3db3dc68fd42bc725b7e24fb54b3d Mon Sep 17 00:00:00 2001
From: Jan Jakes <jan.jakes@automattic.com>
Date: Fri, 13 May 2022 10:57:58 +0200
Subject: [PATCH] Add basic interface skeleton setup

[MAILPOET-4287]
---
 .../assets/js/src/automation/editor/index.tsx | 19 ++++++++++++++++++-
 mailpoet/assets/js/src/types/index.ts         |  2 ++
 .../assets/js/src/types/wordpress_modules.ts  |  6 ++++++
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 mailpoet/assets/js/src/types/wordpress_modules.ts

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 <div>Automation editor</div>;
+  const className = classnames(
+    'edit-post-layout',
+    'interface-interface-skeleton',
+  );
+
+  return (
+    <InterfaceSkeleton
+      className={className}
+      header={<div>Header</div>}
+      content={<div>Content</div>}
+      sidebar={<div>Sidebar</div>}
+      secondarySidebar={<div>Secondary sidebar</div>}
+    />
+  );
 }
 
 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;
+}