Make WordPress Core


Ignore:
Timestamp:
12/16/2020 09:17:24 PM (4 years ago)
Author:
flixos90
Message:

Media: Enable lazy-loading of iframes by adding the loading="lazy" attribute to iframe tags on the front-end.

  • Expands the capabilities of wp_filter_content_tags() to add the attribute to iframe tags if enabled.
  • Modifies the default behavior of wp_lazy_loading_enabled() so that it returns true for iframe tags.
  • Introduces a wp_iframe_tag_add_loading_attr() function.
  • Introduces a wp_iframe_tag_add_loading_attr filter.

Like for images, the attribute is only added to iframes which have both width and height specified (see related #50367).

Props azaozz, flixos90, westonruter.
Fixes #50756.

File:
1 edited

Legend:

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

    r49622 r49808  
    27372737     * @ticket 44427
    27382738     * @ticket 50367
     2739     * @ticket 50756
    27392740     * @requires function imagejpeg
    27402741     */
     
    27432744        $size_array = $this->_get_image_size_array_from_meta( $image_meta, 'medium' );
    27442745
    2745         $img                 = get_image_tag( self::$large_id, '', '', '', 'medium' );
    2746         $img_xhtml           = str_replace( ' />', '/>', $img );
    2747         $img_html5           = str_replace( ' />', '>', $img );
    2748         $img_no_width_height = str_replace( ' width="' . $size_array[0] . '"', '', $img );
    2749         $img_no_width_height = str_replace( ' height="' . $size_array[1] . '"', '', $img_no_width_height );
    2750         $iframe              = '<iframe src="https://www.example.com"></iframe>';
     2746        $img                    = get_image_tag( self::$large_id, '', '', '', 'medium' );
     2747        $img_xhtml              = str_replace( ' />', '/>', $img );
     2748        $img_html5              = str_replace( ' />', '>', $img );
     2749        $img_no_width_height    = str_replace( ' width="' . $size_array[0] . '"', '', $img );
     2750        $img_no_width_height    = str_replace( ' height="' . $size_array[1] . '"', '', $img_no_width_height );
     2751        $iframe                 = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
     2752        $iframe_no_width_height = '<iframe src="https://www.example.com"></iframe>';
    27512753
    27522754        $lazy_img       = wp_img_tag_add_loading_attr( $img, 'test' );
    27532755        $lazy_img_xhtml = wp_img_tag_add_loading_attr( $img_xhtml, 'test' );
    27542756        $lazy_img_html5 = wp_img_tag_add_loading_attr( $img_html5, 'test' );
     2757        $lazy_iframe    = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
    27552758
    27562759        // The following should not be modified because there already is a 'loading' attribute.
    2757         $img_eager = str_replace( ' />', ' loading="eager" />', $img );
     2760        $img_eager    = str_replace( ' />', ' loading="eager" />', $img );
     2761        $iframe_eager = str_replace( '">', '" loading="eager">', $iframe );
    27582762
    27592763        $content = '
     
    27682772            <p>Image, without dimension attributes. Should not be modified.</p>
    27692773            %5$s
    2770             <p>Iframe, standard. Should not be modified.</p>
    2771             %6$s';
    2772 
    2773         $content_unfiltered = sprintf( $content, $img, $img_xhtml, $img_html5, $img_eager, $img_no_width_height, $iframe );
    2774         $content_filtered   = sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $img_eager, $img_no_width_height, $iframe );
     2774            <p>Iframe, standard.</p>
     2775            %6$s
     2776            <p>Iframe, with pre-existing "loading" attribute. Should not be modified.</p>
     2777            %7$s
     2778            <p>Iframe, without dimension attributes. Should not be modified.</p>
     2779            %8$s';
     2780
     2781        $content_unfiltered = sprintf( $content, $img, $img_xhtml, $img_html5, $img_eager, $img_no_width_height, $iframe, $iframe_eager, $iframe_no_width_height );
     2782        $content_filtered   = sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $img_eager, $img_no_width_height, $lazy_iframe, $iframe_eager, $iframe_no_width_height );
    27752783
    27762784        // Do not add width, height, srcset, and sizes.
     
    27862794    /**
    27872795     * @ticket 44427
     2796     * @ticket 50756
    27882797     */
    27892798    function test_wp_filter_content_tags_loading_lazy_opted_in() {
    2790         $img      = get_image_tag( self::$large_id, '', '', '', 'medium' );
    2791         $lazy_img = wp_img_tag_add_loading_attr( $img, 'test' );
     2799        $img         = get_image_tag( self::$large_id, '', '', '', 'medium' );
     2800        $lazy_img    = wp_img_tag_add_loading_attr( $img, 'test' );
     2801        $iframe      = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
     2802        $lazy_iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
    27922803
    27932804        $content = '
    27942805            <p>Image, standard.</p>
    2795             %1$s';
    2796 
    2797         $content_unfiltered = sprintf( $content, $img );
    2798         $content_filtered   = sprintf( $content, $lazy_img );
     2806            %1$s
     2807            <p>Iframe, standard.</p>
     2808            %2$s';
     2809
     2810        $content_unfiltered = sprintf( $content, $img, $iframe );
     2811        $content_filtered   = sprintf( $content, $lazy_img, $lazy_iframe );
    27992812
    28002813        // Do not add srcset and sizes while testing.
     
    28112824    /**
    28122825     * @ticket 44427
     2826     * @ticket 50756
    28132827     */
    28142828    function test_wp_filter_content_tags_loading_lazy_opted_out() {
    2815         $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
     2829        $img    = get_image_tag( self::$large_id, '', '', '', 'medium' );
     2830        $iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
    28162831
    28172832        $content = '
    28182833            <p>Image, standard.</p>
    2819             %1$s';
    2820         $content = sprintf( $content, $img );
     2834            %1$s
     2835            <p>Iframe, standard.</p>
     2836            %2$s';
     2837        $content = sprintf( $content, $img, $iframe );
    28212838
    28222839        // Do not add srcset and sizes while testing.
     
    28772894
    28782895        $this->assertNotContains( ' loading=', $img );
     2896    }
     2897
     2898    /**
     2899     * @ticket 50756
     2900     */
     2901    function test_wp_iframe_tag_add_loading_attr() {
     2902        $iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
     2903        $iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
     2904
     2905        $this->assertContains( ' loading="lazy"', $iframe );
     2906    }
     2907
     2908    /**
     2909     * @ticket 50756
     2910     */
     2911    function test_wp_iframe_tag_add_loading_attr_without_src() {
     2912        $iframe = '<iframe width="640" height="360"></iframe>';
     2913        $iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
     2914
     2915        $this->assertNotContains( ' loading=', $iframe );
     2916    }
     2917
     2918    /**
     2919     * @ticket 50756
     2920     */
     2921    function test_wp_iframe_tag_add_loading_attr_with_single_quotes() {
     2922        $iframe = "<iframe src='https://www.example.com' width='640' height='360'></iframe>";
     2923        $iframe = wp_iframe_tag_add_loading_attr( $iframe, 'test' );
     2924
     2925        $this->assertNotContains( ' loading=', $iframe );
     2926
     2927        // Test specifically that the attribute is not there with double-quotes,
     2928        // to avoid regressions.
     2929        $this->assertNotContains( ' loading="lazy"', $iframe );
     2930    }
     2931
     2932    /**
     2933     * @ticket 50756
     2934     */
     2935    function test_wp_iframe_tag_add_loading_attr_opt_out() {
     2936        $iframe = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
     2937        add_filter( 'wp_iframe_tag_add_loading_attr', '__return_false' );
     2938
     2939        $this->assertNotContains( ' loading=', $iframe );
    28792940    }
    28802941
     
    29192980     * @ticket 44427
    29202981     * @ticket 50425
     2982     * @ticket 50756
    29212983     * @dataProvider data_wp_lazy_loading_enabled_tag_name_defaults
    29222984     *
     
    29352997        return array(
    29362998            'img => true'            => array( 'img', true ),
    2937             'iframe => false'        => array( 'iframe', false ),
     2999            'iframe => true'         => array( 'iframe', true ),
    29383000            'arbitrary tag => false' => array( 'blink', false ),
    29393001        );
Note: See TracChangeset for help on using the changeset viewer.