Add figcaption escaping for image and video blocks (#745)

* add figcaption escaping for video and image blocks. * update image block test and add video block test
WordPress · Nov 11, 2024 · ea309e0 · ea309e0
1 parent 13cb16c
commit ea309e0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 22 deletions.
diff --git a/includes/create-theme/theme-locale.php b/includes/create-theme/theme-locale.php
@@ -101,10 +101,6 @@ private static function get_text_replacement_patterns_for_html( $block_name ) {
 				return array( '/(<pre[^>]*>)(.*?)(<\/pre>)/' );
 			case 'core/button':
 				return array( '/(<a[^>]*>)(.*?)(<\/a>)/' );
-			case 'core/image':
-			case 'core/cover':
-			case 'core/media-text':
-				return array( '/alt="(.*?)"/' );
 			case 'core/quote':
 			case 'core/pullquote':
 				return array(
@@ -117,6 +113,16 @@ private static function get_text_replacement_patterns_for_html( $block_name ) {
 					'/(<th[^>]*>)(.*?)(<\/th>)/',
 					'/(<figcaption[^>]*>)(.*?)(<\/figcaption>)/',
 				);
+			case 'core/video':
+				return array( '/(<figcaption[^>]*>)(.*?)(<\/figcaption>)/' );
+			case 'core/image':
+				return array(
+					'/(<figcaption[^>]*>)(.*?)(<\/figcaption>)/',
+					'/(alt=")(.*?)(")/',
+				);
+			case 'core/cover':
+			case 'core/media-text':
+				return array( '/(alt=")(.*?)(")/' );
 			default:
 				return null;
 		}
@@ -158,19 +164,7 @@ public static function escape_text_content_of_blocks( $blocks ) {
 				case 'core/quote':
 				case 'core/pullquote':
 				case 'core/table':
-					$replace_content_callback = function ( $content, $pattern ) {
-						if ( empty( $content ) ) {
-							return;
-						}
-						return preg_replace_callback(
-							$pattern,
-							function( $matches ) {
-								return $matches[1] . self::escape_text_content( $matches[2] ) . $matches[3];
-							},
-							$content
-						);
-					};
-					break;
+				case 'core/video':
 				case 'core/image':
 				case 'core/cover':
 				case 'core/media-text':
@@ -181,7 +175,11 @@ function( $matches ) {
 						return preg_replace_callback(
 							$pattern,
 							function( $matches ) {
-								return 'alt="' . self::escape_attribute( $matches[1] ) . '"';
+								// If the pattern is for attribute like alt="".
+								if ( str_ends_with( $matches[1], '="' ) ) {
+									return $matches[1] . self::escape_attribute( $matches[2] ) . $matches[3];
+								}
+								return $matches[1] . self::escape_text_content( $matches[2] ) . $matches[3];
 							},
 							$content
 						);

diff --git a/tests/CbtThemeLocale/escapeTextContentOfBlocks.php b/tests/CbtThemeLocale/escapeTextContentOfBlocks.php
@@ -125,12 +125,12 @@ public function data_test_escape_text_content_of_blocks() {
 
 			'image'                      => array(
 				'block_markup'    =>
-					'<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
-                    <figure class="wp-block-image size-large is-style-rounded"><img src="http://localhost/wp1/wp-content/themes/twentytwentyfour/assets/images/windows.webp" alt="Windows of a building in Nuremberg, Germany"/></figure>
+					'<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+                    <figure class="wp-block-image size-large"><img src="http://example.org/image.webp" alt="image alt text" class="wp-image-151"/><figcaption class="wp-element-caption">Image caption</figcaption></figure>
                     <!-- /wp:image -->',
 				'expected_markup' =>
-					'<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
-                    <figure class="wp-block-image size-large is-style-rounded"><img src="http://localhost/wp1/wp-content/themes/twentytwentyfour/assets/images/windows.webp" alt="<?php esc_attr_e(\'Windows of a building in Nuremberg, Germany\', \'test-locale-theme\');?>"/></figure>
+					'<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+                    <figure class="wp-block-image size-large"><img src="http://example.org/image.webp" alt="<?php esc_attr_e(\'image alt text\', \'test-locale-theme\');?>" class="wp-image-151"/><figcaption class="wp-element-caption"><?php esc_html_e(\'Image caption\', \'test-locale-theme\');?></figcaption></figure>
                     <!-- /wp:image -->',
 			),
 
@@ -186,6 +186,15 @@ public function data_test_escape_text_content_of_blocks() {
                     <!-- /wp:table -->',
 			),
 
+			'video'                      => array(
+				'block_markup'    => '<!-- wp:video -->
+<figure class="wp-block-video"><video controls src="http://example.org/video.mp4"></video><figcaption class="wp-element-caption">Video caption test</figcaption></figure>
+<!-- /wp:video -->',
+				'expected_markup' =>
+					'<!-- wp:video -->
+<figure class="wp-block-video"><video controls src="http://example.org/video.mp4"></video><figcaption class="wp-element-caption"><?php esc_html_e(\'Video caption test\', \'test-locale-theme\');?></figcaption></figure>
+<!-- /wp:video -->',
+			),
 		);
 	}
 }