diff --git a/apps/wpcom-block-editor/src/wpcom/editor.js b/apps/wpcom-block-editor/src/wpcom/editor.js index 4b844e4128658..0d5520647257f 100644 --- a/apps/wpcom-block-editor/src/wpcom/editor.js +++ b/apps/wpcom-block-editor/src/wpcom/editor.js @@ -6,6 +6,7 @@ import './features/fix-coblocks-fonts'; import './features/reorder-block-categories'; import './features/tracking'; import './features/use-classic-block-guide'; +import { OnboardingNextStepAfterPublishingPost } from './features/onboarding-next-step-after-publishing-post'; import { RedirectOnboardingUserAfterPublishingPost } from './features/redirect-onboarding-user-after-publishing-post'; import InserterMenuTrackingEvent from './features/tracking/wpcom-inserter-menu-search-term'; import './features/site-editor-env-consistency'; @@ -23,3 +24,9 @@ registerPlugin( 'start-writing-flow', { return ; }, } ); + +registerPlugin( 'onboarding-next-step-after-publishing-post', { + render() { + return ; + }, +} ); diff --git a/apps/wpcom-block-editor/src/wpcom/features/onboarding-next-step-after-publishing-post.js b/apps/wpcom-block-editor/src/wpcom/features/onboarding-next-step-after-publishing-post.js new file mode 100644 index 0000000000000..a79baf07f7752 --- /dev/null +++ b/apps/wpcom-block-editor/src/wpcom/features/onboarding-next-step-after-publishing-post.js @@ -0,0 +1,72 @@ +import { dispatch, select, subscribe, useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { Icon, pending } from '@wordpress/icons'; +import { getQueryArg } from '@wordpress/url'; + +export function OnboardingNextStepAfterPublishingPost() { + const currentPostType = useSelect( + ( localSelect ) => localSelect( 'core/editor' ).getCurrentPostType(), + [] + ); + + const hasPublishFirstPostTaskQueryArg = window.location.hash === '#publish-first-post'; + + if ( ! hasPublishFirstPostTaskQueryArg || currentPostType !== 'post' ) { + return false; + } + + // Save site origin in session storage to be used in editor refresh. + const siteOriginParam = getQueryArg( window.location.search, 'origin' ); + if ( siteOriginParam ) { + window.sessionStorage.setItem( 'site-origin', siteOriginParam ); + } + + const siteOrigin = window.sessionStorage.getItem( 'site-origin' ) || 'https://wordpress.com'; + const siteSlug = window.location.hostname; + + const unsubscribe = subscribe( () => { + const isSavingPost = select( 'core/editor' ).isSavingPost(); + const getCurrentPostRevisionsCount = select( 'core/editor' ).getCurrentPostRevisionsCount(); + + if ( isSavingPost ) { + const unsubscribeFromSavingPost = subscribe( () => { + const postStatus = select( 'core/editor' ).getEditedPostAttribute( 'status' ); + if ( + ( postStatus === 'publish' || postStatus === 'future' ) && + getCurrentPostRevisionsCount >= 1 + ) { + unsubscribeFromSavingPost(); + unsubscribe(); + dispatch( 'core/edit-post' ).closePublishSidebar(); + + const unsubscribeFromNotices = subscribe( () => { + const notices = select( 'core/notices' ).getNotices(); + if ( notices.some( ( notice ) => notice.id === 'editor-save' ) ) { + dispatch( 'core/notices' ).removeNotice( 'editor-save' ); + + // Show success notice with Next steps link + dispatch( 'core/notices' ).createSuccessNotice( + __( 'Well done publishing your first post!', 'wpcom-onboarding-task' ), + { + actions: [ + { + label: 'Next steps', + url: `${ siteOrigin }/home/${ siteSlug }`, + }, + ], + type: 'snackbar', + isDismissible: true, + explicitDismiss: true, + icon: , + id: 'NEXT_STEPS_NOTICE_ID', + } + ); + + unsubscribeFromNotices(); + } + } ); + } + } ); + } + } ); +}