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', }), };