feat: support background color setting

Closes #219
Automattic · Jun 12, 2020 · 2b98984 · 2b98984
1 parent 0234bf9
commit 2b98984
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 26 deletions.
diff --git a/includes/class-newspack-newsletters-renderer.php b/includes/class-newspack-newsletters-renderer.php
@@ -544,7 +544,11 @@ private static function render_mjml( $post ) {
 		if ( ! in_array( self::$font_body, Newspack_Newsletters::$supported_fonts ) ) {
 			self::$font_body = 'Georgia';
 		}
-		$title  = $post->post_title;
+		$title            = $post->post_title;
+		$background_color = get_post_meta( $post->ID, 'background_color', true );
+		if ( ! $background_color ) {
+			$background_color = '#ffffff';
+		}
 		$blocks = parse_blocks( $post->post_content );
 		$body   = '';
 		foreach ( $blocks as $block ) {

diff --git a/includes/class-newspack-newsletters.php b/includes/class-newspack-newsletters.php
@@ -141,6 +141,17 @@ public static function register_meta() {
 				'auth_callback'  => '__return_true',
 			]
 		);
+		\register_meta(
+			'post',
+			'background_color',
+			[
+				'object_subtype' => self::NEWSPACK_NEWSLETTERS_CPT,
+				'show_in_rest'   => true,
+				'type'           => 'string',
+				'single'         => true,
+				'auth_callback'  => '__return_true',
+			]
+		);
 		/**
 		 * The default color palette lives in the editor frontend and is not
 		 * retrievable on the backend. The workaround is to set it as post meta
@@ -332,22 +343,22 @@ public static function rest_api_init() {
 		);
 		\register_rest_route(
 			'newspack-newsletters/v1/',
-			'typography/(?P<id>[\a-z]+)',
+			'styling/(?P<id>[\a-z]+)',
 			[
 				'methods'             => \WP_REST_Server::EDITABLE,
-				'callback'            => [ __CLASS__, 'api_set_typography' ],
+				'callback'            => [ __CLASS__, 'api_set_styling' ],
 				'permission_callback' => [ __CLASS__, 'api_administration_permissions_check' ],
 				'args'                => [
 					'id'    => [
 						'validate_callback' => [ __CLASS__, 'validate_newsletter_id' ],
 						'sanitize_callback' => 'absint',
 					],
 					'key'   => [
-						'validate_callback' => [ __CLASS__, 'validate_newsletter_typography_key' ],
+						'validate_callback' => [ __CLASS__, 'validate_newsletter_styling_key' ],
 						'sanitize_callback' => 'sanitize_text_field',
 					],
 					'value' => [
-						'validate_callback' => [ __CLASS__, 'validate_newsletter_typography_value' ],
+						'validate_callback' => [ __CLASS__, 'validate_newsletter_styling_value' ],
 						'sanitize_callback' => 'sanitize_text_field',
 					],
 				],
@@ -356,15 +367,15 @@ public static function rest_api_init() {
 	}
 
 	/**
-	 * Set typography meta.
+	 * Set styling meta.
 	 * The save_post action fires before post meta is updated.
 	 * This causes newsletters to be synced to the ESP before recent changes to custom fields have been recorded,
-	 * which leads to incorrect rendering. This is addressed through custom endpoints to update the typography fields
+	 * which leads to incorrect rendering. This is addressed through custom endpoints to update the styling fields
 	 * as soon as they are changed in the editor, so that the changes are available the next time sync to ESP occurs.
 	 *
 	 * @param WP_REST_Request $request API request object.
 	 */
-	public static function api_set_typography( $request ) {
+	public static function api_set_styling( $request ) {
 		$id    = $request['id'];
 		$key   = $request['key'];
 		$value = $request['value'];
@@ -381,30 +392,31 @@ public static function validate_newsletter_id( $id ) {
 	}
 
 	/**
-	 * Validate typography key.
+	 * Validate styling key.
 	 *
 	 * @param String $key Meta key.
 	 */
-	public static function validate_newsletter_typography_key( $key ) {
+	public static function validate_newsletter_styling_key( $key ) {
 		return in_array(
 			$key,
 			[
 				'font_header',
 				'font_body',
+				'background_color',
 			]
 		);
 	}
 
 	/**
-	 * Validate typography value (font name).
+	 * Validate styling value (font name or hex color).
 	 *
 	 * @param String $key Meta value.
 	 */
-	public static function validate_newsletter_typography_value( $key ) {
+	public static function validate_newsletter_styling_value( $key ) {
 		return in_array(
 			$key,
 			self::$supported_fonts
-		);
+		) || preg_match( '/^#[a-f0-9]{6}$/', $key );
 	}
 
 	/**

diff --git a/includes/email-template.mjml.php b/includes/email-template.mjml.php
@@ -92,7 +92,7 @@
 			}
 		</mj-style>
 	</mj-head>
-	<mj-body>
+	<mj-body background-color="<?php echo $background_color; ?>">
 		<?php echo $body; ?>
 	</mj-body>
 </mjml>
diff --git a/src/newsletter-editor/index.js b/src/newsletter-editor/index.js
@@ -15,7 +15,7 @@ import InitModal from '../components/init-modal';
 import Layout from './layout/';
 import Sidebar from './sidebar/';
 import Testing from './testing/';
-import Typography from './typography/';
+import Styling from './styling/';
 import registerEditorPlugin from './editor/';
 
 registerEditorPlugin();
@@ -38,10 +38,10 @@ const NewsletterEdit = ( { layoutId } ) => {
 				<Sidebar />
 			</PluginDocumentSettingPanel>
 			<PluginDocumentSettingPanel
-				name="newsletters-typography-panel"
-				title={ __( 'Typography', 'newspack-newsletters' ) }
+				name="newsletters-styling-panel"
+				title={ __( 'Styling', 'newspack-newsletters' ) }
 			>
-				<Typography />
+				<Styling />
 			</PluginDocumentSettingPanel>
 			<PluginDocumentSettingPanel
 				name="newsletters-testing-panel"

diff --git a/src/newsletter-editor/typography/index.js → src/newsletter-editor/styling/index.js b/src/newsletter-editor/typography/index.js → src/newsletter-editor/styling/index.js
@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { compose } from '@wordpress/compose';
+import { compose, useInstanceId } from '@wordpress/compose';
+import { ColorPicker, BaseControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Fragment, useEffect } from '@wordpress/element';
@@ -72,37 +73,54 @@ export default compose( [
 			postId: getCurrentPostId(),
 			fontBody: meta.font_body || '',
 			fontHeader: meta.font_header || '',
+			backgroundColor: meta.background_color || '',
 		};
 	} ),
-] )( ( { editPost, fontBody, fontHeader, postId } ) => {
-	const updateFontValue = ( key, value ) => {
+] )( ( { editPost, fontBody, fontHeader, backgroundColor, postId } ) => {
+	const updateStyleValue = ( key, value ) => {
 		editPost( { meta: { [ key ]: value } } );
 		apiFetch( {
 			data: { key, value },
 			method: 'POST',
-			path: `/newspack-newsletters/v1/typography/${ postId }`,
+			path: `/newspack-newsletters/v1/styling/${ postId }`,
 		} );
 	};
+
 	useEffect(() => {
 		document.documentElement.style.setProperty( '--body-font', fontBody );
 	}, [ fontBody ]);
 	useEffect(() => {
 		document.documentElement.style.setProperty( '--header-font', fontHeader );
 	}, [ fontHeader ]);
+	useEffect(() => {
+		document.querySelector( '.edit-post-visual-editor' ).style.backgroundColor = backgroundColor;
+	}, [ backgroundColor ]);
+
+	const instanceId = useInstanceId( SelectControlWithOptGroup );
+	const id = `inspector-select-control-${ instanceId }`;
+
 	return (
 		<Fragment>
 			<SelectControlWithOptGroup
-				label={ __( 'Headings', 'newspack-newsletters' ) }
+				label={ __( 'Headings font', 'newspack-newsletters' ) }
 				value={ fontHeader || 'Arial' }
 				optgroups={ fontOptgroups }
-				onChange={ value => updateFontValue( 'font_header', value ) }
+				onChange={ value => updateStyleValue( 'font_header', value ) }
 			/>
 			<SelectControlWithOptGroup
-				label={ __( 'Body', 'newspack-newsletters' ) }
+				label={ __( 'Body font', 'newspack-newsletters' ) }
 				value={ fontBody || 'Georgia' }
 				optgroups={ fontOptgroups }
-				onChange={ value => updateFontValue( 'font_body', value ) }
+				onChange={ value => updateStyleValue( 'font_body', value ) }
 			/>
+			<BaseControl label={ __( 'Background Color', 'newspack-newsletters' ) } id={ id }>
+				<ColorPicker
+					id={ id }
+					color={ backgroundColor || '#ffffff' }
+					onChangeComplete={ value => updateStyleValue( 'background_color', value.hex ) }
+					disableAlpha
+				/>
+			</BaseControl>
 		</Fragment>
 	);
 } );