From 8f6cbabf6971b5ea98c0e2b9dbfcdf73b961e314 Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Wed, 21 Aug 2024 14:07:08 +0200 Subject: [PATCH 1/5] Gutenframe: Add handler for the Patterns command --- .../src/calypso/features/iframe-bridge-server.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js b/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js index a323cec758950..7c3ed16931ebe 100644 --- a/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js +++ b/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js @@ -1047,6 +1047,15 @@ function handleAppBannerShowing( calypsoPort ) { }; } +function handlePatterns( calypsoPort ) { + addEditorListener( '[data-value="Patterns"]', () => { + calypsoPort.postMessage( { + action: 'goToPatterns', + payload: { destinationUrl: '/wp-admin/site-editor.php?postType=wp_block' }, + } ); + } ); +} + function initPort( message ) { if ( 'initPort' !== message.data.action ) { return; @@ -1147,6 +1156,8 @@ function initPort( message ) { handleCheckoutModal( calypsoPort ); handleAppBannerShowing( calypsoPort ); + + handlePatterns( calypsoPort ); } window.removeEventListener( 'message', initPort, false ); From b7fa709a0883815873417918fdf7a2de61655aa0 Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Wed, 21 Aug 2024 14:07:32 +0200 Subject: [PATCH 2/5] Handle `goToPatterns` action on calypso --- client/gutenberg/editor/calypsoify-iframe.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/gutenberg/editor/calypsoify-iframe.tsx b/client/gutenberg/editor/calypsoify-iframe.tsx index c7e534413c552..35cd6309e1b21 100644 --- a/client/gutenberg/editor/calypsoify-iframe.tsx +++ b/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,10 @@ class CalypsoifyIframe extends Component< ComponentProps, State > { this.navigate( destinationUrl, unsavedChanges ); } + if ( EditorActions.GoToPatterns === action ) { + navigate( `https://${ this.props.siteSlug }${ payload.destinationUrl }` ); + } + if ( EditorActions.OpenRevisions === action ) { if ( ports && ports[ 0 ] ) { // set imperatively on the instance because this is not From f232724eedf4781d13ae51d6721e1b1860ec8100 Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Thu, 22 Aug 2024 12:53:04 +0200 Subject: [PATCH 3/5] Change selector so it takes into account translations --- .../src/calypso/features/iframe-bridge-server.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js b/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js index 7c3ed16931ebe..5b86b197ddf7a 100644 --- a/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js +++ b/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'; @@ -1048,10 +1049,12 @@ function handleAppBannerShowing( calypsoPort ) { } function handlePatterns( calypsoPort ) { - addEditorListener( '[data-value="Patterns"]', () => { + addEditorListener( `[data-value="${ __( 'Patterns' ) }"]`, () => { calypsoPort.postMessage( { action: 'goToPatterns', - payload: { destinationUrl: '/wp-admin/site-editor.php?postType=wp_block' }, + payload: { + destinationUrl: '/wp-admin/site-editor.php?postType=wp_block', + }, } ); } ); } From 5fff3fcf9a71f40dd0945ccd5954878878573656 Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Thu, 22 Aug 2024 12:53:24 +0200 Subject: [PATCH 4/5] Handle unsaved changes --- .../src/calypso/features/iframe-bridge-server.js | 5 ++++- client/gutenberg/editor/calypsoify-iframe.tsx | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js b/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js index 5b86b197ddf7a..0daa9b531d00d 100644 --- a/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js +++ b/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js @@ -1049,11 +1049,14 @@ function handleAppBannerShowing( calypsoPort ) { } function handlePatterns( calypsoPort ) { - addEditorListener( `[data-value="${ __( 'Patterns' ) }"]`, () => { + addEditorListener( `[data-value="${ __( 'Patterns' ) }"]`, ( e ) => { + e.preventDefault(); + calypsoPort.postMessage( { action: 'goToPatterns', payload: { destinationUrl: '/wp-admin/site-editor.php?postType=wp_block', + unsavedChanges: select( 'core/editor' ).isEditedPostDirty(), }, } ); } ); diff --git a/client/gutenberg/editor/calypsoify-iframe.tsx b/client/gutenberg/editor/calypsoify-iframe.tsx index 35cd6309e1b21..d884a73439ed9 100644 --- a/client/gutenberg/editor/calypsoify-iframe.tsx +++ b/client/gutenberg/editor/calypsoify-iframe.tsx @@ -384,7 +384,9 @@ class CalypsoifyIframe extends Component< ComponentProps, State > { } if ( EditorActions.GoToPatterns === action ) { - navigate( `https://${ this.props.siteSlug }${ payload.destinationUrl }` ); + const { destinationUrl, unsavedChanges } = payload; + + this.navigate( `https://${ this.props.siteSlug }${ destinationUrl }`, unsavedChanges ); } if ( EditorActions.OpenRevisions === action ) { From dff739ed3efe7c9f4f2c7359a4de911d9ca435c6 Mon Sep 17 00:00:00 2001 From: Xavier Lozano Carreras Date: Thu, 22 Aug 2024 14:12:30 +0200 Subject: [PATCH 5/5] Add enter key listener --- .../calypso/features/iframe-bridge-server.js | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js b/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js index 0daa9b531d00d..5149d282912e3 100644 --- a/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js +++ b/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js @@ -37,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 @@ -1049,7 +1060,9 @@ function handleAppBannerShowing( calypsoPort ) { } function handlePatterns( calypsoPort ) { - addEditorListener( `[data-value="${ __( 'Patterns' ) }"]`, ( e ) => { + const selector = `[data-value="${ __( 'Patterns' ) }"]`; + + const callback = ( e ) => { e.preventDefault(); calypsoPort.postMessage( { @@ -1059,7 +1072,10 @@ function handlePatterns( calypsoPort ) { unsavedChanges: select( 'core/editor' ).isEditedPostDirty(), }, } ); - } ); + }; + + addEditorListener( selector, callback ); + addCommandsInputListener( selector, callback ); } function initPort( message ) {