Merge pull request #151 from alleyinteractive/feature/LEDE-2641/templ…

…ate-color-font-link LEDE-2641 Template-level Fonts & Background & Link Color
alleyinteractive · Jun 21, 2024 · 0f55ff0 · 0f55ff0
2 parents 0df8922 + eb563c5
commit 0f55ff0
Show file tree

Hide file tree

Showing 18 changed files with 194 additions and 18 deletions.
diff --git 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/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
@@ -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
@@ -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;

diff --git a/config/post-meta.json b/config/post-meta.json
@@ -127,5 +127,23 @@
         "type": "number"
       }
     }
+  },
+  "nb_template_font": {
+    "post_types": [
+      "nb_template"
+    ],
+    "type": "string"
+  },
+  "nb_template_bg_color": {
+    "post_types": [
+      "nb_template"
+    ],
+    "type": "string"
+  },
+  "nb_template_link_color": {
+    "post_types": [
+      "nb_template"
+    ],
+    "type": "string"
   }
 }
diff --git 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
@@ -57,6 +57,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';
 require_once __DIR__ . '/plugins/pre-publish-checks/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
@@ -0,0 +1,8 @@
+import { registerPlugin } from '@wordpress/plugins';
+
+import NewsletterTemplateStylesPanel from './newsletterStylesPanel';
+
+registerPlugin('newsletter-template-styles', {
+  render: NewsletterTemplateStylesPanel,
+  icon: 'dashicons-art',
+});
diff --git a/plugins/newsletter-template-styles/index.php 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/newsletterStylesPanel.tsx b/plugins/newsletter-template-styles/newsletterStylesPanel.tsx
@@ -0,0 +1,71 @@
+import React, { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
+import { usePostMetaValue } from '@alleyinteractive/block-editor-tools';
+import { ColorPicker, SelectControl } from '@wordpress/components';
+
+// @ts-ignore
+export default function NewsletterTemplateStylesPanel() {
+  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: 'Courier New', value: 'Courier New, monospace' },
+    { label: 'Georgia', value: 'Georgia, serif' },
+    { label: 'Helvetica', value: 'Helvetica, 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' },
+  ];
+
+  return (
+    <PluginDocumentSettingPanel
+      name="newsletter-template-styles"
+      title="Template Styles"
+      className="newsletter-template-styles-panel"
+    >
+      <h3>{__('Background color', 'wp-newsletter-builder')}</h3>
+      <ColorPicker
+        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 || defaultValues.linkColor}
+        onChange={(color) => {
+          setLinkColor(color);
+          document.documentElement.style.setProperty('--template-link-color', color);
+        }}
+      />
+      <h3>{__('Font family', 'wp-newsletter-builder')}</h3>
+      <SelectControl
+        value={fontStack || defaultValues.fontStack}
+        options={emailSafeFonts}
+        onChange={(font) => {
+          setFontStack(font);
+          document.documentElement.style.setProperty('--template-font-family', font);
+        }}
+      />
+    </PluginDocumentSettingPanel>
+  );
+}
diff --git 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/heading.scss b/scss/core-blocks/heading.scss
@@ -3,13 +3,13 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: Georgia, serif;
+  font-family: var(--template-font-family);
   font-weight: bold;
   line-height: 1.3;
   margin: 0;
 
   span {
-    font-family: Georgia, serif;
+    font-family: var(--template-font-family);
   }
 }
 

diff --git 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;
+  div {
+    font-family: var(--template-font-family);
   }
 }
diff --git 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
@@ -1,3 +1,7 @@
 a, em, s, strong, sup, sub {
-  font-family: Georgia, serif;
+  font-family: var(--template-font-family);
+}
+
+a {
+  color: var(--template-link-color);
 }
diff --git a/scss/editor/editor.scss b/scss/editor/editor.scss
@@ -12,8 +12,8 @@
     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.

diff --git 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;

diff --git 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.
@@ -39,15 +40,19 @@ function action_wp_enqueue_scripts(): void {
  */
 function action_newsletters_enqueue_styles(): void {
 	$blocks = [
-		'header',
 		'footer',
+		'header',
 		'post',
-		'two-up-post',
 		'section',
+		'two-up-post',
 	];
 	?>
 	<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 );
+	$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';
@@ -66,6 +71,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(--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
 		}
 	}
@@ -139,7 +147,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.
 	 */
@@ -274,3 +282,23 @@ 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 );
+	$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 );
+	printf(
+		'<style>:root {--template-font-family: %s; --template-bg-color: %s; --template-link-color: %s;}</style>',
+		$font, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+		$bg_color, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+		$link_color, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+	);
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -32,6 +32,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',
           'pre-publish-checks/index': './plugins/pre-publish-checks',
         }),
     };