From 44b0945976edff0d0b212a5dea5274fe12c59d48 Mon Sep 17 00:00:00 2001 From: Tallulah Date: Mon, 5 Aug 2024 11:18:05 +0100 Subject: [PATCH 1/6] Create fix-block-img-tag-sizes.php addresses incorrect w/h values in core/image block img tags --- fix-block-img-tag-sizes.php | 102 ++++++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 fix-block-img-tag-sizes.php diff --git a/fix-block-img-tag-sizes.php b/fix-block-img-tag-sizes.php new file mode 100644 index 0000000000..f2b67ef00c --- /dev/null +++ b/fix-block-img-tag-sizes.php @@ -0,0 +1,102 @@ +]* class="[^"]*wp-image-(\d+)[^"]*"/', $block_content, $matches)) { + $image_id = $matches[1]; + } else { + return $block_content; // No image ID found, return original content + } + + // Extract the size class from the figure tag's class attribute + if (preg_match('/]* class="[^"]*size-([^\s"]+)[^"]*"/', $block_content, $size_matches)) { + $size_name = $size_matches[1]; + } else { + return $block_content; // No size found, return original content + } + + // Get the image metadata + $metadata = wp_get_attachment_metadata($image_id); + if (!$metadata || !isset($metadata['sizes'][$size_name])) { + return $block_content; // No metadata found for this size, return original content + } + + // Get the width, height, and file from the metadata + $width = $metadata['sizes'][$size_name]['width']; + $height = $metadata['sizes'][$size_name]['height']; + $new_file = $metadata['sizes'][$size_name]['file']; + + + + if ($resizearg) { + // Get the original image URL and replace the file name with the new file + if (preg_match('/]*src="([^"]+)"[^>]*>/', $block_content, $url_matches)) { + $original_url = $url_matches[1]; + $parsed_url = wp_parse_url($original_url); + $base_url = trailingslashit($parsed_url['scheme'] . '://' . $parsed_url['host'] . dirname($parsed_url['path'])); + + // Construct new URL with the new file + $new_url = $base_url . $new_file; + + // Replace the original URL with the new URL in the img tag + $block_content = str_replace($original_url, $new_url, $block_content); + } + } + + // Add the width and height attributes to the img tag + $block_content = preg_replace( + '/]+)>/', + '', + $block_content + ); + } + return $block_content; +} +add_filter('render_block', 'fix_img_block_sizes', 10, 3); + + +function add_block_bits($block_content, $block, $instance) +{ + if ('core/image' !== $block['blockName']) { + return $block_content; + } +$block_content = '
stuffwhatever, things, stuff tags,too
'; +return $block_content; +} +//add_filter('render_block', 'add_block_bits', 1, 3); From ca09fe7708f97c8e6f4bc20ebe48a112ef84030d Mon Sep 17 00:00:00 2001 From: Tallulah Date: Mon, 5 Aug 2024 13:33:29 +0100 Subject: [PATCH 2/6] Update fix-block-img-tag-sizes.php remove preamble comment, remove informal test --- fix-block-img-tag-sizes.php | 37 +------------------------------------ 1 file changed, 1 insertion(+), 36 deletions(-) diff --git a/fix-block-img-tag-sizes.php b/fix-block-img-tag-sizes.php index f2b67ef00c..9cc179326c 100644 --- a/fix-block-img-tag-sizes.php +++ b/fix-block-img-tag-sizes.php @@ -1,28 +1,6 @@ ]*src="([^"]+)"[^>]*>/', $block_content, $url_matches)) { @@ -89,14 +65,3 @@ function fix_img_block_sizes($block_content, $block, $instance) return $block_content; } add_filter('render_block', 'fix_img_block_sizes', 10, 3); - - -function add_block_bits($block_content, $block, $instance) -{ - if ('core/image' !== $block['blockName']) { - return $block_content; - } -$block_content = '
stuffwhatever, things, stuff tags,too
'; -return $block_content; -} -//add_filter('render_block', 'add_block_bits', 1, 3); From bbd458bb4f0b80a2ffb801e88a08fdf6e5088806 Mon Sep 17 00:00:00 2001 From: Tallulah Date: Tue, 6 Aug 2024 09:01:04 +0100 Subject: [PATCH 3/6] remove testing foobar I'd left a foo=bar in the returned img tag from testing on non-VIP envs, so I took it out. --- fix-block-img-tag-sizes.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fix-block-img-tag-sizes.php b/fix-block-img-tag-sizes.php index 9cc179326c..7ac89caaef 100644 --- a/fix-block-img-tag-sizes.php +++ b/fix-block-img-tag-sizes.php @@ -58,7 +58,7 @@ function fix_img_block_sizes($block_content, $block, $instance) // Add the width and height attributes to the img tag $block_content = preg_replace( '/]+)>/', - '', + '', $block_content ); } From 174a74b34efee29bcd21cf141c7dc97b85c432cf Mon Sep 17 00:00:00 2001 From: Tallulah Date: Thu, 15 Aug 2024 10:24:56 +0100 Subject: [PATCH 4/6] Update fix-block-img-tag-sizes.php removed resizearg switch, used render_block_core/image filter, added skip for fullsize, prepended vip to function name to avoid collisions with existing fix_img_block_sizes filters in use --- fix-block-img-tag-sizes.php | 40 ++++++++++--------------------------- 1 file changed, 10 insertions(+), 30 deletions(-) diff --git a/fix-block-img-tag-sizes.php b/fix-block-img-tag-sizes.php index 7ac89caaef..00774dfe92 100644 --- a/fix-block-img-tag-sizes.php +++ b/fix-block-img-tag-sizes.php @@ -2,19 +2,11 @@ // Adds 'correct' w & h values to img tags in core/image blocks -function fix_img_block_sizes($block_content, $block, $instance) +function vip_fix_img_block_sizes($block_content, $block, $instance) { - - // Use resize args for images instead of w|h|crop (optional) - $resizearg = false; - - // Don't fire in wp-admin + // Don't fire in wp-admin, image blocks are fine there if (!is_admin()) { - if ('core/image' !== $block['blockName']) { - return $block_content; // Only modify core/image blocks - } - // Extract the image ID from the wp-image-* class within the img tag if (preg_match('/]* class="[^"]*wp-image-(\d+)[^"]*"/', $block_content, $matches)) { $image_id = $matches[1]; @@ -30,30 +22,18 @@ function fix_img_block_sizes($block_content, $block, $instance) } // Get the image metadata - $metadata = wp_get_attachment_metadata($image_id); - if (!$metadata || !isset($metadata['sizes'][$size_name])) { - return $block_content; // No metadata found for this size, return original content + if ($size_name == "full") { + return $block_content; // fullsize is ok as-is, return original content + } else { + $metadata = wp_get_attachment_metadata($image_id); + if (!$metadata || !isset($metadata['sizes'][$size_name])) { + return $block_content; // No metadata found for this size, return original content + } } // Get the width, height, and file from the metadata $width = $metadata['sizes'][$size_name]['width']; $height = $metadata['sizes'][$size_name]['height']; - $new_file = $metadata['sizes'][$size_name]['file']; - - if ($resizearg) { - // Get the original image URL and replace the file name with the new file - if (preg_match('/]*src="([^"]+)"[^>]*>/', $block_content, $url_matches)) { - $original_url = $url_matches[1]; - $parsed_url = wp_parse_url($original_url); - $base_url = trailingslashit($parsed_url['scheme'] . '://' . $parsed_url['host'] . dirname($parsed_url['path'])); - - // Construct new URL with the new file - $new_url = $base_url . $new_file; - - // Replace the original URL with the new URL in the img tag - $block_content = str_replace($original_url, $new_url, $block_content); - } - } // Add the width and height attributes to the img tag $block_content = preg_replace( @@ -64,4 +44,4 @@ function fix_img_block_sizes($block_content, $block, $instance) } return $block_content; } -add_filter('render_block', 'fix_img_block_sizes', 10, 3); +add_filter('render_block_core/image', 'vip_fix_img_block_sizes', 10, 3); From 77accabf5a7dbf99d4411942113201996449580b Mon Sep 17 00:00:00 2001 From: Tallulah Date: Thu, 2 Jan 2025 15:31:02 +0000 Subject: [PATCH 5/6] switch to HTML API --- fix-block-img-tag-sizes.php | 102 +++++++++++++++++++++++------------- 1 file changed, 66 insertions(+), 36 deletions(-) diff --git a/fix-block-img-tag-sizes.php b/fix-block-img-tag-sizes.php index 00774dfe92..dd0c646294 100644 --- a/fix-block-img-tag-sizes.php +++ b/fix-block-img-tag-sizes.php @@ -4,44 +4,74 @@ function vip_fix_img_block_sizes($block_content, $block, $instance) { + // Don't fire in wp-admin, image blocks are fine there - if (!is_admin()) { - - // Extract the image ID from the wp-image-* class within the img tag - if (preg_match('/]* class="[^"]*wp-image-(\d+)[^"]*"/', $block_content, $matches)) { - $image_id = $matches[1]; - } else { - return $block_content; // No image ID found, return original content - } - - // Extract the size class from the figure tag's class attribute - if (preg_match('/]* class="[^"]*size-([^\s"]+)[^"]*"/', $block_content, $size_matches)) { - $size_name = $size_matches[1]; - } else { - return $block_content; // No size found, return original content - } - - // Get the image metadata - if ($size_name == "full") { - return $block_content; // fullsize is ok as-is, return original content - } else { - $metadata = wp_get_attachment_metadata($image_id); - if (!$metadata || !isset($metadata['sizes'][$size_name])) { - return $block_content; // No metadata found for this size, return original content - } - } - - // Get the width, height, and file from the metadata - $width = $metadata['sizes'][$size_name]['width']; - $height = $metadata['sizes'][$size_name]['height']; - - // Add the width and height attributes to the img tag - $block_content = preg_replace( - '/]+)>/', - '', - $block_content - ); + if (is_admin()) { + return $block_content; + } + + // If no HTML API, bail + if (! class_exists('WP_HTML_Tag_Processor')) { + return $block_content; + } + + // Check img tag + $img_tag_processor = new WP_HTML_Tag_Processor($block_content); + if (! $img_tag_processor->next_tag('img')) { + // No img found, bail + return $block_content; + } + + // Get the image ID class from the img tag + $img_class = $img_tag_processor->get_attribute('class'); + if (! $img_class || ! preg_match('/wp-image-(\d+)/', $img_class, $image_matches)) { + // If we can't find wp-image-XXX, bail + return $block_content; + } + $image_id = $image_matches[1]; + + // Check figure tag + $figure_tag_processor = new WP_HTML_Tag_Processor($block_content); + if (! $figure_tag_processor->next_tag('figure')) { + // No figure found, bail + return $block_content; + } + + // Get the size name class from the figure tag + $figure_class = $figure_tag_processor->get_attribute('class'); + if (! $figure_class || ! preg_match('/size-([^\s"]+)/', $figure_class, $size_matches)) { + // If we can't find size-xxx, bail + return $block_content; + } + $size_name = $size_matches[1]; + + // If the size is full, bail + if ('full' === $size_name) { + return $block_content; + } + + // Get meta for the attachment sizes + $metadata = wp_get_attachment_metadata($image_id); + if (! $metadata || empty($metadata['sizes'][$size_name])) { + // If no size meta is available for this size, bail + return $block_content; } + + // Get values ready + $width = $metadata['sizes'][$size_name]['width']; + $height = $metadata['sizes'][$size_name]['height']; + $update_tag_processor = new WP_HTML_Tag_Processor($block_content); + + // Set width/height for img + if ($update_tag_processor->next_tag('img')) { + $update_tag_processor->set_attribute('width', esc_attr($width)); + $update_tag_processor->set_attribute('height', esc_attr($height)); + } + + // Get the result ready + $block_content = $update_tag_processor->get_updated_html(); + + // DONE return $block_content; } add_filter('render_block_core/image', 'vip_fix_img_block_sizes', 10, 3); From 06865ff9296c38d01fecea9e042737c0f24dade0 Mon Sep 17 00:00:00 2001 From: Rinat Khaziev Date: Tue, 7 Jan 2025 12:53:55 -0600 Subject: [PATCH 6/6] Fix lint issues --- fix-block-img-tag-sizes.php | 121 ++++++++++++++++++------------------ 1 file changed, 60 insertions(+), 61 deletions(-) diff --git a/fix-block-img-tag-sizes.php b/fix-block-img-tag-sizes.php index dd0c646294..147b90fbf9 100644 --- a/fix-block-img-tag-sizes.php +++ b/fix-block-img-tag-sizes.php @@ -1,77 +1,76 @@ next_tag( 'img' ) ) { + // No img found, bail + return $block_content; + } - // Check img tag - $img_tag_processor = new WP_HTML_Tag_Processor($block_content); - if (! $img_tag_processor->next_tag('img')) { - // No img found, bail - return $block_content; - } + // Get the image ID class from the img tag + $img_class = $img_tag_processor->get_attribute( 'class' ); + if ( ! $img_class || ! preg_match( '/wp-image-(\d+)/', $img_class, $image_matches ) ) { + // If we can't find wp-image-XXX, bail + return $block_content; + } + $image_id = $image_matches[1]; - // Get the image ID class from the img tag - $img_class = $img_tag_processor->get_attribute('class'); - if (! $img_class || ! preg_match('/wp-image-(\d+)/', $img_class, $image_matches)) { - // If we can't find wp-image-XXX, bail - return $block_content; - } - $image_id = $image_matches[1]; + // Check figure tag + $figure_tag_processor = new WP_HTML_Tag_Processor( $block_content ); + if ( ! $figure_tag_processor->next_tag( 'figure' ) ) { + // No figure found, bail + return $block_content; + } - // Check figure tag - $figure_tag_processor = new WP_HTML_Tag_Processor($block_content); - if (! $figure_tag_processor->next_tag('figure')) { - // No figure found, bail - return $block_content; - } + // Get the size name class from the figure tag + $figure_class = $figure_tag_processor->get_attribute( 'class' ); + if ( ! $figure_class || ! preg_match( '/size-([^\s"]+)/', $figure_class, $size_matches ) ) { + // If we can't find size-xxx, bail + return $block_content; + } + $size_name = $size_matches[1]; - // Get the size name class from the figure tag - $figure_class = $figure_tag_processor->get_attribute('class'); - if (! $figure_class || ! preg_match('/size-([^\s"]+)/', $figure_class, $size_matches)) { - // If we can't find size-xxx, bail - return $block_content; - } - $size_name = $size_matches[1]; + // If the size is full, bail + if ( 'full' === $size_name ) { + return $block_content; + } - // If the size is full, bail - if ('full' === $size_name) { - return $block_content; - } + // Get meta for the attachment sizes + $metadata = wp_get_attachment_metadata( $image_id ); + if ( ! $metadata || empty( $metadata['sizes'][ $size_name ] ) ) { + // If no size meta is available for this size, bail + return $block_content; + } - // Get meta for the attachment sizes - $metadata = wp_get_attachment_metadata($image_id); - if (! $metadata || empty($metadata['sizes'][$size_name])) { - // If no size meta is available for this size, bail - return $block_content; - } + // Get values ready + $width = $metadata['sizes'][ $size_name ]['width']; + $height = $metadata['sizes'][ $size_name ]['height']; + $update_tag_processor = new WP_HTML_Tag_Processor( $block_content ); - // Get values ready - $width = $metadata['sizes'][$size_name]['width']; - $height = $metadata['sizes'][$size_name]['height']; - $update_tag_processor = new WP_HTML_Tag_Processor($block_content); + // Set width/height for img + if ( $update_tag_processor->next_tag( 'img' ) ) { + $update_tag_processor->set_attribute( 'width', esc_attr( $width ) ); + $update_tag_processor->set_attribute( 'height', esc_attr( $height ) ); + } - // Set width/height for img - if ($update_tag_processor->next_tag('img')) { - $update_tag_processor->set_attribute('width', esc_attr($width)); - $update_tag_processor->set_attribute('height', esc_attr($height)); - } + // Get the result ready + $block_content = $update_tag_processor->get_updated_html(); - // Get the result ready - $block_content = $update_tag_processor->get_updated_html(); - - // DONE - return $block_content; + // DONE + return $block_content; } -add_filter('render_block_core/image', 'vip_fix_img_block_sizes', 10, 3); +add_filter( 'render_block_core/image', 'vip_fix_img_block_sizes', 10, 3 );