Make WordPress Core

Changeset 56612


Ignore:
Timestamp:
09/18/2023 02:53:37 PM (7 months ago)
Author:
flixos90
Message:

Media: Enhance wp_get_loading_optimization_attributes() to support arbitrary context values.

The wp_get_loading_optimization_attributes() function, which was introduced in 6.3, based on the now deprecated wp_get_loading_attr_default() function introduced in 5.5, relies on a $context parameter based on which it may alter its behavior and the attributes returned. So far, it has only supported context values used within WordPress core.

This changeset decouples the behaviors of the function from specific contexts, allowing for more flexibility. Theme and plugin developers will be able to rely on their own context values when rendering images in non-standard ways, rather than being forced to use a core context, to get the loading optimization benefits the function provides.

As part of this change, a wp_loading_optimization_force_header_contexts filter is introduced, which allows filtering the map of context values and whether they should be considered header contexts, i.e. i.e. any image having one of these contexts will be assumed to appear above the fold.

Props mukesh27, costdev, flixos90.
Fixes #58894.

Location:
trunk
Files:
2 edited

Legend:

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

    r56549 r56612  
    56535653     * high priority.
    56545654     */
    5655     switch ( $context ) {
    5656         case 'the_post_thumbnail':
    5657         case 'wp_get_attachment_image':
    5658         case 'widget_media_image':
    5659             if ( doing_filter( 'the_content' ) ) {
    5660                 return $loading_attrs;
    5661             }
     5655    // TODO: Handle shortcode images together with the content (see https://core.trac.wordpress.org/ticket/58853).
     5656    if ( 'the_content' !== $context && 'do_shortcode' !== $context && doing_filter( 'the_content' ) ) {
     5657        return $loading_attrs;
    56625658    }
    56635659
     
    57105706
    57115707    if ( null === $maybe_in_viewport ) {
    5712         switch ( $context ) {
    5713             // Consider elements with these header-specific contexts to be in viewport.
    5714             case 'template_part_' . WP_TEMPLATE_PART_AREA_HEADER:
    5715             case 'get_header_image_tag':
    5716                 $maybe_in_viewport    = true;
    5717                 $maybe_increase_count = true;
    5718                 break;
    5719             // Count main content elements and detect whether in viewport.
    5720             case 'the_content':
    5721             case 'the_post_thumbnail':
    5722             case 'do_shortcode':
    5723                 // Only elements within the main query loop have special handling.
    5724                 if ( ! is_admin() && in_the_loop() && is_main_query() ) {
    5725                     /*
    5726                      * Get the content media count, since this is a main query
    5727                      * content element. This is accomplished by "increasing"
    5728                      * the count by zero, as the only way to get the count is
    5729                      * to call this function.
    5730                      * The actual count increase happens further below, based
    5731                      * on the `$increase_count` flag set here.
    5732                      */
    5733                     $content_media_count = wp_increase_content_media_count( 0 );
    5734                     $increase_count      = true;
    5735 
    5736                     // If the count so far is below the threshold, `loading` attribute is omitted.
    5737                     if ( $content_media_count < wp_omit_loading_attr_threshold() ) {
    5738                         $maybe_in_viewport = true;
    5739                     } else {
    5740                         $maybe_in_viewport = false;
    5741                     }
    5742                 }
    5743                 /*
    5744                  * For the 'the_post_thumbnail' context, the following case
    5745                  * clause needs to be considered as well, therefore skip the
    5746                  * break statement here if the viewport has not been
    5747                  * determined.
    5748                  */
    5749                 if ( 'the_post_thumbnail' !== $context || null !== $maybe_in_viewport ) {
    5750                     break;
    5751                 }
    5752             // phpcs:ignore Generic.WhiteSpace.ScopeIndent.Incorrect
    5753             // Consider elements before the loop as being in viewport.
    5754             case 'wp_get_attachment_image':
    5755             case 'widget_media_image':
    5756                 if (
    5757                     // Only apply for main query but before the loop.
    5758                     $wp_query->before_loop && $wp_query->is_main_query()
    5759                     /*
    5760                      * Any image before the loop, but after the header has started should not be lazy-loaded,
    5761                      * except when the footer has already started which can happen when the current template
    5762                      * does not include any loop.
    5763                      */
    5764                     && did_action( 'get_header' ) && ! did_action( 'get_footer' )
    5765                 ) {
    5766                     $maybe_in_viewport    = true;
    5767                     $maybe_increase_count = true;
    5768                 }
    5769                 break;
     5708        $header_enforced_contexts = array(
     5709            'template_part_' . WP_TEMPLATE_PART_AREA_HEADER => true,
     5710            'get_header_image_tag'                          => true,
     5711        );
     5712
     5713        /**
     5714         * Filters the header-specific contexts.
     5715         *
     5716         * @since 6.4.0
     5717         *
     5718         * @param array $default_header_enforced_contexts Map of contexts for which elements should be considered
     5719         *                                                in the header of the page, as $context => $enabled
     5720         *                                                pairs. The $enabled should always be true.
     5721         */
     5722        $header_enforced_contexts = apply_filters( 'wp_loading_optimization_force_header_contexts', $header_enforced_contexts );
     5723
     5724        // Consider elements with these header-specific contexts to be in viewport.
     5725        if ( isset( $header_enforced_contexts[ $context ] ) ) {
     5726            $maybe_in_viewport    = true;
     5727            $maybe_increase_count = true;
     5728        } elseif ( ! is_admin() && in_the_loop() && is_main_query() ) {
     5729            /*
     5730             * Get the content media count, since this is a main query
     5731             * content element. This is accomplished by "increasing"
     5732             * the count by zero, as the only way to get the count is
     5733             * to call this function.
     5734             * The actual count increase happens further below, based
     5735             * on the `$increase_count` flag set here.
     5736             */
     5737            $content_media_count = wp_increase_content_media_count( 0 );
     5738            $increase_count      = true;
     5739
     5740            // If the count so far is below the threshold, `loading` attribute is omitted.
     5741            if ( $content_media_count < wp_omit_loading_attr_threshold() ) {
     5742                $maybe_in_viewport = true;
     5743            } else {
     5744                $maybe_in_viewport = false;
     5745            }
     5746        } elseif (
     5747            // Only apply for main query but before the loop.
     5748            $wp_query->before_loop && $wp_query->is_main_query()
     5749            /*
     5750             * Any image before the loop, but after the header has started should not be lazy-loaded,
     5751             * except when the footer has already started which can happen when the current template
     5752             * does not include any loop.
     5753             */
     5754            && did_action( 'get_header' ) && ! did_action( 'get_footer' )
     5755            ) {
     5756            $maybe_in_viewport    = true;
     5757            $maybe_increase_count = true;
    57705758        }
    57715759    }
  • trunk/tests/phpunit/tests/media.php

    r56559 r56612  
    43024302            $this->set_main_query( $query );
    43034303
    4304             /*
    4305              * For contexts other than for the main content, still return 'lazy' even in the loop
    4306              * and in the main query, and do not increase the content media count.
    4307              */
    4308             $this->assertSame(
    4309                 array( 'loading' => 'lazy' ),
    4310                 wp_get_loading_optimization_attributes( 'img', $attr, 'wp_get_attachment_image' )
    4311             );
    4312 
    43134304            // First three element are not lazy loaded. However, first image is loaded with fetchpriority high.
    43144305            $this->assertSame(
     
    43384329            );
    43394330        }
     4331    }
     4332
     4333    /**
     4334     * Tests that wp_get_loading_optimization_attributes() returns fetchpriority=high and increases the count for arbitrary contexts in the main loop.
     4335     *
     4336     * @ticket 58894
     4337     *
     4338     * @covers ::wp_get_loading_optimization_attributes
     4339     *
     4340     * @dataProvider data_wp_get_loading_optimization_attributes_arbitrary_contexts
     4341     *
     4342     * @param string $context Context for the element for which the loading optimization attribute is requested.
     4343     */
     4344    public function test_wp_get_loading_optimization_attributes_with_arbitrary_contexts_in_main_loop( $context ) {
     4345        $attr = $this->get_width_height_for_high_priority();
     4346
     4347        $this->assertSame(
     4348            array( 'loading' => 'lazy' ),
     4349            wp_get_loading_optimization_attributes( 'img', $attr, $context ),
     4350            'The "loading" attribute should be "lazy" when not in the loop or the main query.'
     4351        );
     4352
     4353        $query = $this->get_new_wp_query_for_published_post();
     4354
     4355        // Set as main query.
     4356        $this->set_main_query( $query );
     4357
     4358        while ( have_posts() ) {
     4359            the_post();
     4360
     4361            $this->assertSame(
     4362                array( 'fetchpriority' => 'high' ),
     4363                wp_get_loading_optimization_attributes( 'img', $attr, $context ),
     4364                'The "fetchpriority" attribute should be "high" while in the loop and the main query.'
     4365            );
     4366
     4367            // Images with a certain minimum size in the arbitrary contexts of the page are also counted towards the threshold.
     4368            $this->assertSame( 1, wp_increase_content_media_count( 0 ), 'The content media count should be 1.' );
     4369        }
     4370    }
     4371
     4372    /**
     4373     * Tests that wp_get_loading_optimization_attributes() does not return lazy loading attributes when arbitrary contexts are used before the main query loop.
     4374     *
     4375     * @ticket 58894
     4376     *
     4377     * @covers ::wp_get_loading_optimization_attributes
     4378     *
     4379     * @dataProvider data_wp_get_loading_optimization_attributes_arbitrary_contexts
     4380     *
     4381     * @param string $context Context for the element for which the loading optimization attribute is requested.
     4382     */
     4383    public function test_wp_get_loading_optimization_attributes_with_arbitrary_contexts_before_main_query_loop( $context ) {
     4384        $attr = $this->get_width_height_for_high_priority();
     4385
     4386        $query = $this->get_new_wp_query_for_published_post();
     4387
     4388        // Set as main query.
     4389        $this->set_main_query( $query );
     4390
     4391        $this->assertSame(
     4392            array( 'loading' => 'lazy' ),
     4393            wp_get_loading_optimization_attributes( 'img', $attr, $context ),
     4394            'The "loading" attribute should be "lazy" before the main query loop.'
     4395        );
     4396
     4397        while ( have_posts() ) {
     4398            the_post();
     4399
     4400            $this->assertSame(
     4401                array( 'fetchpriority' => 'high' ),
     4402                wp_get_loading_optimization_attributes( 'img', $attr, $context ),
     4403                'The "fetchpriority" attribute should be "high" while in the loop and the main query.'
     4404            );
     4405
     4406            $this->assertArrayNotHasKey(
     4407                'loading',
     4408                wp_get_loading_optimization_attributes( 'img', $attr, $context ),
     4409                'No "loading" attribute should be present on the second image in the main query loop.'
     4410            );
     4411        }
     4412    }
     4413
     4414    /**
     4415     * Data provider.
     4416     *
     4417     * @return array[]
     4418     */
     4419    public function data_wp_get_loading_optimization_attributes_arbitrary_contexts() {
     4420        return array(
     4421            array( 'wp_get_attachment_image' ),
     4422            array( 'something_completely_arbitrary' ),
     4423        );
     4424    }
     4425
     4426    /**
     4427     * Tests that wp_get_loading_optimization_attributes() returns empty array for arbitrary context.
     4428     *
     4429     * @ticket 58894
     4430     *
     4431     * @covers ::wp_get_loading_optimization_attributes
     4432     */
     4433    public function test_wp_get_loading_optimization_attributes_should_return_empty_array_for_any_arbitrary_context() {
     4434        remove_all_filters( 'the_content' );
     4435
     4436        $result = null;
     4437        add_filter(
     4438            'the_content',
     4439            function( $content ) use ( &$result ) {
     4440                $attr   = $this->get_width_height_for_high_priority();
     4441                $result = wp_get_loading_optimization_attributes( 'img', $attr, 'something_completely_arbitrary' );
     4442                return $content;
     4443            }
     4444        );
     4445        apply_filters( 'the_content', '' );
     4446
     4447        $this->assertSame( array(), $result );
     4448    }
     4449
     4450    /**
     4451     * @ticket 58894
     4452     *
     4453     * @covers ::wp_get_loading_optimization_attributes
     4454     *
     4455     * @dataProvider data_wp_get_loading_optimization_attributes_header_context
     4456     *
     4457     * @param string $context The context for the header.
     4458     */
     4459    public function test_wp_get_loading_optimization_attributes_header_contexts( $context ) {
     4460        $attr = $this->get_width_height_for_high_priority();
     4461
     4462        $this->assertArrayNotHasKey(
     4463            'loading',
     4464            wp_get_loading_optimization_attributes( 'img', $attr, $context ),
     4465            'Images in the header context should not be lazy-loaded.'
     4466        );
     4467
     4468        add_filter( 'wp_loading_optimization_force_header_contexts', '__return_empty_array' );
     4469
     4470        $this->assertSame(
     4471            array( 'loading' => 'lazy' ),
     4472            wp_get_loading_optimization_attributes( 'img', $attr, $context ),
     4473            'Images in the header context should get lazy-loaded after the wp_loading_optimization_force_header_contexts filter.'
     4474        );
     4475    }
     4476
     4477    /**
     4478     * Data provider.
     4479     *
     4480     * @return array[]
     4481     */
     4482    public function data_wp_get_loading_optimization_attributes_header_context() {
     4483        return array(
     4484            array( 'template_part_' . WP_TEMPLATE_PART_AREA_HEADER ),
     4485            array( 'get_header_image_tag' ),
     4486        );
     4487    }
     4488
     4489    /**
     4490     * @ticket 58894
     4491     *
     4492     * @covers ::wp_get_loading_optimization_attributes
     4493     */
     4494    public function test_wp_loading_optimization_force_header_contexts_filter() {
     4495        $attr = $this->get_width_height_for_high_priority();
     4496
     4497        add_filter(
     4498            'wp_loading_optimization_force_header_contexts',
     4499            function( $context ) {
     4500                $contexts['something_completely_arbitrary'] = true;
     4501                return $contexts;
     4502            }
     4503        );
     4504
     4505        $this->assertSame(
     4506            array( 'fetchpriority' => 'high' ),
     4507            wp_get_loading_optimization_attributes( 'img', $attr, 'something_completely_arbitrary' )
     4508        );
    43404509    }
    43414510
Note: See TracChangeset for help on using the changeset viewer.