From 586cf0083c6b64a6de2c470323d96c9447160536 Mon Sep 17 00:00:00 2001 From: Peter Sorensen Date: Thu, 25 Jul 2024 13:16:13 -0700 Subject: [PATCH 1/3] adds environment type indicator to admin bar --- 10up-experience.php | 1 + assets/css/admin.css | 51 +++++++++++++ dist/css/admin.asset.php | 2 +- dist/css/admin.css | 2 +- .../EnvironmentIndicator.php | 71 +++++++++++++++++++ 5 files changed, 125 insertions(+), 2 deletions(-) create mode 100644 includes/classes/AdminCustomizations/EnvironmentIndicator.php diff --git a/10up-experience.php b/10up-experience.php index 0681978..f1b11b2 100644 --- a/10up-experience.php +++ b/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(); diff --git a/assets/css/admin.css b/assets/css/admin.css index 67ff825..229d103 100644 --- a/assets/css/admin.css +++ b/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; +} diff --git a/dist/css/admin.asset.php b/dist/css/admin.asset.php index 037d6d1..5cefd3c 100644 --- a/dist/css/admin.asset.php +++ b/dist/css/admin.asset.php @@ -1 +1 @@ - array(), 'version' => '9c247eb8cd54451023c8'); + array(), 'version' => '91a3e176ae42648634dd'); diff --git a/dist/css/admin.css b/dist/css/admin.css index f4293d8..3e0c18a 100644 --- a/dist/css/admin.css +++ b/dist/css/admin.css @@ -1 +1 @@ -.tenup-company-photo{text-align:center}#wpadminbar .tenup-icon{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMzIgNTEyIDUxMiI+PHBhdGggZmlsbD0iIzlFQTNBOCIgZD0iTTI1NS45OTQgMzJDMTE0LjU4OSAzMi4wMTQgMCAxNDYuNjEgMCAyODcuOTkxIDAgMzI3LjAzMSA5LjAxMSAzNjMuOTE1IDI0LjYxMyAzOTdsMi42ODMgMi43NzIgMTU4LjE1LTE1OC4xNDctNDkuNzMxLTQ5LjczNWgyMTYuNDA4djIxNi4zOTNsLTQ5LjczMS00OS43MzgtMTU5LjA1NSAxNTkuMDY0YzM0LjAzMiAxNi43MTYgNzIuMTg5IDI2LjM5IDExMi42NzUgMjYuMzkgMTQxLjM3OSAwIDI1Ni4wMDMtMTE0LjYwNiAyNTYuMDAzLTI1Ni4wMDktLjAwMy0xNDEuMzgxLTExNC42MjUtMjU1Ljk5MS0yNTYuMDE5LTI1NS45OTF6Ii8+PC9zdmc+")!important;background-position:50%;background-repeat:no-repeat;background-size:20px;height:32px;width:20px} +.tenup-company-photo{text-align:center}#wpadminbar .tenup-icon{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMzIgNTEyIDUxMiI+PHBhdGggZmlsbD0iIzlFQTNBOCIgZD0iTTI1NS45OTQgMzJDMTE0LjU4OSAzMi4wMTQgMCAxNDYuNjEgMCAyODcuOTkxIDAgMzI3LjAzMSA5LjAxMSAzNjMuOTE1IDI0LjYxMyAzOTdsMi42ODMgMi43NzIgMTU4LjE1LTE1OC4xNDctNDkuNzMxLTQ5LjczNWgyMTYuNDA4djIxNi4zOTNsLTQ5LjczMS00OS43MzgtMTU5LjA1NSAxNTkuMDY0YzM0LjAzMiAxNi43MTYgNzIuMTg5IDI2LjM5IDExMi42NzUgMjYuMzkgMTQxLjM3OSAwIDI1Ni4wMDMtMTE0LjYwNiAyNTYuMDAzLTI1Ni4wMDktLjAwMy0xNDEuMzgxLTExNC42MjUtMjU1Ljk5MS0yNTYuMDE5LTI1NS45OTF6Ii8+PC9zdmc+")!important;background-position:50%;background-repeat:no-repeat;background-size:20px;height:32px;width:20px}#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-development,#wpadminbar ul li#wp-admin-bar-tenup-experience-environment-indicator.tenup-local{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} diff --git a/includes/classes/AdminCustomizations/EnvironmentIndicator.php b/includes/classes/AdminCustomizations/EnvironmentIndicator.php new file mode 100644 index 0000000..a9204b6 --- /dev/null +++ b/includes/classes/AdminCustomizations/EnvironmentIndicator.php @@ -0,0 +1,71 @@ +add_menu( + [ + 'id' => 'tenup-experience-environment-indicator', + 'parent' => 'top-secondary', + 'title' => '' . esc_html( $this->get_environment_label( $environment ) ) . '', + 'meta' => [ + 'class' => "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; + } +} From 5652db46efe8df4101b16f2699fd6beb32478a7b Mon Sep 17 00:00:00 2001 From: Peter Sorensen Date: Thu, 25 Jul 2024 13:26:42 -0700 Subject: [PATCH 2/3] update readme to include environment indicator --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 3a24151..75d59f3 100644 --- a/README.md +++ b/README.md @@ -143,6 +143,10 @@ 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. + ## Support Level **Active:** 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress. Bug reports, feature requests, questions, and pull requests are welcome. From 00baf4c4b0c3865fb34ddb33fb74b809f48d37a6 Mon Sep 17 00:00:00 2001 From: Peter Sorensen Date: Thu, 25 Jul 2024 14:26:09 -0700 Subject: [PATCH 3/3] add escaping to class attribute --- includes/classes/AdminCustomizations/EnvironmentIndicator.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/classes/AdminCustomizations/EnvironmentIndicator.php b/includes/classes/AdminCustomizations/EnvironmentIndicator.php index a9204b6..977b06a 100644 --- a/includes/classes/AdminCustomizations/EnvironmentIndicator.php +++ b/includes/classes/AdminCustomizations/EnvironmentIndicator.php @@ -40,7 +40,7 @@ public function add_toolbar_item( $admin_bar ) { 'parent' => 'top-secondary', 'title' => '' . esc_html( $this->get_environment_label( $environment ) ) . '', 'meta' => [ - 'class' => "tenup-$environment", + 'class' => esc_attr( "tenup-$environment" ), ], ] );