From 5c46bbda30466812f35c382df851a5ead7f87ea4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Lys=C3=BD?= <jan.lysy@automattic.com>
Date: Fri, 1 Mar 2024 17:56:57 +0100
Subject: [PATCH] Add layout screen component

Each section of styles in the sidebar should have its screen component.
[MAILPOET-5640]
---
 .../engine/components/styles-sidebar/screen-layout.tsx      | 6 ++++++
 .../engine/components/styles-sidebar/styles-sidebar.tsx     | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/screen-layout.tsx

diff --git a/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/screen-layout.tsx b/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/screen-layout.tsx
new file mode 100644
index 0000000000..dbd6aa2d7b
--- /dev/null
+++ b/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/screen-layout.tsx
@@ -0,0 +1,6 @@
+import { __ } from '@wordpress/i18n';
+import { ScreenHeader } from './screen-header';
+
+export function ScreenLayout(): JSX.Element {
+  return <ScreenHeader title={__('Layout', 'mailpoet')} />;
+}
diff --git a/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/styles-sidebar.tsx b/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/styles-sidebar.tsx
index ad104c1169..a7d76e87a0 100644
--- a/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/styles-sidebar.tsx
+++ b/mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/styles-sidebar.tsx
@@ -9,6 +9,7 @@ import { ComplementaryArea } from '@wordpress/interface';
 import { ComponentProps } from 'react';
 import { styles } from '@wordpress/icons';
 import { storeName, stylesSidebarId } from '../../store';
+import { ScreenLayout } from './screen-layout';
 import { ScreenRoot } from './screen-root';
 
 type Props = ComponentProps<typeof ComplementaryArea>;
@@ -41,8 +42,7 @@ export function StylesSidebar(props: Props): JSX.Element {
           </NavigatorScreen>
 
           <NavigatorScreen path="/layout">
-            <NavigatorToParentButton>Back</NavigatorToParentButton>
-            <div>TODO: Typography screen</div>
+            <ScreenLayout />
           </NavigatorScreen>
         </NavigatorProvider>
       </Panel>