WordPress.org

Make WordPress Core


Ignore:
Timestamp:
06/30/2020 07:28:07 PM (4 months ago)
Author:
flixos90
Message:

Media: Introduce wp_img_tag_add_width_and_height_attr() to add dimension attributes to images.

Following up on [48170], this changeset moves the new logic to add missing img dimension attributes into a separate function that is run first within wp_filter_content_tags(). It also adds a utility function wp_image_src_get_dimensions() with logic reused from wp_image_add_srcset_and_sizes(), and it ensures that width and height attributes only get added if both of the attributes are missing on the original img tag.

This changeset furthermore improves test coverage and separates tests for the different aspects of img tag modification.

Props azaozz.
Fixes #50367. See #44427.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/tests/phpunit/tests/media.php

    r48190 r48237  
    19641964    /**
    19651965     * @ticket 33641
    1966      * @ticket 50367
    1967      */
    1968     function test_wp_filter_content_tags() {
     1966     */
     1967    function test_wp_filter_content_tags_srcset_sizes() {
    19691968        $image_meta = wp_get_attachment_metadata( self::$large_id );
    19701969        $size_array = $this->_get_image_size_array_from_meta( $image_meta, 'medium' );
     
    19751974        // Function used to build HTML for the editor.
    19761975        $img                  = get_image_tag( self::$large_id, '', '', '', 'medium' );
    1977         $img                  = wp_img_tag_add_loading_attr( $img, 'test' );
    19781976        $img_no_size_in_class = str_replace( 'size-', '', $img );
    19791977        $img_no_width_height  = str_replace( ' width="' . $size_array[0] . '"', '', $img );
     
    19841982        $img_html5            = str_replace( ' />', '>', $img );
    19851983
    1986         $hwstring = image_hwstring( $size_array[0], $size_array[1] );
    1987 
    19881984        // Manually add srcset and sizes to the markup from get_image_tag().
    19891985        $respimg                  = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img );
    19901986        $respimg_no_size_in_class = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_no_size_in_class );
    1991         $respimg_no_width_height  = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $hwstring . $srcset . ' ' . $sizes . ' />', $img_no_width_height );
     1987        $respimg_no_width_height  = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_no_width_height );
    19921988        $respimg_with_sizes_attr  = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' />', $img_with_sizes_attr );
    19931989        $respimg_xhtml            = preg_replace( '|<img ([^>]+)/>|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_xhtml );
     
    20011997            %2$s
    20021998
    2003             <p>Image, no width and height attributes. Should have width, height, srcset and sizes (from matching the file name).</p>
     1999            <p>Image, no width and height attributes. Should have srcset and sizes (from matching the file name).</p>
    20042000            %3$s
    20052001
     
    20192015        $content_filtered   = sprintf( $content, $respimg, $respimg_no_size_in_class, $respimg_no_width_height, $img_no_size_id, $respimg_with_sizes_attr, $respimg_xhtml, $respimg_html5 );
    20202016
     2017        // Do not add width, height, and loading.
     2018        add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );
     2019        add_filter( 'wp_img_tag_add_loading_attr', '__return_false' );
     2020
    20212021        $this->assertSame( $content_filtered, wp_filter_content_tags( $content_unfiltered ) );
     2022
     2023        remove_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );
     2024        remove_filter( 'wp_img_tag_add_loading_attr', '__return_false' );
    20222025    }
    20232026
     
    20332036     * @ticket 33641
    20342037     */
    2035     function test_wp_filter_content_tags_wrong() {
     2038    function test_wp_filter_content_tags_srcset_sizes_wrong() {
    20362039        $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
    20372040        $img = wp_img_tag_add_loading_attr( $img, 'test' );
     
    20462049     * @ticket 33641
    20472050     */
    2048     function test_wp_filter_content_tags_with_preexisting_srcset() {
     2051    function test_wp_filter_content_tags_srcset_sizes_with_preexisting_srcset() {
    20492052        // Generate HTML and add a dummy srcset attribute.
    20502053        $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
     
    25332536
    25342537    /**
     2538     * @ticket 50367
     2539     */
     2540    function test_wp_filter_content_tags_width_height() {
     2541        $image_meta = wp_get_attachment_metadata( self::$large_id );
     2542        $size_array = $this->_get_image_size_array_from_meta( $image_meta, 'medium' );
     2543
     2544        $img                 = get_image_tag( self::$large_id, '', '', '', 'medium' );
     2545        $img_no_width_height = str_replace( ' width="' . $size_array[0] . '"', '', $img );
     2546        $img_no_width_height = str_replace( ' height="' . $size_array[1] . '"', '', $img_no_width_height );
     2547        $img_no_width        = str_replace( ' width="' . $size_array[0] . '"', '', $img );
     2548        $img_no_height       = str_replace( ' height="' . $size_array[1] . '"', '', $img );
     2549
     2550        $hwstring = image_hwstring( $size_array[0], $size_array[1] );
     2551
     2552        // Manually add width and height to the markup from get_image_tag().
     2553        $respimg_no_width_height = str_replace( '<img ', '<img ' . $hwstring, $img_no_width_height );
     2554
     2555        $content = '
     2556            <p>Image, with width and height. Should NOT be modified.</p>
     2557            %1$s
     2558
     2559            <p>Image, no width and height attributes. Should have width, height, srcset and sizes (from matching the file name).</p>
     2560            %2$s
     2561
     2562            <p>Image, no width but height attribute. Should NOT be modified.</p>
     2563            %3$s
     2564
     2565            <p>Image, no height but width attribute. Should NOT be modified.</p>
     2566            %4$s';
     2567
     2568        $content_unfiltered = sprintf( $content, $img, $img_no_width_height, $img_no_width, $img_no_height );
     2569        $content_filtered   = sprintf( $content, $img, $respimg_no_width_height, $img_no_width, $img_no_height );
     2570
     2571        // Do not add loading, srcset, and sizes.
     2572        add_filter( 'wp_img_tag_add_loading_attr', '__return_false' );
     2573        add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
     2574
     2575        $this->assertSame( $content_filtered, wp_filter_content_tags( $content_unfiltered ) );
     2576
     2577        remove_filter( 'wp_img_tag_add_loading_attr', '__return_false' );
     2578        remove_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
     2579    }
     2580
     2581    /**
    25352582     * @ticket 44427
    25362583     * @ticket 50367
    25372584     */
    2538     function test_wp_lazy_load_content_media() {
     2585    function test_wp_filter_content_tags_loading_lazy() {
    25392586        $image_meta = wp_get_attachment_metadata( self::$large_id );
    25402587        $size_array = $this->_get_image_size_array_from_meta( $image_meta, 'medium' );
     
    25712618        $content_filtered   = sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $img_eager, $img_no_width_height, $iframe );
    25722619
    2573         // Do not add srcset and sizes.
     2620        // Do not add width, height, srcset, and sizes.
     2621        add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );
    25742622        add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
    25752623
    25762624        $this->assertSame( $content_filtered, wp_filter_content_tags( $content_unfiltered ) );
    25772625
     2626        remove_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );
    25782627        remove_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
    25792628    }
     
    25822631     * @ticket 44427
    25832632     */
    2584     function test_wp_lazy_load_content_media_opted_in() {
     2633    function test_wp_filter_content_tags_loading_lazy_opted_in() {
    25852634        $img      = get_image_tag( self::$large_id, '', '', '', 'medium' );
    25862635        $lazy_img = wp_img_tag_add_loading_attr( $img, 'test' );
     
    26072656     * @ticket 44427
    26082657     */
    2609     function test_wp_lazy_load_content_media_opted_out() {
     2658    function test_wp_filter_content_tags_loading_lazy_opted_out() {
    26102659        $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
    26112660
     
    26272676
    26282677    /**
    2629      * @ticket 44427
    2630      */
    2631     function test_wp_img_tag_add_loading_attr_single_quote() {
    2632         $img = "<img src='example.png' alt='' width='300' height='225' />";
     2678     * @ticket 50367
     2679     */
     2680    function test_wp_img_tag_add_loading_attr_without_src() {
     2681        $img = '<img alt=" width="300" height="225" />';
    26332682        $img = wp_img_tag_add_loading_attr( $img, 'test' );
    26342683
    2635         $this->assertContains( " loading='lazy'", $img );
     2684        $this->assertNotContains( ' loading="lazy"', $img );
    26362685    }
    26372686}
Note: See TracChangeset for help on using the changeset viewer.