JezK

Edit File: class-react-dropin.php

<?php

namespace Simple_History\Dropins;

use Simple_History\Helpers;

/**
 * Loads the new GUI based on React.
 */
class React_Dropin extends Dropin {
	/** @inheritdoc */
	public function loaded() {
		add_action( 'simple_history/history_page/gui_wrap_top', [ $this, 'output_element_page' ], 1 );
		add_action( 'simple_history/dashboard/before_gui', [ $this, 'output_element_dashboard' ], 1 );
		add_action( 'simple_history/enqueue_admin_scripts', [ $this, 'enqueue_admin_scripts' ] );
	}

/**
	 * Enqueue scripts generated by wp-scripts.
	 */
	public function enqueue_admin_scripts() {
		// Bail if not a Simple History page so no unneeded scripts are loaded.
		if ( ! Helpers::is_on_our_own_pages() ) {
			return;
		}

$asset_file = include SIMPLE_HISTORY_PATH . 'build/index.asset.php';

// Show error if asset file is not found.
		if ( $asset_file === false ) {
			// Bail if function does not exist, ie. WordPress < 6.4.
			if ( ! function_exists( 'wp_admin_notice' ) ) {
				return;
			}

wp_admin_notice(
				__( 'Simple History failed to load the asset file for the main GUI. Please try reinstalling the plugin or make sure the JavaScript is built.', 'simple-history' ),
				[ 'type' => 'error' ]
			);
			return;
		}

// Load the WP components CSS or some components will be unstyled.
		wp_enqueue_style( 'wp-components' );

wp_register_script(
			'simple_history_wp_scripts',
			SIMPLE_HISTORY_DIR_URL . 'build/index.js',
			$asset_file['dependencies'],
			$asset_file['version'],
			true
		);

wp_enqueue_script( 'simple_history_wp_scripts' );
		wp_set_script_translations( 'simple_history_wp_scripts', 'simple-history' );
	}

/**
	 * Output HTML element on the history page for React to mount on.
	 */
	public function output_element_page() {
		?>
		<div 
			id="simple-history-react-root" 
			class="SimpleHistoryReactRoot is-page"
			style="<?php echo esc_attr( $this->get_css_style_vars() ); ?>"
		>
			<span class="SimpleHistoryReactRoot-loading">
				<?php esc_html_e( 'Loading history…', 'simple-history' ); ?>
			</span>
		</div>
		<?php
	}

/**
	 * Output HTML element on the dashboard for React to mount on.
	 */
	public function output_element_dashboard() {
		$this->get_current_theme_colors();
		?>
		<div
			id="simple-history-react-root"
			class="SimpleHistoryReactRoot is-dashboard"
			style="<?php echo esc_attr( $this->get_css_style_vars() ); ?>"
		>
			<span class="SimpleHistoryReactRoot-loading">
				<?php esc_html_e( 'Loading history…', 'simple-history' ); ?>
			</span>
		</div>
		<?php
	}

/**
	 * Generate css style attributes to use at the react root element.
	 * This is to override the Gutenberg colors that are not the same as the admin theme colors.
	 * For example the blue color in the Gutenberg editor is not the same as the admin theme color.
	 *
	 * @return string
	 */
	private function get_css_style_vars() {
		$colors = $this->get_current_theme_colors();

$css_vars = [
			'--wp-admin-theme-color' => $colors['link'],
		];

$css_vars_string = '';
		foreach ( $css_vars as $key => $value ) {
			$css_vars_string = $css_vars_string . $key . ':' . $value . ';';
		}

return $css_vars_string;
	}

/**
	 * Get the current theme colors.
	 *
	 * @return array<string, string> An associative array containing the theme colors.
	 */
	private function get_current_theme_colors() {
		$color_scheme = get_user_option( 'admin_color' );

$colors = [
			'default' => [
				'link'       => '#0073aa',
				'link_focus' => '#135e96',
			],
			// "modern" is the only one with a different color scheme.
			'modern'  => [
				'link'       => '#3858e9',
				'link_focus' => '#183ad6',
			],
		];

if ( $color_scheme === 'modern' ) {
			$colors = $colors['modern'];
		} else {
			$colors = $colors['default'];
		}

return $colors;
	}
}