diff --git a/packages/edit-site/src/components/welcome-guide/template.js b/packages/edit-site/src/components/welcome-guide/template.js
index 7e982a665d9f4..66a2d822f836c 100644
--- a/packages/edit-site/src/components/welcome-guide/template.js
+++ b/packages/edit-site/src/components/welcome-guide/template.js
@@ -6,11 +6,13 @@ import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as editorStore } from '@wordpress/editor';
+import { useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
 
 export default function WelcomeGuideTemplate() {
 	const { toggle } = useDispatch( preferencesStore );
 
-	const isVisible = useSelect( ( select ) => {
+	const visibility = useSelect( ( select ) => {
 		const isTemplateActive = !! select( preferencesStore ).get(
 			'core/edit-site',
 			'welcomeGuideTemplate'
@@ -30,6 +32,13 @@ export default function WelcomeGuideTemplate() {
 		);
 	}, [] );
 
+	// The visibility conditions change in such a way that it’s tricky to avoid
+	// an unexpected flash of the component. Using state and debouncing writes
+	// to it works around the issue.
+	const [ isVisible, setIsVisible ] = useState();
+	const debouncedSetIsVisible = useDebounce( setIsVisible, 32 );
+	debouncedSetIsVisible( visibility );
+
 	if ( ! isVisible ) {
 		return null;
 	}