Merge pull request #165 from 10up/feature/environment-indicator

Adds environment type indicator to admin bar

Author: darylldoyle

.lintstagedrc.json

@@ -1,9 +1,9 @@
 {
   "*.css": [
-    "10up-toolkit lint-style"
+    "10up-toolkit lint-style --allow-empty-input"
   ],
   "*.js": [
-    "10up-toolkit lint-js"
+    "10up-toolkit lint-js --allow-empty-input"
   ],
   "*.php": [
     "./vendor/bin/phpcs --extensions=php --warning-severity=8 -s"

.stylelintignore

@@ -0,0 +1,2 @@
+dist/css/*.css
+vendor/*

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

@@ -154,6 +154,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,40 @@
 	height: 32px;
 	width: 20px;
 }
+
+/* Environment Indicator Styling */
+.tenup-experience-environment-indicator {
+	color: #fff;
+	pointer-events: none;
+}
+
+.tenup-experience-environment-indicator--production {
+	background-color: #b92a2a !important;
+}
+
+.tenup-experience-environment-indicator--staging {
+	background-color: #d79d00 !important;
+}
+
+.tenup-experience-environment-indicator--local,
+.tenup-experience-environment-indicator--development {
+	background-color: #34863b !important;
+}
+
+.tenup-experience-environment-indicator .ab-icon::before {
+	content: "\f174";
+	top: 3px;
+}
+
+.tenup-experience-environment-indicator--production .ab-icon::before {
+	content: "\f319";
+}
+
+.tenup-experience-environment-indicator--staging .ab-icon::before {
+	content: "\f111";
+}
+
+.tenup-experience-environment-indicator--local .ab-icon::before,
+.tenup-experience-environment-indicator--development .ab-icon::before {
+	content: "\f107";
+}

dist/css/admin.asset.php

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

dist/css/admin.css

@@ -0,0 +1,105 @@
+<?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();
+
+		// If the const isn't set, and we're on a local URL, assume we're in a development environment.
+		if ( ! defined( 'WP_ENVIRONMENT_TYPE' ) && $this->is_local_url() ) {
+			$environment = 'local';
+		}
+
+		$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-experience-environment-indicator tenup-experience-environment-indicator--$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;
+	}
+
+	/**
+	 * Check if the current URL is a local URL
+	 *
+	 * @return bool
+	 */
+	protected function is_local_url() {
+		$home_url = untrailingslashit( home_url() );
+
+		return $this->str_ends_with( $home_url, '.test' ) || $this->str_ends_with( $home_url, '.local' );
+	}
+
+	/**
+	 * Check if a string ends with another string
+	 *
+	 * @param string $haystack Haystack string
+	 * @param string $needle   Needle string
+	 *
+	 * @return bool
+	 */
+	protected function str_ends_with( $haystack, $needle ) {
+		$length = strlen( $needle );
+		if ( ! $length ) {
+			return true;
+		}
+
+		return substr( $haystack, - $length ) === $needle;
+	}
+}