Closes #7058: Implement DJE Safe Mode Feature

inc/Engine/Admin/Settings/Page.php

@@ -512,9 +512,7 @@ private function assets_section() {
 			]
 		);
 
-		$delay_js_list_helper  = esc_html__( 'If you have problems after activating this option, copy and paste the default exclusions to quickly resolve issues:', 'rocket' );
-		$delay_js_list_helper .= sprintf( '<br><pre><code>%1$s</code></pre><br>', implode( '<br>', DelayJSSettings::get_delay_js_default_exclusions() ) );
-		$delay_js_list_helper .= sprintf(
+		$delay_js_list_helper = sprintf(
 		// translators: %1$s = opening </a> tag, %2$s = closing </a> tag.
 			esc_html__( 'Also, please check our %1$sdocumentation%2$s for a list of compatibility exclusions.', 'rocket' ),
 			'<a href="' . esc_url( $delay_js_exclusions_beacon['url'] ) . '"  target="_blank" rel="noopener">',
@@ -794,11 +792,11 @@ private function assets_section() {
 				],
 				'delay_js_exclusions'          => [
 					'type'              => 'textarea',
-					'label'             => __( 'Excluded JavaScript Files', 'rocket' ),
-					'description'       => __( 'Specify URLs or keywords that can identify inline or JavaScript files to be excluded from delaying execution (one per line).', 'rocket' ),
 					'container_class'   => [
 						'wpr-field--children',
 					],
+					'label'             => __( 'Excluded JavaScript Files', 'rocket' ),
+					'description'       => __( 'Specify URLs or keywords that can identify inline or JavaScript files to be excluded from delaying execution (one per line).', 'rocket' ),
 					'parent'            => 'delay_js',
 					'section'           => 'js',
 					'page'              => 'file_optimization',
@@ -808,9 +806,34 @@ private function assets_section() {
 						'disabled' => get_rocket_option( 'delay_js' ) ? 0 : 1,
 					],
 					'helper'            => DelayJSSettings::exclusion_list_has_default() ? $delay_js_found_list_helper : $delay_js_list_helper,
-					'placeholder'       => '/wp-includes/js/jquery/jquery.min.js',
+					'placeholder'       => '',
 				],
-			]
+				'delay_js_execution_safe_mode' => [
+					'type'              => 'checkbox',
+					'label'             => __( 'Safe Mode for Delay JavaScript Execution', 'rocket' ),
+					// translators: %1$s = opening <a> tag, %2$s = closing </a> tag.
+					'description'       => __( 'The Safe Mode mode prevents all internal scripts from being delayed.', 'rocket' ),
+					'helper'            => '',
+					'container_class'   => [
+						'wpr-field--parent',
+						'wpr-NoPaddingBottom',
+						'wpr-field--children',
+					],
+					'section'           => 'js',
+					'page'              => 'file_optimization',
+					'parent'            => 'delay_js',
+					'default'           => 0,
+					'sanitize_callback' => 'sanitize_checkbox',
+					'input_attr'        => [
+						'disabled' => 0,
+					],
+					'warning'           => [
+						'title'        => __( 'Performance impact', 'rocket' ),
+						'description'  => __( 'By enabling Safe Mode, you significantly reduce your website performance improvements. We recommend using it only as a temporary solution. If you’re experiencing issues with the Delay JavaScript feature, our support team can help you troubleshoot.', 'rocket' ),
+						'button_label' => __( 'ACTIVATE SAFE MODE', 'rocket' ),
+					],
+				],
+			],
 		);
 	}
 

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

@@ -27,6 +27,7 @@ public function __construct( Options $options_api ) {
 	/**
 	 * Add the delay JS options to the WP Rocket options array
 	 *
+	 * @since 3.18 Added delay_js_execution_safe_mode.
 	 * @since 3.9 Removed delay_js_scripts key, added delay_js_exclusions.
 	 * @since 3.7
 	 *
@@ -37,15 +38,17 @@ public function __construct( Options $options_api ) {
 	public function add_options( $options ): array {
 		$options = (array) $options;
 
-		$options['delay_js']            = 0;
-		$options['delay_js_exclusions'] = [];
+		$options['delay_js']                     = 0;
+		$options['delay_js_exclusions']          = [];
+		$options['delay_js_execution_safe_mode'] = 0;
 
 		return $options;
 	}
 
 	/**
 	 * Sets the delay_js_exclusions default value for users with delay JS enabled on upgrade
 	 *
+	 * @since 3.18 Keep the custom delay js exclusions if there were before.
 	 * @since 3.9 Sets the delay_js_exclusions default value if delay_js is 1
 	 * @since 3.7
 	 *
@@ -77,21 +80,28 @@ public function set_option_on_update( $old_version ) {
 	 * Sanitizes delay JS options when saving the settings
 	 *
 	 * @since 3.9
+	 * @since 3.18 Deletes safe mode exclusions from `delay_js_exclusions`.
 	 *
 	 * @param array         $input    Array of values submitted from the form.
 	 * @param AdminSettings $settings Settings class instance.
 	 *
 	 * @return array
 	 */
 	public function sanitize_options( $input, $settings ): array {
-		$input['delay_js']            = $settings->sanitize_checkbox( $input, 'delay_js' );
-		$input['delay_js_exclusions'] =
+		$input['delay_js']                     = $settings->sanitize_checkbox( $input, 'delay_js' );
+		$input['delay_js_execution_safe_mode'] = $settings->sanitize_checkbox( $input, 'delay_js_execution_safe_mode' );
+		$input['delay_js_exclusions']          =
 			! empty( $input['delay_js_exclusions'] )
 				?
 				rocket_sanitize_textarea_field( 'delay_js_exclusions', $input['delay_js_exclusions'] )
 				:
 				[];
 
+		if ( ! empty( $input['delay_js_execution_safe_mode'] ) ) {
+			$default_exclusions           = self::get_safe_mode_exclusions();
+			$input['delay_js_exclusions'] = array_diff( $input['delay_js_exclusions'], $default_exclusions );
+		}
+
 		return $input;
 	}
 
@@ -135,6 +145,26 @@ public function maybe_disable_combine_js( $value, $old_value ): array {
 		return $value;
 	}
 
+
+	/**
+	 * Get the list of default exclusions for the safe mode.
+	 *
+	 * This method returns an array of regular expressions that match JavaScript files
+	 * and patterns which should be excluded from the delay JavaScript execution feature
+	 * when the safe mode is enabled.
+	 *
+	 * @since 3.18
+	 *
+	 * @return array An array of regular expressions for safe mode exclusions.
+	 */
+	public static function get_safe_mode_exclusions(): array {
+		return [
+			'\/jquery(-migrate)?-?([0-9.]+)?(.min|.slim|.slim.min)?.js(\?(.*))?( |\'|"|>)',
+			'js-(before|after)',
+			'(?:/wp-content/|/wp-includes/)(.*)',
+		];
+	}
+
 	/**
 	 * Get default exclusion list.
 	 *
@@ -144,10 +174,7 @@ public function maybe_disable_combine_js( $value, $old_value ): array {
 	 */
 	public static function get_delay_js_default_exclusions(): array {
 
-		$exclusions = [
-			'\/jquery(-migrate)?-?([0-9.]+)?(.min|.slim|.slim.min)?.js(\?(.*))?( |\'|"|>)',
-			'js-(before|after)',
-		];
+		$exclusions = self::get_safe_mode_exclusions();
 
 		$wp_content  = wp_parse_url( content_url( '/' ), PHP_URL_PATH );
 		$wp_includes = wp_parse_url( includes_url( '/' ), PHP_URL_PATH );

inc/Engine/Optimization/DelayJS/HTML.php

@@ -4,6 +4,7 @@
 namespace WP_Rocket\Engine\Optimization\DelayJS;
 
 use WP_Rocket\Admin\Options_Data;
+use WP_Rocket\Engine\Optimization\DelayJS\Admin\Settings;
 use WP_Rocket\Engine\Optimization\DynamicLists\DefaultLists\DataManager;
 use WP_Rocket\Engine\Optimization\RegexTrait;
 use WP_Rocket\Engine\Support\CommentTrait;
@@ -101,14 +102,21 @@ public function delay_js( $html ): string {
 		$this->excluded = array_merge( $this->excluded, $this->options->get( 'delay_js_exclusions', [] ) );
 		$this->excluded = array_merge( $this->excluded, $this->options->get( 'delay_js_exclusions_selected_exclusions', [] ) );
 
+		if ( $this->options->get( 'delay_js_execution_safe_mode', 0 ) ) {
+			$this->excluded = array_merge(
+				$this->excluded,
+				Settings::get_safe_mode_exclusions()
+			);
+		}
+
 		/**
 		 * Filters the delay JS exclusions array
 		 *
 		 * @since 3.9
 		 *
 		 * @param array $excluded Array of excluded patterns.
 		 */
-		$this->excluded = (array) apply_filters( 'rocket_delay_js_exclusions', $this->excluded );
+		$this->excluded = wpm_apply_filters_typed( 'string[]', 'rocket_delay_js_exclusions', $this->excluded );
 		$this->excluded = array_map(
 			function ( $value ) {
 				if ( ! is_string( $value ) ) {

src/js/global/fields.js

@@ -352,4 +352,14 @@ $(document).ready(function(){
 			$(checkbox).attr('checked', not_checked <= 0 ? 'checked' : null );
 		});
 	}
+
+	/**
+	 * Delay JS Execution Safe Mode Field
+	 */
+	var $dje_safe_mode_checkbox = $('#delay_js_execution_safe_mode');
+	$('#delay_js').on('change', function () {
+		if ($(this).is(':not(:checked)') && $dje_safe_mode_checkbox.is(':checked')) {
+			$dje_safe_mode_checkbox.trigger('click');
+		}
+	});
 });

tests/Fixtures/inc/Engine/Optimization/DelayJS/Admin/Settings/addOptions.php

@@ -6,8 +6,9 @@
 			'options' => [],
 		],
 		'expected' => [
-			'delay_js'            => 0,
-			'delay_js_exclusions' => [],
+			'delay_js'                      => 0,
+			'delay_js_exclusions'           => [],
+			'delay_js_execution_safe_mode'  => 0,
 		]
 	],
 	'shouldReturnValidOptionsWithOptionsNotArray' => [
@@ -16,38 +17,43 @@
 		],
 		'expected' => [
 			'test_option',
-			'delay_js'            => 0,
-			'delay_js_exclusions' => [],
+			'delay_js'                      => 0,
+			'delay_js_exclusions'           => [],
+			'delay_js_execution_safe_mode'  => 0,
 		]
 	],
 	'shouldOverrideOptions' => [
 		'input' => [
 			'options' => [
-				'delay_js'            => 1,
-				'delay_js_exclusions' => [
+				'delay_js'                      => 1,
+				'delay_js_execution_safe_mode'  => 0,
+				'delay_js_exclusions'           => [
 					'any value'
 				]
 			],
 		],
 		'expected' => [
-			'delay_js'            => 0,
-			'delay_js_exclusions' => []
+			'delay_js'                      => 0,
+			'delay_js_execution_safe_mode'  => 0,
+			'delay_js_exclusions'           => []
 		]
 	],
 	'shouldNotOverrideOtherOptions' => [
 		'input' => [
 			'options' => [
-				'test_option'      => 1,
-				'delay_js'         => 0,
-				'delay_js_exclusions' => [
+				'test_option'                   => 1,
+				'delay_js'                      => 0,
+				'delay_js_execution_safe_mode'  => 0,
+				'delay_js_exclusions'           => [
 					'any value'
 				]
 			],
 		],
 		'expected' => [
-			'test_option'         => 1,
-			'delay_js'            => 0,
-			'delay_js_exclusions' => [],
+			'test_option'                   => 1,
+			'delay_js'                      => 0,
+			'delay_js_execution_safe_mode'  => 0,
+			'delay_js_exclusions'           => [],
 		]
 	],
 ];

tests/Fixtures/inc/Engine/Optimization/DelayJS/Admin/Settings/sanitizeOptions.php

@@ -6,11 +6,13 @@
 			'input'           => [],
 			'sanitized_input' => [
 				'delay_js'            => 0,
-				'delay_js_exclusions' => null
+				'delay_js_exclusions' => null,
+				'delay_js_execution_safe_mode' => 0,
 			],
 		],
 		'expected' => [
 			'delay_js'            => 0,
+			'delay_js_execution_safe_mode' => 0,
 			'delay_js_exclusions' => [],
 		],
 	],
@@ -20,7 +22,8 @@
 				'delay_js'            => true,
 				'delay_js_exclusions' => "wp-content/themes/twentytwenty/script.js\n<script>\nGoogleAnalytics\ngtm\nwp-includes/.*.js",
 				'delay_js_exclusions_selected' => [],
-    			'delay_js_exclusions_selected_exclusions' => []
+    			'delay_js_exclusions_selected_exclusions' => [],
+				'delay_js_execution_safe_mode' => 0,
 			],
 			'sanitized_input' => [
 				'delay_js'            => 1,
@@ -31,7 +34,8 @@
 					'wp-includes/(.*).js',
 				],
 				'delay_js_exclusions_selected' => [],
-				'delay_js_exclusions_selected_exclusions' => []
+				'delay_js_exclusions_selected_exclusions' => [],
+				'delay_js_execution_safe_mode' => 0,
 			],
 		],
 		'expected' => [
@@ -43,7 +47,8 @@
 				'wp-includes/(.*).js',
 			],
 			'delay_js_exclusions_selected' => [],
-			'delay_js_exclusions_selected_exclusions' => []
+			'delay_js_exclusions_selected_exclusions' => [],
+			'delay_js_execution_safe_mode' => 0,
 		],
 	],
 	'testShouldPreserveValueIfCorrectType' => [
@@ -58,7 +63,8 @@
 					'wp-includes/.*.js'
 				],
 				'delay_js_exclusions_selected' => [],
-				'delay_js_exclusions_selected_exclusions' => []
+				'delay_js_exclusions_selected_exclusions' => [],
+				'delay_js_execution_safe_mode' => 1,
 			],
 			'sanitized_input' => [
 				'delay_js'            => 1,
@@ -69,7 +75,8 @@
 					'wp-includes/(.*).js',
 				],
 				'delay_js_exclusions_selected' => [],
-				'delay_js_exclusions_selected_exclusions' => []
+				'delay_js_exclusions_selected_exclusions' => [],
+				'delay_js_execution_safe_mode' => 1,
 			],
 		],
 		'expected' => [
@@ -81,7 +88,8 @@
 				'wp-includes/(.*).js',
 			],
 			'delay_js_exclusions_selected' => [],
-			'delay_js_exclusions_selected_exclusions' => []
+			'delay_js_exclusions_selected_exclusions' => [],
+			'delay_js_execution_safe_mode' => 1,
 		],
 	],
 ];

tests/Fixtures/inc/Engine/Optimization/DelayJS/Admin/Subscriber/addOptions.php

@@ -8,6 +8,7 @@
 		'expected' => [
 			'delay_js'            => 0,
 			'delay_js_exclusions' => [],
+			'delay_js_execution_safe_mode' => 0,
 		]
 	],
 	'shouldReturnValidOptionsWithOptionsNotArray' => [
@@ -18,6 +19,7 @@
 			'test_option',
 			'delay_js'            => 0,
 			'delay_js_exclusions' => [],
+			'delay_js_execution_safe_mode' => 0,
 		]
 	],
 	'shouldOverrideOptions' => [
@@ -26,12 +28,14 @@
 				'delay_js'            => 1,
 				'delay_js_exclusions' => [
 					'any value'
-				]
+				],
+				'delay_js_execution_safe_mode' => 1,
 			],
 		],
 		'expected' => [
 			'delay_js'            => 0,
 			'delay_js_exclusions' => [],
+			'delay_js_execution_safe_mode' => 0,
 		]
 	],
 	'shouldNotOverrideOtherOptions' => [
@@ -41,13 +45,15 @@
 				'delay_js'         => 0,
 				'delay_js_exclusions' => [
 					'any value'
-				]
+				],
+				'delay_js_execution_safe_mode' => 0,
 			],
 		],
 		'expected' => [
 			'test_option'         => 1,
 			'delay_js'            => 0,
 			'delay_js_exclusions' => [],
+			'delay_js_execution_safe_mode' => 0,
 		]
 	],
 ];