Live Preview: Show the current theme name on the theme activation modal

packages/api-fetch/src/middlewares/theme-preview.js

@@ -1,32 +1,39 @@
 /**
  * WordPress dependencies
  */
-import { addQueryArgs, hasQueryArg } from '@wordpress/url';
+import { addQueryArgs, getQueryArg, removeQueryArgs } from '@wordpress/url';
 
 /**
  * This appends a `wp_theme_preview` parameter to the REST API request URL if
  * the admin URL contains a `theme` GET parameter.
  *
+ * If the REST API request URL has contained the `wp_theme_preview` parameter,
+ * then bypass this middleware.
+ *
  * @param {Record<string, any>} themePath
  * @return {import('../types').APIFetchMiddleware} Preloading middleware.
  */
 const createThemePreviewMiddleware = ( themePath ) => ( options, next ) => {
-	if (
-		typeof options.url === 'string' &&
-		! hasQueryArg( options.url, 'wp_theme_preview' )
-	) {
-		options.url = addQueryArgs( options.url, {
-			wp_theme_preview: themePath,
-		} );
+	if ( typeof options.url === 'string' ) {
+		const wpThemePreview = getQueryArg( options.url, 'wp_theme_preview' );
+		if ( wpThemePreview === undefined ) {
+			options.url = addQueryArgs( options.url, {
+				wp_theme_preview: themePath,
+			} );
+		} else if ( wpThemePreview === '' ) {
+			options.url = removeQueryArgs( options.url, 'wp_theme_preview' );
+		}
 	}
 
-	if (
-		typeof options.path === 'string' &&
-		! hasQueryArg( options.path, 'wp_theme_preview' )
-	) {
-		options.path = addQueryArgs( options.path, {
-			wp_theme_preview: themePath,
-		} );
+	if ( typeof options.path === 'string' ) {
+		const wpThemePreview = getQueryArg( options.path, 'wp_theme_preview' );
+		if ( wpThemePreview === undefined ) {
+			options.path = addQueryArgs( options.path, {
+				wp_theme_preview: themePath,
+			} );
+		} else if ( wpThemePreview === '' ) {
+			options.path = removeQueryArgs( options.path, 'wp_theme_preview' );
+		}
 	}
 
 	return next( options );

packages/edit-site/src/components/save-panel/index.js

@@ -23,10 +23,8 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useActivateTheme } from '../../utils/use-activate-theme';
-import {
-	currentlyPreviewingTheme,
-	isPreviewingTheme,
-} from '../../utils/is-previewing-theme';
+import { useActualCurrentTheme } from '../../utils/use-actual-current-theme';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
 const { EntitiesSavedStatesExtensible } = unlock( privateApis );
 
@@ -39,19 +37,22 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 		activateSaveLabel = __( 'Activate' );
 	}
 
-	const themeName = useSelect( ( select ) => {
-		const theme = select( coreStore ).getTheme(
-			currentlyPreviewingTheme()
-		);
+	const currentTheme = useActualCurrentTheme();
 
-		return theme?.name?.rendered;
-	}, [] );
+	const previewingTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme(),
+		[]
+	);
 
 	const additionalPrompt = (
 		<p>
 			{ sprintf(
-				'Saving your changes will change your active theme to %s.',
-				themeName
+				/* translators: %1$s: The name of active theme, %2$s: The name of theme to be activated. */
+				__(
+					'Saving your changes will change your active theme from %1$s to %2$s'
+				),
+				currentTheme?.name?.rendered ?? '...',
+				previewingTheme?.name?.rendered ?? '...'
 			) }
 		</p>
 	);

packages/edit-site/src/utils/use-actual-current-theme.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { useState, useEffect } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
+
+const ACTIVE_THEMES_URL = '/wp/v2/themes?status=active';
+
+export function useActualCurrentTheme() {
+	const [ currentTheme, setCurrentTheme ] = useState();
+
+	useEffect( () => {
+		// Set the `wp_theme_preview` to empty string to bypass the createThemePreviewMiddleware.
+		const path = addQueryArgs( ACTIVE_THEMES_URL, {
+			context: 'edit',
+			wp_theme_preview: '',
+		} );
+
+		apiFetch( { path } ).then( ( activeThemes ) =>
+			setCurrentTheme( activeThemes[ 0 ] )
+		);
+	}, [] );
+
+	return currentTheme;
+}