Update error messages html comment placeholders with mustache tags

* HTML comment placeholders get stripped by HTML minifiers.
GoogleChromeLabs · Mar 2, 2022 · da9321a · da9321a
1 parent ad09837
commit da9321a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 14 deletions.
diff --git a/wp-admin/error.php b/wp-admin/error.php
@@ -16,13 +16,13 @@
 	case 'offline':
 		$title_prefix = __( 'Offline', 'pwa' );
 		$content      = sprintf( '<h1>%s</h1>', esc_html__( 'Offline', 'pwa' ) );
-		$content     .= '<p><!--WP_SERVICE_WORKER_ERROR_MESSAGE--></p>';
+		$content     .= '<p>{{{WP_SERVICE_WORKER_ERROR_MESSAGE}}}</p>'; // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation -- Prints error message placeholder.
 		$content     .= sprintf( '<p>%s</p>', esc_html__( 'In the future, this error screen could provide you with actions you can perform while offline, like edit recent drafts in Gutenberg.', 'pwa' ) );
 		break;
 	case '500':
 		$title_prefix = __( 'Internal Server Error', 'pwa' );
 		$content      = sprintf( '<h1>%s</h1>', esc_html__( 'A server error occurred.', 'pwa' ) );
-		$content     .= '<p><!--WP_SERVICE_WORKER_ERROR_MESSAGE--></p>';
+		$content     .= '<p>{{{WP_SERVICE_WORKER_ERROR_MESSAGE}}}</p>'; // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation -- Prints error message placeholder.
 		$content     .= sprintf(
 			'<p>%s</p>',
 			esc_html__( 'Something went wrong which prevented WordPress from serving a response. Please check your error logs.', 'pwa' )

diff --git a/wp-includes/js/service-worker-navigation-routing.js b/wp-includes/js/service-worker-navigation-routing.js
@@ -68,11 +68,11 @@ ERROR_OFFLINE_URL, ERROR_500_URL, NAVIGATION_DENYLIST_PATTERNS, ERROR_MESSAGES *
 							};
 
 							let body = text.replace(
-								/[<]!--WP_SERVICE_WORKER_ERROR_MESSAGE-->/,
+								'{{{WP_SERVICE_WORKER_ERROR_MESSAGE}}}',
 								errorMessages.error
 							);
 							body = body.replace(
-								/([<]!--WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN-->)((?:.|\n)+?)([<]!--WP_SERVICE_WORKER_ERROR_TEMPLATE_END-->)/,
+								/({{{WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN}}})((?:.|\n)+?)({{{WP_SERVICE_WORKER_ERROR_TEMPLATE_END}}})/,
 								(details) => {
 									if (!responseBody) {
 										return ''; // Remove the details from the document entirely.
@@ -103,13 +103,11 @@ ERROR_OFFLINE_URL, ERROR_500_URL, NAVIGATION_DENYLIST_PATTERNS, ERROR_MESSAGES *
 
 									// Replace the comments.
 									details = details.replace(
-										'<' +
-											'!--WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN-->',
+										'{{{WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN}}}',
 										''
 									);
 									details = details.replace(
-										'<' +
-											'!--WP_SERVICE_WORKER_ERROR_TEMPLATE_END-->',
+										'{{{WP_SERVICE_WORKER_ERROR_TEMPLATE_END}}}',
 										''
 									);
 									return details;
@@ -137,7 +135,7 @@ ERROR_OFFLINE_URL, ERROR_500_URL, NAVIGATION_DENYLIST_PATTERNS, ERROR_MESSAGES *
 						};
 
 						const body = text.replace(
-							/[<]!--WP_SERVICE_WORKER_ERROR_MESSAGE-->/,
+							'{{{WP_SERVICE_WORKER_ERROR_MESSAGE}}}',
 							navigator.onLine
 								? errorMessages.serverOffline
 								: errorMessages.clientOffline

diff --git a/wp-includes/js/service-worker-offline-commenting.js b/wp-includes/js/service-worker-offline-commenting.js
@@ -36,7 +36,7 @@
 								};
 
 								let body = text.replace(
-									/[<]!--WP_SERVICE_WORKER_ERROR_MESSAGE-->/,
+									'{{{WP_SERVICE_WORKER_ERROR_MESSAGE}}}',
 									errorMessages.error
 								);
 								body = body.replace(
@@ -125,7 +125,7 @@
 							};
 
 							const body = text.replace(
-								/[<]!--WP_SERVICE_WORKER_ERROR_MESSAGE-->/,
+								'{{{WP_SERVICE_WORKER_ERROR_MESSAGE}}}',
 								errorMessages.comment
 							);
 

diff --git a/wp-includes/template.php b/wp-includes/template.php
@@ -160,16 +160,16 @@ function wp_service_worker_error_details_template( $output = '' ) {
 	if ( empty( $output ) ) {
 		$output = '<details id="error-details"><summary>' . esc_html__( 'More Details', 'pwa' ) . '</summary>{{{error_details_iframe}}}</details>'; // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation -- Variable includes iframe tag.
 	}
-	echo '<!--WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN-->';
+	echo '{{{WP_SERVICE_WORKER_ERROR_TEMPLATE_BEGIN}}}'; // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation -- Prints template begin tag.
 	echo wp_kses_post( $output );
-	echo '<!--WP_SERVICE_WORKER_ERROR_TEMPLATE_END-->';
+	echo '{{{WP_SERVICE_WORKER_ERROR_TEMPLATE_END}}}'; // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation -- Prints template end tag.
 }
 
 /**
  * Display service worker error message template tag.
  */
 function wp_service_worker_error_message_placeholder() {
-	echo '<p><!--WP_SERVICE_WORKER_ERROR_MESSAGE--></p>';
+	echo '<p>{{{WP_SERVICE_WORKER_ERROR_MESSAGE}}}</p>'; // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation -- Prints error message placeholder.
 }
 
 /**