Adds environment type indicator to admin bar

10up-experience.php

@@ -70,6 +70,7 @@ function ( $class_name ) {
 	AdminCustomizations\Customizations::instance();
 }
 
+AdminCustomizations\EnvironmentIndicator::instance();
 API\API::instance();
 Authentication\Usernames::instance();
 Authors\Authors::instance();

README.md

@@ -143,6 +143,12 @@ Filters how many log items to store. Items are stored in array saved to the opti
 
 Define `TENUP_DISABLE_ACTIVITYLOG` as `true` to disable Activity Log.
 
+
+### Environment Indicator
+
+To enhance user awareness and minimize the risk of making unintended changes, 10up Experience includes a visual indicator integrated into the admin bar. This feature clearly displays which environment (e.g., development, staging, production) the user is currently working in.
+
+
 ### Comments
 
 10up Experience includes a feature to disable comments across the site. This feature can be enabled or disabled in `Settings > General`. It is disabled by default.

assets/css/admin.css

@@ -10,3 +10,54 @@
 	height: 32px;
 	width: 20px;
 }
+
+/* Environment Indicator Styling */
+#wpadminbar ul li#wp-admin-bar-tenup-experience-environment-indicator {
+	color: #fff;
+	pointer-events: none;
+}
+
+#wpadminbar ul li#wp-admin-bar-tenup-experience-environment-indicator.tenup-production {
+	background-color: #b92a2a;
+	color: #fff;
+	pointer-events: none;
+}
+
+#wpadminbar ul li#wp-admin-bar-tenup-experience-environment-indicator.tenup-staging {
+	background-color: #d79d00;
+	color: #fff;
+	pointer-events: none;
+}
+
+#wpadminbar ul li#wp-admin-bar-tenup-experience-environment-indicator.tenup-local,
+#wpadminbar ul li#wp-admin-bar-tenup-experience-environment-indicator.tenup-development {
+	background-color: #34863b;
+	color: #fff;
+	pointer-events: none;
+}
+
+.tenup-experience-environment-indicator__icon {
+	position: absolute;
+	top: 10px;
+}
+
+#wp-admin-bar-tenup-experience-environment-indicator > div > .ab-icon::before {
+	content: "\f174";
+	top: 3px;
+}
+
+#wp-admin-bar-tenup-experience-environment-indicator.tenup-production > div > .ab-icon::before {
+	content: "\f319";
+	top: 3px;
+}
+
+#wp-admin-bar-tenup-experience-environment-indicator.tenup-staging > div > .ab-icon::before {
+	content: "\f111";
+	top: 3px;
+}
+
+#wp-admin-bar-tenup-experience-environment-indicator.tenup-development > div > .ab-icon::before,
+#wp-admin-bar-tenup-experience-environment-indicator.tenup-local > div > .ab-icon::before {
+	content: "\f107";
+	top: 3px;
+}

dist/css/admin.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '9c247eb8cd54451023c8');
+<?php return array('dependencies' => array(), 'version' => '91a3e176ae42648634dd');

includes/classes/AdminCustomizations/EnvironmentIndicator.php

@@ -0,0 +1,71 @@
+<?php
+/**
+ * Admin customizations
+ *
+ * @package  10up-experience
+ */
+
+namespace TenUpExperience\AdminCustomizations;
+
+use TenUpExperience\Singleton;
+
+/**
+ * Admin Customizations class
+ */
+class EnvironmentIndicator {
+
+	use Singleton;
+
+	/**
+	 * Setup module
+	 *
+	 * @since 1.7
+	 */
+	public function setup() {
+		// Add an admin bar item if in wp-admin.
+		add_action( 'admin_bar_menu', [ $this, 'add_toolbar_item' ], 7 );
+	}
+
+	/**
+	 * Add environment indicator to admin bar
+	 *
+	 * @param WP_Admin_Bar $admin_bar Admin bar instance
+	 */
+	public function add_toolbar_item( $admin_bar ) {
+		$environment = wp_get_environment_type();
+
+		$admin_bar->add_menu(
+			[
+				'id'     => 'tenup-experience-environment-indicator',
+				'parent' => 'top-secondary',
+				'title'  => '<span class="ab-icon" aria-hidden="true"></span><span class="ab-label">' . esc_html( $this->get_environment_label( $environment ) ) . '</span>',
+				'meta'    => [
+					'class' => esc_attr( "tenup-$environment" ),
+				],
+			]
+		);
+	}
+
+	/**
+	 * Get human readable label for environment
+	 *
+	 * @param string $environment Environment type
+	 * @return string
+	 */
+	public function get_environment_label( $environment ) {
+		switch ( $environment ) {
+			case 'development':
+			case 'local':
+				$label = __( 'Development', 'tenup' );
+				break;
+			case 'staging':
+				$label = __( 'Staging', 'tenup' );
+				break;
+			default:
+				$label = __( 'Production', 'tenup' );
+				break;
+		}
+
+		return $label;
+	}
+}