Feature/5987: Lazyload bg css

assets/js/lazyload-css.js

@@ -0,0 +1,43 @@
+function rocket_css_lazyload() {
+
+	const pairs = rocket_pairs || [];
+
+	const styleElement = document.querySelector('#wpr-lazyload-bg');
+
+	const threshold = rocket_lazyload_css_data.threshold || 300;
+
+	const observer = new IntersectionObserver(entries => {
+		entries.forEach(entry => {
+			if (entry.isIntersecting) {
+				const pairs = rocket_pairs.filter(s => entry.target.matches(s.selector));
+				pairs.map(pair => {
+					if (pair) {
+						styleElement.innerHTML += pair.style;
+						pair.elements.forEach(el => {
+							el.setAttribute('data-rocket-lazy-bg', 'loaded');
+							// Stop observing the target element
+							observer.unobserve(el);
+						});
+					}
+				})
+			}
+		});
+	}, {
+		rootMargin: threshold + 'px'
+	});
+
+	pairs.forEach(pair => {
+		try {
+			const elements = document.querySelectorAll(pair.selector);
+			elements.forEach(el => {
+				observer.observe(el);
+				// Save el in the pair object (create a new empty array if it doesn't exist)
+				(pair.elements ||= []).push(el);
+			});
+		} catch (error) {
+			console.error(error);
+		}
+	});
+}
+
+rocket_css_lazyload();

gulpfile.js

@@ -178,10 +178,27 @@ const bundleJsWithoutWatch = () => {
                 .pipe(gulp.dest('assets/js'))
 }
 
-exports.bundleJsWithoutWatch = bundleJsWithoutWatch;
+// Bundle script without watching.
+const bundleLazyloadJsWithoutWatch = () => {
+	var bundle = browserify({
+		entries: './src/js/global/lazyload-css.js',
+		debug: true
+	}).transform(babel);
+
+	return bundle.bundle()
+		.pipe(source('lazyload-css.js'))
+		.pipe(buffer())
+		.pipe(uglify())
+		.pipe( rename( { suffix: '.min' } ) )
+		.pipe(sourcemaps.init({loadMaps: false}))
+		.pipe(sourcemaps.write('./'))
+		.pipe(gulp.dest('assets/js'))
+}
+
+exports.bundleLazyloadJsWithoutWatch = bundleLazyloadJsWithoutWatch;
 
 // Run build without watching: watching keeps git actions stuck on 'build'
-gulp.task('run:build', gulp.parallel(bundleJsWithoutWatch, 'run:build:sass'));
+gulp.task('run:build', gulp.parallel(bundleJsWithoutWatch, bundleLazyloadJsWithoutWatch, 'run:build:sass'));
 
 /**
  * Compiles a standalone script file.

inc/Dependencies/Psr/SimpleCache/CacheException.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace WP_Rocket\Dependencies\Psr\SimpleCache;
+
+/**
+ * Interface used for all types of exceptions thrown by the implementing library.
+ */
+interface CacheException
+{
+}

inc/Dependencies/Psr/SimpleCache/CacheInterface.php

@@ -0,0 +1,97 @@
+<?php
+
+namespace WP_Rocket\Dependencies\Psr\SimpleCache;
+
+interface CacheInterface
+{
+    /**
+     * Fetches a value from the cache.
+     *
+     * @param string $key     The unique key of this item in the cache.
+     * @param mixed  $default Default value to return if the key does not exist.
+     *
+     * @return mixed The value of the item from the cache, or $default in case of cache miss.
+     *
+     */
+    public function get($key, $default = null);
+
+    /**
+     * Persists data in the cache, uniquely referenced by a key with an optional expiration TTL time.
+     *
+     * @param string                 $key   The key of the item to store.
+     * @param mixed                  $value The value of the item to store, must be serializable.
+     * @param null|int|\DateInterval $ttl   Optional. The TTL value of this item. If no value is sent and
+     *                                      the driver supports TTL then the library may set a default value
+     *                                      for it or let the driver take care of that.
+     *
+     * @return bool True on success and false on failure.
+     *
+     */
+    public function set($key, $value, $ttl = null);
+
+    /**
+     * Delete an item from the cache by its unique key.
+     *
+     * @param string $key The unique cache key of the item to delete.
+     *
+     * @return bool True if the item was successfully removed. False if there was an error.
+     *
+     */
+    public function delete($key);
+
+    /**
+     * Wipes clean the entire cache's keys.
+     *
+     * @return bool True on success and false on failure.
+     */
+    public function clear();
+
+    /**
+     * Obtains multiple cache items by their unique keys.
+     *
+     * @param iterable $keys    A list of keys that can obtained in a single operation.
+     * @param mixed    $default Default value to return for keys that do not exist.
+     *
+     * @return iterable A list of key => value pairs. Cache keys that do not exist or are stale will have $default as value.
+     *
+     */
+    public function getMultiple($keys, $default = null);
+
+    /**
+     * Persists a set of key => value pairs in the cache, with an optional TTL.
+     *
+     * @param iterable               $values A list of key => value pairs for a multiple-set operation.
+     * @param null|int|\DateInterval $ttl    Optional. The TTL value of this item. If no value is sent and
+     *                                       the driver supports TTL then the library may set a default value
+     *                                       for it or let the driver take care of that.
+     *
+     * @return bool True on success and false on failure.
+     *
+     */
+    public function setMultiple($values, $ttl = null);
+
+    /**
+     * Deletes multiple cache items in a single operation.
+     *
+     * @param iterable $keys A list of string-based keys to be deleted.
+     *
+     * @return bool True if the items were successfully removed. False if there was an error.
+     *
+     */
+    public function deleteMultiple($keys);
+
+    /**
+     * Determines whether an item is present in the cache.
+     *
+     * NOTE: It is recommended that has() is only to be used for cache warming type purposes
+     * and not to be used within your live applications operations for get/set, as this method
+     * is subject to a race condition where your has() will return true and immediately after,
+     * another script can remove it making the state of your app out of date.
+     *
+     * @param string $key The cache item key.
+     *
+     * @return bool
+     *
+     */
+    public function has($key);
+}

inc/Dependencies/Psr/SimpleCache/InvalidArgumentException.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace WP_Rocket\Dependencies\Psr\SimpleCache;
+
+/**
+ * Exception interface for invalid cache arguments.
+ *
+ * When an invalid argument is passed it must throw an exception which implements
+ * this interface
+ */
+interface InvalidArgumentException extends CacheException
+{
+}

inc/Dependencies/RocketLazyload/Assets.php

@@ -267,7 +267,7 @@ public function getYoutubeThumbnailScript( $args = [] ) {
 			}
 		}
 
-		return "<script>function lazyLoadThumb(e){var t='{$image}',a='<button class=\"play\" aria-label=\"play Youtube video\"></button>';return t.replace(\"ID\",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement(\"iframe\"),t=\"ID?autoplay=1\";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute(\"src\",t.replace(\"ID\",this.parentNode.dataset.src)),e.setAttribute(\"frameborder\",\"0\"),e.setAttribute(\"allowfullscreen\",\"1\"),e.setAttribute(\"allow\", \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener(\"DOMContentLoaded\",function(){var e,t,p,a=document.getElementsByClassName(\"rll-youtube-player\");for(t=0;t<a.length;t++)e=document.createElement(\"div\"),e.setAttribute(\"data-id\",a[t].dataset.id),e.setAttribute(\"data-query\", a[t].dataset.query),e.setAttribute(\"data-src\", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script>";
+		return "<script>function lazyLoadThumb(e,alt){var t='{$image}',a='<button class=\"play\" aria-label=\"play Youtube video\"></button>';t=t.replace('alt=\"\"','alt=\"'+alt+'\"');return t.replace(\"ID\",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement(\"iframe\"),t=\"ID?autoplay=1\";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute(\"src\",t.replace(\"ID\",this.parentNode.dataset.src)),e.setAttribute(\"frameborder\",\"0\"),e.setAttribute(\"allowfullscreen\",\"1\"),e.setAttribute(\"allow\", \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener(\"DOMContentLoaded\",function(){var e,t,p,a=document.getElementsByClassName(\"rll-youtube-player\");for(t=0;t<a.length;t++)e=document.createElement(\"div\"),e.setAttribute(\"data-id\",a[t].dataset.id),e.setAttribute(\"data-query\", a[t].dataset.query),e.setAttribute(\"data-src\", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script>";
 	}
 
 	/**

inc/Dependencies/RocketLazyload/Iframe.php

@@ -164,14 +164,18 @@ private function replaceYoutubeThumbnail( $iframe ) {
 
 		$youtube_url = $this->changeYoutubeUrlForYoutuDotBe( $iframe['src'] );
 		$youtube_url = $this->cleanYoutubeUrl( $iframe['src'] );
+
+		preg_match( '@\s*title\s*=\s*(\'|")(?<title>.*)\1@iUs', $iframe['atts'], $atts );
+
+		$title = $atts['title'] ?? '';
 		/**
 		 * Filter the LazyLoad HTML output on Youtube iframes
 		 *
 		 * @since 2.11
 		 *
 		 * @param array $html Output that will be printed.
 		 */
-		$youtube_lazyload  = apply_filters( 'rocket_lazyload_youtube_html', '<div class="rll-youtube-player" data-src="' . esc_attr( $youtube_url ) . '" data-id="' . esc_attr( $youtube_id ) . '" data-query="' . esc_attr( $query ) . '"></div>' );
+		$youtube_lazyload  = apply_filters( 'rocket_lazyload_youtube_html', '<div class="rll-youtube-player" data-src="' . esc_attr( $youtube_url ) . '" data-id="' . esc_attr( $youtube_id ) . '" data-query="' . esc_attr( $query ) . '" data-alt="' . esc_attr( $title ) . '"></div>' );
 		$youtube_lazyload .= '<noscript>' . $iframe[0] . '</noscript>';
 
 		return $youtube_lazyload;

inc/Engine/Admin/Settings/Page.php

@@ -999,6 +999,15 @@ private function media_section() {
 		$disable_iframes_lazyload = (array) apply_filters( 'rocket_maybe_disable_iframes_lazyload_helper', $disable_iframes_lazyload );
 		$disable_iframes_lazyload = $this->sanitize_and_format_list( $disable_iframes_lazyload );
 
+		$disable_css_bg_img_lazyload = false;
+
+		/**
+		 * Lazyload Helper filter which disables WPR lazyload functionality for bg css.
+		 *
+		 * @param bool $disable_css_bg_img_lazyload Should the lazyload CSS be disabled.
+		 */
+		$disable_css_bg_img_lazyload = (bool) apply_filters( 'rocket_maybe_disable_css_bg_img_lazyload_helper', $disable_css_bg_img_lazyload );
+
 		/**
 		 * Lazyload Helper filter which disables WPR lazyload functionality to replace YouTube iframe with preview image.
 		 *
@@ -1054,7 +1063,7 @@ private function media_section() {
 
 		$this->settings->add_settings_fields(
 			[
-				'lazyload'         => [
+				'lazyload'            => [
 					'type'              => 'checkbox',
 					'label'             => __( 'Enable for images', 'rocket' ),
 					'section'           => 'lazyload_section',
@@ -1070,7 +1079,22 @@ private function media_section() {
 					// translators: %1$s = “WP Rocket”, %2$s = a list of plugin names.
 					'description'       => ! empty( $disable_images_lazyload ) ? sprintf( __( 'LazyLoad for images is currently activated in %2$s. If you want to use %1$s’s LazyLoad, disable this option in %2$s.', 'rocket' ), WP_ROCKET_PLUGIN_NAME, $disable_images_lazyload ) : '',
 				],
-				'lazyload_iframes' => [
+				'lazyload_css_bg_img' => [
+					'container_class'   => [
+						$disable_css_bg_img_lazyload ? 'wpr-isDisabled' : '',
+						'wpr-isParent',
+					],
+					'type'              => 'checkbox',
+					'label'             => __( 'Enable for CSS background images', 'rocket' ),
+					'section'           => 'lazyload_section',
+					'page'              => 'media',
+					'default'           => 0,
+					'sanitize_callback' => 'sanitize_checkbox',
+					'input_attr'        => [
+						'disabled' => $disable_css_bg_img_lazyload ? 1 : 0,
+					],
+				],
+				'lazyload_iframes'    => [
 					'container_class'   => [
 						! empty( $disable_iframes_lazyload ) ? 'wpr-isDisabled' : '',
 						'wpr-isParent',
@@ -1085,7 +1109,7 @@ private function media_section() {
 						'disabled' => ! empty( $disable_iframes_lazyload ) ? 1 : 0,
 					],
 				],
-				'lazyload_youtube' => [
+				'lazyload_youtube'    => [
 					'container_class'   => [
 						! empty( $disable_youtube_lazyload ) ? 'wpr-isDisabled' : '',
 						'wpr-field--children',
@@ -1103,20 +1127,20 @@ private function media_section() {
 						'disabled' => ! empty( $disable_youtube_lazyload ) ? 1 : 0,
 					],
 				],
-				'exclude_lazyload' => [
+				'exclude_lazyload'    => [
 					'container_class' => [
 						'wpr-Delayjs',
 					],
 					'type'            => 'textarea',
 					'label'           => __( 'Excluded images or iframes', 'rocket' ),
 					// translators: %1$s = opening <a> tag, %2$s = closing </a> tag.
-					'description'     => sprintf( __( 'Specify keywords (e.g. image filename, CSS class, domain) from the image or iframe code to be excluded (one per line). %1$sMore info%2$s', 'rocket' ), '<a href="' . esc_url( $exclude_lazyload['url'] ) . '" data-beacon-article="' . esc_attr( $exclude_lazyload['id'] ) . '" target="_blank" rel="noopener noreferrer">', '</a>' ),
+					'description'     => sprintf( __( 'Specify keywords (e.g. image filename, CSS filename, CSS class, domain) from the image or iframe code to be excluded (one per line). %1$sMore info%2$s', 'rocket' ), '<a href="' . esc_url( $exclude_lazyload['url'] ) . '" data-beacon-article="' . esc_attr( $exclude_lazyload['id'] ) . '" target="_blank" rel="noopener noreferrer">', '</a>' ),
 					'section'         => 'lazyload_section',
 					'page'            => 'media',
 					'default'         => [],
-					'placeholder'     => "example-image.jpg\nslider-image",
+					'placeholder'     => "example-image.jpg\nslider-image\nbackground-image-style.css",
 				],
-				'image_dimensions' => [
+				'image_dimensions'    => [
 					'type'              => 'checkbox',
 					'label'             => __( 'Add missing image dimensions', 'rocket' ),
 					'section'           => 'dimensions_section',

inc/Engine/Common/Cache/CacheInterface.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace WP_Rocket\Engine\Common\Cache;
+
+interface CacheInterface extends \WP_Rocket\Dependencies\Psr\SimpleCache\CacheInterface {
+
+	/**
+	 * Generate the real URL.
+	 *
+	 * @param string $url original URL.
+	 * @return string
+	 */
+	public function generate_url( string $url ): string;
+
+	/**
+	 * Is the root path available.
+	 *
+	 * @return bool
+	 */
+	public function is_accessible(): bool;
+
+	/**
+	 * Get root path from the cache.
+	 *
+	 * @return string
+	 */
+	public function get_root_path(): string;
+
+	/**
+	 * Generate a path from the URL.
+	 *
+	 * @param string $url URL to change to a path.
+	 * @return string
+	 */
+	public function generate_path( string $url ): string;
+}