Masterbar: Require and use 'jetpack-masterbar' package in jetpack-mu-wpcom

projects/packages/jetpack-mu-wpcom/.phan/baseline.php

@@ -43,6 +43,7 @@
         'src/class-jetpack-mu-wpcom.php' => ['PhanNoopNew'],
         'src/features/100-year-plan/enhanced-ownership.php' => ['PhanEmptyFQSENInCallable'],
         'src/features/100-year-plan/locked-mode.php' => ['PhanEmptyFQSENInCallable'],
+        'src/features/admin-color-schemes/admin-color-schemes.php' => ['PhanNoopNew'],
         'src/features/block-patterns/class-wpcom-block-patterns-utils.php' => ['PhanTypeMismatchReturnNullable'],
         'src/features/coming-soon/coming-soon.php' => ['PhanTypeArraySuspicious', 'PhanTypeMismatchArgumentInternal', 'PhanUndeclaredFunction'],
         'src/features/coming-soon/fallback-coming-soon-page.php' => ['PhanTypeMismatchArgument', 'PhanTypeVoidArgument'],

projects/packages/jetpack-mu-wpcom/changelog/add-masterbar-package-to-jetpack-mu-wpcom

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Masterbar: Require and use 'jetpack-masterbar' package in jetpack-mu-wpcom

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

@@ -10,6 +10,7 @@
 		"automattic/jetpack-calypsoify": "@dev",
 		"automattic/jetpack-classic-theme-helper": "@dev",
 		"automattic/jetpack-connection": "@dev",
+		"automattic/jetpack-masterbar": "@dev",
 		"automattic/jetpack-redirect": "@dev",
 		"automattic/jetpack-stats-admin": "@dev",
 		"automattic/jetpack-status": "@dev",

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

@@ -94,9 +94,11 @@ public static function load_features() {
 
 		// Initializers, if needed.
 		\Marketplace_Products_Updater::init();
-		// Only load the Calypsoify feature on WoA sites.
+		// Only load the Calypsoify and Masterbar features on WoA sites.
 		if ( class_exists( '\Automattic\Jetpack\Status\Host' ) && ( new \Automattic\Jetpack\Status\Host() )->is_woa_site() ) {
 			\Automattic\Jetpack\Calypsoify\Jetpack_Calypsoify::get_instance();
+			// This is temporary. After we cleanup Masterbar on WPCOM we should load Masterbar for Simple sites too.
+			\Automattic\Jetpack\Masterbar\Main::init();
 		}
 		// Gets autoloaded from the Scheduled_Updates package.
 		if ( class_exists( 'Automattic\Jetpack\Scheduled_Updates' ) ) {

projects/packages/jetpack-mu-wpcom/src/features/admin-color-schemes/admin-color-schemes.php

@@ -2,173 +2,15 @@
 /**
  * Additional admin color schemes.
  *
- * The content of this file is mostly copied from projects/plugins/jetpack/modules/masterbar/admin-color-schemes/class-admin-color-schemes.php.
- *
  * @package automattic/jetpack-mu-wpcom
  */
 
-use Automattic\Jetpack\Jetpack_Mu_Wpcom;
-
-/**
- * Get the admin color scheme URL based on the environment
- *
- * @param string $color_scheme  The color scheme to get the URL for.
- * @param string $file          The file name (optional, default: colors.css).
- * @return string
- */
-function get_admin_color_scheme_url( $color_scheme, $file = 'colors.css' ) {
-	// TODO: migrate these color scheme CSS files to jetpack-mu-wpcom as well.
-	return plugins_url( '_inc/build/masterbar/admin-color-schemes/colors/' . $color_scheme . '/' . $file, JETPACK__PLUGIN_FILE );
-}
-
-/**
- * Registers Calypso admin color schemes.
- */
-function register_calypso_admin_color_schemes() {
-	wp_admin_css_color(
-		'aquatic',
-		__( 'Aquatic', 'jetpack-mu-wpcom' ),
-		get_admin_color_scheme_url( 'aquatic' ),
-		array( '#135e96', '#007e65', '#043959', '#c5d9ed' ),
-		array(
-			'base'    => '#c5d9ed',
-			'focus'   => '#fff',
-			'current' => '#01263a',
-		)
-	);
-
-	wp_admin_css_color(
-		'classic-blue',
-		__( 'Classic Blue', 'jetpack-mu-wpcom' ),
-		get_admin_color_scheme_url( 'classic-blue' ),
-		array( '#135e96', '#b26200', '#dcdcde', '#646970' ),
-		array(
-			'base'    => '#646970',
-			'focus'   => '#2271b1',
-			'current' => '#fff',
-		)
-	);
-
-	wp_admin_css_color(
-		'classic-bright',
-		__( 'Classic Bright', 'jetpack-mu-wpcom' ),
-		get_admin_color_scheme_url( 'classic-bright' ),
-		array( '#135e96', '#c9256e', '#ffffff', '#e9eff5' ),
-		array(
-			'base'    => '#646970',
-			'focus'   => '#1d2327',
-			'current' => '#0a4b78',
-		)
-	);
-
-	wp_admin_css_color(
-		'classic-dark',
-		__( 'Classic Dark', 'jetpack-mu-wpcom' ),
-		get_admin_color_scheme_url( 'classic-dark' ),
-		array( '#101517', '#c9356e', '#32373c', '#0073aa' ),
-		array(
-			'base'    => '#a2aab2',
-			'focus'   => '#00b9eb',
-			'current' => '#fff',
-		)
-	);
-
-	wp_admin_css_color(
-		'contrast',
-		__( 'Contrast', 'jetpack-mu-wpcom' ),
-		get_admin_color_scheme_url( 'contrast' ),
-		array( '#101517', '#ffffff', '#32373c', '#b4b9be' ),
-		array(
-			'base'    => '#1d2327',
-			'focus'   => '#fff',
-			'current' => '#fff',
-		)
-	);
-
-	wp_admin_css_color(
-		'nightfall',
-		__( 'Nightfall', 'jetpack-mu-wpcom' ),
-		get_admin_color_scheme_url( 'nightfall' ),
-		array( '#00131c', '#043959', '#2271b1', '#9ec2e6' ),
-		array(
-			'base'    => '#9ec2e6',
-			'focus'   => '#fff',
-			'current' => '#fff',
-		)
-	);
-
-	wp_admin_css_color(
-		'powder-snow',
-		__( 'Powder Snow', 'jetpack-mu-wpcom' ),
-		get_admin_color_scheme_url( 'powder-snow' ),
-		array( '#101517', '#2271b1', '#dcdcde', '#646970' ),
-		array(
-			'base'    => '#646970',
-			'focus'   => '#135e96',
-			'current' => '#fff',
-		)
-	);
-
-	wp_admin_css_color(
-		'sakura',
-		__( 'Sakura', 'jetpack-mu-wpcom' ),
-		get_admin_color_scheme_url( 'sakura' ),
-		array( '#005042', '#f2ceda', '#2271b1', '#8c1749' ),
-		array(
-			'base'    => '#8c1749',
-			'focus'   => '#4f092a',
-			'current' => '#fff',
-		)
-	);
-
-	wp_admin_css_color(
-		'sunset',
-		__( 'Sunset', 'jetpack-mu-wpcom' ),
-		get_admin_color_scheme_url( 'sunset' ),
-		array( '#691c1c', '#b26200', '#f0c930', '#facfd2' ),
-		array(
-			'base'    => '#facfd2',
-			'focus'   => '#fff',
-			'current' => '#4f3500',
-		)
-	);
-}
-
-/**
- * Currently, the selected color scheme CSS (with id = "colors") is concatenated (by Jetpack Boost / Page Optimize),
- * and is output before the default color scheme CSS, making it lose in specificity.
- *
- * To prevent this, we disable CSS concatenation for color schemes.
-
- * @param boolean $do_concat  Whether to concat the CSS file.
- * @param string  $handle     The file handle.
- * @return boolean
- */
-function disable_css_concat_for_color_schemes( $do_concat, $handle ) {
-	if ( $handle === 'colors' ) {
-		return false;
-	}
-	return $do_concat;
-}
-
-/**
- * For Core color schemes, we have an additional CSS file that is responsible for the colors of the sidebar notice.
- */
-function enqueue_color_scheme_for_sidebar_notice() {
-	$core_color_schemes = array( 'blue', 'coffee', 'ectoplasm', 'fresh', 'light', 'midnight', 'modern', 'ocean', 'sunrise' );
-	$color_scheme       = get_user_option( 'admin_color' );
-	if ( in_array( $color_scheme, $core_color_schemes, true ) ) {
-		wp_enqueue_style(
-			'jetpack-core-color-schemes-overrides-sidebar-notice',
-			get_admin_color_scheme_url( $color_scheme, 'sidebar-notice.css' ),
-			array(),
-			Jetpack_Mu_Wpcom::PACKAGE_VERSION
-		);
-	}
-}
+use Automattic\Jetpack\Masterbar\Admin_Color_Schemes;
+use Automattic\Jetpack\Status\Host;
 
-if ( defined( 'JETPACK__PLUGIN_FILE' ) && function_exists( 'wpcom_is_nav_redesign_enabled' ) && wpcom_is_nav_redesign_enabled() ) {
-	add_action( 'admin_init', 'register_calypso_admin_color_schemes' );
-	add_action( 'admin_enqueue_scripts', 'enqueue_color_scheme_for_sidebar_notice' );
-	add_filter( 'css_do_concat', 'disable_css_concat_for_color_schemes', 10, 2 );
+// @TODO Ideally we should remove this feature entirely and update Jetpack_Mu_Wpcom::load_features to initialize
+// Masterbar for both WoA and Simple sites.
+// This would require removing the relevant Masterbar code on WPCOM and rely on the package only.
+if ( function_exists( 'wpcom_is_nav_redesign_enabled' ) && wpcom_is_nav_redesign_enabled() && ( new Host() )->is_wpcom_simple() ) {
+	new Admin_Color_Schemes();
 }

projects/packages/masterbar/changelog/add-masterbar-package-to-jetpack-mu-wpcom

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Masterbar: Require and use 'jetpack-masterbar' package in jetpack-mu-wpcom

projects/packages/masterbar/composer.json

@@ -63,7 +63,7 @@
 	"extra": {
 		"autotagger": true,
 		"branch-alias": {
-			"dev-trunk": "0.1.x-dev"
+			"dev-trunk": "0.2.x-dev"
 		},
 		"changelogger": {
 			"link-template": "https://github.com/Automattic/jetpack-masterbar/compare/v${old}...v${new}"

projects/packages/masterbar/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-masterbar",
-	"version": "0.1.1",
+	"version": "0.2.0-alpha",
 	"description": "The WordPress.com Toolbar feature replaces the default admin bar and offers quick links to the Reader, all your sites, your WordPress.com profile, and notifications.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/masterbar/#readme",
 	"bugs": {

projects/packages/masterbar/src/admin-color-schemes/class-admin-color-schemes.php

@@ -7,18 +7,37 @@
 
 namespace Automattic\Jetpack\Masterbar;
 
+use Automattic\Jetpack\Status\Host;
+
 /**
  * Unifies admin color scheme selection across WP.com sites.
  */
 class Admin_Color_Schemes {
 
+	/**
+	 * A list of core color schemes to override.
+	 *
+	 * @var array
+	 */
+	const CORE_COLOR_SCHEMES = array( 'blue', 'coffee', 'ectoplasm', 'fresh', 'light', 'midnight', 'modern', 'ocean', 'sunrise' );
+
 	/**
 	 * Admin_Color_Schemes constructor.
 	 */
 	public function __construct() {
+		// We want to register the admin color schemes across all environments.
 		add_action( 'admin_init', array( $this, 'register_admin_color_schemes' ) );
-		add_action( 'rest_api_init', array( $this, 'register_admin_color_meta' ) );
-		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_core_color_schemes_overrides' ) );
+		// We don't want to make the admin_color available in users REST API endpoint for Simple sites.
+		if ( false === ( new Host() )->is_wpcom_simple() ) {
+			add_action( 'rest_api_init', array( $this, 'register_admin_color_meta' ) );
+		}
+
+		if ( function_exists( 'wpcom_is_nav_redesign_enabled' ) && wpcom_is_nav_redesign_enabled() ) { // Classic sites.
+			add_filter( 'css_do_concat', array( $this, 'disable_css_concat_for_color_schemes' ), 10, 2 );
+			add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_color_scheme_for_sidebar_notice' ) );
+		} else { // Default and self-hosted sites.
+			add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_core_color_schemes_overrides' ) );
+		}
 	}
 
 	/**
@@ -56,10 +75,11 @@ public function update_admin_color_permissions_check( $allowed, $meta_key, $obje
 	 * Get the admin color scheme URL based on the environment
 	 *
 	 * @param string $color_scheme  The color scheme to get the URL for.
+	 * @param string $file          The file name (optional, default: colors.css).
 	 * @return string
 	 */
-	public function get_admin_color_scheme_url( $color_scheme ) {
-		return plugins_url( '../../dist/admin-color-schemes/colors/' . $color_scheme . '/colors.css', __FILE__ );
+	public function get_admin_color_scheme_url( $color_scheme, $file = 'colors.css' ) {
+		return plugins_url( '../../dist/admin-color-schemes/colors/' . $color_scheme . '/' . $file, __FILE__ );
 	}
 
 	/**
@@ -180,9 +200,8 @@ public function register_admin_color_schemes() {
 	 * Enqueues current color-scheme overrides for core color schemes
 	 */
 	public function enqueue_core_color_schemes_overrides() {
-		$core_color_schemes = array( 'blue', 'coffee', 'ectoplasm', 'fresh', 'light', 'midnight', 'modern', 'ocean', 'sunrise' );
-		$color_scheme       = get_user_option( 'admin_color' );
-		if ( in_array( $color_scheme, $core_color_schemes, true ) ) {
+		$color_scheme = get_user_option( 'admin_color' );
+		if ( in_array( $color_scheme, static::CORE_COLOR_SCHEMES, true ) ) {
 			wp_enqueue_style(
 				'jetpack-core-color-schemes-overrides',
 				$this->get_admin_color_scheme_url( $color_scheme ),
@@ -191,4 +210,36 @@ public function enqueue_core_color_schemes_overrides() {
 			);
 		}
 	}
+
+	/**
+	 * Enqueues current color-scheme sidebar notice overrides for core color schemes
+	 */
+	public function enqueue_color_scheme_for_sidebar_notice() {
+		$color_scheme = get_user_option( 'admin_color' );
+		if ( in_array( $color_scheme, static::CORE_COLOR_SCHEMES, true ) ) {
+			wp_enqueue_style(
+				'jetpack-core-color-schemes-overrides-sidebar-notice',
+				$this->get_admin_color_scheme_url( $color_scheme, 'sidebar-notice.css' ),
+				array(),
+				Main::PACKAGE_VERSION
+			);
+		}
+	}
+
+	/**
+	 * Currently, the selected color scheme CSS (with id = "colors") is concatenated (by Jetpack Boost / Page Optimize),
+	 * and is output before the default color scheme CSS, making it lose in specificity.
+	 *
+	 * To prevent this, we disable CSS concatenation for color schemes.
+
+	 * @param boolean $do_concat  Whether to concat the CSS file.
+	 * @param string  $handle     The file handle.
+	 * @return boolean
+	 */
+	public function disable_css_concat_for_color_schemes( $do_concat, $handle ) {
+		if ( $handle === 'colors' ) {
+			return false;
+		}
+		return $do_concat;
+	}
 }

projects/packages/masterbar/src/class-main.php

@@ -14,7 +14,7 @@
  */
 class Main {
 
-	const PACKAGE_VERSION = '0.1.1';
+	const PACKAGE_VERSION = '0.2.0-alpha';
 
 	/**
 	 * Initializer.
@@ -27,21 +27,25 @@ public static function init() {
 			return;
 		}
 
+		$host                    = new Host();
 		$should_use_nav_redesign = function_exists( 'wpcom_is_nav_redesign_enabled' ) && wpcom_is_nav_redesign_enabled();
 
-		if ( ! $should_use_nav_redesign ) {
+		if ( ! $should_use_nav_redesign && ! $host->is_wpcom_simple() ) {
 			new Masterbar();
 		}
 
 		new Admin_Color_Schemes();
 
-		if ( ( new Host() )->is_woa_site() ) {
+		if ( $host->is_wpcom_platform() ) {
 			new Inline_Help();
 			require_once __DIR__ . '/wp-posts-list/bootstrap.php';
-			require_once __DIR__ . '/profile-edit/bootstrap.php';
 			require_once __DIR__ . '/nudges/bootstrap.php';
 		}
 
+		if ( $host->is_woa_site() ) {
+			require_once __DIR__ . '/profile-edit/bootstrap.php';
+		}
+
 		/**
 		 * Whether to load the admin menu functionality.
 		 *