Use more robust HTML Tag Processor for Image Placeholders

[sagarnasit]

Summary

Fixes #1475

• Use more robust HTML Tag Processor for Image Placeholder.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: sagarnasit <sagarnasit@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: felixarntz <flixos90@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[sagarnasit]

Output for Image with picture element turned off:

<img
  data-dominant-color="788d7e"
  data-has-transparency="false"
  style="--dominant-color: #788d7e;"
  fetchpriority="high"
  decoding="async"
  width="1024"
  height="711"
  src="http://localhost:8888/wp-content/uploads/2024/08/IMG-1-jpeg.webp"
  alt=""
  class="wp-image-13 not-transparent"
  srcset="
    http://localhost:8888/wp-content/uploads/2024/08/IMG-1-jpeg.webp 1024w,
    http://localhost:8888/wp-content/uploads/2024/08/IMG-1-300x208-jpeg.webp 300w,
    http://localhost:8888/wp-content/uploads/2024/08/IMG-1-768x533-jpeg.webp 768w"
  sizes="(max-width: 620px) 100vw, 620px"
>

With the picture element turned on:

<picture
  class="wp-picture-13"
  style="display: contents;">
  <source
   type="image/webp"
   srcset="
    http://localhost:8888/wp-content/uploads/2024/08/IMG-1-jpeg.webp 1024w,
    http://localhost:8888/wp-content/uploads/2024/08/IMG-1-300x208-jpeg.webp 300w,
    http://localhost:8888/wp-content/uploads/2024/08/IMG-1-768x533-jpeg.webp 768w"
   sizes="(max-width: 620px) 100vw, 620px">
  <img
   data-dominant-color="788d7e"
   data-has-transparency="false"
   style="--dominant-color: #788d7e;"
   fetchpriority="high"
   decoding="async"
   width="1024"
   height="711"
   src="http://localhost:8888/wp-content/uploads/2024/08/IMG-1.jpeg"
   alt=""
   class="wp-image-13 not-transparent"
   srcset="
    http://localhost:8888/wp-content/uploads/2024/08/IMG-1.jpeg 1024w,
    http://localhost:8888/wp-content/uploads/2024/08/IMG-1-300x208.jpeg 300w,
    http://localhost:8888/wp-content/uploads/2024/08/IMG-1-768x533.jpeg 768w"
   sizes="(max-width: 620px) 100vw, 620px"
></picture>

After these changes style with --dominant-color is now on the IMG tag instead of previously on the PICTURE tag.

[westonruter]

No need to use esc_attr() with tag processor as this is handled for you.

[westonruter]

Suggested change

	$style_attribute = '--dominant-color: #' . esc_attr( $image_meta['dominant_color'] ) . '; ';
	$style_attribute = "--dominant-color: #{$image_meta['dominant_color']}; ";

[westonruter]

Suggested change

	$processor->set_attribute( 'data-dominant-color', esc_attr( $image_meta['dominant_color'] ) );
	$processor->set_attribute( 'data-dominant-color', $image_meta['dominant_color'] );

[sagarnasit]

Using an HTML Tag Processor allows including single quotes and escaped double quotes for the image placeholder.

[westonruter]

This is a strange test case to begin with. If the string is <img src=\"http://example.com/foo.jpg\">, the HTML Tag Processor would parse the src as having the value of \"http://example.com/foo.jpg\". I guess this doesn't even matter because we're not doing anything with the src anyway. I just wonder what value this test case has in the first place.

[felixarntz]

I think we should delete this test case, I agree it doesn't make sense.

[westonruter]

LGTM!

[felixarntz]

LGTM, just I think it's worth deleting the one pointless test.

[felixarntz]

I think we should delete this test case, I agree it doesn't make sense.

[sagarnasit]

@felixarntz I have removed the test case.