diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index d52456ad4a34fa..ecbd729ee8a0a2 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -32,6 +32,7 @@ import {
 	useContext,
 	useRef,
 	useLayoutEffect,
+	useEffect,
 } from '@wordpress/element';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
@@ -358,8 +359,11 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 		( select ) => select( siteEditorStore ).getSettings(),
 		[]
 	);
+
 	// Update block editor settings because useMultipleOriginColorsAndGradients fetch colours from there.
-	dispatch( blockEditorStore ).updateSettings( siteEditorSettings );
+	useEffect( () => {
+		dispatch( blockEditorStore ).updateSettings( siteEditorSettings );
+	}, [ siteEditorSettings ] );
 
 	const [ section, onChangeSection ] = useSection();