moved inline styles to file and load it

newfold-labs · Nov 18, 2024 · af2d843 · af2d843
1 parent 5f18dca
commit af2d843
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 22 deletions.
diff --git a/components/linkPrefetch/index.js b/components/linkPrefetch/index.js
@@ -44,7 +44,7 @@ const LinkPrefetch = ({methods, constants}) => {
 			description={constants.text.linkPrefetchDescription}
 		>
 			{/* Desktop Settings */}
-			<div className="nfd-toggle-field nfd-mb-6" style={{display: 'flex', flexDirection:'row'}}>
+			<div className="nfd-toggle-field nfd-mb-6">
 				<div >
 					<label className="nfd-label" htmlFor="link-prefetch-active-desktop">{constants.text.linkPrefetchActivateOnDesktopLabel}</label>
 					<div className="nfd-select-field__description">
@@ -80,7 +80,7 @@ const LinkPrefetch = ({methods, constants}) => {
 				)
 			}
 			{/* Mobile Settings */}
-			<div className="nfd-toggle-field nfd-mb-6" style={{display: 'flex', flexDirection:'row'}}>
+			<div className="nfd-toggle-field nfd-mb-6">
 				<div >
 					<label className="nfd-label" htmlFor="link-prefetch-active-mobile">{constants.text.linkPrefetchActivateOnMobileLabel}</label>
 					<div className="nfd-select-field__description">

diff --git a/includes/LinkPrefetch.php b/includes/LinkPrefetch.php
@@ -47,7 +47,7 @@ public function add_to_runtime( $sdk ) {
 	 * return void
 	 */
 	public function enqueueScripts() {
-		$plugin_url = $this->container->plugin()->url . $this->getScriptPath();
+		$plugin_url = $this->container->plugin()->url . get_scripts_path( 'linkPrefetch' );
 		$settings   = get_option( 'nfd_link_prefetch_settings', static::getDefaultSettings() );
 
 		if ( ! $settings['activeOnDesktop'] && ! $settings['activeOnMobile'] ) {
@@ -60,16 +60,6 @@ public function enqueueScripts() {
 		wp_add_inline_script( 'linkprefetcher', 'window.LP_CONFIG = ' . wp_json_encode( $settings ), 'before' );
 	}
 
-	/**
-	 * Get js script path.
-	 *
-	 * return string
-	 */
-	public function getScriptPath() {
-		$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
-		return 'vendor/newfold-labs/wp-module-performance/scripts/linkPrefetch' . $suffix . '.js';
-	}
-
 	/**
 	 * Get link prefetch default settings.
 	 *

diff --git a/includes/Performance.php b/includes/Performance.php
@@ -81,6 +81,8 @@ public function __construct( Container $container ) {
 		$container->set( 'cachePurger', $cachePurger );
 
 		$container->set( 'hasMustUsePlugin', file_exists( WPMU_PLUGIN_DIR . '/endurance-page-cache.php' ) );
+
+		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
 	}
 
 	/**
@@ -293,4 +295,13 @@ public function adminBarMenu( \WP_Admin_Bar $wp_admin_bar ) {
 			);
 		}
 	}
+
+	/**
+	 * Enqueue scripts and styles in admin
+	 */
+	public function enqueue_scripts() {
+		$plugin_url = $this->container->plugin()->url . get_styles_path();
+		wp_register_style( 'wp-module-performance-styles', $plugin_url );
+		wp_enqueue_style( 'wp-module-performance-styles' );
+	}
 }
diff --git a/includes/functions.php b/includes/functions.php
@@ -17,12 +17,12 @@ function getCacheLevel() {
  * @return string[]
  */
 function getCacheLevels() {
-	return [
+	return array(
 		0 => 'Off',         // Disable caching
 		1 => 'Assets Only', // Cache assets only
 		2 => 'Normal',      // Cache pages and assets for a shorter time range
 		3 => 'Advanced',    // Cache pages and assets for a longer time range
-	];
+	);
 }
 
 /**
@@ -36,10 +36,10 @@ function getCacheLevelDropdown() {
 	$name  = Performance::OPTION_CACHE_LEVEL;
 	$label = __( 'Cache Level', 'newfold-performance-module' );
 	?>
-	<select name="<?= esc_attr( $name ) ?>" aria-label="<?= esc_attr( $label ) ?>">
-		<?php foreach ( $cacheLevels as $cacheLevel => $optionLabel ): ?>
-			<option value="<?= absint( $cacheLevel ) ?>"<?php selected( $cacheLevel, $currentCacheLevel ) ?>>
-				<?= esc_html( $optionLabel ); ?>
+	<select name="<?php echo esc_attr( $name ); ?>" aria-label="<?php echo esc_attr( $label ); ?>">
+		<?php foreach ( $cacheLevels as $cacheLevel => $optionLabel ) : ?>
+			<option value="<?php echo absint( $cacheLevel ); ?>"<?php selected( $cacheLevel, $currentCacheLevel ); ?>>
+				<?php echo esc_html( $optionLabel ); ?>
 			</option>
 		<?php endforeach; ?>
 	</select>
@@ -65,10 +65,10 @@ function getSkip404InputField() {
 	?>
 	<input
 		type="checkbox"
-		name="<?= esc_attr( $name ) ?>"
+		name="<?php echo esc_attr( $name ); ?>"
 		value="1"
-		aria-label="<?= esc_attr( $label ) ?>"
-		<?php checked( $value, true ) ?>
+		aria-label="<?php echo esc_attr( $label ); ?>"
+		<?php checked( $value, true ); ?>
 	/>
 	<?php
 }
@@ -134,3 +134,27 @@ function toSnakeCase( string $value, string $delimiter = '_' ) {
 function toStudlyCase( $value ) {
 	return str_replace( ' ', '', ucwords( str_replace( array( '-', '_' ), ' ', $value ) ) );
 }
+
+/**
+ * Get styles path.
+ *
+ * return string
+ */
+function get_styles_path() {
+	return 'vendor/newfold-labs/wp-module-performance/styles/styles.css';
+}
+
+/**
+ * Get js script path.
+ *
+ * @param $string script name.
+ * return string
+ */
+function get_scripts_path( $script_name = '' ) {
+	$basePath = 'vendor/newfold-labs/wp-module-performance/scripts/';
+	if ( empty( $script_name ) ) {
+		return $basePath;
+	}
+	$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
+	return "vendor/newfold-labs/wp-module-performance/scripts/$script_name$suffix.js";
+}
diff --git a/styles/styles.css b/styles/styles.css
@@ -0,0 +1,4 @@
+.nfd-container__block.newfold-link-prefetch .nfd-toggle-field.nfd-mb-6 {
+	display: flex;
+	flex-direction: row;
+  }