Remove redundant property theme

Because we can write and read meta field directly, we don't need our own implementation.
[MAILPOET-5640]

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/dimensions-panel.tsx

@@ -11,9 +11,9 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { isEqual } from 'lodash';
-import { EmailStyles, storeName } from '../../store';
+import { EmailTheme, storeName } from '../../store';
 
 export function DimensionsPanel() {
   const availableUnits = useSetting('spacing.units') as string[];
@@ -21,11 +21,11 @@ export function DimensionsPanel() {
     availableUnits,
   });
 
-  const [mailpoetEmailData] = useEntityProp(
-    'postType',
-    'mailpoet_email',
-    'mailpoet_data',
-  );
+  const [meta, setMeta] = useEntityProp('postType', 'mailpoet_email', 'meta');
+  const emailTheme = meta?.mailpoet_email_theme as EmailTheme;
+  const updateEmailTheme = (newValue) => {
+    setMeta({ ...meta, mailpoet_email_theme: newValue });
+  };
 
   const { styles } = useSelect((select) => ({
     styles: select(storeName).getStyles(),
@@ -33,77 +33,74 @@ export function DimensionsPanel() {
   const defaultPadding = styles.spacing.padding ?? undefined;
   const defaultBlockGap = styles.spacing.blockGap ?? undefined;
 
-  const { updateEmailMailPoetTheme } = useDispatch(storeName);
-
   // Padding
-  const paddingValues =
-    mailpoetEmailData.theme?.styles?.spacing?.padding ?? defaultPadding;
+  const paddingValues = emailTheme?.styles?.spacing?.padding ?? defaultPadding;
   const resetPadding = () => {
-    void updateEmailMailPoetTheme({
-      ...mailpoetEmailData.theme,
+    updateEmailTheme({
+      ...emailTheme,
       styles: {
-        ...mailpoetEmailData.theme?.styles,
+        ...emailTheme?.styles,
         spacing: {
-          ...mailpoetEmailData.theme?.styles?.spacing,
+          ...emailTheme?.styles?.spacing,
           padding: defaultPadding ?? undefined,
         },
       },
-    } as EmailStyles);
+    });
   };
   const setPaddingValues = (value) => {
-    void updateEmailMailPoetTheme({
-      ...mailpoetEmailData.theme,
+    updateEmailTheme({
+      ...emailTheme,
       styles: {
-        ...mailpoetEmailData.theme?.styles,
+        ...emailTheme?.styles,
         spacing: {
-          ...mailpoetEmailData.theme?.styles?.spacing,
+          ...emailTheme?.styles?.spacing,
           padding: value,
         },
       },
-    } as EmailStyles);
+    });
   };
 
   // Block spacing
   const blockGapValue =
-    mailpoetEmailData.theme?.styles?.spacing?.blockGap ?? defaultBlockGap;
+    emailTheme?.styles?.spacing?.blockGap ?? defaultBlockGap;
   const resetBlockGap = () => {
-    void updateEmailMailPoetTheme({
-      ...mailpoetEmailData.theme,
+    updateEmailTheme({
+      ...emailTheme,
       styles: {
-        ...mailpoetEmailData.theme?.styles,
+        ...emailTheme?.styles,
         spacing: {
           ...styles.spacing,
           blockGap: undefined,
         },
       },
-    } as EmailStyles);
+    });
   };
 
   const setBlockGapValue = (value) => {
-    void updateEmailMailPoetTheme({
-      ...mailpoetEmailData.theme,
+    updateEmailTheme({
+      ...emailTheme,
       styles: {
-        ...mailpoetEmailData.theme?.styles,
+        ...emailTheme?.styles,
         spacing: {
-          ...mailpoetEmailData.theme?.styles?.spacing,
+          ...emailTheme?.styles?.spacing,
           blockGap: value.top || styles.spacing.blockGap,
         },
       },
-    } as EmailStyles);
+    });
   };
 
   const resetAll = () => {
-    void updateEmailMailPoetTheme({
-      ...mailpoetEmailData.theme,
+    updateEmailTheme({
+      ...emailTheme,
       styles: {
-        ...mailpoetEmailData.theme?.styles,
+        ...emailTheme?.styles,
         spacing: {
           ...styles.spacing,
           padding: defaultPadding ?? undefined,
           blockGap: defaultBlockGap ?? undefined,
         },
       },
-    } as EmailStyles);
+    });
   };
 
   return (

mailpoet/assets/js/src/email-editor/engine/components/styles-sidebar/theme-styles.tsx

@@ -21,15 +21,11 @@ export function ThemeStyles(): JSX.Element {
     [],
   );
 
-  const [mailpoetEmailData] = useEntityProp(
-    'postType',
-    'mailpoet_email',
-    'mailpoet_data',
-  );
+  const [meta] = useEntityProp('postType', 'mailpoet_email', 'meta');
 
   const mergedConfig = useMemo(
-    () => merge({}, theme, mailpoetEmailData?.theme) as EmailStyles,
-    [theme, mailpoetEmailData],
+    () => merge({}, theme, meta?.mailpoet_email_theme) as EmailStyles,
+    [theme, meta],
   );
 
   const [styles] = useGlobalStylesOutputWithConfig(mergedConfig);

mailpoet/assets/js/src/email-editor/engine/store/actions.ts

@@ -6,7 +6,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { __ } from '@wordpress/i18n';
 import { apiFetch } from '@wordpress/data-controls';
 import { storeName, mainSidebarEmailTab } from './constants';
-import { SendingPreviewStatus, State, Feature, EmailStyles } from './types';
+import { SendingPreviewStatus, State, Feature } from './types';
 
 export const toggleFeature =
   (feature: Feature) =>
@@ -124,30 +124,6 @@ export function* updateEmailMailPoetProperty(name: string, value: string) {
   );
 }
 
-export function* updateEmailMailPoetTheme(theme: EmailStyles) {
-  const postId = select(storeName).getEmailPostId();
-  // There can be a better way how to get the edited post data
-  const editedPost = select(coreDataStore).getEditedEntityRecord(
-    'postType',
-    'mailpoet_email',
-    postId,
-  );
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const mailpoetData = editedPost?.mailpoet_data || {};
-  yield dispatch(coreDataStore).editEntityRecord(
-    'postType',
-    'mailpoet_email',
-    postId,
-    {
-      mailpoet_data: {
-        ...mailpoetData,
-        theme,
-      },
-    },
-  );
-}
-
 export function* requestSendingNewsletterPreview(
   newsletterId: number,
   email: string,

mailpoet/lib/EmailEditor/Integrations/MailPoet/EmailApiController.php

@@ -34,7 +34,6 @@ class EmailApiController {
       'subject' => $newsletter ? $newsletter->getSubject() : '',
       'preheader' => $newsletter ? $newsletter->getPreheader() : '',
       'preview_url' => $this->newsletterUrl->getViewInBrowserUrl($newsletter),
-      'theme' => get_post_meta($postEmailData['id'], \MailPoet\EmailEditor\Engine\EmailEditor::MAILPOET_EMAIL_META_THEME_TYPE, true),
     ];
   }
 
@@ -50,8 +49,6 @@ class EmailApiController {
       throw new UnexpectedValueException('Newsletter ID does not match the post ID');
     }
 
-    update_post_meta($emailPost->ID, \MailPoet\EmailEditor\Engine\EmailEditor::MAILPOET_EMAIL_META_THEME_TYPE, $data['theme']);
-
     $newsletter->setSubject($data['subject']);
     $newsletter->setPreheader($data['preheader']);
     $this->newsletterRepository->flush();
@@ -63,7 +60,6 @@ class EmailApiController {
       'subject' => Builder::string(),
       'preheader' => Builder::string(),
       'preview_url' => Builder::string(),
-      'theme' => Builder::object(),
     ])->toArray();
   }
 }