fix: apply custom styles even if styling tab in sidebar is closed (#240)

Automattic · Jun 26, 2020 · 20b08bc · 20b08bc
1 parent 5db6b97
commit 20b08bc
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
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 Styling from './styling/';
+import { Styling, ApplyStyling } from './styling/';
 import registerEditorPlugin from './editor/';
 
 registerEditorPlugin();
@@ -55,6 +55,8 @@ const NewsletterEdit = ( { layoutId } ) => {
 			>
 				<Layout />
 			</PluginDocumentSettingPanel>
+
+			<ApplyStyling />
 		</Fragment>
 	);
 };

diff --git a/src/newsletter-editor/styling/index.js b/src/newsletter-editor/styling/index.js
@@ -61,19 +61,42 @@ const fontOptgroups = [
 	},
 ];
 
-export default compose( [
+const customStylesSelector = select => {
+	const { getEditedPostAttribute } = select( 'core/editor' );
+	const meta = getEditedPostAttribute( 'meta' );
+	return {
+		fontBody: meta.font_body || '',
+		fontHeader: meta.font_header || '',
+		backgroundColor: meta.background_color || '',
+	};
+};
+
+export const ApplyStyling = withSelect( customStylesSelector )(
+	( { fontBody, fontHeader, backgroundColor } ) => {
+		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 ]);
+
+		return null;
+	}
+);
+
+export const Styling = compose( [
 	withDispatch( dispatch => {
 		const { editPost } = dispatch( 'core/editor' );
 		return { editPost };
 	} ),
 	withSelect( select => {
-		const { getEditedPostAttribute, getCurrentPostId } = select( 'core/editor' );
-		const meta = getEditedPostAttribute( 'meta' );
+		const { getCurrentPostId } = select( 'core/editor' );
 		return {
 			postId: getCurrentPostId(),
-			fontBody: meta.font_body || '',
-			fontHeader: meta.font_header || '',
-			backgroundColor: meta.background_color || '',
+			...customStylesSelector( select ),
 		};
 	} ),
 ] )( ( { editPost, fontBody, fontHeader, backgroundColor, postId } ) => {
@@ -86,16 +109,6 @@ export default compose( [
 		} );
 	};
 
-	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 }`;