Add dynamic social share images for plugin pages (Meta #5926)

environments/plugin-directory/.wp-env.json

@@ -15,14 +15,15 @@
 		"wp-content/mu-plugins": "./mocks/mu-plugins",
 		"wp-content/mu-plugins/pub": "../wordpress.org/public_html/wp-content/mu-plugins/pub",
 		"wp-content/mu-plugins/wporg-mu-plugins": "WordPress/wporg-mu-plugins#build",
-		"wp-content/env-bin": "./plugin-directory/bin"
+		"wp-content/env-bin": "./plugin-directory/bin",
+		"style": "../wordpress.org/public_html/style"
 	},
 	"lifecycleScripts": {
-		"afterStart": "bash plugin-directory/bin/after-start.sh"
+		"afterStart": "node plugin-directory/bin/after-start.js"
 	},
 	"config": {
 		"WP_DEBUG": true,
-		"JETPACK_DEV_DEBUG": true,
+		"JETPACK_DEV_DEBUG": false,
 		"WP_TESTS_TITLE": "WordPress.org Plugins",
 		"GLOTPRESS_LOCALES_PATH": "/var/www/html/wp-content/mu-plugins/pub/locales/locales.php",
 		"PLUGINS_TABLE_PREFIX": "wp_"

environments/plugin-directory/bin/after-start.js

@@ -0,0 +1,172 @@
+#!/usr/bin/env node
+/**
+ * Runs after wp-env start. Sets up permalinks, creates pages, and imports plugins.
+ *
+ * Cross-platform replacement for after-start.sh (Windows lacks /bin/bash in wp-env's shell).
+ */
+
+const { spawnSync } = require( 'child_process' );
+const path = require( 'path' );
+
+const ROOT = path.resolve( __dirname, '..', '..' );
+const CONFIG = '--config plugin-directory/.wp-env.json';
+
+function run( args, options = {} ) {
+	const result = spawnSync( 'npx', [ 'wp-env', ...CONFIG.split( ' ' ), ...args ], {
+		cwd: ROOT,
+		shell: true,
+		encoding: 'utf8',
+		...options,
+	} );
+
+	return result;
+}
+
+function wp( ...wpArgs ) {
+	return run( [ 'run', 'cli', '--', 'wp', ...wpArgs ], {
+		stdio: [ 'pipe', 'pipe', 'pipe' ],
+	} );
+}
+
+function wpQuiet( ...wpArgs ) {
+	return wp( ...wpArgs );
+}
+
+function tryWp( message, ...wpArgs ) {
+	const result = wpQuiet( ...wpArgs );
+
+	if ( result.status === 0 ) {
+		console.log( message );
+	}
+
+	return result;
+}
+
+function wpOutput( ...wpArgs ) {
+	const result = wp( ...wpArgs );
+	return ( result.stdout || '' ).trim();
+}
+
+// Install CLI tools needed by the plugin directory (svn, unzip, etc.).
+console.log( 'Installing CLI tools...' );
+run( [
+	'run',
+	'wordpress',
+	'sudo',
+	'bash',
+	'-c',
+	'command -v svn > /dev/null || (apt-get -qy update && apt-get -qy install subversion unzip zip) > /dev/null 2>&1',
+], { stdio: 'inherit' } );
+
+run( [
+	'run',
+	'cli',
+	'sudo',
+	'sh',
+	'-c',
+	'command -v svn > /dev/null || apk add --no-cache -q subversion unzip zip coreutils > /dev/null 2>&1',
+], { stdio: 'inherit' } );
+
+// Set up permalinks.
+wp( 'rewrite', 'structure', '/%postname%/', '--hard' );
+
+// Create pages that exist on wordpress.org/plugins (if they don't already exist).
+console.log( 'Creating pages...' );
+tryWp(
+	'  Created page: /developers/',
+	'post',
+	'create',
+	'--post_type=page',
+	'--post_status=publish',
+	'--post_title=Developer Information',
+	'--post_name=developers',
+	'--porcelain'
+);
+
+const developersId = wpOutput(
+	'post',
+	'list',
+	'--post_type=page',
+	'--name=developers',
+	'--field=ID'
+);
+
+if ( developersId ) {
+	tryWp(
+		'  Created page: /developers/add/',
+		'post',
+		'create',
+		'--post_type=page',
+		'--post_status=publish',
+		'--post_title=Add your Plugin',
+		'--post_name=add',
+		`--post_parent=${ developersId }`,
+		'--porcelain'
+	);
+	tryWp(
+		'  Created page: /developers/readme-validator/',
+		'post',
+		'create',
+		'--post_type=page',
+		'--post_status=publish',
+		'--post_title=Readme Validator',
+		'--post_content=[readme-validator]',
+		'--post_name=readme-validator',
+		`--post_parent=${ developersId }`,
+		'--porcelain'
+	);
+	tryWp(
+		'  Created page: /developers/block-plugin-validator/',
+		'post',
+		'create',
+		'--post_type=page',
+		'--post_status=publish',
+		'--post_title=Block Plugin Checker',
+		'--post_content=[block-validator]',
+		'--post_name=block-plugin-validator',
+		`--post_parent=${ developersId }`,
+		'--porcelain'
+	);
+	tryWp(
+		'  Created page: /developers/releases/',
+		'post',
+		'create',
+		'--post_type=page',
+		'--post_status=publish',
+		'--post_title=Release Management',
+		'--post_content=[release-confirmation]',
+		'--post_name=releases',
+		`--post_parent=${ developersId }`,
+		'--porcelain'
+	);
+}
+
+// Create stub database tables that exist outside WordPress on production.
+wp( 'db', 'import', 'wp-content/env-bin/database-tables.sql' );
+
+// Create browse section terms with proper display names.
+console.log( 'Creating browse sections...' );
+const sections = {
+	featured: 'Featured',
+	popular: 'Popular',
+	beta: 'Beta',
+	blocks: 'Block-Enabled',
+	new: 'New',
+	updated: 'Recently Updated',
+	favorites: 'Favorites',
+	'dashboard-widgets': 'Dashboard Widgets',
+};
+
+for ( const [ slug, name ] of Object.entries( sections ) ) {
+	tryWp(
+		`  Created section: ${ name } (${ slug })`,
+		'term',
+		'create',
+		'plugin_section',
+		name,
+		`--slug=${ slug }`
+	);
+}
+
+// Import plugins from wordpress.org.
+wp( 'eval-file', 'wp-content/env-bin/import-plugins.php' );

wordpress.org/public_html/wp-content/plugins/plugin-directory/class-plugin-directory.php

@@ -42,9 +42,12 @@ private function __construct() {
 		add_filter( 'pre_update_option_jetpack_options', array( $this, 'filter_jetpack_options' ) );
 		add_filter( 'jetpack_sitemap_post_types', array( $this, 'jetpack_sitemap_post_types' ) );
 		add_filter( 'jetpack_sitemap_skip_post', array( $this, 'jetpack_sitemap_skip_post' ), 10, 2 );
+		add_filter( 'jetpack_enable_open_graph', array( $this, 'disable_jetpack_open_graph_for_plugins' ), 99 );
+		add_filter( 'jetpack_disable_twitter_cards', array( $this, 'disable_jetpack_twitter_cards_for_plugins' ), 99 );
 		add_action( 'template_redirect', array( $this, 'prevent_canonical_for_plugins' ), 9 );
 		add_action( 'template_redirect', array( $this, 'custom_redirects' ), 1 );
 		add_action( 'template_redirect', array( $this, 'geopattern_icon_route' ), 0 );
+		add_action( 'template_redirect', array( $this, 'share_image_route' ), 0 );
 		add_filter( 'query_vars', array( $this, 'filter_query_vars' ), 1 );
 		add_filter( 'single_term_title', array( $this, 'filter_single_term_title' ) );
 		add_filter( 'get_the_archive_title_prefix', array( $this, 'filter_get_the_archive_title_prefix' ) );
@@ -428,6 +431,9 @@ public function init() {
 		// Add a rule for generated plugin icons. geopattern-icon/demo.svg | geopattern-icon/demo_abc123.svg
 		add_rewrite_rule( '^geopattern-icon/([^/_]+)(_([a-f0-9]{6}))?\.svg$', 'index.php?name=$matches[1]&geopattern_icon=$matches[3]', 'top' );
 
+		// Add a rule for generated plugin share images. share-image/demo.jpg
+		add_rewrite_rule( '^share-image/([^/]+)\.jpg$', 'index.php?plugin_share_image=$matches[1]', 'top' );
+
 		// Handle plugin admin requests
 		add_rewrite_rule( '^([^/]+)/advanced/?$', 'index.php?name=$matches[1]&plugin_advanced=1', 'top' );
 
@@ -1207,6 +1213,7 @@ public function filter_query_vars( $vars ) {
 		$vars[] = 'redirect_plugin_tab';
 		$vars[] = 'plugin_advanced';
 		$vars[] = 'geopattern_icon';
+		$vars[] = 'plugin_share_image';
 		$vars[] = 'block_search';
 
 		// Remove support for any query vars the Plugin Directory doesn't support/need on the front-end.
@@ -1509,6 +1516,38 @@ function geopattern_icon_route() {
 		die();
 	}
 
+	/**
+	 * Output a JPEG share image for a given plugin.
+	 */
+	public function share_image_route() {
+		$slug = get_query_var( 'plugin_share_image' );
+
+		if ( ! $slug ) {
+			return;
+		}
+
+		$plugin = get_posts(
+			array(
+				'post_type'      => 'plugin',
+				'name'           => $slug,
+				'post_status'    => 'publish',
+				'posts_per_page' => 1,
+			)
+		);
+
+		if ( empty( $plugin ) ) {
+			status_header( 404 );
+			die();
+		}
+
+		if ( ! Plugin_Share_Image::output( $plugin[0] ) ) {
+			status_header( 500 );
+			die();
+		}
+
+		die();
+	}
+
 	/**
 	 * The array of post types to be included in the sitemap.
 	 *
@@ -1543,6 +1582,44 @@ public function jetpack_sitemap_skip_post( $skip, $plugin_db_row ) {
 		return $skip;
 	}
 
+	/**
+	 * Disable Jetpack Open Graph on plugin pages.
+	 *
+	 * The theme outputs custom Open Graph tags, including the dynamic share image.
+	 *
+	 * @param bool $enabled Whether Jetpack Open Graph is enabled.
+	 * @return bool
+	 */
+	public function disable_jetpack_open_graph_for_plugins( $enabled ) {
+		if ( ! did_action( 'wp' ) ) {
+			return $enabled;
+		}
+
+		if ( is_singular( 'plugin' ) ) {
+			return false;
+		}
+
+		return $enabled;
+	}
+
+	/**
+	 * Disable Jetpack Twitter Cards on plugin pages.
+	 *
+	 * @param bool $disabled Whether Jetpack Twitter Cards are disabled.
+	 * @return bool
+	 */
+	public function disable_jetpack_twitter_cards_for_plugins( $disabled ) {
+		if ( ! did_action( 'wp' ) ) {
+			return $disabled;
+		}
+
+		if ( is_singular( 'plugin' ) ) {
+			return true;
+		}
+
+		return $disabled;
+	}
+
 	/**
 	 * Whitelists the oembed providers whitelist.
 	 *