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,181 +41,191 @@ 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 {
+export function Preview({
-  const style = {
+  label,
-    backgroundColor: '#f3f3f3',
+  isFocused,
-    headingFontFamily: 'Arial',
+  withHoverView,
-    headingColor: '#000000',
+}: Props): JSX.Element {
-    headingFontWeight: 'normal',
+  const styles = useSelect((select) => select(storeName).getStyles());
-    paletteColors: [
+
-      {
+  const backgroundColor = styles.colors.background;
-        name: 'Sample Background',
+  const headingFontFamily = styles.elements.h1.fontFamily;
-        slug: 'Sample-background',
+  const headingColor = styles.elements.h1.color;
-        color: '#f9f8f3',
+  const headingFontWeight = styles.elements.h1.fontWeight;
-      },
+  const paletteColors = [
-    ],
+    {
-    highlightedColors: [
+      name: 'Sample primary',
-      {
+      slug: 'sample-primary',
-        name: 'Sample primary',
+      color: '#a5a2a3',
-        slug: 'sample-primary',
+    },
-        color: '#e5e2d3',
+    {
-      },
+      name: 'Sample Secondary',
-      {
+      slug: 'sample-secondary',
-        name: 'Sample Secondary',
+      color: '#e5e2d3',
-        slug: 'sample-secondary',
+    },
-        color: '#111111',
+    {
-      },
+      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;
-
+  // When is set label, the preview animates the hover state and displays the label
-  const gradientValue = undefined;
+  const [isHovered, setIsHovered] = useState(false);
-  const withHoverView = true;
 
   return (
-    <motion.div
+    <div
-      style={{
+      onMouseEnter={() => setIsHovered(true)}
-        height: normalizedHeight * ratio,
+      onMouseLeave={() => setIsHovered(false)}
-        width: '100%',
-        background: gradientValue ?? style.backgroundColor,
-        cursor: withHoverView ? 'pointer' : undefined,
-      }}
-      initial="start"
-      animate={
-        (isHovered || isFocused) && !disableMotion && label ? 'hover' : 'start'
-      }
     >
       <motion.div
-        variants={firstFrame}
         style={{
-          height: '100%',
+          height: normalizedHeight * ratio,
-          overflow: 'hidden',
+          width: '100%',
+          background: backgroundColor,
+          cursor: withHoverView ? 'pointer' : undefined,
         }}
+        initial="start"
+        animate={(isHovered || isFocused) && label ? 'hover' : 'start'}
       >
-        <HStack
+        <motion.div
-          spacing={10 * ratio}
+          variants={firstFrame}
-          justify="center"
           style={{
             height: '100%',
             overflow: 'hidden',
           }}
         >
-          <motion.div
+          <HStack
+            spacing={10 * ratio}
+            justify="center"
             style={{
-              fontFamily: style.headingFontFamily,
+              height: '100%',
-              fontSize: 65 * ratio,
+              overflow: 'hidden',
-              color: style.headingColor,
-              fontWeight: style.headingFontWeight,
             }}
-            animate={{ scale: 1, opacity: 1 }}
-            initial={{ scale: 0.1, opacity: 0 }}
-            transition={{ delay: 0.3, type: 'tween' }}
           >
-            Aa
+            <motion.div
-          </motion.div>
+              style={{
-          <VStack spacing={4 * ratio}>
+                fontFamily: headingFontFamily,
-            {style.highlightedColors.map(({ slug, color }, index) => (
+                fontSize: 65 * ratio,
-              <motion.div
+                color: headingColor,
-                key={slug}
+                fontWeight: headingFontWeight,
+              }}
+              animate={{ scale: 1, opacity: 1 }}
+              initial={{ scale: 0.1, opacity: 0 }}
+              transition={{ delay: 0.3, type: 'tween' }}
+            >
+              Aa
+            </motion.div>
+            <VStack spacing={4 * ratio}>
+              {highlightedColors.map(({ slug, color }, index) => (
+                <motion.div
+                  key={slug}
+                  style={{
+                    height: normalizedColorSwatchSize * ratio,
+                    width: normalizedColorSwatchSize * ratio,
+                    background: color,
+                    borderRadius: (normalizedColorSwatchSize * ratio) / 2,
+                  }}
+                  animate={{
+                    scale: 1,
+                    opacity: 1,
+                  }}
+                  initial={{
+                    scale: 0.1,
+                    opacity: 0,
+                  }}
+                  transition={{
+                    delay: index === 1 ? 0.2 : 0.1,
+                  }}
+                />
+              ))}
+            </VStack>
+          </HStack>
+        </motion.div>
+        <motion.div
+          variants={withHoverView && midFrame}
+          style={{
+            height: '100%',
+            width: '100%',
+            position: 'absolute',
+            top: 0,
+            overflow: 'hidden',
+            filter: 'blur(60px)',
+            opacity: 0.1,
+          }}
+        >
+          <HStack
+            spacing={0}
+            justify="flex-start"
+            style={{
+              height: '100%',
+              overflow: 'hidden',
+            }}
+          >
+            {paletteColors.slice(0, 4).map(({ color }) => (
+              <div
+                key={color}
                 style={{
-                  height: normalizedColorSwatchSize * ratio,
+                  height: '100%',
-                  width: normalizedColorSwatchSize * ratio,
                   background: color,
-                  borderRadius: (normalizedColorSwatchSize * ratio) / 2,
+                  flexGrow: 1,
-                }}
-                animate={{
-                  scale: 1,
-                  opacity: 1,
-                }}
-                initial={{
-                  scale: 0.1,
-                  opacity: 0,
-                }}
-                transition={{
-                  delay: index === 1 ? 0.2 : 0.1,
                 }}
               />
             ))}
+          </HStack>
+        </motion.div>
+        <motion.div
+          variants={secondFrame}
+          style={{
+            height: '100%',
+            width: '100%',
+            overflow: 'hidden',
+            position: 'absolute',
+            top: 0,
+          }}
+        >
+          <VStack
+            spacing={3 * ratio}
+            justify="center"
+            style={{
+              height: '100%',
+              overflow: 'hidden',
+              padding: 10 * ratio,
+              boxSizing: 'border-box',
+            }}
+          >
+            {label && (
+              <div
+                style={{
+                  fontSize: 40 * ratio,
+                  fontFamily: headingFontFamily,
+                  color: headingColor,
+                  fontWeight: headingFontWeight,
+                  lineHeight: '1em',
+                  textAlign: 'center',
+                }}
+              >
+                {label}
+              </div>
+            )}
           </VStack>
-        </HStack>
+        </motion.div>
       </motion.div>
-      <motion.div
+    </div>
-        variants={withHoverView && midFrame}
-        style={{
-          height: '100%',
-          width: '100%',
-          position: 'absolute',
-          top: 0,
-          overflow: 'hidden',
-          filter: 'blur(60px)',
-          opacity: 0.1,
-        }}
-      >
-        <HStack
-          spacing={0}
-          justify="flex-start"
-          style={{
-            height: '100%',
-            overflow: 'hidden',
-          }}
-        >
-          {style.paletteColors.slice(0, 4).map(({ color }) => (
-            <div
-              key={color}
-              style={{
-                height: '100%',
-                background: color,
-                flexGrow: 1,
-              }}
-            />
-          ))}
-        </HStack>
-      </motion.div>
-      <motion.div
-        variants={secondFrame}
-        style={{
-          height: '100%',
-          width: '100%',
-          overflow: 'hidden',
-          position: 'absolute',
-          top: 0,
-        }}
-      >
-        <VStack
-          spacing={3 * ratio}
-          justify="center"
-          style={{
-            height: '100%',
-            overflow: 'hidden',
-            padding: 10 * ratio,
-            boxSizing: 'border-box',
-          }}
-        >
-          {label && (
-            <div
-              style={{
-                fontSize: 40 * ratio,
-                fontFamily: style.headingFontFamily,
-                color: style.headingColor,
-                fontWeight: style.headingFontWeight,
-                lineHeight: '1em',
-                textAlign: 'center',
-              }}
-            >
-              {label}
-            </div>
-          )}
-        </VStack>
-      </motion.div>
-    </motion.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",
+        ],
+      ],
     ];
   }