Allow filtering of the environment labels and their meta data

[claytoncollie]

Description of the Change

This PR refactors the Environment Indicator feature to be more flexible and maintainable by introducing a filterable configuration system and converting it to a 100% PHP solution.

Key Changes:

• Added filterable configuration: Introduced tenup_experience_environments filter allowing developers to customize environment indicator labels, icons, background colors, and text colors for the four supported WordPress environment types (production, staging, development, local)
• Removed external CSS file: Converted from external stylesheet (environment-indicator.css) to inline CSS injected via PHP in the document head, eliminating the need for a separate CSS file
• Simplified code structure: Removed unnecessary abstraction layers and consolidated functionality into cleaner, more maintainable methods
• Improved icon system: Switched from CSS ::before pseudo-elements with Unicode characters to WordPress Dashicons classes directly in HTML

Benefits:

• Developers can now customize environment indicators without modifying core plugin files
• Reduced file dependencies (no external CSS file needed)
• More maintainable codebase with less abstraction
• Better alignment with WordPress coding standards

Verification Steps:

1. Activate the plugin and verify the environment indicator appears in the admin bar
2. Test that each environment type (production, staging, development, local) displays with correct colors and icons
3. Verify the filter works by adding custom styling:

   add_filter( 'tenup_experience_environments', function( $environments ) {
       $environments['staging']['icon'] = 'dashicons-star-filled';
       $environments['staging']['background_color'] = '#ff6b00';
       return $environments;
   } );

5. Confirm no external CSS file is loaded (check Network tab in browser dev tools)
6. Verify inline styles are injected in both admin and frontend when admin bar is visible

Closes #175 and replaces #176

How to test the Change

1. Basic functionality test:

   • Set WP_ENVIRONMENT_TYPE constant to each of: production, staging, development, local
   • Verify the admin bar displays the correct label, icon, and colors for each environment
   • Check that the indicator appears on both admin pages and frontend (when logged in)

2. Filter customization test:

   • Add the filter example from the README to the theme's functions.php
   • Verify the custom icon and color are applied
   • Test modifying multiple properties (label, icon, colors) for different environments

Changelog Entry

Changed - Refactored Environment Indicator to use filterable configuration system and inline CSS injection, removing dependency on external stylesheet

Credits

Props @claytoncollie

Checklist:

• I agree to follow this project's Code of Conduct.
• I have updated the documentation accordingly.
• I have added Critical Flows, Test Cases, and/or End-to-End Tests to cover my change.
• All new and existing tests pass.

[fabiankaegy]

Love this approach! :) Much nicer API interface to work with :)

[mattradford-sage]

Thanks @claytoncollie, this looks great. We would also like to add additional environments and control the environment type.

1. I've been able to test adding an additional environment with:

   add_filter( 'tenup_experience_environments', function( $environments ) {
       $environments['preproduction']['label'] = 'Preproduction';
       $environments['preproduction']['icon'] = 'dashicons-star-filled';
       $environments['preproduction']['background_color'] = '#ff6b00';
       return $environments;
   } );

That works well.

2. Not all hosts return wp_get_environment_type() correctly. For example, on WP Engine, all environments return production so we have a custom function to return the correct type.

In TenUpExperience\AdminCustomizations\EnvironmentIndicator\add_toolbar_item() could we add:

$type = apply_filters( 'tenup_experience_environment_type', $type );

This (or a filter elsewhere) will allow us to customise environments.

[claytoncollie]

@mattradford-sage

Not all hosts return wp_get_environment_type() correctly. For example, on WP Engine, all environments return production so we have a custom function to return the correct type.

The environment type can be set by a wp-config definition define( 'WP_ENVIRONMENT_TYPE', 'local' ); but WordPress core intentionally limits these values to production, staging, development, and local to provide consistency throughout the WordPress ecosystem. So while we could add filters, that would not be in line with Core. I think what you are after is something like below, where you override either staging or development with your custom labels and styles.

add_filter( 'tenup_experience_environments', function( $environments ) {
       $environments['staging']['label'] = 'Preproduction';
       $environments['staging']['icon'] = 'dashicons-star-filled';
       $environments['staging']['background_color'] = '#ff6b00';
       return $environments;
   } );

In TenUpExperience\AdminCustomizations\EnvironmentIndicator\add_toolbar_item() could we add:

$type = apply_filters( 'tenup_experience_environment_type', $type );

Like I said above, this value is set in the wp-config file with define( 'WP_ENVIRONMENT_TYPE', 'staging' );

https://developer.wordpress.org/reference/functions/wp_get_environment_type/#description

[Copilot]

Pull request overview

This PR refactors the Environment Indicator feature to use a filterable configuration system and inline CSS injection, eliminating the external CSS file dependency and making the feature more customizable for developers.

Key Changes:

• Introduced tenup_experience_environments filter for customizing environment labels, icons, and colors
• Converted from external CSS file to inline styles injected via PHP
• Replaced CSS pseudo-elements with Dashicons classes in HTML markup

Reviewed changes

Copilot reviewed 3 out of 24 changed files in this pull request and generated 3 comments.

File	Description
includes/classes/AdminCustomizations/EnvironmentIndicator.php	Refactored to add filterable configuration system, inline CSS generation, and Dashicons integration
assets/css/admin.css	Removed environment indicator styles (now handled inline)
README.md	Added documentation for the new tenup_experience_environments filter

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[claytoncollie]

@darylldoyle The Copilot feedback seems reasonable. Should I proceed?

[darylldoyle]

@claytoncollie if you have the time, that'd be awesome, thanks 🙂

[darylldoyle]

Great work here!