diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
index 1e2e7aac159ef..4d98b235ac81c 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -37,17 +37,27 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createNotice } = useDispatch( noticesStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const { hasGlobalStyleVariations, isDistractionFree } = useSelect(
-		( select ) => ( {
-			hasGlobalStyleVariations:
-				!! select(
-					coreStore
-				).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
-			isDistractionFree: select( preferencesStore ).get(
-				editSiteStore.name,
-				'distractionFree'
-			),
-		} ),
+	const { get: getPrefference } = useSelect( preferencesStore );
+
+	const turnOffDistractionFreeMode = useCallback( () => {
+		const isDistractionFree = getPrefference(
+			editSiteStore.name,
+			'distractionFree'
+		);
+		if ( ! isDistractionFree ) {
+			return;
+		}
+		setPreference( editSiteStore.name, 'distractionFree', false );
+		createNotice( 'info', __( 'Distraction free mode turned off' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}, [ createNotice, setPreference, getPrefference ] );
+	const hasGlobalStyleVariations = useSelect(
+		( select ) =>
+			!! select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
 		[]
 	);
 	if ( hasGlobalStyleVariations ) {
@@ -63,19 +73,7 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 		<SidebarNavigationItem
 			{ ...props }
 			onClick={ () => {
-				// Disable distraction free mode.
-				if ( isDistractionFree ) {
-					setPreference(
-						editSiteStore.name,
-						'distractionFree',
-						false
-					);
-					createNotice(
-						'info',
-						__( 'Distraction free mode turned off.' ),
-						{ type: 'snackbar' }
-					);
-				}
+				turnOffDistractionFreeMode();
 				// Switch to edit mode.
 				setCanvasMode( 'edit' );
 				// Open global styles sidebar.
@@ -170,6 +168,9 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const { createNotice } = useDispatch( noticesStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { get: getPrefference } = useSelect( preferencesStore );
 
 	const isStyleBookOpened = useSelect(
 		( select ) =>
@@ -178,14 +179,28 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		[]
 	);
 
-	const openGlobalStyles = useCallback(
-		async () =>
-			Promise.all( [
-				setCanvasMode( 'edit' ),
-				openGeneralSidebar( 'edit-site/global-styles' ),
-			] ),
-		[ setCanvasMode, openGeneralSidebar ]
-	);
+	const turnOffDistractionFreeMode = useCallback( () => {
+		const isDistractionFree = getPrefference(
+			editSiteStore.name,
+			'distractionFree'
+		);
+		if ( ! isDistractionFree ) {
+			return;
+		}
+		setPreference( editSiteStore.name, 'distractionFree', false );
+		createNotice( 'info', __( 'Distraction free mode turned off' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}, [ createNotice, setPreference, getPrefference ] );
+
+	const openGlobalStyles = useCallback( async () => {
+		turnOffDistractionFreeMode();
+		return Promise.all( [
+			setCanvasMode( 'edit' ),
+			openGeneralSidebar( 'edit-site/global-styles' ),
+		] );
+	}, [ setCanvasMode, openGeneralSidebar, turnOffDistractionFreeMode ] );
 
 	const openStyleBook = useCallback( async () => {
 		await openGlobalStyles();