Add wpcom marketplate upsell to plugins on WoA sites

projects/packages/jetpack-mu-wpcom/changelog/plugins-market-place-upsell

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+wpcom: Add link to wpcom plugin marketplace from plugin install page

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

@@ -56,7 +56,7 @@
 		},
 		"autotagger": true,
 		"branch-alias": {
-			"dev-trunk": "5.27.x-dev"
+			"dev-trunk": "5.28.x-dev"
 		},
 		"textdomain": "jetpack-mu-wpcom",
 		"version-constants": {

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

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-mu-wpcom",
-	"version": "5.27.1-alpha",
+	"version": "5.28.0-alpha",
 	"description": "Enhances your site with features powered by WordPress.com",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/jetpack-mu-wpcom/#readme",
 	"bugs": {

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

@@ -13,7 +13,7 @@
  * Jetpack_Mu_Wpcom main class.
  */
 class Jetpack_Mu_Wpcom {
-	const PACKAGE_VERSION = '5.27.1-alpha';
+	const PACKAGE_VERSION = '5.28.0-alpha';
 	const PKG_DIR         = __DIR__ . '/../';
 	const BASE_DIR        = __DIR__ . '/';
 	const BASE_FILE       = __FILE__;
@@ -84,6 +84,7 @@ public static function load_features() {
 		require_once __DIR__ . '/features/marketplace-products-updater/class-marketplace-products-updater.php';
 		require_once __DIR__ . '/features/media/heif-support.php';
 		require_once __DIR__ . '/features/site-editor-dashboard-link/site-editor-dashboard-link.php';
+		require_once __DIR__ . '/features/wpcom-plugins/wpcom-plugins.php';
 		require_once __DIR__ . '/features/wpcom-site-menu/wpcom-site-menu.php';
 		require_once __DIR__ . '/features/wpcom-themes/wpcom-themes.php';
 

projects/packages/jetpack-mu-wpcom/src/features/wpcom-plugins/css/banner.css

@@ -0,0 +1,116 @@
+:root {
+	--wpcom-plugins-banner-image: '';
+}
+
+@font-face {
+	font-display: swap;
+	font-family: "Recoleta";
+	font-weight: 400;
+	src: url("https://s1.wp.com/i/fonts/recoleta/400.woff2") format("woff2"), url("https://s1.wp.com/i/fonts/recoleta/400.woff") format("woff");
+}
+
+.wpcom-plugins-banner {
+	background-color: #242424;
+	padding: 64px 32px;
+	border-radius: 10px;
+	margin: 25px 0;
+	background-image: var(--wpcom-plugins-banner-image);
+	background-repeat: no-repeat;
+	background-position: bottom right 64px;
+	background-size: 530px;
+}
+
+.wpcom-plugins-banner__content {
+	width: 540px;
+}
+
+#wpcontent .wpcom-plugins-banner h3,
+#wpcontent .wpcom-plugins-banner p {
+	font-weight: 400;
+	letter-spacing: -0.32px;
+	margin: 10px 0;
+	text-wrap: pretty;
+}
+
+.wpcom-plugins-banner h3 {
+	font-family: 'Recoleta';
+	font-size: 32px;
+	line-height: 40px;
+	color: #FFF;
+}
+
+.wpcom-plugins-banner p {
+	font-size: 16px;
+	line-height: 24px;
+	color: #A7AAAD;
+}
+
+.wpcom-plugins-banner a,
+.wpcom-plugins-banner a:visited {
+	background-color: #3858E9;
+	color: white;
+	border-radius: 4px;
+	padding: 10px 24px;
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: 0.32px;
+	text-decoration: none;
+	display: inline-block;
+	margin-top: 32px;
+}
+
+.wpcom-plugins-banner a:hover,
+.wpcom-plugins-banner a:focus {
+	background-color: #1d2327;
+	color: white;
+}
+
+@media (max-width: 1260px) {
+	.wpcom-plugins-banner {
+		padding: 32px;
+		background-size: 400px;
+	}
+
+	.wpcom-plugins-banner a {
+		padding: 10px 20px;
+		margin-top: 12px;
+	}
+}
+
+@media (max-width: 1120px) {
+	.wpcom-plugins-banner {
+		background-position: bottom right 5px;
+		background-size: 300px
+	}
+}
+
+@media (max-width: 850px) {
+	.wpcom-plugins-banner {
+		background-image: none;
+	}
+
+	.wpcom-plugins-banner__content {
+		width: auto;
+	}
+}
+
+@media (max-width: 782px) {
+	.wpcom-plugins-banner {
+		padding: 24px;
+	}
+
+	.wpcom-plugins-banner h3,
+	.wpcom-plugins-banner p {
+		margin: 8px 0;
+	}
+
+	.wpcom-plugins-banner h3 {
+		font-size: 24px;
+		line-height: 32px;
+	}
+
+	.wpcom-plugins-banner p {
+		font-size: 14px;
+		line-height: 20px;
+	}
+}

projects/packages/jetpack-mu-wpcom/src/features/wpcom-plugins/js/banner.js

@@ -0,0 +1,39 @@
+/* global wpcomPluginsBanner */
+
+document.addEventListener( 'DOMContentLoaded', () => {
+	const pluginBrowser = document.querySelector( '#plugin-filter' );
+	if ( ! pluginBrowser ) {
+		return;
+	}
+
+	document.documentElement.style.setProperty(
+		'--wpcom-plugins-banner-image',
+		`url(${ wpcomPluginsBanner.bannerBackground })`
+	);
+
+	pluginBrowser.insertAdjacentHTML(
+		'beforebegin',
+		`
+		<div class="wpcom-plugins-banner">
+			<div class="wpcom-plugins-banner__content">
+				<img src="${ wpcomPluginsBanner.logo }" alt="WordPress.com">
+				<h3>${ wpcomPluginsBanner.title }</h3>
+				<p>${ wpcomPluginsBanner.description }</p>
+				<a href="${ wpcomPluginsBanner.actionUrl }">${ wpcomPluginsBanner.actionText }</a>
+			</div>
+		</div>
+	`
+	);
+
+	const wpcomPluginObserver = new MutationObserver( () => {
+		if (
+			! document.querySelector( '.plugin-install-search .current' ) ||
+			document.querySelector( '.no-plugin-results' )
+		) {
+			document.querySelector( '.wpcom-plugins-banner' ).classList.remove( 'hidden' );
+		} else {
+			document.querySelector( '.wpcom-plugins-banner' ).classList.add( 'hidden' );
+		}
+	} );
+	wpcomPluginObserver.observe( document.getElementById( 'plugin-filter' ), { childList: true } );
+} );

projects/packages/jetpack-mu-wpcom/src/features/wpcom-plugins/wpcom-plugins.php

@@ -0,0 +1,57 @@
+<?php
+/**
+ * WordPress.com Plugins
+ *
+ * Adds a tiny WordPress.com Plugins integration to the plugin list.
+ *
+ * @package automattic/jetpack-mu-wpcom
+ */
+
+use Automattic\Jetpack\Jetpack_Mu_Wpcom;
+
+/**
+ * Displays a banner before the theme browser that links to the WP.com Theme Showcase.
+ */
+function wpcom_plugins_show_banner() {
+
+	// phpcs:ignore WordPress.Security.NonceVerification.Recommended
+	if ( isset( $_GET['tab'] ) && 'favorites' === $_GET['tab'] ) {
+		// no banner on the favorites tab, it's a bit overbearing given they presumably want
+		// something specific.
+		return;
+	}
+
+	$site_slug        = wp_parse_url( home_url(), PHP_URL_HOST );
+	$wpcom_logo       = plugins_url( 'images/wpcom-logo.svg', __FILE__ );
+	$background_image = plugins_url( 'images/banner-background.png', __FILE__ );
+
+	wp_enqueue_script(
+		'wpcom-plugins-banner',
+		plugins_url( 'js/banner.js', __FILE__ ),
+		array(),
+		Jetpack_Mu_Wpcom::PACKAGE_VERSION,
+		array(
+			'strategy'  => 'defer',
+			'in_footer' => true,
+		)
+	);
+	wp_localize_script(
+		'wpcom-plugins-banner',
+		'wpcomPluginsBanner',
+		array(
+			'logo'             => esc_url( $wpcom_logo ),
+			'title'            => esc_html__( "Flex your site's features with plugins", 'jetpack-mu-wpcom' ),
+			'description'      => esc_html__( "Access a variety of free and paid plugins that can enhance your site's functionality and features.", 'jetpack-mu-wpcom' ),
+			'actionUrl'        => esc_url( "https://wordpress.com/plugins/$site_slug?ref=woa-plugin-banner" ),
+			'actionText'       => esc_html__( 'Explore plugins', 'jetpack-mu-wpcom' ),
+			'bannerBackground' => esc_url( $background_image ),
+		)
+	);
+	wp_enqueue_style(
+		'wpcom-plugins-banner',
+		plugins_url( 'css/banner.css', __FILE__ ),
+		array(),
+		Jetpack_Mu_Wpcom::PACKAGE_VERSION
+	);
+}
+add_action( 'load-plugin-install.php', 'wpcom_plugins_show_banner' );

projects/plugins/mu-wpcom-plugin/changelog/update-plugin-upsell

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+