Changeset 49808 for trunk/src/wp-includes/media.php

Timestamp:

12/16/2020 09:17:24 PM (6 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:

• trunk/src/wp-includes/media.php (modified) (9 diffs)

trunk/src/wp-includes/media.php

@@ -1704 +1704 @@
  *
  * @since 5.5.0
+ * @since 5.7.0 Now returns `true` by default for `iframe` tags.
  *
  * @param string $tag_name The tag name.
@@ -1711 +1712 @@
  */
 function wp_lazy_loading_enabled( $tag_name, $context ) {
-        // By default add to all 'img' tags.
+        // By default add to all 'img' and 'iframe' tags.
         // See https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading
-        $default = ( 'img' === $tag_name );
+        // See https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-iframe-loading
+        $default = ( 'img' === $tag_name || 'iframe' === $tag_name );
 
         /**
@@ -1733 +1735 @@
  * Modifies HTML tags in post content to include new browser and HTML technologies
  * that may not have existed at the time of post creation. These modifications currently
- * include adding `srcset`, `sizes`, and `loading` attributes to `img` HTML tags.
+ * include adding `srcset`, `sizes`, and `loading` attributes to `img` HTML tags, as well
+ * as adding `loading` attributes to `iframe` HTML tags.
  * Future similar optimizations should be added/expected here.
  *
  * @since 5.5.0
+ * @since 5.7.0 Now supports adding `loading` attributes to `iframe` tags.
  *
  * @see wp_img_tag_add_width_and_height_attr()
  * @see wp_img_tag_add_srcset_and_sizes_attr()
  * @see wp_img_tag_add_loading_attr()
+ * @see wp_iframe_tag_add_loading_attr()
  *
  * @param string $content The HTML content to be filtered.
@@ -1752 +1757 @@
         }
 
-        $add_loading_attr = wp_lazy_loading_enabled( 'img', $context );
-
-        if ( false === strpos( $content, '<img' ) ) {
-                return $content;
-        }
-
-        if ( ! preg_match_all( '/<img\s[^>]+>/', $content, $matches ) ) {
+        $add_img_loading_attr    = wp_lazy_loading_enabled( 'img', $context );
+        $add_iframe_loading_attr = wp_lazy_loading_enabled( 'iframe', $context );
+
+        if ( ! preg_match_all( '/<(img|iframe)\s[^>]+>/', $content, $matches, PREG_SET_ORDER ) ) {
                 return $content;
         }
@@ -1765 +1767 @@
         $images = array();
 
-        foreach ( $matches[0] as $image ) {
-                if ( preg_match( '/wp-image-([0-9]+)/i', $image, $class_id ) ) {
-                        $attachment_id = absint( $class_id[1] );
-
-                        if ( $attachment_id ) {
-                                // If exactly the same image tag is used more than once, overwrite it.
-                                // All identical tags will be replaced later with 'str_replace()'.
-                                $images[ $image ] = $attachment_id;
-                                continue;
-                        }
-                }
-
-                $images[ $image ] = 0;
+        // List of the unique `iframe` tags found in $content.
+        $iframes = array();
+
+        foreach ( $matches as $match ) {
+                list( $tag, $tag_name ) = $match;
+
+                switch ( $tag_name ) {
+                        case 'img':
+                                if ( preg_match( '/wp-image-([0-9]+)/i', $tag, $class_id ) ) {
+                                        $attachment_id = absint( $class_id[1] );
+
+                                        if ( $attachment_id ) {
+                                                // If exactly the same image tag is used more than once, overwrite it.
+                                                // All identical tags will be replaced later with 'str_replace()'.
+                                                $images[ $tag ] = $attachment_id;
+                                                break;
+                                        }
+                                }
+                                $images[ $tag ] = 0;
+                                break;
+                        case 'iframe':
+                                $iframes[ $tag ] = 0;
+                                break;
+                }
         }
 
@@ -1805 +1818 @@
 
                 // Add 'loading' attribute if applicable.
-                if ( $add_loading_attr && false === strpos( $filtered_image, ' loading=' ) ) {
+                if ( $add_img_loading_attr && false === strpos( $filtered_image, ' loading=' ) ) {
                         $filtered_image = wp_img_tag_add_loading_attr( $filtered_image, $context );
                 }
@@ -1811 +1824 @@
                 if ( $filtered_image !== $image ) {
                         $content = str_replace( $image, $filtered_image, $content );
+                }
+        }
+
+        foreach ( $iframes as $iframe => $attachment_id ) {
+                $filtered_iframe = $iframe;
+
+                // Add 'loading' attribute if applicable.
+                if ( $add_iframe_loading_attr && false === strpos( $filtered_iframe, ' loading=' ) ) {
+                        $filtered_iframe = wp_iframe_tag_add_loading_attr( $filtered_iframe, $context );
+                }
+
+                if ( $filtered_iframe !== $iframe ) {
+                        $content = str_replace( $iframe, $filtered_iframe, $content );
                 }
         }
@@ -1828 +1854 @@
 function wp_img_tag_add_loading_attr( $image, $context ) {
         /**
-         * Filters the `loading` attribute value. Default `lazy`.
+         * Filters the `loading` attribute value to add to an image. Default `lazy`.
          *
          * Returning `false` or an empty string will not add the attribute.
@@ -1935 +1961 @@
 
         return $image;
+}
+
+/**
+ * Adds `loading` attribute to an `iframe` HTML tag.
+ *
+ * @since 5.7.0
+ *
+ * @param string $iframe  The HTML `iframe` tag where the attribute should be added.
+ * @param string $context Additional context to pass to the filters.
+ * @return string Converted `iframe` tag with `loading` attribute added.
+ */
+function wp_iframe_tag_add_loading_attr( $iframe, $context ) {
+        /**
+         * Filters the `loading` attribute value to add to an iframe. Default `lazy`.
+         *
+         * Returning `false` or an empty string will not add the attribute.
+         * Returning `true` will add the default value.
+         *
+         * @since 5.7.0
+         *
+         * @param string|bool $value   The `loading` attribute value. Returning a falsey value will result in
+         *                             the attribute being omitted for the iframe. Default 'lazy'.
+         * @param string      $iframe  The HTML `iframe` tag to be filtered.
+         * @param string      $context Additional context about how the function was called or where the iframe tag is.
+         */
+        $value = apply_filters( 'wp_iframe_tag_add_loading_attr', 'lazy', $iframe, $context );
+
+        if ( $value ) {
+                if ( ! in_array( $value, array( 'lazy', 'eager' ), true ) ) {
+                        $value = 'lazy';
+                }
+
+                // Iframes should have source and dimension attributes for the `loading` attribute to be added.
+                if ( false === strpos( $iframe, ' src="' ) || false === strpos( $iframe, ' width="' ) || false === strpos( $iframe, ' height="' ) ) {
+                        return $iframe;
+                }
+
+                return str_replace( '<iframe', '<iframe loading="' . esc_attr( $value ) . '"', $iframe );
+        }
+
+        return $iframe;
 }