Closes #7075: Plugin - Accommodate new oneclick exclusions UI for delayjs

assets/css/wpr-admin.css

@@ -3104,9 +3104,37 @@ div.wpr-tutorial-item {
 }
 .wpr-field--categorizedmultiselect .wpr-list.open .wpr-list-header {
   max-height: 32px;
+  cursor: pointer;
 }
 .wpr-field--categorizedmultiselect .wpr-list .wpr-list-header {
   max-height: 32px;
+  cursor: pointer;
+}
+.wpr-field--categorizedmultiselect .wpr-list .wpr-list-header .wpr-badge-counter {
+  display: inline-block;
+  vertical-align: top;
+  box-sizing: border-box;
+  margin: 2px 0 0px 2px;
+  padding: 0 7px;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background-color: #eb714a;
+  color: #fff;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 1.6;
+  text-align: center;
+}
+.wpr-field--categorizedmultiselect .wpr-list .wpr-list-header .wpr-list-header-data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.wpr-field--categorizedmultiselect .wpr-list .wpr-list-header .wpr-list-header-data img {
+  width: 16px;
+  height: 16px;
 }
 .wpr-field--categorizedmultiselect .wpr-list [type=checkbox] + label:before {
   top: 4px;
@@ -3139,8 +3167,21 @@ div.wpr-tutorial-item {
   color: #72777c;
 }
 .wpr-field--categorizedmultiselect .wpr-multiple-select-title {
+  cursor: pointer;
   font-weight: bold;
-  margin-left: 5px;
+}
+.wpr-field--categorizedmultiselect .wpr-subsection {
+  padding-left: 30px;
+}
+.wpr-field--categorizedmultiselect .wpr-select-all {
+  border-bottom: 2px solid #e9e9e9;
+  width: 150px;
+  padding-bottom: 10px;
+}
+
+[data-parent=delay_js].wpr-field--children {
+  margin-left: 32px;
+  padding-left: 0;
 }
 
 @media only screen and (min-width: 782px) {

inc/Engine/Admin/Settings/Page.php

@@ -775,8 +775,8 @@ private function assets_section() {
 				'delay_js_exclusions_selected' => [
 					'type'              => 'categorized_multiselect',
 					'label'             => __( 'One-click exclusions', 'rocket' ),
-					'description'       => __( 'When using the Delay JavaScript Execution, you might experience delay loading elements located in the viewport that need to appear immediately - e.g. slider, header, menu.', 'rocket' ),
-					'sub_description'   => __( 'If you need instant visibility, click below on files that should NOT be delayed. This selection will help users interact with the elements straight away.', 'rocket' ),
+					'description'       => __( 'When using the Delay JavaScript feature, you might notice that some elements in the viewport take time to appear.', 'rocket' ),
+					'sub_description'   => __( 'If you need these elements to load immediately, select the related plugins, themes, or services below to ensure they appear without delay.', 'rocket' ),
 					'container_class'   => [
 						'wpr-field--children',
 					],

inc/Engine/Optimization/DelayJS/Admin/SiteList.php

@@ -71,24 +71,58 @@ private function get_theme_in_list( string $item_id ) {
 	 * Check if script is in the list and return it if found.
 	 *
 	 * @param string $item_id Script ID.
+	 * @param string $script_type Script Type.
 	 *
 	 * @return array
 	 */
-	private function get_script_in_list( string $item_id ) {
-		$scripts = $this->get_scripts_from_list();
+	private function get_script_in_list( string $item_id, string $script_type ) {
+		$list    = $this->dynamic_lists->get_delayjs_list();
+		$scripts = ! empty( $list->scripts->$script_type ) ? (array) $list->scripts->$script_type : [];
+
 		return ! empty( $scripts[ $item_id ] ) ? (array) $scripts[ $item_id ] : [];
 	}
 
 	/**
-	 * Get all scripts from the list.
+	 * Get Analytics scripts from the list.
+	 *
+	 * @return array
+	 */
+	private function get_analytics_from_list() {
+		$list = $this->dynamic_lists->get_delayjs_list();
+		return ! empty( $list->scripts->analytics ) ? (array) $list->scripts->analytics : [];
+	}
+
+	/**
+	 * Get Ad Networks from the list.
+	 *
+	 * @return array
+	 */
+	private function get_ad_networks_from_list() {
+		$list = $this->dynamic_lists->get_delayjs_list();
+		return ! empty( $list->scripts->ad_networks ) ? (array) $list->scripts->ad_networks : [];
+	}
+
+	/**
+	 * Get Payment Processors from the list.
+	 *
+	 * @return array
+	 */
+	private function get_payment_processors_from_list() {
+		$list = $this->dynamic_lists->get_delayjs_list();
+		return ! empty( $list->scripts->payment_processors ) ? (array) $list->scripts->payment_processors : [];
+	}
+
+	/**
+	 * Get Other Services from the list.
 	 *
 	 * @return array
 	 */
-	private function get_scripts_from_list() {
+	private function get_other_services_from_list() {
 		$list = $this->dynamic_lists->get_delayjs_list();
-		return ! empty( $list->scripts ) ? (array) $list->scripts : [];
+		return ! empty( $list->scripts->other_services ) ? (array) $list->scripts->other_services : [];
 	}
 
+
 	/**
 	 * Get all plugins from the list.
 	 *
@@ -117,7 +151,22 @@ private function get_themes_from_list() {
 	 * @return array
 	 */
 	public function get_delayjs_exclusions_by_id( string $item_id ) {
-		$item = $this->get_script_in_list( $item_id );
+		$item = $this->get_script_in_list( $item_id, 'analytics' );
+		if ( $item ) {
+			return $item['exclusions'];
+		}
+
+		$item = $this->get_script_in_list( $item_id, 'ad_networks' );
+		if ( $item ) {
+			return $item['exclusions'];
+		}
+
+		$item = $this->get_script_in_list( $item_id, 'payment_processors' );
+		if ( $item ) {
+			return $item['exclusions'];
+		}
+
+		$item = $this->get_script_in_list( $item_id, 'other_services' );
 		if ( $item ) {
 			return $item['exclusions'];
 		}
@@ -190,59 +239,127 @@ public function get_active_plugins() {
 	 */
 	public function prepare_delayjs_ui_list() {
 		$full_list = [
-			'scripts' => [
-				'title'          => __( 'Analytics & Ads', 'rocket' ),
-				'items'          => [],
-				'dashicon-class' => 'analytics',
+			'third_parties' => [
+				'analytics'          => [
+					'title'    => __( 'Analytics & Trackers', 'rocket' ),
+					'items'    => [],
+					'svg-icon' => 'analytics',
+				],
+				'ad_networks'        => [
+					'title'    => __( 'Ad Networks', 'rocket' ),
+					'items'    => [],
+					'svg-icon' => 'ad_network',
+				],
+				'payment_processors' => [
+					'title'    => __( 'Payment Processors', 'rocket' ),
+					'items'    => [],
+					'svg-icon' => 'payment',
+				],
+				'other_services'     => [
+					'title'    => __( 'Other Services', 'rocket' ),
+					'items'    => [],
+					'svg-icon' => 'plugins',
+				],
+				'has_subcats'        => false,
 			],
-			'plugins' => [
-				'title'          => __( 'Plugins', 'rocket' ),
-				'items'          => [],
-				'dashicon-class' => 'admin-plugins',
-			],
-			'themes'  => [
-				'title'          => __( 'Themes', 'rocket' ),
-				'items'          => [],
-				'dashicon-class' => 'admin-appearance',
+			'wordpress'     => [
+				'themes'      => [
+					'title'    => __( 'Themes', 'rocket' ),
+					'items'    => [],
+					'svg-icon' => 'themes',
+				],
+				'plugins'     => [
+					'title'    => __( 'Plugins', 'rocket' ),
+					'items'    => [],
+					'svg-icon' => 'plugins',
+				],
+				'has_subcats' => false,
 			],
 		];
 
+		$has_subcats = false;
+
 		// Scripts.
-		$scripts = $this->get_scripts_from_list();
+		$scripts = $this->get_analytics_from_list();
 		foreach ( $scripts as $script_key => $script ) {
-			$full_list['scripts']['items'][] = [
+			$full_list['third_parties']['analytics']['items'][] = [
 				'id'    => $script_key,
 				'title' => $script->title,
 				'icon'  => $this->get_icon( $script ),
 			];
+
+			$has_subcats = ! $has_subcats ? true : $has_subcats;
 		}
 
-		$active_plugins = $this->get_active_plugins();
-		foreach ( $this->get_plugins_from_list() as $plugin_key => $plugin ) {
-			if ( ! in_array( $plugin->condition, $active_plugins, true ) ) {
-				continue;
-			}
+		$scripts = $this->get_ad_networks_from_list();
+		foreach ( $scripts as $script_key => $script ) {
+			$full_list['third_parties']['ad_networks']['items'][] = [
+				'id'    => $script_key,
+				'title' => $script->title,
+				'icon'  => $this->get_icon( $script ),
+			];
 
-			$full_list['plugins']['items'][] = [
-				'id'    => $plugin_key,
-				'title' => $plugin->title,
-				'icon'  => $this->get_icon( $plugin ),
+			$has_subcats = ! $has_subcats ? true : $has_subcats;
+		}
+
+		$scripts = $this->get_payment_processors_from_list();
+		foreach ( $scripts as $script_key => $script ) {
+			$full_list['third_parties']['payment_processors']['items'][] = [
+				'id'    => $script_key,
+				'title' => $script->title,
+				'icon'  => $this->get_icon( $script ),
 			];
+
+			$has_subcats = ! $has_subcats ? true : $has_subcats;
 		}
 
+		$scripts = $this->get_other_services_from_list();
+		foreach ( $scripts as $script_key => $script ) {
+			$full_list['third_parties']['other_services']['items'][] = [
+				'id'    => $script_key,
+				'title' => $script->title,
+				'icon'  => $this->get_icon( $script ),
+			];
+
+			$has_subcats = ! $has_subcats ? true : $has_subcats;
+		}
+
+		$full_list['third_parties']['has_subcats'] = $has_subcats;
+		$has_subcats                               = false;
+
 		$active_theme = $this->get_active_theme();
 		foreach ( $this->get_themes_from_list() as $theme_key => $theme ) {
 			if ( $theme->condition !== $active_theme ) {
 				continue;
 			}
 
-			$full_list['themes']['items'][] = [
+			$full_list['wordpress']['themes']['items'][] = [
 				'id'    => $theme_key,
 				'title' => $theme->title,
 				'icon'  => $this->get_icon( $theme ),
 			];
+
+			$has_subcats = ! $has_subcats ? true : $has_subcats;
+		}
+
+		$active_plugins = $this->get_active_plugins();
+		foreach ( $this->get_plugins_from_list() as $plugin_key => $plugin ) {
+			if ( ! in_array( $plugin->condition, $active_plugins, true ) ) {
+				continue;
+			}
+
+			$full_list['wordpress']['plugins']['items'][] = [
+				'id'    => $plugin_key,
+				'title' => $plugin->title,
+				'icon'  => $this->get_icon( $plugin ),
+			];
+
+			$has_subcats = ! $has_subcats ? true : $has_subcats;
 		}
 
+		$full_list['wordpress']['has_subcats'] = $has_subcats;
+		$has_subcats                           = false;
+
 		return $full_list;
 	}
 
@@ -495,7 +612,12 @@ public function replace_theme_selection( $new_theme, $old_theme ) {
 	public function get_default_exclusions() {
 		$items = [];
 
-		$scripts = $this->get_scripts_from_list();
+		$scripts = array_merge(
+			$this->get_analytics_from_list(),
+			$this->get_ad_networks_from_list(),
+			$this->get_payment_processors_from_list(),
+			$this->get_other_services_from_list()
+		);
 		foreach ( $scripts as $script_key => $script ) {
 			if ( ! $script->is_default ) {
 				continue;

inc/Engine/Optimization/DynamicLists/AbstractAPIClient.php

@@ -10,7 +10,7 @@ abstract class AbstractAPIClient {
 	/**
 	 * API URL.
 	 */
-	const API_URL = 'https://b.rucss.wp-rocket.me/api/';
+	const API_URL = 'https://b.rucss.wp-rocket.me/api/v2/';
 
 	/**
 	 * Response Code.
@@ -92,10 +92,19 @@ public function get_exclusions_list( $hash ) {
 	 * @return bool
 	 */
 	private function handle_request( array $args ) {
+		$use_old_api_url = false;
+
+		// Handle logic to set API Url to old version when rolling back to versions < 3.18.
+		if ( version_compare( rocket_get_constant( 'WP_ROCKET_LASTVERSION' ), '3.18', '<' ) && 'rocket_before_rollback' === current_action() ) {
+			$use_old_api_url = true;
+		}
+
 		$api_url = rocket_get_constant( 'WP_ROCKET_EXCLUSIONS_API_URL', false )
 			? rocket_get_constant( 'WP_ROCKET_EXCLUSIONS_API_URL', false )
 			: self::API_URL;
 
+		$api_url = $use_old_api_url ? str_replace( 'v2/', '', $api_url ) : $api_url;
+
 		if ( empty( $args['body'] ) ) {
 			$args['body'] = [];
 		}