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/blocks/post-byline/style.scss b/blocks/post-byline/style.scss
index 9ff59557..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 4ed1f79e..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 fa2688b7..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;
diff --git a/config/post-meta.json b/config/post-meta.json
index 80e838d1..acceaf24 100644
--- 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
index 0618bc1d..99e009c3 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
@@ -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
new file mode 100644
index 00000000..0d23ac15
--- /dev/null
+++ 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
new file mode 100644
index 00000000..8e06dcfe
--- /dev/null
+++ b/plugins/newsletter-template-styles/index.php
@@ -0,0 +1,42 @@
+ {
+ 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 (
+
+ {__('Background color', 'wp-newsletter-builder')}
+ {
+ setBgColor(color);
+ document.documentElement.style.setProperty('--template-bg-color', color);
+ }}
+ />
+ {__('Link color', 'wp-newsletter-builder')}
+ {
+ setLinkColor(color);
+ document.documentElement.style.setProperty('--template-link-color', color);
+ }}
+ />
+ {__('Font family', 'wp-newsletter-builder')}
+ {
+ setFontStack(font);
+ document.documentElement.style.setProperty('--template-font-family', font);
+ }}
+ />
+
+ );
+}
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/heading.scss b/scss/core-blocks/heading.scss
index 1812497f..4c5a72b4 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(--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
index 95f3dab8..7eba4c9e 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;
+ div {
+ font-family: var(--template-font-family);
}
}
diff --git a/scss/core-blocks/paragraph.scss b/scss/core-blocks/paragraph.scss
index 268504d9..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 d749db34..cfdb39f1 100644
--- 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
index 9255e83b..ded6d622 100644
--- 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
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;
diff --git a/src/assets.php b/src/assets.php
index 1c1bc9fa..f3a7d2a1 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.
@@ -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',
];
?>
',
+ $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
index b6612032..5f280e27 100644
--- 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',
}),
};