Fix iframe error when accessing patterns on post command palette

apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js

@@ -6,6 +6,7 @@ import { dispatch, select, subscribe, use } from '@wordpress/data';
 import domReady from '@wordpress/dom-ready';
 import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-post';
 import { addAction, addFilter, doAction, removeAction } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
 import { wordpress } from '@wordpress/icons';
 import { registerPlugin } from '@wordpress/plugins';
 import { addQueryArgs, getQueryArg } from '@wordpress/url';
@@ -36,6 +37,17 @@ function addEditorListener( selector, cb ) {
 	}
 }
 
+function addCommandsInputListener( selector, cb ) {
+	document.querySelector( 'body.is-iframed' )?.addEventListener( 'keydown', ( e ) => {
+		const isInputActive = document.activeElement?.matches( '.commands-command-menu__header input' );
+		const isCommandSelected = document.querySelector( '[data-selected=true]' )?.matches( selector );
+
+		if ( e.key === 'Enter' && isInputActive && isCommandSelected ) {
+			cb( e );
+		}
+	} );
+}
+
 // Calls a callback if the event occured on an element or parent thereof matching
 // the callback's selector. This is needed because elements are added and removed
 // from the DOM dynamically after the listeners are created. We need to handle
@@ -1047,6 +1059,25 @@ function handleAppBannerShowing( calypsoPort ) {
 	};
 }
 
+function handlePatterns( calypsoPort ) {
+	const selector = `[data-value="${ __( 'Patterns' ) }"]`;
+
+	const callback = ( e ) => {
+		e.preventDefault();
+
+		calypsoPort.postMessage( {
+			action: 'goToPatterns',
+			payload: {
+				destinationUrl: '/wp-admin/site-editor.php?postType=wp_block',
+				unsavedChanges: select( 'core/editor' ).isEditedPostDirty(),
+			},
+		} );
+	};
+
+	addEditorListener( selector, callback );
+	addCommandsInputListener( selector, callback );
+}
+
 function initPort( message ) {
 	if ( 'initPort' !== message.data.action ) {
 		return;
@@ -1147,6 +1178,8 @@ function initPort( message ) {
 		handleCheckoutModal( calypsoPort );
 
 		handleAppBannerShowing( calypsoPort );
+
+		handlePatterns( calypsoPort );
 	}
 
 	window.removeEventListener( 'message', initPort, false );

client/gutenberg/editor/calypsoify-iframe.tsx

@@ -95,6 +95,7 @@ enum WindowActions {
 
 enum EditorActions {
 	GoToAllPosts = 'goToAllPosts', // Unused action in favor of CloseEditor. Maintained here to support cached scripts.
+	GoToPatterns = 'goToPatterns',
 	CloseEditor = 'closeEditor',
 	OpenMediaModal = 'openMediaModal',
 	OpenCheckoutModal = 'openCheckoutModal',
@@ -382,6 +383,12 @@ class CalypsoifyIframe extends Component< ComponentProps, State > {
 			this.navigate( destinationUrl, unsavedChanges );
 		}
 
+		if ( EditorActions.GoToPatterns === action ) {
+			const { destinationUrl, unsavedChanges } = payload;
+
+			this.navigate( `https://${ this.props.siteSlug }${ destinationUrl }`, unsavedChanges );
+		}
+
 		if ( EditorActions.OpenRevisions === action ) {
 			if ( ports && ports[ 0 ] ) {
 				// set imperatively on the instance because this is not