diff --git a/src/newsletter-editor/index.js b/src/newsletter-editor/index.js
index 9b4747af9..a33269d40 100644
--- 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 } ) => {
>
+
+
);
};
diff --git a/src/newsletter-editor/styling/index.js b/src/newsletter-editor/styling/index.js
index c0c3c855c..7b747b176 100644
--- 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 }`;