Add basic interface skeleton setup

[MAILPOET-4287]

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', () => {

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/

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;
+}