Jetpack Beta: modernize the admin UI with React, the WordPress design system, and the Abilities API

projects/js-packages/components/changelog/add-jetpack-footer-show-default-links

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+JetpackFooter: add a `showDefaultLinks` prop (default `true`) to opt out of the built-in Products/Help links.

projects/js-packages/components/components/jetpack-footer/index.tsx

@@ -24,10 +24,15 @@ declare global {
  * @param {JetpackFooterProps} props - Component properties.
  * @return {ReactNode} JetpackFooter component.
  */
-const JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherProps } ) => {
+const JetpackFooter: FC< JetpackFooterProps > = ( {
+	className,
+	menu,
+	showDefaultLinks = true,
+	...otherProps
+} ) => {
 	let items: JetpackFooterMenuItem[] = [];
 
-	if ( ! isWpcomPlatformSite() && ! window?.JetpackNetworkAdminData ) {
+	if ( showDefaultLinks && ! isWpcomPlatformSite() && ! window?.JetpackNetworkAdminData ) {
 		items = [
 			{
 				label: __( 'Products', 'jetpack-components' ),

projects/js-packages/components/components/jetpack-footer/types.ts

@@ -16,4 +16,11 @@ export type JetpackFooterProps = {
 	 * Additional links to display in the footer.
 	 */
 	menu?: JetpackFooterMenuItem[];
+
+	/**
+	 * Whether to include the default "Products" and "Help" links (shown on
+	 * non-WordPress.com, non-network-admin contexts). Set to `false` for screens
+	 * where those links aren't relevant. Defaults to `true`.
+	 */
+	showDefaultLinks?: boolean;
 };

projects/plugins/beta/.gitignore

@@ -1 +1,4 @@
 /vendor/
+/build/
+/node_modules/
+/.cache/

projects/plugins/beta/babel.config.js

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

projects/plugins/beta/changelog/update-modernize-jetpack-beta-ui

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Modernized the Beta Tester admin interface with a React UI built on the WordPress design system, backed by the WordPress Abilities API.

projects/plugins/beta/composer.json

@@ -9,8 +9,10 @@
 	},
 	"require": {
 		"automattic/jetpack-admin-ui": "@dev",
+		"automattic/jetpack-assets": "@dev",
 		"automattic/jetpack-autoloader": "@dev",
 		"automattic/jetpack-logo": "@dev",
+		"automattic/jetpack-wp-abilities": "@dev",
 		"composer/semver": "3.4.3",
 		"erusev/parsedown": "1.7.4"
 	},

projects/plugins/beta/jetpack-beta.php

@@ -34,6 +34,7 @@
 }
 
 define( 'JPBETA__PLUGIN_FOLDER', dirname( plugin_basename( __FILE__ ) ) );
+define( 'JPBETA__PLUGIN_FILE', __FILE__ );
 define( 'JPBETA_VERSION', '4.2.0' );
 
 define( 'JETPACK_BETA_PLUGINS_URL', 'https://betadownload.jetpack.me/plugins.json' );
@@ -116,6 +117,8 @@ function jetpack_beta_admin_missing_autoloader() {
 
 Automattic\JetpackBeta\Hooks::setup();
 
+add_action( 'plugins_loaded', array( Automattic\JetpackBeta\Abilities\Beta_Abilities::class, 'init' ), 20 );
+
 register_activation_hook( __FILE__, array( Automattic\JetpackBeta\Hooks::class, 'activate' ) );
 register_deactivation_hook( __FILE__, array( Automattic\JetpackBeta\Hooks::class, 'deactivate' ) );
 

projects/plugins/beta/package.json

@@ -0,0 +1,53 @@
+{
+	"private": true,
+	"name": "@automattic/jetpack-beta",
+	"description": "Serves beta and PR branches of Jetpack to a WordPress install near you!",
+	"homepage": "https://jetpack.com",
+	"bugs": {
+		"url": "https://github.com/Automattic/jetpack/labels/[Plugin] Beta"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Automattic/jetpack.git",
+		"directory": "projects/plugins/beta"
+	},
+	"license": "GPL-2.0-or-later",
+	"author": "Automattic",
+	"scripts": {
+		"build": "pnpm run clean && pnpm run build-client",
+		"build-client": "webpack",
+		"build-production": "NODE_ENV=production BABEL_ENV=production pnpm run build-client",
+		"clean": "rm -rf build/",
+		"typecheck": "tsgo --noEmit",
+		"watch": "pnpm run build && webpack watch"
+	},
+	"browserslist": [
+		"extends @wordpress/browserslist-config"
+	],
+	"dependencies": {
+		"@automattic/jetpack-base-styles": "workspace:*",
+		"@automattic/jetpack-components": "workspace:*",
+		"@wordpress/api-fetch": "7.46.0",
+		"@wordpress/components": "33.1.0",
+		"@wordpress/element": "6.46.0",
+		"@wordpress/i18n": "6.19.0",
+		"@wordpress/icons": "13.1.0",
+		"@wordpress/ui": "0.13.0",
+		"@wordpress/url": "4.46.0",
+		"react": "18.3.1",
+		"react-dom": "18.3.1"
+	},
+	"devDependencies": {
+		"@automattic/jetpack-webpack-config": "workspace:*",
+		"@babel/core": "7.29.0",
+		"@babel/preset-env": "7.29.2",
+		"@babel/runtime": "7.29.2",
+		"@types/react": "18.3.28",
+		"@typescript/native-preview": "7.0.0-dev.20260225.1",
+		"@wordpress/browserslist-config": "6.46.0",
+		"sass-embedded": "1.97.3",
+		"sass-loader": "16.0.5",
+		"webpack": "5.105.2",
+		"webpack-cli": "6.0.1"
+	}
+}