Update usage of deprecated block editor APIs (#41176)

* Update getBlocks call to use block editor store * Update deprecated code in the voice-to-content block * Remove usage of old nux package in page patterns plugin * Remove nux imports and usage for custom wpcom welcome guide * Update deprecated usage of Card isElevated prop * Update isInserterSidebar usage - avoid deprecated selector in favor of core/editor store selector * changelog
Automattic · Feb 4, 2025 · 7fd1989 · 7fd1989
1 parent b9ca37b
commit 7fd1989
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 48 deletions.
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/update-deprecated-block-editor-code b/projects/packages/jetpack-mu-wpcom/changelog/update-deprecated-block-editor-code
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Code Quality: Update deprecated block editor API usage.
diff --git a/...tpack-mu-wpcom/src/common/tour-kit/variants/wpcom/components/wpcom-tour-kit-step-card.tsx b/...tpack-mu-wpcom/src/common/tour-kit/variants/wpcom/components/wpcom-tour-kit-step-card.tsx
@@ -25,7 +25,7 @@ const WpcomTourKitStepCard: React.FunctionComponent< WpcomTourStepRendererProps
 	const description = descriptions[ isMobile ? 'mobile' : 'desktop' ] ?? descriptions.desktop;
 
 	return (
-		<Card className="wpcom-tour-kit-step-card" isElevated>
+		<Card className="wpcom-tour-kit-step-card" elevation={ 2 }>
 			<WpcomTourKitStepCardOverlayControls onDismiss={ onDismiss } onMinimize={ onMinimize } />
 			{ imgSrc && (
 				<CardMedia className="wpcom-tour-kit-step-card__media">

diff --git a/...ts/packages/jetpack-mu-wpcom/src/features/starter-page-templates/page-patterns-plugin.tsx b/...ts/packages/jetpack-mu-wpcom/src/features/starter-page-templates/page-patterns-plugin.tsx
@@ -5,24 +5,22 @@ import { useCallback } from '@wordpress/element';
 import { addFilter, removeFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { pageLayoutStore } from './store';
-import '@wordpress/nux';
 
 const INSERTING_HOOK_NAME = 'isInsertingPagePattern';
 const INSERTING_HOOK_NAMESPACE = 'automattic/full-site-editing/inserting-pattern';
 
 interface PagePatternsPluginProps {
 	patterns: PatternDefinition[];
 }
-type CoreEditorPlaceholder = {
+type CoreBlockEditorPlaceholder = {
 	getBlocks: ( ...args: unknown[] ) => BlockInstance[];
+};
+type CoreEditorPlaceholder = {
 	getEditedPostAttribute: ( ...args: unknown[] ) => unknown;
 };
 type CoreEditPostPlaceholder = {
 	isFeatureActive: ( ...args: unknown[] ) => boolean;
 };
-type CoreNuxPlaceholder = {
-	areTipsEnabled: ( ...args: unknown[] ) => boolean;
-};
 
 /**
  * Recursively finds the Content block if any.
@@ -55,16 +53,21 @@ export function PagePatternsPlugin( props: PagePatternsPluginProps ): JSX.Elemen
 	const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
 	const { editPost } = useDispatch( 'core/editor' );
 	const { toggleFeature } = useDispatch( 'core/edit-post' );
-	const { disableTips } = useDispatch( 'core/nux' );
 
 	const selectProps = useSelect( select => {
+		const getMetaNew = () =>
+			( select( 'core/editor' ) as CoreEditorPlaceholder ).getEditedPostAttribute( 'meta' );
+		const currentBlocks = (
+			select( 'core/block-editor' ) as CoreBlockEditorPlaceholder
+		 ).getBlocks();
 		const { isOpen, isPatternPicker } = select( pageLayoutStore );
 		return {
+			getMeta: getMetaNew,
+			postContentBlock: findPostContentBlock( currentBlocks ),
 			isOpen: isOpen(),
 			isWelcomeGuideActive: (
 				select( 'core/edit-post' ) as CoreEditPostPlaceholder
 			 ).isFeatureActive( 'welcomeGuide' ) as boolean,
-			areTipsEnabled: ( select( 'core/nux' ) as CoreNuxPlaceholder ).areTipsEnabled() as boolean,
 			...( isPatternPicker() && {
 				title: __( 'Choose a Pattern', 'jetpack-mu-wpcom' ),
 				description: __(
@@ -75,15 +78,7 @@ export function PagePatternsPlugin( props: PagePatternsPluginProps ): JSX.Elemen
 		};
 	}, [] );
 
-	const { getMeta, postContentBlock } = useSelect( select => {
-		const getMetaNew = () =>
-			( select( 'core/editor' ) as CoreEditorPlaceholder ).getEditedPostAttribute( 'meta' );
-		const currentBlocks = ( select( 'core/editor' ) as CoreEditorPlaceholder ).getBlocks();
-		return {
-			getMeta: getMetaNew,
-			postContentBlock: findPostContentBlock( currentBlocks ),
-		};
-	}, [] );
+	const { getMeta, postContentBlock } = selectProps;
 
 	const savePatternChoice = useCallback(
 		( name: string, selectedCategory: string | null ) => {
@@ -123,17 +118,13 @@ export function PagePatternsPlugin( props: PagePatternsPluginProps ): JSX.Elemen
 		[ editPost, postContentBlock, replaceInnerBlocks ]
 	);
 
-	const { isWelcomeGuideActive, areTipsEnabled } = selectProps;
+	const { isWelcomeGuideActive } = selectProps;
 
 	const hideWelcomeGuide = useCallback( () => {
 		if ( isWelcomeGuideActive ) {
-			// Gutenberg 7.2.0 or higher.
 			toggleFeature( 'welcomeGuide' );
-		} else if ( areTipsEnabled ) {
-			// Gutenberg 7.1.0 or lower.
-			disableTips();
 		}
-	}, [ areTipsEnabled, disableTips, isWelcomeGuideActive, toggleFeature ] );
+	}, [ isWelcomeGuideActive, toggleFeature ] );
 
 	const handleClose = useCallback( () => {
 		setOpenState( 'CLOSED' );

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/index.js
@@ -2,7 +2,7 @@
 import '../../common/public-path';
 import { register } from './src/store';
 
-import './src/disable-core-nux';
+import './src/disable-core-welcome-guide';
 import './src/block-editor-nux';
 
 register();
diff --git a/...-block-editor-nux/src/disable-core-nux.js → ...tor-nux/src/disable-core-welcome-guide.js b/...-block-editor-nux/src/disable-core-nux.js → ...tor-nux/src/disable-core-welcome-guide.js
@@ -1,10 +1,7 @@
 import { select, dispatch, subscribe } from '@wordpress/data';
 
-import '@wordpress/nux'; //ensure nux store loads
-
-// Disable nux and welcome guide features from core.
+// Disable welcome guide features from core.
 const unsubscribe = subscribe( () => {
-	dispatch( 'core/nux' ).disableTips();
 	if ( select( 'core/edit-post' )?.isFeatureActive( 'welcomeGuide' ) ) {
 		dispatch( 'core/edit-post' ).toggleFeature( 'welcomeGuide' );
 		unsubscribe();
@@ -16,12 +13,7 @@ const unsubscribe = subscribe( () => {
 } );
 
 // Listen for these features being triggered to call dotcom welcome guide instead.
-// Note migration of areTipsEnabled: https://github.com/WordPress/gutenberg/blob/5c3a32dabe4393c45f7fe6ac5e4d78aebd5ee274/packages/data/src/plugins/persistence/index.js#L269
 subscribe( () => {
-	if ( select( 'core/nux' ).areTipsEnabled() ) {
-		dispatch( 'core/nux' ).disableTips();
-		dispatch( 'automattic/wpcom-welcome-guide' ).setShowWelcomeGuide( true );
-	}
 	if ( select( 'core/edit-post' )?.isFeatureActive( 'welcomeGuide' ) ) {
 		dispatch( 'core/edit-post' ).toggleFeature( 'welcomeGuide' );
 		// On mounting, the welcomeGuide feature is turned on by default. This opens the welcome guide despite `welcomeGuideStatus` value.

diff --git a/...ges/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/welcome-tour/tour-launch.jsx b/...ges/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/welcome-tour/tour-launch.jsx
@@ -113,7 +113,7 @@ function WelcomeTour( { siteIntent } ) {
 	}
 	const { isInserterOpened, isSidebarOpened, isSettingsOpened } = useSelect(
 		select => ( {
-			isInserterOpened: select( 'core/edit-post' ).isInserterOpened(),
+			isInserterOpened: select( 'core/editor' ).isInserterOpened(),
 			isSidebarOpened: select( 'automattic/block-editor-nav-sidebar' )?.isSidebarOpened() ?? false, // The sidebar store may not always be loaded.
 			isSettingsOpened:
 				select( 'core/interface' ).getActiveComplementaryArea( 'core/edit-post' ) ===

diff --git a/projects/plugins/jetpack/changelog/update-deprecated-block-editor-code b/projects/plugins/jetpack/changelog/update-deprecated-block-editor-code
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Code Quality: Update deprecated block editor APU usage.
diff --git a/projects/plugins/jetpack/extensions/blocks/voice-to-content/edit.tsx b/projects/plugins/jetpack/extensions/blocks/voice-to-content/edit.tsx
@@ -8,9 +8,10 @@ import {
 } from '@automattic/jetpack-ai-client';
 import { ThemeProvider } from '@automattic/jetpack-components';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { BlockInstance } from '@wordpress/blocks';
 import { Button, Modal, Icon } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { external } from '@wordpress/icons';
@@ -58,12 +59,13 @@ const transcriptionStateHelper = (
 export default function VoiceToContentEdit( { clientId } ) {
 	const [ audio, setAudio ] = useState< Blob >( null );
 
-	const { removeBlock } = useDispatch( 'core/block-editor' ) as {
-		removeBlock: ( id: string ) => void;
+	const { removeBlock } = useDispatch( blockEditorStore );
+	// TODO: The second `deps` argument shouldn't be needed, but it's added to make the type checker happy.
+	// This can be removed when the core data types are updated to fix the issue.
+	const { getBlocks } = useSelect( blockEditorStore, [] ) as {
+		getBlocks: () => BlockInstance[];
 	};
 
-	const { getBlocks } = useSelect( select => select( editorStore ), [] );
-
 	const destroyBlock = useCallback( () => {
 		// Remove the block from the editor
 		setTimeout( () => {

diff --git a/projects/plugins/jetpack/extensions/shared/external-media/media-service/index.ts b/projects/plugins/jetpack/extensions/shared/external-media/media-service/index.ts
@@ -210,16 +210,10 @@ const isMediaSourceConnected = async ( source: MediaSource ) =>
  * @return {boolean} True if the inserter is opened false otherwise.
  */
 const isInserterOpened = (): boolean => {
-	/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-	const selectIsInserterOpened = ( select( 'core/editor' ) as any )?.isInserterOpened;
+	const editorIsInserterOpened = select( 'core/editor' ).isInserterOpened?.();
 
-	const editorIsInserterOpened = selectIsInserterOpened?.();
-
-	return (
-		editorIsInserterOpened ||
-		select( 'core/edit-site' )?.isInserterOpened() ||
-		select( 'core/edit-widgets' )?.isInserterOpened()
-	);
+	// The widgets editor doesn't use the `core/editor` store, so check is separately.
+	return editorIsInserterOpened || select( 'core/edit-widgets' )?.isInserterOpened();
 };
 
 const registerInInserter = ( mediaCategoryProvider: () => object ) =>