MU WPCOM: Port the wpcom block editor nux feature from the ETK

projects/packages/jetpack-mu-wpcom/changelog/wpcom-block-editor-nux

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added wpcom-block-editor-nux feature from calypso's ETK package.

projects/packages/jetpack-mu-wpcom/package.json

@@ -48,12 +48,14 @@
 		"webpack-cli": "4.9.1"
 	},
 	"dependencies": {
+		"@automattic/calypso-color-schemes": "3.1.3",
 		"@automattic/color-studio": "2.6.0",
 		"@automattic/i18n-utils": "1.2.3",
 		"@automattic/jetpack-base-styles": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@automattic/typography": "1.0.0",
 		"@automattic/page-pattern-modal": "1.1.5",
+		"@popperjs/core": "^2.11.8",
 		"@preact/signals": "^1.2.2",
 		"@sentry/browser": "7.80.1",
 		"@tanstack/react-query": "^5.15.5",
@@ -66,13 +68,16 @@
 		"@wordpress/element": "6.2.0",
 		"@wordpress/hooks": "4.2.0",
 		"@wordpress/i18n": "5.2.0",
+		"@wordpress/icons": "10.2.0",
 		"@wordpress/plugins": "7.2.0",
+		"@wordpress/private-apis": "^1.2.0",
 		"@wordpress/url": "4.2.0",
-		"@wordpress/icons": "10.2.0",
 		"clsx": "2.1.1",
+		"debug": "4.3.4",
 		"preact": "^10.13.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-popper": "^2.3.0",
 		"redux": "^4.2.1",
 		"redux-saga": "^1.3.0",
 		"swiper": "^8.4.5",

projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php

@@ -160,6 +160,7 @@ public static function load_etk_features() {
 		require_once __DIR__ . '/features/paragraph-block-placeholder/paragraph-block-placeholder.php';
 		require_once __DIR__ . '/features/tags-education/tags-education.php';
 		require_once __DIR__ . '/features/wpcom-block-description-links/wpcom-block-description-links.php';
+		require_once __DIR__ . '/features/wpcom-block-editor-nux/class-wpcom-block-editor-nux.php';
 		require_once __DIR__ . '/features/wpcom-blocks/a8c-posts-list/a8c-posts-list.php';
 		require_once __DIR__ . '/features/wpcom-blocks/event-countdown/event-countdown.php';
 		require_once __DIR__ . '/features/wpcom-blocks/timeline/timeline.php';

projects/packages/jetpack-mu-wpcom/src/common/tour-kit/components/keyboard-navigation.tsx

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+/**
+ * Internal dependencies
+ */
+import useFocusHandler from '../hooks/use-focus-handler';
+import useFocusTrap from '../hooks/use-focus-trap';
+import useKeydownHandler from '../hooks/use-keydown-handler';
+
+interface Props {
+	onMinimize: () => void;
+	onDismiss: ( target: string ) => () => void;
+	onNextStepProgression: () => void;
+	onPreviousStepProgression: () => void;
+	tourContainerRef: React.MutableRefObject< null | HTMLElement >;
+	isMinimized: boolean;
+}
+
+const KeyboardNavigation: React.FunctionComponent< Props > = ( {
+	onMinimize,
+	onDismiss,
+	onNextStepProgression,
+	onPreviousStepProgression,
+	tourContainerRef,
+	isMinimized,
+} ) => {
+	/**
+	 * Expand Tour Nav
+	 */
+	function ExpandedTourNav() {
+		useKeydownHandler( {
+			onEscape: onMinimize,
+			onArrowRight: onNextStepProgression,
+			onArrowLeft: onPreviousStepProgression,
+		} );
+		useFocusTrap( tourContainerRef );
+
+		return null;
+	}
+
+	/**
+	 * Minimize Tour Nav
+	 */
+	function MinimizedTourNav() {
+		useKeydownHandler( { onEscape: onDismiss( 'esc-key-minimized' ) } );
+
+		return null;
+	}
+
+	const isTourFocused = useFocusHandler( tourContainerRef );
+
+	if ( ! isTourFocused ) {
+		return null;
+	}
+
+	return isMinimized ? <MinimizedTourNav /> : <ExpandedTourNav />;
+};
+
+export default KeyboardNavigation;