Make WordPress Core

Changeset 56154


Ignore:
Timestamp:
07/06/2023 04:31:02 PM (20 months ago)
Author:
flixos90
Message:

Media: Ensure that the image widget supports loading optimization attributes.

This changeset adds support for loading optimization attributes such as loading="lazy" and fetchpriority="high" to the image widget. A new context widget_media_image is introduced for that purpose.

Props spacedmonkey, thekt12, mukesh27, westonruter.
Fixes #58704.
See #58235.

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/media.php

    r56143 r56154  
    56635663
    56645664    // Special handling for programmatically created image tags.
    5665     if ( 'the_post_thumbnail' === $context || 'wp_get_attachment_image' === $context ) {
     5665    if ( 'the_post_thumbnail' === $context || 'wp_get_attachment_image' === $context || 'widget_media_image' === $context ) {
    56665666        /*
    56675667         * Skip programmatically created images within post content as they need to be handled together with the other
  • trunk/src/wp-includes/widgets/class-wp-widget-media-image.php

    r53136 r56154  
    240240            }
    241241
    242             $image = sprintf(
    243                 '<img class="%1$s" src="%2$s" alt="%3$s" width="%4$s" height="%5$s" />',
    244                 esc_attr( $classes ),
    245                 esc_url( $instance['url'] ),
    246                 esc_attr( $instance['alt'] ),
    247                 esc_attr( $instance['width'] ),
    248                 esc_attr( $instance['height'] )
     242            $attr = array(
     243                'class'    => $classes,
     244                'src'      => $instance['url'],
     245                'alt'      => $instance['alt'],
     246                'width'    => $instance['width'],
     247                'height'   => $instance['height'],
     248                'decoding' => 'async',
    249249            );
     250
     251            $loading_optimization_attr = wp_get_loading_optimization_attributes(
     252                'img',
     253                $attr,
     254                'widget_media_image'
     255            );
     256
     257            $attr = array_merge( $attr, $loading_optimization_attr );
     258
     259            $attr  = array_map( 'esc_attr', $attr );
     260            $image = '<img';
     261
     262            foreach ( $attr as $name => $value ) {
     263                $image .= ' ' . $name . '="' . $value . '"';
     264            }
     265
     266            $image .= ' />';
    250267        } // End if().
    251268
  • trunk/tests/phpunit/tests/media.php

    r56143 r56154  
    41924192     * @expectedDeprecated wp_get_loading_attr_default
    41934193     *
    4194      * @dataProvider data_special_contexts_for_the_content
     4194     * @dataProvider data_special_contexts_for_the_content_wp_get_loading_attr_default
    41954195     *
    41964196     * @param string $context Context for the element for which the `loading` attribute value is requested.
     
    42094209     * @expectedDeprecated wp_get_loading_attr_default
    42104210     *
    4211      * @dataProvider data_special_contexts_for_the_content
     4211     * @dataProvider data_special_contexts_for_the_content_wp_get_loading_attr_default
    42124212     *
    42134213     * @param string $context Context for the element for which the `loading` attribute value is requested.
     
    42344234     */
    42354235    public function data_special_contexts_for_the_content() {
     4236        return array(
     4237            'widget_media_image'      => array( 'context' => 'widget_media_image' ),
     4238            'the_post_thumbnail'      => array( 'context' => 'the_post_thumbnail' ),
     4239            'wp_get_attachment_image' => array( 'context' => 'wp_get_attachment_image' ),
     4240        );
     4241    }
     4242
     4243    /**
     4244     * Data provider.
     4245     *
     4246     * @return array[]
     4247     */
     4248    public function data_special_contexts_for_the_content_wp_get_loading_attr_default() {
    42364249        return array(
    42374250            'the_post_thumbnail'      => array( 'context' => 'the_post_thumbnail' ),
  • trunk/tests/phpunit/tests/widgets/wpWidgetMediaImage.php

    r52248 r56154  
    495495        // Custom image class.
    496496        $this->assertStringContainsString( 'src="http://example.org/url/to/image.jpg"', $output );
     497        $this->assertStringContainsString( 'decoding="async"', $output );
     498        $this->assertStringContainsString( 'loading="lazy"', $output );
    497499
    498500        // Link settings.
Note: See TracChangeset for help on using the changeset viewer.