Changeset 56214

Timestamp:

07/11/2023 01:56:55 PM (3 years ago)

Author:

joemcgill

Message:

Media: Optimize images created in shortcodes.

This fixes an issue where images dynamically created during shortcode rendering (e.g., shortcode image galleries), were not getting image optimizations like loading="lazy" or fetchpriority="hight" applied. Note that even after this commit, shortcodes are processed after the main content images, which can affect the order in which optimizations are applied in content areas.

Follow-up to [56037].

Props spacedmonkey, flixos90, thekt12, swissspidy, joemcgill.
Fixes #58681.

Location:

trunk

Files:

• src/wp-includes/media.php (modified) (1 diff)
• src/wp-includes/shortcodes.php (modified) (2 diffs)
• tests/phpunit/tests/media.php (modified) (2 diffs)

trunk/src/wp-includes/media.php

@@ -5726 +5726 @@
         /*
          * The first elements in 'the_content' or 'the_post_thumbnail' should not be lazy-loaded,
-         * as they are likely above the fold.
-         */
-        if ( 'the_content' === $context || 'the_post_thumbnail' === $context ) {
+         * as they are likely above the fold. Shortcodes are processed after content images, so if
+         * thresholds haven't already been met, apply the same logic to those as well.
+         */
+        if ( 'the_content' === $context || 'the_post_thumbnail' === $context || 'do_shortcode' === $context ) {
                 // Only elements within the main query loop have special handling.
                 if ( is_admin() || ! in_the_loop() || ! is_main_query() ) {

trunk/src/wp-includes/shortcodes.php

@@ -222 +222 @@
         }
 
+        // Ensure this context is only added once if shortcodes are nested.
+        $has_filter = has_filter( 'wp_get_attachment_image_context', '_filter_do_shortcode_context' );
+        $filter_added = false;
+
+        if ( ! $has_filter ) {
+                $filter_added = add_filter( 'wp_get_attachment_image_context', '_filter_do_shortcode_context' );
+        }
+
         $content = do_shortcodes_in_html_tags( $content, $ignore_html, $tagnames );
 
@@ -230 +238 @@
         $content = unescape_invalid_shortcodes( $content );
 
+        // Only remove the filter if it was added in this scope.
+        if ( $filter_added ) {
+                remove_filter( 'wp_get_attachment_image_context', '_filter_do_shortcode_context' );
+        }
+
         return $content;
+}
+
+/**
+ * Filter the `wp_get_attachment_image_context` hook during shortcode rendering.
+ *
+ * When wp_get_attachment_image() is called during shortcode rendering, we need to make clear
+ * that the context is a shortcode and not part of the theme's template rendering logic.
+ *
+ * @since 6.3.0
+ * @access private
+ *
+ * @return string The filtered context value for wp_get_attachment_images when doing shortcodes.
+ */
+function _filter_do_shortcode_context() {
+        return 'do_shortcode';
 }
 

trunk/tests/phpunit/tests/media.php

@@ -79 +79 @@
          * Ensures that the static content media count, fetchpriority element flag and related filter are reset between tests.
          */
-        public function set_up() {
-                parent::set_up();
+        public function tear_down() {
+                parent::tear_down();
 
                 $this->reset_content_media_count();
@@ -5003 +5003 @@
                         wp_get_loading_optimization_attributes( 'img', $attr, 'test' ),
                         'loading optimization attr array should be empty.'
+                );
+        }
+
+        /**
+         * @ticket 58681
+         *
+         * @dataProvider data_wp_get_loading_optimization_attributes_in_shortcodes
+         */
+        public function test_wp_get_loading_optimization_attributes_in_shortcodes( $setup, $expected, $message ) {
+                $attr = $this->get_width_height_for_high_priority();
+                $setup();
+
+                // The first image processed in a shortcode should have fetchpriority set to high.
+                $this->assertSame(
+                        $expected,
+                        wp_get_loading_optimization_attributes( 'img', $attr, 'do_shortcode' ),
+                        $message
+                );
+        }
+
+        public function data_wp_get_loading_optimization_attributes_in_shortcodes() {
+                return array(
+                        'main_shortcode_image_should_have_fetchpriority_high'  => array(
+                                'setup'    => function () {
+                                        global $wp_query;
+
+                                        // Set WP_Query to be in the loop and the main query.
+                                        $wp_query->in_the_loop = true;
+                                        $this->set_main_query( $wp_query );
+                                },
+                                'expected' => array(
+                                        'fetchpriority' => 'high',
+                                ),
+                                'message'  => 'Fetch priority not applied to during shortcode rendering.',
+                        ),
+                        'main_shortcode_image_after_threshold_is_loading_lazy' => array(
+                                'setup'    => function () {
+                                        global $wp_query;
+
+                                        // Set WP_Query to be in the loop and the main query.
+                                        $wp_query->in_the_loop = true;
+                                        $this->set_main_query( $wp_query );
+
+                                        // Set internal flags so lazy should be applied.
+                                        wp_high_priority_element_flag( false );
+                                        wp_increase_content_media_count( 3 );
+                                },
+                                'expected' => array(
+                                        'loading' => 'lazy',
+                                ),
+                                'message'  => 'Lazy-loading not applied to during shortcode rendering.',
+                        ),
+                        'shortcode_image_outside_of_the_loop_are_loaded_lazy'  => array(
+                                'setup'    => function () {
+                                        // Avoid setting up the WP_Query object for the loop.
+                                        return;
+                                },
+                                'expected' => array(
+                                        'loading' => 'lazy',
+                                ),
+                                'message'  => 'Lazy-loading not applied to shortcodes outside the loop.',
+                        ),
+                );
+        }
+
+        /**
+         * @ticket 58681
+         */
+        public function test_content_rendering_with_shortcodes() {
+                // The gallery shortcode will dynamically create image markup that should be optimized.
+                $content = "[gallery ids='" . self::$large_id . "' size='large']";
+                $actual  = apply_filters( 'the_content', $content );
+
+                $this->assertStringContainsString(
+                        // Since the main query and loop isn't set, this should be lazily loaded.
+                        'loading="lazy"',
+                        $actual,
+                        'Could not confirm shortcodes get optimizations applied.'
+                );
+        }
+
+        /**
+         * @ticket 58681
+         */
+        public function test_content_rendering_with_shortcodes_nested() {
+                global $wp_query;
+
+                // Set WP_Query to be in the loop and the main query.
+                $wp_query->in_the_loop = true;
+                $this->set_main_query( $wp_query );
+
+                add_shortcode(
+                        'div',
+                        function ( $atts, $content = null ) {
+                                $parsed_atts = shortcode_atts(
+                                        array(
+                                                'class' => '',
+                                        ),
+                                        $atts
+                                );
+
+                                $class = ! empty( $parsed_atts['class'] ) ? sprintf( ' class="%s"', $parsed_atts['class'] ) : null;
+
+                                return sprintf( '<div %s>%s</div>', $class, do_shortcode( $content ) );
+                        }
+                );
+
+                // The gallery shortcode will dynamically create image markup that should be optimized.
+                $content = "[div][gallery ids='" . self::$large_id . "' size='large'][div]";
+                $actual  = apply_filters( 'the_content', $content );
+
+                $this->assertStringContainsString(
+                        // Since this is in the loop, it should have a high fetchpriority.
+                        'fetchpriority="high"',
+                        $actual,
+                        'Could not confirm shortcodes get optimizations applied.'
                 );
         }