Extract BlockThemePreviews-related code from the editor package (#50863)

* Extract BlockThemePreviews-related code from the editor package

* Use props to pass values

* Lift up the states

* Reuse existing functions

* extract _EntitiesSavedStates component

* Make EntitiesSavedStatesExtensible provate API

* Remove window.__experimentalEnableThemePreviews

* Remove the experiment option

* Fix missing props

* Revert "Remove the experiment option"

This reverts commit 1f8961a.

* Remove unnecessary destructuring assignment

lib/experimental/editor-settings.php

@@ -89,9 +89,6 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-details-blocks', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableDetailsBlocks = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-theme-previews', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableThemePreviews = true', 'before' );
-	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-pattern-enhancements', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnablePatternEnhancements = true', 'before' );
 	}

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

@@ -7,17 +7,75 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Button, Modal } from '@wordpress/components';
-import { EntitiesSavedStates } from '@wordpress/editor';
+import {
+	EntitiesSavedStates,
+	useEntitiesSavedStatesIsDirty,
+	privateApis,
+} from '@wordpress/editor';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { NavigableRegion } from '@wordpress/interface';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
 import { useActivateTheme } from '../../utils/use-activate-theme';
+import {
+	currentlyPreviewingTheme,
+	isPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+
+const { EntitiesSavedStatesExtensible } = unlock( privateApis );
+
+const EntitiesSavedStatesForPreview = ( { onClose } ) => {
+	const isDirtyProps = useEntitiesSavedStatesIsDirty();
+	let activateSaveLabel;
+	if ( isDirtyProps.isDirty ) {
+		activateSaveLabel = __( 'Activate & Save' );
+	} else {
+		activateSaveLabel = __( 'Activate' );
+	}
+
+	const { getTheme } = useSelect( coreStore );
+	const theme = getTheme( currentlyPreviewingTheme() );
+	const additionalPrompt = (
+		<p>
+			{ sprintf(
+				'Saving your changes will change your active theme to  %1$s.',
+				theme?.name?.rendered
+			) }
+		</p>
+	);
+
+	const activateTheme = useActivateTheme();
+	const onSave = async ( values ) => {
+		await activateTheme();
+		return values;
+	};
+
+	return (
+		<EntitiesSavedStatesExtensible
+			{ ...{
+				...isDirtyProps,
+				additionalPrompt,
+				close: onClose,
+				onSave,
+				saveEnabled: true,
+				saveLabel: activateSaveLabel,
+			} }
+		/>
+	);
+};
+
+const _EntitiesSavedStates = ( { onClose } ) => {
+	if ( isPreviewingTheme() ) {
+		return <EntitiesSavedStatesForPreview onClose={ onClose } />;
+	}
+	return <EntitiesSavedStates close={ onClose } />;
+};
 
 export default function SavePanel() {
 	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
@@ -33,18 +91,7 @@ export default function SavePanel() {
 		};
 	}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
-	const activateTheme = useActivateTheme();
 	const onClose = () => setIsSaveViewOpened( false );
-	const onSave = async ( values ) => {
-		await activateTheme();
-		return values;
-	};
-
-	const entitySavedStates = window?.__experimentalEnableThemePreviews ? (
-		<EntitiesSavedStates close={ onClose } onSave={ onSave } />
-	) : (
-		<EntitiesSavedStates close={ onClose } />
-	);
 
 	if ( canvasMode === 'view' ) {
 		return isSaveViewOpen ? (
@@ -56,7 +103,7 @@ export default function SavePanel() {
 					'Save site, content, and template changes'
 				) }
 			>
-				{ entitySavedStates }
+				<_EntitiesSavedStates onClose={ onClose } />
 			</Modal>
 		) : null;
 	}
@@ -69,7 +116,7 @@ export default function SavePanel() {
 			ariaLabel={ __( 'Save panel' ) }
 		>
 			{ isSaveViewOpen ? (
-				entitySavedStates
+				<_EntitiesSavedStates onClose={ onClose } />
 			) : (
 				<div className="edit-site-editor__toggle-save-panel">
 					<Button

packages/edit-site/src/utils/is-previewing-theme.js

@@ -4,10 +4,7 @@
 import { getQueryArg } from '@wordpress/url';
 
 export function isPreviewingTheme() {
-	return (
-		window?.__experimentalEnableThemePreviews &&
-		getQueryArg( window.location.href, 'theme_preview' ) !== undefined
-	);
+	return getQueryArg( window.location.href, 'theme_preview' ) !== undefined;
 }
 
 export function currentlyPreviewingTheme() {

packages/editor/src/components/entities-saved-states/hooks/use-is-dirty.js

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+const TRANSLATED_SITE_PROPERTIES = {
+	title: __( 'Title' ),
+	description: __( 'Tagline' ),
+	site_logo: __( 'Logo' ),
+	site_icon: __( 'Icon' ),
+	show_on_front: __( 'Show on front' ),
+	page_on_front: __( 'Page on front' ),
+};
+
+export const useIsDirty = () => {
+	const { dirtyEntityRecords } = useSelect( ( select ) => {
+		const dirtyRecords =
+			select( coreStore ).__experimentalGetDirtyEntityRecords();
+
+		// Remove site object and decouple into its edited pieces.
+		const dirtyRecordsWithoutSite = dirtyRecords.filter(
+			( record ) => ! ( record.kind === 'root' && record.name === 'site' )
+		);
+
+		const siteEdits = select( coreStore ).getEntityRecordEdits(
+			'root',
+			'site'
+		);
+
+		const siteEditsAsEntities = [];
+		for ( const property in siteEdits ) {
+			siteEditsAsEntities.push( {
+				kind: 'root',
+				name: 'site',
+				title: TRANSLATED_SITE_PROPERTIES[ property ] || property,
+				property,
+			} );
+		}
+		const dirtyRecordsWithSiteItems = [
+			...dirtyRecordsWithoutSite,
+			...siteEditsAsEntities,
+		];
+
+		return {
+			dirtyEntityRecords: dirtyRecordsWithSiteItems,
+		};
+	}, [] );
+
+	// Unchecked entities to be ignored by save function.
+	const [ unselectedEntities, _setUnselectedEntities ] = useState( [] );
+
+	const setUnselectedEntities = (
+		{ kind, name, key, property },
+		checked
+	) => {
+		if ( checked ) {
+			_setUnselectedEntities(
+				unselectedEntities.filter(
+					( elt ) =>
+						elt.kind !== kind ||
+						elt.name !== name ||
+						elt.key !== key ||
+						elt.property !== property
+				)
+			);
+		} else {
+			_setUnselectedEntities( [
+				...unselectedEntities,
+				{ kind, name, key, property },
+			] );
+		}
+	};
+
+	const isDirty = dirtyEntityRecords.length - unselectedEntities.length > 0;
+
+	return {
+		dirtyEntityRecords,
+		isDirty,
+		setUnselectedEntities,
+		unselectedEntities,
+	};
+};