Use styles from settings controller in preview

[MAILPOET-5638]

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

@@ -1,8 +1,11 @@
 import {
-  __unstableMotion as motion,
   __experimentalHStack as HStack,
   __experimentalVStack as VStack,
+  __unstableMotion as motion,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { storeName } from '../../store';
 
 const firstFrame = {
   start: {
@@ -38,58 +41,67 @@ const secondFrame = {
 const normalizedHeight = 152;
 const normalizedColorSwatchSize = 32;
 
+type Props = {
+  label?: string;
+  isFocused?: boolean;
+  withHoverView?: boolean;
+};
+
 /**
  * Component to render the styles preview based on the component from the site editor:
  * https://github.com/WordPress/gutenberg/blob/trunk/packages/edit-site/src/components/global-styles/preview.js
  */
-export function Preview(): JSX.Element {
-  const style = {
-    backgroundColor: '#f3f3f3',
-    headingFontFamily: 'Arial',
-    headingColor: '#000000',
-    headingFontWeight: 'normal',
-    paletteColors: [
-      {
-        name: 'Sample Background',
-        slug: 'Sample-background',
-        color: '#f9f8f3',
-      },
-    ],
-    highlightedColors: [
+export function Preview({
+  label,
+  isFocused,
+  withHoverView,
+}: Props): JSX.Element {
+  const styles = useSelect((select) => select(storeName).getStyles());
+
+  const backgroundColor = styles.colors.background;
+  const headingFontFamily = styles.elements.h1.fontFamily;
+  const headingColor = styles.elements.h1.color;
+  const headingFontWeight = styles.elements.h1.fontWeight;
+  const paletteColors = [
     {
       name: 'Sample primary',
       slug: 'sample-primary',
-        color: '#e5e2d3',
+      color: '#a5a2a3',
     },
     {
       name: 'Sample Secondary',
       slug: 'sample-secondary',
-        color: '#111111',
+      color: '#e5e2d3',
     },
-    ],
-  };
+    {
+      name: 'Sample Background',
+      slug: 'Sample-background',
+      color: '#a8c7a9',
+    },
+  ];
+  // https://github.com/WordPress/gutenberg/blob/7fa03fafeb421ab4c3604564211ce6007cc38e84/packages/edit-site/src/components/global-styles/hooks.js#L68-L73
+  const highlightedColors = paletteColors
+    .filter(({ color }) => color !== backgroundColor && color !== headingColor)
+    .slice(0, 2);
 
-  const isFocused = false;
-  const isHovered = false;
-  const disableMotion = false;
-  const label = 'Some Label';
   const ratio = 1;
-
-  const gradientValue = undefined;
-  const withHoverView = true;
+  // When is set label, the preview animates the hover state and displays the label
+  const [isHovered, setIsHovered] = useState(false);
 
   return (
+    <div
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
       <motion.div
         style={{
           height: normalizedHeight * ratio,
           width: '100%',
-        background: gradientValue ?? style.backgroundColor,
+          background: backgroundColor,
           cursor: withHoverView ? 'pointer' : undefined,
         }}
         initial="start"
-      animate={
-        (isHovered || isFocused) && !disableMotion && label ? 'hover' : 'start'
-      }
+        animate={(isHovered || isFocused) && label ? 'hover' : 'start'}
       >
         <motion.div
           variants={firstFrame}
@@ -108,10 +120,10 @@ export function Preview(): JSX.Element {
           >
             <motion.div
               style={{
-              fontFamily: style.headingFontFamily,
+                fontFamily: headingFontFamily,
                 fontSize: 65 * ratio,
-              color: style.headingColor,
-              fontWeight: style.headingFontWeight,
+                color: headingColor,
+                fontWeight: headingFontWeight,
               }}
               animate={{ scale: 1, opacity: 1 }}
               initial={{ scale: 0.1, opacity: 0 }}
@@ -120,7 +132,7 @@ export function Preview(): JSX.Element {
               Aa
             </motion.div>
             <VStack spacing={4 * ratio}>
-            {style.highlightedColors.map(({ slug, color }, index) => (
+              {highlightedColors.map(({ slug, color }, index) => (
                 <motion.div
                   key={slug}
                   style={{
@@ -165,7 +177,7 @@ export function Preview(): JSX.Element {
               overflow: 'hidden',
             }}
           >
-          {style.paletteColors.slice(0, 4).map(({ color }) => (
+            {paletteColors.slice(0, 4).map(({ color }) => (
               <div
                 key={color}
                 style={{
@@ -201,9 +213,9 @@ export function Preview(): JSX.Element {
               <div
                 style={{
                   fontSize: 40 * ratio,
-                fontFamily: style.headingFontFamily,
-                color: style.headingColor,
-                fontWeight: style.headingFontWeight,
+                  fontFamily: headingFontFamily,
+                  color: headingColor,
+                  fontWeight: headingFontWeight,
                   lineHeight: '1em',
                   textAlign: 'center',
                 }}
@@ -214,5 +226,6 @@ export function Preview(): JSX.Element {
           </VStack>
         </motion.div>
       </motion.div>
+    </div>
   );
 }

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

@@ -39,6 +39,13 @@ export type EmailStyles = {
   colors: {
     background: string;
   };
+  elements: {
+    h1: {
+      color: string;
+      fontFamily: string;
+      fontWeight: string;
+    };
+  };
 };
 
 export type EmailEditorLayout = {

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -113,10 +113,18 @@ class SettingsController {
         ],
       ],
       'colors' => [
-        'background' => '#000000',
+        'background' => '#ffffff',
       ],
       'typography' => [
       ],
+      // Value are only for purpose of displaying in the preview component in style sidebar
+      'elements' => [
+        'h1' => [
+          'color' => '#000000',
+          'fontWeight' => 'bold',
+          'fontFamily' => "Arial, 'Helvetica Neue', Helvetica, sans-serif",
+        ],
+      ],
     ];
   }