In the editor, show a notice that the theme changed (#65)

* Like Phil suggested, get whether the theme changed via the heartbeat API

* Add an id, and make the spokenMessage more clear

.zipignore

@@ -7,6 +7,7 @@
 *package.json*
 *package-lock.json*
 *.circleci/*
+*.github/*
 *composer.json*
 *composer.lock*
 *css/src/*

wp-modules/pattern-post-type/js/src/index.js

@@ -1,9 +1,10 @@
 import '../../css/src/index.scss';
-import { addFilter } from '@wordpress/hooks';
+import { addAction, addFilter } from '@wordpress/hooks';
 import { registerPlugin } from '@wordpress/plugins';
 import BackButton from './components/BackButton';
 import PatternManagerMetaControls from './components/PatternManagerMetaControls';
 import changeWords from './utils/changeWords';
+import receiveActiveTheme from './utils/receiveActiveTheme';
 
 registerPlugin( 'pattern-manager-postmeta-for-patterns', {
 	icon: null,
@@ -16,3 +17,8 @@ registerPlugin( 'pattern-manager-back-button', {
 } );
 
 addFilter( 'i18n.gettext', 'pattern-manager/changeWords', changeWords );
+addAction(
+	'heartbeat.tick',
+	'pattern-manager/checkActiveTheme',
+	receiveActiveTheme
+);

wp-modules/pattern-post-type/js/src/types.ts

@@ -48,6 +48,7 @@ export type Patterns = {
 };
 
 export type InitialPatternManager = {
+	activeTheme: string;
 	apiNonce: string;
 	apiEndpoints: {
 		getPatternNamesEndpoint: string;

wp-modules/pattern-post-type/js/src/utils/receiveActiveTheme.ts

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { dispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { patternManager } from '../globals';
+import wasThemeChanged from './wasThemeChanged';
+
+export default function receiveActiveTheme( data: Record< string, unknown > ) {
+	if ( wasThemeChanged( data, patternManager.activeTheme ) ) {
+		dispatch( 'core/notices' ).createErrorNotice(
+			__(
+				'Please close this tab. This pattern does not exist in the current theme or the theme was changed since this tab was opened.',
+				'pattern-manager'
+			),
+			{ id: 'pattern-manager-theme-changed' }
+		);
+	}
+}

wp-modules/pattern-post-type/js/src/utils/test/wasThemeChanged.ts

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import wasThemeChanged from '../wasThemeChanged';
+
+describe( 'wasThemeChanged', () => {
+	it.each( [
+		[ {}, '', false ],
+		[ {}, 'theme-name', false ],
+		[ { activeTheme: 'foo-theme' }, 'foo-theme', false ],
+		[ { activeTheme: 'foo-theme' }, 'baz-theme', true ],
+	] )(
+		'should get whether the theme was changed',
+		( data, originalTheme, expected ) => {
+			expect( wasThemeChanged( data, originalTheme ) ).toEqual(
+				expected
+			);
+		}
+	);
+} );

wp-modules/pattern-post-type/js/src/utils/wasThemeChanged.ts

@@ -0,0 +1,6 @@
+export default function wasThemeChanged(
+	data: Record< string, unknown >,
+	originalTheme: string
+) {
+	return !! data.activeTheme && data.activeTheme !== originalTheme;
+}

wp-modules/pattern-post-type/model.php

@@ -233,6 +233,24 @@ function redirect_pattern_actions() {
 }
 add_action( 'admin_init', __NAMESPACE__ . '\redirect_pattern_actions' );
 
+/**
+ * Adds the active theme to the heartbeat response.
+ *
+ * @param array  $response  The Heartbeat response.
+ * @param array  $data      The $_POST data sent.
+ * @param string $screen_id The screen ID.
+ * @return array The Heartbeat response.
+ */
+function add_active_theme_to_heartbeat( $response, $data, $screen_id ) {
+	return get_pattern_post_type() === $screen_id
+		? array_merge(
+			$response,
+			[ 'activeTheme' => basename( get_template_directory() ) ]
+		)
+		: $response;
+}
+add_filter( 'heartbeat_received', __NAMESPACE__ . '\add_active_theme_to_heartbeat', 10, 3 );
+
 /**
  * Filters the fields used in post revisions.
  *

wp-modules/pattern-post-type/pattern-post-type.php

@@ -261,6 +261,7 @@ function enqueue_meta_fields_in_editor() {
 		'pattern_manager_post_meta',
 		'patternManager',
 		[
+			'activeTheme'  => basename( get_template_directory() ),
 			'apiEndpoints' => array(
 				'getPatternNamesEndpoint' => get_rest_url( false, 'pattern-manager/v1/get-pattern-names/' ),
 			),