MU WPCOM: Port tags-education feature from ETK (#38210)

projects/packages/jetpack-mu-wpcom/babel.config.js

@@ -1,3 +1,10 @@
-module.exports = {
-	presets: [ [ '@automattic/jetpack-webpack-config/babel/preset' ] ],
+const config = {
+	presets: [
+		[
+			'@automattic/jetpack-webpack-config/babel/preset',
+			{ pluginReplaceTextdomain: { textdomain: 'jetpack-mu-wpcom' } },
+		],
+	],
 };
+
+module.exports = config;

projects/packages/jetpack-mu-wpcom/changelog/mu-wpcom-tags-education

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+MU WPCOM: Port tags-education feature from ETK.

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

@@ -45,6 +45,7 @@
 		"webpack-cli": "4.9.1"
 	},
 	"dependencies": {
+		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@automattic/typography": "1.0.0",
 		"@preact/signals": "^1.2.2",
 		"@sentry/browser": "7.80.1",

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

@@ -102,6 +102,7 @@ public static function load_features() {
 		require_once __DIR__ . '/features/override-preview-button-url/override-preview-button-url.php';
 		require_once __DIR__ . '/features/paragraph-block-placeholder/paragraph-block-placeholder.php';
 		require_once __DIR__ . '/features/site-editor-dashboard-link/site-editor-dashboard-link.php';
+		require_once __DIR__ . '/features/tags-education/tags-education.php';
 		require_once __DIR__ . '/features/wpcom-block-editor/class-jetpack-wpcom-block-editor.php';
 		require_once __DIR__ . '/features/wpcom-block-editor/functions.editor-type.php';
 		require_once __DIR__ . '/features/wpcom-site-menu/wpcom-site-menu.php';

projects/packages/jetpack-mu-wpcom/src/features/tags-education/tags-education.js

@@ -0,0 +1,34 @@
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { ExternalLink } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
+
+const addTagsEducationLink = createHigherOrderComponent( PostTaxonomyType => {
+	return props => {
+		const { tracks } = useAnalytics();
+
+		if ( props.slug !== 'post_tag' || ! window.wpcomTagsEducation ) {
+			return <PostTaxonomyType { ...props } />;
+		}
+
+		return (
+			<>
+				<PostTaxonomyType { ...props } />
+				<ExternalLink
+					href="https://wordpress.com/support/posts/tags/"
+					onClick={ () => {
+						tracks.recordEvent( 'jetpack_mu_wpcom_tags_education_link_click' );
+					} }
+				>
+					{ window.wpcomTagsEducation.actionText }
+				</ExternalLink>
+			</>
+		);
+	};
+}, 'addTagsEducationLink' );
+
+addFilter(
+	'editor.PostTaxonomyType',
+	'jetpack-mu-wpcom/add-tags-education-link',
+	addTagsEducationLink
+);

projects/packages/jetpack-mu-wpcom/src/features/tags-education/tags-education.php

@@ -0,0 +1,49 @@
+<?php
+/**
+ * WPCOM addition to Gutenberg post tags section.
+ *
+ * @package automattic/jetpack-mu-wpcom
+ */
+
+use Automattic\Jetpack\Connection\Initial_State as Connection_Initial_State;
+use Automattic\Jetpack\Connection\Manager as Connection_Manager;
+use Automattic\Jetpack\Jetpack_Mu_Wpcom;
+use Automattic\Jetpack\Status;
+use Automattic\Jetpack\Terms_Of_Service;
+use Automattic\Jetpack\Tracking;
+
+define( 'MU_WPCOM_TAGS_EDUCATION', true );
+
+/**
+ * Enqueue assets
+ */
+function wpcom_enqueue_tags_education_assets() {
+	$asset_file = include Jetpack_Mu_Wpcom::BASE_DIR . 'build/tags-education/tags-education.asset.php';
+
+	wp_enqueue_script(
+		'wpcom-tags-education-script',
+		plugins_url( 'build/tags-education/tags-education.js', Jetpack_Mu_Wpcom::BASE_FILE ),
+		$asset_file['dependencies'] ?? array(),
+		$asset_file['version'] ?? filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/tags-education/tags-education.js' ),
+		true
+	);
+
+	wp_localize_script(
+		'wpcom-tags-education-script',
+		'wpcomTagsEducation',
+		array( 'actionText' => __( 'Build your audience with tags', 'jetpack-mu-wpcom' ) )
+	);
+
+	Connection_Initial_State::render_script( 'wpcom-tags-education-script' );
+
+	$status            = new Status();
+	$connection        = new Connection_Manager();
+	$tracking          = new Tracking( 'jetpack-mu-wpcom', $connection );
+	$can_use_analytics = $tracking->should_enable_tracking( new Terms_Of_Service(), $status );
+
+	if ( $can_use_analytics ) {
+		Tracking::register_tracks_functions_scripts( true );
+	}
+}
+
+add_action( 'enqueue_block_editor_assets', 'wpcom_enqueue_tags_education_assets', 100 );

projects/packages/jetpack-mu-wpcom/webpack.config.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require( 'path' );
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const jetpackConfig = require( '@automattic/jetpack-webpack-config/webpack' );
+const jetpackWebpackConfig = require( '@automattic/jetpack-webpack-config/webpack' );
 const verbumConfig = require( './verbum.webpack.config.js' );
 
 module.exports = [
@@ -20,48 +20,55 @@ module.exports = [
 				'./src/features/override-preview-button-url/override-preview-button-url.js',
 			'paragraph-block-placeholder':
 				'./src/features/paragraph-block-placeholder/paragraph-block-placeholder.js',
+			'tags-education': './src/features/tags-education/tags-education.js',
 		},
-		mode: jetpackConfig.mode,
-		devtool: jetpackConfig.devtool,
+		mode: jetpackWebpackConfig.mode,
+		devtool: jetpackWebpackConfig.devtool,
 		output: {
-			...jetpackConfig.output,
+			...jetpackWebpackConfig.output,
 			filename: '[name]/[name].js',
 			path: path.resolve( __dirname, 'src/build' ),
 		},
 		optimization: {
-			...jetpackConfig.optimization,
+			...jetpackWebpackConfig.optimization,
 		},
 		resolve: {
-			...jetpackConfig.resolve,
+			...jetpackWebpackConfig.resolve,
 		},
 		node: false,
 		plugins: [
-			...jetpackConfig.StandardPlugins( {
+			...jetpackWebpackConfig.StandardPlugins( {
 				MiniCssExtractPlugin: { filename: '[name]/[name].css' },
 			} ),
 		],
 		module: {
 			strictExportPresence: true,
 			rules: [
 				// Transpile JavaScript.
-				jetpackConfig.TranspileRule( {
+				jetpackWebpackConfig.TranspileRule( {
 					exclude: /node_modules\//,
 				} ),
 
 				// Transpile @automattic/jetpack-* in node_modules too.
-				jetpackConfig.TranspileRule( {
+				jetpackWebpackConfig.TranspileRule( {
 					includeNodeModules: [ '@automattic/jetpack-' ],
 				} ),
 
 				// Handle CSS.
-				jetpackConfig.CssRule( {
+				jetpackWebpackConfig.CssRule( {
 					extensions: [ 'css', 'scss' ],
 					extraLoaders: [ 'sass-loader' ],
 				} ),
 
 				// Handle images.
-				jetpackConfig.FileRule(),
+				jetpackWebpackConfig.FileRule(),
 			],
 		},
+		externals: {
+			...jetpackWebpackConfig.externals,
+			jetpackConfig: JSON.stringify( {
+				consumer_slug: 'jetpack-mu-wpcom',
+			} ),
+		},
 	},
 ];