From 0585dd97eab30e7f81e86eb8b53a9b30f9c8dec4 Mon Sep 17 00:00:00 2001 From: Rostislav Wolny Date: Wed, 16 Aug 2023 16:19:04 +0200 Subject: [PATCH] Prevent displaying post editor welcome guide This is rather an edge case when users open the email editor before they have opened the post editor. It also happens in acceptance tests. [MAILPOET-5365] --- .../js/src/email_editor/core/hooks/index.ts | 21 +++++++++++++++++++ .../js/src/email_editor/email_editor.tsx | 4 ++++ .../assets/js/src/types/wordpress_modules.ts | 15 +++++++++++++ 3 files changed, 40 insertions(+) create mode 100644 mailpoet/assets/js/src/email_editor/core/hooks/index.ts diff --git a/mailpoet/assets/js/src/email_editor/core/hooks/index.ts b/mailpoet/assets/js/src/email_editor/core/hooks/index.ts new file mode 100644 index 0000000000..c78272e299 --- /dev/null +++ b/mailpoet/assets/js/src/email_editor/core/hooks/index.ts @@ -0,0 +1,21 @@ +import { useEffect } from '@wordpress/element'; +import { useSelect, dispatch } from '@wordpress/data'; +import { store as editPostStore } from '@wordpress/edit-post'; + +// This custom hook disables the post editor welcome guide +export function useDisableWelcomeGuide() { + const { isWelcomeGuideActive } = useSelect((select) => ({ + isWelcomeGuideActive: select(editPostStore).isFeatureActive( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + // The isFeatureActive accepts an attribute but typescript thinks it doesn't + 'welcomeGuide', + ), + })); + + useEffect(() => { + if (isWelcomeGuideActive) { + dispatch(editPostStore).toggleFeature('welcomeGuide'); + } + }, [isWelcomeGuideActive]); +} diff --git a/mailpoet/assets/js/src/email_editor/email_editor.tsx b/mailpoet/assets/js/src/email_editor/email_editor.tsx index 8b5a4f1b52..784514ef29 100644 --- a/mailpoet/assets/js/src/email_editor/email_editor.tsx +++ b/mailpoet/assets/js/src/email_editor/email_editor.tsx @@ -3,6 +3,7 @@ import { useSelect, select as directSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { store as editorStore } from '@wordpress/editor'; import { NextButtonSlot } from './core/components/next_button_slot'; +import { useDisableWelcomeGuide } from './core/hooks'; import { NextButton } from './integration/components/next_button'; import { MailPoetEmailData } from './types'; @@ -23,6 +24,9 @@ function Editor() { ) as MailPoetEmailData) ?? null, })); + // We don't want to show the editor welcome guide as it is not relevant to emails + useDisableWelcomeGuide(); + return ( diff --git a/mailpoet/assets/js/src/types/wordpress_modules.ts b/mailpoet/assets/js/src/types/wordpress_modules.ts index fad3811230..5cd5029caf 100644 --- a/mailpoet/assets/js/src/types/wordpress_modules.ts +++ b/mailpoet/assets/js/src/types/wordpress_modules.ts @@ -30,6 +30,21 @@ declare module '@wordpress/editor' { }>; } +// We need to use code/edit-post store but types are not available yet +declare module '@wordpress/edit-post' { + import * as editPostActions from '@wordpress/edit-post/store/actions'; + import * as editPostSelectors from '@wordpress/edit-post/store/selectors'; + import { StoreDescriptor as GenericStoreDescriptor } from '@wordpress/data/build-types/types'; + + export * from '@wordpress/edit-post/index'; + + export const store: { name: 'core/edit-post' } & GenericStoreDescriptor<{ + reducer: () => unknown; + actions: typeof editPostActions; + selectors: typeof editPostSelectors; + }>; +} + // there are no @types/wordpress__interface yet declare module '@wordpress/interface' { import { StoreDescriptor } from '@wordpress/data/build-types/types';