From e47eb268d14ecb992d73575bcd518513bd2ac46b Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Tue, 18 Jun 2024 09:08:18 -0400
Subject: [PATCH 01/15] scaffold template styles plugin

---
 plugin.php                                    |  1 +
 plugins/newsletter-template-styles/index.js   |  8 ++++
 plugins/newsletter-template-styles/index.php  | 42 +++++++++++++++++++
 .../newsletterStylePanel.tsx                  | 15 +++++++
 webpack.config.js                             |  1 +
 5 files changed, 67 insertions(+)
 create mode 100644 plugins/newsletter-template-styles/index.js
 create mode 100644 plugins/newsletter-template-styles/index.php
 create mode 100644 plugins/newsletter-template-styles/newsletterStylePanel.tsx

diff --git a/plugin.php b/plugin.php
index bd8890d1..4f3e8c1e 100644
--- a/plugin.php
+++ b/plugin.php
@@ -56,6 +56,7 @@ function () {
 require_once __DIR__ . '/block-filters/separator/index.php';
 require_once __DIR__ . '/plugins/newsletter-from-post/index.php';
 require_once __DIR__ . '/plugins/newsletter-status/index.php';
+require_once __DIR__ . '/plugins/newsletter-template-styles/index.php';
 
 /* class files get loaded by the autoloader */
 
diff --git a/plugins/newsletter-template-styles/index.js b/plugins/newsletter-template-styles/index.js
new file mode 100644
index 00000000..0ad825ac
--- /dev/null
+++ b/plugins/newsletter-template-styles/index.js
@@ -0,0 +1,8 @@
+import { registerPlugin } from '@wordpress/plugins';
+
+import NewsletterTemplateStylesPanel from './newsletterStylePanel';
+
+registerPlugin('newsletter-status', {
+  render: NewsletterTemplateStylesPanel,
+  icon: 'dashicons-art',
+});
diff --git a/plugins/newsletter-template-styles/index.php b/plugins/newsletter-template-styles/index.php
new file mode 100644
index 00000000..8e06dcfe
--- /dev/null
+++ b/plugins/newsletter-template-styles/index.php
@@ -0,0 +1,42 @@
+<?php
+/**
+ * Adds the sidebar script to the Post edit screen.
+ *
+ * This file will be copied to the assets build directory.
+ *
+ * @package wp-newsletter-builder-demo-plugin
+ */
+
+namespace WP_Newsletter_Builder;
+
+add_action(
+	'enqueue_block_editor_assets',
+	__NAMESPACE__ . '\action_enqueue_style_sidebar_assets'
+);
+
+/**
+ * Registers all slotfill assets so that they can be enqueued through Gutenberg in
+ * the corresponding context.
+ */
+function register_style_plugin_scripts(): void {
+	wp_register_script(
+		'plugin-newsletter-template-styles',
+		get_entry_asset_url( 'newsletter-template-styles' ),
+		get_asset_dependency_array( 'newsletter-template-styles' ),
+		get_asset_version( 'newsletter-template-styles' ),
+		true
+	);
+	wp_set_script_translations( 'plugin-newsletter-template-styles' );
+}
+add_action( 'init', __NAMESPACE__ . '\register_style_plugin_scripts' );
+
+/**
+ * Enqueue block editor assets for this slotfill.
+ */
+function action_enqueue_style_sidebar_assets(): void {
+	$post_type = get_edit_post_type();
+	if ( 'nb_template' !== $post_type ) {
+		return;
+	}
+	wp_enqueue_script( 'plugin-newsletter-template-styles' );
+}
diff --git a/plugins/newsletter-template-styles/newsletterStylePanel.tsx b/plugins/newsletter-template-styles/newsletterStylePanel.tsx
new file mode 100644
index 00000000..280d10a8
--- /dev/null
+++ b/plugins/newsletter-template-styles/newsletterStylePanel.tsx
@@ -0,0 +1,15 @@
+import React from '@wordpress/element';
+import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
+
+// @ts-ignore
+export default function NewsletterTemplateStylesPanel() {
+  return (
+    <PluginDocumentSettingPanel
+      name="newsletter-template-styles"
+      title="Template Styles"
+      className="newsletter-template-styles-panel"
+    >
+      <p>This is my template style panel</p>
+    </PluginDocumentSettingPanel>
+  );
+}
diff --git a/webpack.config.js b/webpack.config.js
index 363cd84e..79a3bd0b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -31,6 +31,7 @@ module.exports = (env, { mode }) => ({
           'wp-newsletter-builder-separator/index': './block-filters/separator',
           'wp-newsletter-builder-from-post/index': './plugins/newsletter-from-post',
           'newsletter-status/index': './plugins/newsletter-status',
+          'newsletter-template-styles/index': './plugins/newsletter-template-styles',
         }),
     };
   },

From 2a4b773fa23a3fd30fcbd0a77019348b23053c0e Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Thu, 20 Jun 2024 11:45:59 -0400
Subject: [PATCH 02/15] wip

---
 blocks/post-byline/style.scss                 |  2 +-
 blocks/post/index.scss                        |  2 +-
 blocks/post/style.scss                        |  2 +-
 components/emailTypeSelector/index.tsx        |  5 ++-
 config/post-meta.json                         |  6 +++
 .../newsletterStylePanel.tsx                  | 42 ++++++++++++++++++-
 scss/core-blocks/heading.scss                 |  4 +-
 scss/core-blocks/list.scss                    |  8 ++--
 scss/core-blocks/paragraph.scss               |  4 +-
 scss/core-blocks/typography.scss              |  3 +-
 scss/editor/editor.scss                       |  6 +--
 src/assets.php                                | 31 +++++++++++++-
 12 files changed, 95 insertions(+), 20 deletions(-)

diff --git a/blocks/post-byline/style.scss b/blocks/post-byline/style.scss
index 9ff59557..810fc109 100644
--- a/blocks/post-byline/style.scss
+++ b/blocks/post-byline/style.scss
@@ -12,7 +12,7 @@
  */
 
 .post__byline {
-  font-family: Georgia,serif;
+  // font-family: Georgia,serif;
   font-size: 15px;
   font-weight: bold;
   text-align: center;
diff --git a/blocks/post/index.scss b/blocks/post/index.scss
index 4ed1f79e..cc65bd8f 100644
--- a/blocks/post/index.scss
+++ b/blocks/post/index.scss
@@ -10,7 +10,7 @@
 
 .wp-block-wp-newsletter-builder-post {
   margin: 0 auto;
-  font-family: Georgia, serif;
+  // font-family: Georgia, serif;
 
   .newsletter-remove-post {
     border-radius: 50%;
diff --git a/blocks/post/style.scss b/blocks/post/style.scss
index fa2688b7..39920a88 100644
--- a/blocks/post/style.scss
+++ b/blocks/post/style.scss
@@ -37,7 +37,7 @@
   }
 
   .post__byline {
-    font-family: Georgia,serif;
+    // font-family: Georgia,serif;
     font-size: 15px;
     font-weight: bold;
     text-align: center;
diff --git a/components/emailTypeSelector/index.tsx b/components/emailTypeSelector/index.tsx
index dac7553c..ddb50497 100644
--- a/components/emailTypeSelector/index.tsx
+++ b/components/emailTypeSelector/index.tsx
@@ -128,7 +128,10 @@ function EmailTypeSelector({
     apiFetch({
       path: `/wp/v2/nb_template/${value}?context=edit`,
     }).then((response) => {
-      const { content } = response as WP_REST_API_Post; // eslint-disable-line camelcase
+      const { content, meta } = response as WP_REST_API_Post; // eslint-disable-line camelcase
+      // @ts-ignore
+      const { nb_template_font } = meta; // eslint-disable-line
+      document?.documentElement?.style?.setProperty('--test', nb_template_font);
       contentHandler(content.raw as string);
     });
   };
diff --git a/config/post-meta.json b/config/post-meta.json
index 80e838d1..edd9a922 100644
--- a/config/post-meta.json
+++ b/config/post-meta.json
@@ -127,5 +127,11 @@
         "type": "number"
       }
     }
+  },
+  "nb_template_font": {
+    "post_types": [
+      "nb_template"
+    ],
+    "type": "string"
   }
 }
diff --git a/plugins/newsletter-template-styles/newsletterStylePanel.tsx b/plugins/newsletter-template-styles/newsletterStylePanel.tsx
index 280d10a8..e557f4bb 100644
--- a/plugins/newsletter-template-styles/newsletterStylePanel.tsx
+++ b/plugins/newsletter-template-styles/newsletterStylePanel.tsx
@@ -1,15 +1,53 @@
-import React from '@wordpress/element';
+import React, { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
+// import { useEntityProp } from '@wordpress/core-data';
+import { usePostMetaValue } from '@alleyinteractive/block-editor-tools';
+import { ColorPicker, SelectControl } from '@wordpress/components';
 
 // @ts-ignore
 export default function NewsletterTemplateStylesPanel() {
+  const [bgColor, setBgColor] = useState('#fff');
+  const [linkColor, setLinkColor] = useState('#0073aa');
+
+  const emailSafeFonts = [
+    { label: 'Arial', value: 'Arial, sans serif' },
+    { label: 'Courier New', value: 'Courier New, monospace' },
+    { label: 'Georgia', value: 'Georgia, serif' },
+    { label: 'Impact', value: 'Impact, sans-serif' },
+    { label: 'Lucida Sans Unicode', value: 'Lucida Sans Unicode, sans-serif' },
+    { label: 'Tahoma', value: 'Tahoma, sans serif' },
+    { label: 'Times New Roman', value: 'Times New Roman, serif' },
+    { label: 'Trebuchet MS', value: 'Trebuchet MS, sans-serif' },
+    { label: 'Verdana', value: 'Verdana, sans serif' },
+  ];
+
+  // const postId = select('core/editor').getCurrentPostId();
+  const [fontStack, setFontStack] = usePostMetaValue('nb_template_font');
+
   return (
     <PluginDocumentSettingPanel
       name="newsletter-template-styles"
       title="Template Styles"
       className="newsletter-template-styles-panel"
     >
-      <p>This is my template style panel</p>
+      <h3>{__('Background color', 'wp-newsletter-builder')}</h3>
+      <ColorPicker
+        color={bgColor}
+        onChange={(color) => setBgColor(color)}
+      />
+      <h3>{__('Link color', 'wp-newsletter-builder')}</h3>
+      <ColorPicker
+        color={linkColor}
+        onChange={(color) => setLinkColor(color)}
+      />
+      <h3>{__('Font family', 'wp-newsletter-builder')}</h3>
+      <SelectControl
+        value={fontStack || 'Arial, sans-serif'}
+        options={emailSafeFonts}
+        onChange={setFontStack}
+      />
+
     </PluginDocumentSettingPanel>
   );
 }
diff --git a/scss/core-blocks/heading.scss b/scss/core-blocks/heading.scss
index 1812497f..13cca7f3 100644
--- a/scss/core-blocks/heading.scss
+++ b/scss/core-blocks/heading.scss
@@ -3,13 +3,13 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: Georgia, serif;
+  font-family: var(--test);
   font-weight: bold;
   line-height: 1.3;
   margin: 0;
 
   span {
-    font-family: Georgia, serif;
+    font-family: var(--test);
   }
 }
 
diff --git a/scss/core-blocks/list.scss b/scss/core-blocks/list.scss
index 95f3dab8..b6671e1a 100644
--- a/scss/core-blocks/list.scss
+++ b/scss/core-blocks/list.scss
@@ -1,10 +1,10 @@
 ul, ol {
-  font-family: Georgia, serif;
+  // font-family: Georgia, serif;
   font-size: 16px;
   line-height: 1.3;
   margin: 0;
 
-  span {
-    font-family: Georgia, serif;
-  }
+  // span {
+  //   font-family: Georgia, serif;
+  // }
 }
diff --git a/scss/core-blocks/paragraph.scss b/scss/core-blocks/paragraph.scss
index 268504d9..19491331 100644
--- a/scss/core-blocks/paragraph.scss
+++ b/scss/core-blocks/paragraph.scss
@@ -1,10 +1,10 @@
 p {
-  font-family: Georgia, serif;
+  // font-family: Georgia, serif;
   font-size: 16px;
   line-height: 1.33;
   margin: 0;
 
   span {
-    font-family: Georgia, serif;
+  //   font-family: Georgia, serif;
   }
 }
diff --git a/scss/core-blocks/typography.scss b/scss/core-blocks/typography.scss
index d749db34..62f5f9ef 100644
--- a/scss/core-blocks/typography.scss
+++ b/scss/core-blocks/typography.scss
@@ -1,3 +1,4 @@
 a, em, s, strong, sup, sub {
-  font-family: Georgia, serif;
+  // font-family: Georgia, serif;
+  font-family: var(--test);
 }
diff --git a/scss/editor/editor.scss b/scss/editor/editor.scss
index 9255e83b..d72903ae 100644
--- a/scss/editor/editor.scss
+++ b/scss/editor/editor.scss
@@ -12,9 +12,9 @@
     width: 320px;
     width: calc(28000% - 167400px);
 
-    .block-editor-rich-text__editable {
-      font-family: Georgia, serif;
-    }
+    // .block-editor-rich-text__editable {
+    //   font-family: Georgia, serif;
+    // }
 
     // Reset this style so that the editor matches the email client output.
     // stylelint-disable-next-line selector-max-compound-selectors
diff --git a/src/assets.php b/src/assets.php
index 1c1bc9fa..4b96d4f6 100644
--- a/src/assets.php
+++ b/src/assets.php
@@ -14,6 +14,7 @@
 add_action( 'wp_newsletter_builder_enqueue_styles', __NAMESPACE__ . '\action_newsletters_enqueue_styles' );
 add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\action_admin_enqueue_scripts' );
 add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\action_enqueue_block_editor_assets' );
+add_action( 'admin_head', __NAMESPACE__ . '\set_template_values' );
 
 /**
  * A callback for the wp_enqueue_scripts hook.
@@ -38,16 +39,24 @@ function action_wp_enqueue_scripts(): void {
  * A callback for the wp_newsletter_builder_enqueue_styles hook.
  */
 function action_newsletters_enqueue_styles(): void {
+	global $wp_query;
 	$blocks = [
-		'header',
+		'button',
+		'divider',
 		'footer',
+		'header',
+		'heading',
+		'list',
+		'paragraph',
 		'post',
-		'two-up-post',
 		'section',
+		'two-up-post',
 	];
 	?>
 	<style type="text/css">
 	<?php
+	$template_id = get_post_meta( get_the_ID(), 'nb_newsletter_template', true );
+	$font = get_post_meta( $template_id, 'nb_template_font', true );
 	foreach ( $blocks as $block ) {
 		if ( validate_path( trailingslashit( get_entry_dir_path( $block, true ) ) . 'style-index.css' ) ) {
 			$entry_base_url = trailingslashit( get_entry_dir_path( $block, true ) ) . 'style-index.css';
@@ -55,6 +64,7 @@ function action_newsletters_enqueue_styles(): void {
 			$css = file_get_contents( $entry_base_url ); // phpcs:ignore WordPressVIPMinimum.Performance.FetchingRemoteData.FileGetContentsUnknown
 			if ( ! empty( $css ) ) {
 				$css = str_replace( '../images/', plugins_url( '../build/images/', __FILE__ ), $css );
+				$css = str_replace( 'var(--test)', $font, $css );
 				echo wp_strip_all_tags( $css ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 			}
 		}
@@ -66,6 +76,10 @@ function action_newsletters_enqueue_styles(): void {
 
 		$css = file_get_contents( $entry_base_url ); // phpcs:ignore WordPressVIPMinimum.Performance.FetchingRemoteData.FileGetContentsUnknown
 		if ( ! empty( $css ) ) {
+			error_log('you are here');
+			error_log( $wp_query->queried_object_id );
+			error_log( $template_id );
+			$css = str_replace( 'var(--test)', $font, $css );
 			echo wp_strip_all_tags( $css ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 		}
 	}
@@ -274,3 +288,16 @@ function load_scripts(): void {
 }
 
 load_scripts();
+
+/**
+ * Set the template values for the editor.
+ */
+function set_template_values(): void {
+	$current_screen = get_current_screen();
+	if ( ( 'post' !== $current_screen->base ) || ( 'nb_newsletter' !== $current_screen->post_type ) ) {
+		return;
+	}
+	$template_id = get_post_meta( get_the_ID(), 'nb_newsletter_template', true );
+	$font = get_post_meta( $template_id, 'nb_template_font', true );
+	echo("<style>:root {--test: {$font};}</style>");
+}

From 38e71a963e781145fc252a0342bb89e057c4d570 Mon Sep 17 00:00:00 2001
From: efuller <eric@alley.co>
Date: Thu, 20 Jun 2024 15:27:01 -0400
Subject: [PATCH 03/15] Use get_queried_object_id to get newsletter id

---
 src/assets.php | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/assets.php b/src/assets.php
index 4b96d4f6..7a9e4946 100644
--- a/src/assets.php
+++ b/src/assets.php
@@ -39,7 +39,6 @@ function action_wp_enqueue_scripts(): void {
  * A callback for the wp_newsletter_builder_enqueue_styles hook.
  */
 function action_newsletters_enqueue_styles(): void {
-	global $wp_query;
 	$blocks = [
 		'button',
 		'divider',
@@ -55,7 +54,7 @@ function action_newsletters_enqueue_styles(): void {
 	?>
 	<style type="text/css">
 	<?php
-	$template_id = get_post_meta( get_the_ID(), 'nb_newsletter_template', true );
+	$template_id = get_post_meta( get_queried_object_id(), 'nb_newsletter_template', true );
 	$font = get_post_meta( $template_id, 'nb_template_font', true );
 	foreach ( $blocks as $block ) {
 		if ( validate_path( trailingslashit( get_entry_dir_path( $block, true ) ) . 'style-index.css' ) ) {
@@ -76,9 +75,6 @@ function action_newsletters_enqueue_styles(): void {
 
 		$css = file_get_contents( $entry_base_url ); // phpcs:ignore WordPressVIPMinimum.Performance.FetchingRemoteData.FileGetContentsUnknown
 		if ( ! empty( $css ) ) {
-			error_log('you are here');
-			error_log( $wp_query->queried_object_id );
-			error_log( $template_id );
 			$css = str_replace( 'var(--test)', $font, $css );
 			echo wp_strip_all_tags( $css ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 		}
@@ -153,7 +149,7 @@ function action_enqueue_block_editor_assets(): void {
 
 	/**
 	 * Allow filtering of allowed post types available in the post picker.
-	 * 
+	 *
 	 * @param array<string> $allowed_post_types The allowed post types. Defaults to `post`.
 	 * @return array<string> The filtered array of allowed post types.
 	 */

From 7ecbed9246f19c45f095c9d03010fae34b579d3d Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Fri, 21 Jun 2024 09:20:45 -0400
Subject: [PATCH 04/15] add bg and link colors to post meta

---
 config/post-meta.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/config/post-meta.json b/config/post-meta.json
index edd9a922..acceaf24 100644
--- a/config/post-meta.json
+++ b/config/post-meta.json
@@ -133,5 +133,17 @@
       "nb_template"
     ],
     "type": "string"
+  },
+  "nb_template_bg_color": {
+    "post_types": [
+      "nb_template"
+    ],
+    "type": "string"
+  },
+  "nb_template_link_color": {
+    "post_types": [
+      "nb_template"
+    ],
+    "type": "string"
   }
 }

From 6f130ae4a0d9fc860c39e90a9ab9bec65d5dc79b Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Fri, 21 Jun 2024 09:42:41 -0400
Subject: [PATCH 05/15] adjust newsletter style panel logic

---
 .../newsletterStylePanel.tsx                  | 54 ++++++++++++-------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/plugins/newsletter-template-styles/newsletterStylePanel.tsx b/plugins/newsletter-template-styles/newsletterStylePanel.tsx
index e557f4bb..7e1bb50c 100644
--- a/plugins/newsletter-template-styles/newsletterStylePanel.tsx
+++ b/plugins/newsletter-template-styles/newsletterStylePanel.tsx
@@ -1,30 +1,40 @@
-import React, { useState } from '@wordpress/element';
+import React, { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
-// import { useEntityProp } from '@wordpress/core-data';
 import { usePostMetaValue } from '@alleyinteractive/block-editor-tools';
 import { ColorPicker, SelectControl } from '@wordpress/components';
 
 // @ts-ignore
 export default function NewsletterTemplateStylesPanel() {
-  const [bgColor, setBgColor] = useState('#fff');
-  const [linkColor, setLinkColor] = useState('#0073aa');
+  const [bgColor, setBgColor] = usePostMetaValue('nb_template_bg_color');
+  const [fontStack, setFontStack] = usePostMetaValue('nb_template_font');
+  const [linkColor, setLinkColor] = usePostMetaValue('nb_template_link_color');
+
+  const defaultValues = {
+    bgColor: '#fefefe',
+    fontStack: 'Arial, sans-serif',
+    linkColor: '#0073aa',
+  };
+
+  // Set intial styles on load.
+  useEffect(() => {
+    document.documentElement.style.setProperty('--template-bg-color', bgColor || defaultValues.bgColor);
+    document.documentElement.style.setProperty('--template-font-family', fontStack || defaultValues.fontStack);
+    document.documentElement.style.setProperty('--template-link-color', linkColor || defaultValues.linkColor);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const emailSafeFonts = [
-    { label: 'Arial', value: 'Arial, sans serif' },
+    { label: 'Arial', value: 'Arial, sans-serif' },
     { label: 'Courier New', value: 'Courier New, monospace' },
     { label: 'Georgia', value: 'Georgia, serif' },
-    { label: 'Impact', value: 'Impact, sans-serif' },
+    { label: 'Helvetica', value: 'Helvetica, sans-serif' },
     { label: 'Lucida Sans Unicode', value: 'Lucida Sans Unicode, sans-serif' },
-    { label: 'Tahoma', value: 'Tahoma, sans serif' },
+    { label: 'Tahoma', value: 'Tahoma, sans-serif' },
     { label: 'Times New Roman', value: 'Times New Roman, serif' },
     { label: 'Trebuchet MS', value: 'Trebuchet MS, sans-serif' },
-    { label: 'Verdana', value: 'Verdana, sans serif' },
+    { label: 'Verdana', value: 'Verdana, sans-serif' },
   ];
 
-  // const postId = select('core/editor').getCurrentPostId();
-  const [fontStack, setFontStack] = usePostMetaValue('nb_template_font');
-
   return (
     <PluginDocumentSettingPanel
       name="newsletter-template-styles"
@@ -33,21 +43,29 @@ export default function NewsletterTemplateStylesPanel() {
     >
       <h3>{__('Background color', 'wp-newsletter-builder')}</h3>
       <ColorPicker
-        color={bgColor}
-        onChange={(color) => setBgColor(color)}
+        color={bgColor || defaultValues.bgColor}
+        onChange={(color) => {
+          setBgColor(color);
+          document.documentElement.style.setProperty('--template-bg-color', color);
+        }}
       />
       <h3>{__('Link color', 'wp-newsletter-builder')}</h3>
       <ColorPicker
-        color={linkColor}
-        onChange={(color) => setLinkColor(color)}
+        color={linkColor || defaultValues.linkColor}
+        onChange={(color) => {
+          setLinkColor(color);
+          document.documentElement.style.setProperty('--template-link-color', color);
+        }}
       />
       <h3>{__('Font family', 'wp-newsletter-builder')}</h3>
       <SelectControl
-        value={fontStack || 'Arial, sans-serif'}
+        value={fontStack || defaultValues.fontStack}
         options={emailSafeFonts}
-        onChange={setFontStack}
+        onChange={(font) => {
+          setFontStack(font);
+          document.documentElement.style.setProperty('--template-font-family', font);
+        }}
       />
-
     </PluginDocumentSettingPanel>
   );
 }

From 2ab430c28b119c2d6c3032c6b4ceed1edb35fdc0 Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Fri, 21 Jun 2024 09:47:42 -0400
Subject: [PATCH 06/15] update logic to set styles from template

---
 src/assets.php | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/assets.php b/src/assets.php
index 7a9e4946..bd618b45 100644
--- a/src/assets.php
+++ b/src/assets.php
@@ -55,7 +55,9 @@ function action_newsletters_enqueue_styles(): void {
 	<style type="text/css">
 	<?php
 	$template_id = get_post_meta( get_queried_object_id(), 'nb_newsletter_template', true );
-	$font = get_post_meta( $template_id, 'nb_template_font', true );
+	$font        = get_post_meta( $template_id, 'nb_template_font', true );
+	$bg_color    = get_post_meta( $template_id, 'nb_template_bg_color', true );
+	$link_color  = get_post_meta( $template_id, 'nb_template_link_color', true );
 	foreach ( $blocks as $block ) {
 		if ( validate_path( trailingslashit( get_entry_dir_path( $block, true ) ) . 'style-index.css' ) ) {
 			$entry_base_url = trailingslashit( get_entry_dir_path( $block, true ) ) . 'style-index.css';
@@ -63,7 +65,6 @@ function action_newsletters_enqueue_styles(): void {
 			$css = file_get_contents( $entry_base_url ); // phpcs:ignore WordPressVIPMinimum.Performance.FetchingRemoteData.FileGetContentsUnknown
 			if ( ! empty( $css ) ) {
 				$css = str_replace( '../images/', plugins_url( '../build/images/', __FILE__ ), $css );
-				$css = str_replace( 'var(--test)', $font, $css );
 				echo wp_strip_all_tags( $css ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 			}
 		}
@@ -75,7 +76,9 @@ function action_newsletters_enqueue_styles(): void {
 
 		$css = file_get_contents( $entry_base_url ); // phpcs:ignore WordPressVIPMinimum.Performance.FetchingRemoteData.FileGetContentsUnknown
 		if ( ! empty( $css ) ) {
-			$css = str_replace( 'var(--test)', $font, $css );
+			$css = str_replace( 'var(--template-font-family)', $font, $css );
+			$css = str_replace( 'var(--template-bg-color)', $bg_color, $css );
+			$css = str_replace( 'var(--template-link-color)', $link_color, $css );
 			echo wp_strip_all_tags( $css ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 		}
 	}
@@ -294,6 +297,8 @@ function set_template_values(): void {
 		return;
 	}
 	$template_id = get_post_meta( get_the_ID(), 'nb_newsletter_template', true );
-	$font = get_post_meta( $template_id, 'nb_template_font', true );
-	echo("<style>:root {--test: {$font};}</style>");
+	$bg_color    = get_post_meta( $template_id, 'nb_template_bg_color', true );
+	$font        = get_post_meta( $template_id, 'nb_template_font', true );
+	$link_color  = get_post_meta( $template_id, 'nb_template_link_color', true );
+	echo( "<style>:root {--template-font-family: {$font}; --template-bg-color: {$bg_color}; --template-link-color: {$link_color};}</style>" ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 }

From 50018b3343a6cabf62fc9731e745840fe4d31e99 Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Fri, 21 Jun 2024 09:51:05 -0400
Subject: [PATCH 07/15] update css custom variables

---
 scss/core-blocks/heading.scss    | 4 ++--
 scss/core-blocks/list.scss       | 8 ++++----
 scss/core-blocks/paragraph.scss  | 4 ++--
 scss/core-blocks/typography.scss | 7 +++++--
 scss/editor/editor.scss          | 6 +++---
 scss/global.scss                 | 1 +
 6 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/scss/core-blocks/heading.scss b/scss/core-blocks/heading.scss
index 13cca7f3..4c5a72b4 100644
--- a/scss/core-blocks/heading.scss
+++ b/scss/core-blocks/heading.scss
@@ -3,13 +3,13 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--test);
+  font-family: var(--template-font-family);
   font-weight: bold;
   line-height: 1.3;
   margin: 0;
 
   span {
-    font-family: var(--test);
+    font-family: var(--template-font-family);
   }
 }
 
diff --git a/scss/core-blocks/list.scss b/scss/core-blocks/list.scss
index b6671e1a..d07b3c99 100644
--- a/scss/core-blocks/list.scss
+++ b/scss/core-blocks/list.scss
@@ -1,10 +1,10 @@
 ul, ol {
-  // font-family: Georgia, serif;
+  font-family: var(--template-font-family);
   font-size: 16px;
   line-height: 1.3;
   margin: 0;
 
-  // span {
-  //   font-family: Georgia, serif;
-  // }
+  span {
+    font-family: var(--template-font-family);
+  }
 }
diff --git a/scss/core-blocks/paragraph.scss b/scss/core-blocks/paragraph.scss
index 19491331..6c03466c 100644
--- a/scss/core-blocks/paragraph.scss
+++ b/scss/core-blocks/paragraph.scss
@@ -1,10 +1,10 @@
 p {
-  // font-family: Georgia, serif;
+  font-family: var(--template-font-family);
   font-size: 16px;
   line-height: 1.33;
   margin: 0;
 
   span {
-  //   font-family: Georgia, serif;
+    font-family: var(--template-font-family);
   }
 }
diff --git a/scss/core-blocks/typography.scss b/scss/core-blocks/typography.scss
index 62f5f9ef..cfdb39f1 100644
--- a/scss/core-blocks/typography.scss
+++ b/scss/core-blocks/typography.scss
@@ -1,4 +1,7 @@
 a, em, s, strong, sup, sub {
-  // font-family: Georgia, serif;
-  font-family: var(--test);
+  font-family: var(--template-font-family);
+}
+
+a {
+  color: var(--template-link-color);
 }
diff --git a/scss/editor/editor.scss b/scss/editor/editor.scss
index d72903ae..ded6d622 100644
--- a/scss/editor/editor.scss
+++ b/scss/editor/editor.scss
@@ -12,9 +12,9 @@
     width: 320px;
     width: calc(28000% - 167400px);
 
-    // .block-editor-rich-text__editable {
-    //   font-family: Georgia, serif;
-    // }
+    .wp-block-post-content.wp-block-post-content {
+      background-color: var(--template-bg-color);
+    }
 
     // Reset this style so that the editor matches the email client output.
     // stylelint-disable-next-line selector-max-compound-selectors
diff --git a/scss/global.scss b/scss/global.scss
index 2ed36bd3..0965e265 100644
--- a/scss/global.scss
+++ b/scss/global.scss
@@ -1,4 +1,5 @@
 .wp-newsletter-builder-container {
+  background-color: var(--template-bg-color);
   margin: 0 auto;
   max-width: 600px;
   min-width: 320px;

From c4fb9950da06cedb1b6a3ad140ffc5f676b40ca4 Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Fri, 21 Jun 2024 09:58:45 -0400
Subject: [PATCH 08/15] tidy up

---
 scss/core-blocks/button.scss | 2 ++
 scss/core-blocks/list.scss   | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/scss/core-blocks/button.scss b/scss/core-blocks/button.scss
index 412ad90d..e9036e6c 100644
--- a/scss/core-blocks/button.scss
+++ b/scss/core-blocks/button.scss
@@ -1,4 +1,5 @@
 .wp-block-button {
+  font-family: var(--template-font-family);
   margin: 0 auto;
   padding: 10px 14px;
   text-align: center;
@@ -40,6 +41,7 @@
   background-color: #0279af;
   border-radius: 4px;
   color: #fff;
+  font-family: var(--template-font-family);
   font-size: 14px;
   line-height: 24px;
   padding: 10px 14px;
diff --git a/scss/core-blocks/list.scss b/scss/core-blocks/list.scss
index d07b3c99..7eba4c9e 100644
--- a/scss/core-blocks/list.scss
+++ b/scss/core-blocks/list.scss
@@ -4,7 +4,7 @@ ul, ol {
   line-height: 1.3;
   margin: 0;
 
-  span {
+  div {
     font-family: var(--template-font-family);
   }
 }

From 503e9cd1b8121f892da27787cf98e0e5d11f6306 Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Fri, 21 Jun 2024 11:08:51 -0400
Subject: [PATCH 09/15] tidy up

---
 blocks/post-byline/style.scss | 2 +-
 blocks/post/index.scss        | 2 +-
 blocks/post/style.scss        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/blocks/post-byline/style.scss b/blocks/post-byline/style.scss
index 810fc109..7c8346f5 100644
--- a/blocks/post-byline/style.scss
+++ b/blocks/post-byline/style.scss
@@ -12,7 +12,7 @@
  */
 
 .post__byline {
-  // font-family: Georgia,serif;
+  font-family: var(--template-font-family);
   font-size: 15px;
   font-weight: bold;
   text-align: center;
diff --git a/blocks/post/index.scss b/blocks/post/index.scss
index cc65bd8f..f7e407d9 100644
--- a/blocks/post/index.scss
+++ b/blocks/post/index.scss
@@ -10,7 +10,7 @@
 
 .wp-block-wp-newsletter-builder-post {
   margin: 0 auto;
-  // font-family: Georgia, serif;
+  font-family: var(--template-font-family);
 
   .newsletter-remove-post {
     border-radius: 50%;
diff --git a/blocks/post/style.scss b/blocks/post/style.scss
index 39920a88..42bbc7aa 100644
--- a/blocks/post/style.scss
+++ b/blocks/post/style.scss
@@ -37,7 +37,7 @@
   }
 
   .post__byline {
-    // font-family: Georgia,serif;
+    font-family: var(--template-font-family);
     font-size: 15px;
     font-weight: bold;
     text-align: center;

From 0b2120a48951083a13c04d7e3148d774745db790 Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Fri, 21 Jun 2024 11:25:58 -0400
Subject: [PATCH 10/15] more tidying up

---
 components/emailTypeSelector/index.tsx                       | 5 +----
 plugins/newsletter-template-styles/index.js                  | 4 ++--
 .../{newsletterStylePanel.tsx => newsletterStylesPanel.tsx}  | 0
 3 files changed, 3 insertions(+), 6 deletions(-)
 rename plugins/newsletter-template-styles/{newsletterStylePanel.tsx => newsletterStylesPanel.tsx} (100%)

diff --git a/components/emailTypeSelector/index.tsx b/components/emailTypeSelector/index.tsx
index ddb50497..dac7553c 100644
--- a/components/emailTypeSelector/index.tsx
+++ b/components/emailTypeSelector/index.tsx
@@ -128,10 +128,7 @@ function EmailTypeSelector({
     apiFetch({
       path: `/wp/v2/nb_template/${value}?context=edit`,
     }).then((response) => {
-      const { content, meta } = response as WP_REST_API_Post; // eslint-disable-line camelcase
-      // @ts-ignore
-      const { nb_template_font } = meta; // eslint-disable-line
-      document?.documentElement?.style?.setProperty('--test', nb_template_font);
+      const { content } = response as WP_REST_API_Post; // eslint-disable-line camelcase
       contentHandler(content.raw as string);
     });
   };
diff --git a/plugins/newsletter-template-styles/index.js b/plugins/newsletter-template-styles/index.js
index 0ad825ac..0d23ac15 100644
--- a/plugins/newsletter-template-styles/index.js
+++ b/plugins/newsletter-template-styles/index.js
@@ -1,8 +1,8 @@
 import { registerPlugin } from '@wordpress/plugins';
 
-import NewsletterTemplateStylesPanel from './newsletterStylePanel';
+import NewsletterTemplateStylesPanel from './newsletterStylesPanel';
 
-registerPlugin('newsletter-status', {
+registerPlugin('newsletter-template-styles', {
   render: NewsletterTemplateStylesPanel,
   icon: 'dashicons-art',
 });
diff --git a/plugins/newsletter-template-styles/newsletterStylePanel.tsx b/plugins/newsletter-template-styles/newsletterStylesPanel.tsx
similarity index 100%
rename from plugins/newsletter-template-styles/newsletterStylePanel.tsx
rename to plugins/newsletter-template-styles/newsletterStylesPanel.tsx

From f8092d11ae155f8984005b02563157f7f4e9440f Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Fri, 21 Jun 2024 11:31:29 -0400
Subject: [PATCH 11/15] version bump

---
 README.md  | 2 +-
 plugin.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 91e47c09..35a64493 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ Contributors: alleyinteractive
 
 Tags: alleyinteractive, wp-newsletter-builder
 
-Stable tag: 0.3.22
+Stable tag: 0.3.24
 
 Requires at least: 6.2
 
diff --git a/plugin.php b/plugin.php
index 4f3e8c1e..a26c7437 100644
--- a/plugin.php
+++ b/plugin.php
@@ -3,7 +3,7 @@
  * Plugin Name: Newsletter Builder
  * Plugin URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Description: Interface to manage email newsletters
- * Version: 0.3.23
+ * Version: 0.3.24
  * Author: Alley Interactive
  * Author URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Requires at least: 6.2

From fda004c45592c2d7b2ed22dfbda9d7efbe9190cd Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Fri, 21 Jun 2024 12:56:36 -0400
Subject: [PATCH 12/15] suggestions per cr

---
 src/assets.php | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/assets.php b/src/assets.php
index bd618b45..0ddda78f 100644
--- a/src/assets.php
+++ b/src/assets.php
@@ -40,13 +40,8 @@ function action_wp_enqueue_scripts(): void {
  */
 function action_newsletters_enqueue_styles(): void {
 	$blocks = [
-		'button',
-		'divider',
 		'footer',
 		'header',
-		'heading',
-		'list',
-		'paragraph',
 		'post',
 		'section',
 		'two-up-post',
@@ -300,5 +295,10 @@ function set_template_values(): void {
 	$bg_color    = get_post_meta( $template_id, 'nb_template_bg_color', true );
 	$font        = get_post_meta( $template_id, 'nb_template_font', true );
 	$link_color  = get_post_meta( $template_id, 'nb_template_link_color', true );
-	echo( "<style>:root {--template-font-family: {$font}; --template-bg-color: {$bg_color}; --template-link-color: {$link_color};}</style>" ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+	printf(
+		'<style>:root {--template-font-family: %s; --template-bg-color: %s; --template-link-color: %s;}</style>',
+		$font,
+		$bg_color,
+		$link_color,
+	);
 }

From 17919596b49cd6237a111f8fb11a30680f73dca8 Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Fri, 21 Jun 2024 13:07:31 -0400
Subject: [PATCH 13/15] bump version

---
 README.md  | 2 +-
 plugin.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 773475fa..c2a658fe 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ Contributors: alleyinteractive
 
 Tags: alleyinteractive, wp-newsletter-builder
 
-Stable tag: 0.3.25
+Stable tag: 0.3.26
 
 Requires at least: 6.2
 
diff --git a/plugin.php b/plugin.php
index b15e0be0..8cc48f5c 100644
--- a/plugin.php
+++ b/plugin.php
@@ -3,7 +3,7 @@
  * Plugin Name: Newsletter Builder
  * Plugin URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Description: Interface to manage email newsletters
- * Version: 0.3.25
+ * Version: 0.3.26
  * Author: Alley Interactive
  * Author URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Requires at least: 6.2

From 27c3a05ae8e0210fbf09c74b3a50bede47d0e474 Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Fri, 21 Jun 2024 13:09:52 -0400
Subject: [PATCH 14/15] fix

---
 plugin.php | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/plugin.php b/plugin.php
index 8cc48f5c..99e009c3 100644
--- a/plugin.php
+++ b/plugin.php
@@ -57,11 +57,8 @@ function () {
 require_once __DIR__ . '/block-filters/separator/index.php';
 require_once __DIR__ . '/plugins/newsletter-from-post/index.php';
 require_once __DIR__ . '/plugins/newsletter-status/index.php';
-<<<<<<< HEAD
 require_once __DIR__ . '/plugins/newsletter-template-styles/index.php';
-=======
 require_once __DIR__ . '/plugins/pre-publish-checks/index.php';
->>>>>>> develop
 
 /* class files get loaded by the autoloader */
 

From eb563c50af4f23f892d3e6ac5372a01892e378a7 Mon Sep 17 00:00:00 2001
From: cahdeemer <christina@joinlede.com>
Date: Fri, 21 Jun 2024 13:13:52 -0400
Subject: [PATCH 15/15] lint

---
 src/assets.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/assets.php b/src/assets.php
index 0ddda78f..f3a7d2a1 100644
--- a/src/assets.php
+++ b/src/assets.php
@@ -297,8 +297,8 @@ function set_template_values(): void {
 	$link_color  = get_post_meta( $template_id, 'nb_template_link_color', true );
 	printf(
 		'<style>:root {--template-font-family: %s; --template-bg-color: %s; --template-link-color: %s;}</style>',
-		$font,
-		$bg_color,
-		$link_color,
+		$font, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+		$bg_color, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+		$link_color, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 	);
 }