Add theme.json containing padding and email width

I used theme.json for generating classes useful for full-width in the email editor.
[MAILPOET-5688]

mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx

@@ -95,15 +95,10 @@ export function BlockEditor() {
       width: layoutStyles.width,
       display: 'flex',
       flexFlow: 'column',
-      'box-sizing': 'border-box', // Because we want to exact email width, the padding must be included in the width.
     };
   }
   inlineStyles.background = documentBackground;
   inlineStyles.transition = 'all 0.3s ease 0s';
-  inlineStyles['padding-bottom'] = layoutStyles.padding.bottom;
-  inlineStyles['padding-left'] = layoutStyles.padding.left;
-  inlineStyles['padding-right'] = layoutStyles.padding.right;
-  inlineStyles['padding-top'] = layoutStyles.padding.top;
 
   const contentAreaStyles = {
     background:
@@ -167,7 +162,7 @@ export function BlockEditor() {
                       <WritingFlow>
                         <ObserveTyping>
                           <BlockList
-                            className="is-layout-constrained"
+                            className="is-layout-constrained has-global-padding"
                             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                             // @ts-ignore We have an older package of @wordpress/block-editor that doesn't contain the correct type
                             layout={layout}

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -102,9 +102,25 @@ class SettingsController {
     $coreSettings['spacing']['units'] = ['px'];
     $coreSettings['spacing']['padding'] = true;
 
+    $themeJson = (string)file_get_contents(dirname(__FILE__) . '/theme.json');
+    $themeJson = json_decode($themeJson, true);
+    /** @var array $themeJson */
+    $theme = new \WP_Theme_JSON($themeJson);
+
+    // body selector is later transformed to .editor-styles-wrapper
+    // setting padding for bottom and top is needed because \WP_Theme_JSON::get_stylesheet() set them only for .wp-site-blocks selector
+    $contentVariables = 'body {';
+    $contentVariables .= 'padding-bottom: var(--wp--style--root--padding-bottom);';
+    $contentVariables .= 'padding-top: var(--wp--style--root--padding-top);';
+    $contentVariables .= '}';
+
     $settings = array_merge($coreDefaultSettings, self::DEFAULT_SETTINGS);
     $settings['allowedBlockTypes'] = self::ALLOWED_BLOCK_TYPES;
-    $settings['styles'] = [['css' => wp_get_global_stylesheet(['base-layout-styles'])]];
+    $settings['styles'] = [
+      ['css' => $theme->get_stylesheet()],
+      ['css' => $contentVariables],
+      ['css' => wp_get_global_stylesheet(['base-layout-styles'])],
+    ];
 
     $settings['__experimentalFeatures'] = $coreSettings;
 

mailpoet/lib/EmailEditor/Engine/theme.json

@@ -0,0 +1,19 @@
+{
+  "version": 2,
+  "settings": {
+    "layout": {
+      "contentSize": "660px"
+    },
+    "useRootPaddingAwareAlignments": true
+  },
+  "styles": {
+    "spacing": {
+      "padding": {
+        "bottom": "10px",
+        "left": "10px",
+        "right": "10px",
+        "top": "10px"
+      }
+    }
+  }
+}