feat: editor fonts reflect typography selections

Automattic · May 26, 2020 · b90f985 · b90f985
1 parent 8b2f052
commit b90f985
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/newsletter-editor/typography/index.js b/src/newsletter-editor/typography/index.js
@@ -4,7 +4,7 @@
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { Fragment } from '@wordpress/element';
+import { Fragment, useEffect } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
 
 const fontOptions = [
@@ -75,6 +75,12 @@ export default compose( [
 		};
 	} ),
 ] )( ( { editPost, fontBody, fontHeader } ) => {
+	useEffect(() => {
+		document.documentElement.style.setProperty( '--body-font', fontBody );
+	}, [ fontBody ]);
+	useEffect(() => {
+		document.documentElement.style.setProperty( '--header-font', fontHeader );
+	}, [ fontHeader ]);
 	return (
 		<Fragment>
 			<SelectControl