Merge pull request #23 from Lorti/noscript

Add optional `<noscript>` tag (and test WordPress 5.0)

.gitignore

@@ -26,3 +26,8 @@ nbproject
 intermediate
 .idea
 cache
+
+# Files added by `install-wp-tests.sh`…
+wp-tests-config.php
+tests/phpunit/data
+tests/phpunit/includes

.travis.yml

@@ -1,3 +1,6 @@
+sudo: false
+dist: trusty
+
 language: php
 
 notifications:
@@ -9,21 +12,56 @@ branches:
   only:
     - master
 
-php:
-  - 5.3
-  - 5.6
-
-env:
-  - WP_VERSION=latest WP_MULTISITE=0
-  - WP_VERSION=4.4 WP_MULTISITE=0
-  - WP_VERSION=4.4.2 WP_MULTISITE=0
+cache:
+  directories:
+    - $HOME/.composer/cache
 
 matrix:
   include:
+    - php: 7.2
+      env: WP_VERSION=latest
+    - php: 7.1
+      env: WP_VERSION=latest
+    - php: 7.0
+      env: WP_VERSION=latest
+    - php: 5.6
+      env: WP_VERSION=4.4
+    - php: 5.6
+      env: WP_VERSION=latest
+    - php: 5.6
+      env: WP_VERSION=trunk
+    - php: 5.6
+      env: WP_TRAVISCI=phpcs
     - php: 5.3
-      env: WP_VERSION=latest WP_MULTISITE=1
+      env: WP_VERSION=latest
+      dist: precise
 
 before_script:
-  - bash bin/install-wp-tests.sh wordpress_test root '' localhost $WP_VERSION
+  - export PATH="$HOME/.composer/vendor/bin:$PATH"
+  - |
+    if [ -f ~/.phpenv/versions/$(phpenv version-name)/etc/conf.d/xdebug.ini ]; then
+      phpenv config-rm xdebug.ini
+    else
+      echo "xdebug.ini does not exist"
+    fi
+  - |
+    if [[ ! -z "$WP_VERSION" ]] ; then
+      bash bin/install-wp-tests.sh wordpress_test root '' localhost $WP_VERSION
+      composer global require "phpunit/phpunit=4.8.*|5.7.*"
+    fi
+  - |
+    if [[ "$WP_TRAVISCI" == "phpcs" ]] ; then
+      composer global require wp-coding-standards/wpcs
+      phpcs --config-set installed_paths $HOME/.composer/vendor/wp-coding-standards/wpcs
+    fi
 
-script: phpunit
+script:
+  - |
+    if [[ ! -z "$WP_VERSION" ]] ; then
+      phpunit
+      WP_MULTISITE=1 phpunit
+    fi
+  - |
+    if [[ "$WP_TRAVISCI" == "phpcs" ]] ; then
+      phpcs
+    fi

README.md

@@ -58,6 +58,10 @@ There is an optional third argument, you can use to specify the format. The avai
 
 ## Changelog
 
+### 0.8.0
+
+* Added an option for `<noscript>` tags to the admin interface. The tags add a lot of HTML, but they're great for users with JavaScript disabled and can be good for SEO (your mileage may vary).
+
 ### 0.7.0
 
 * Added a fallback for images without `wp-image-*` classes. The plugin can now determine the attachment ID from the image URL, using `attachment_url_to_postid`. This should add support for plugins like WooCommerce, who don't output their images with `wp-image-*` classes. Thanks, [@ecksite](https://github.com/Lorti/dominant-colors-lazy-loading-wordpress-plugin/pull/21)!

README.txt

@@ -4,7 +4,7 @@ Donate link: https://manu.ninja/
 Tags: images, dominant colors, lazy loading, pinterest, javascript, optimization, performance, bandwidth
 Requires at least: 4.4
 Tested up to: 5.0
-Stable tag: 0.7.0
+Stable tag: 0.8.0
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -68,6 +68,10 @@ There is an optional third argument, you can use to specify the format. The avai
 
 ## Changelog
 
+### 0.8.0
+
+* Added an option for `<noscript>` tags to the admin interface. The tags add a lot of HTML, but they're great for users with JavaScript disabled and can be good for SEO (your mileage may vary).
+
 ### 0.7.0
 
 * Added a fallback for images without `wp-image-*` classes. The plugin can now determine the attachment ID from the image URL, using `attachment_url_to_postid`. This should add support for plugins like WooCommerce, who don't output their images with `wp-image-*` classes. Thanks, [@ecksite](https://github.com/Lorti/dominant-colors-lazy-loading-wordpress-plugin/pull/21)!

admin/class-dominant-colors-lazy-loading-admin.php

@@ -247,8 +247,18 @@ public function register_settings() {
 			array( 'label_for' => 'dominant_colors_placeholder_fallback' )
 		);
 
+        add_settings_field(
+            'dominant_colors_placeholder_noscript',
+            __( 'Add <noscript>?', 'dominant-colors-lazy-loading' ),
+            array( $this, 'dominant_colors_placeholder_noscript_callback' ),
+            $this->plugin_name,
+            'dominant_colors_general',
+            array( 'label_for' => 'dominant_colors_placeholder_noscript' )
+        );
+
 		register_setting( $this->plugin_name, 'dominant_colors_placeholder_format' );
 		register_setting( $this->plugin_name, 'dominant_colors_placeholder_fallback', array( $this, 'sanitize_hex_color' ) );
+		register_setting( $this->plugin_name, 'dominant_colors_placeholder_noscript' );
 
 	}
 
@@ -307,7 +317,21 @@ public function dominant_colors_placeholder_fallback_callback() {
 		echo '#<input type="text" name="dominant_colors_placeholder_fallback" id="dominant_colors_placeholder_fallback" value="' . $fallback . '" placeholder="bada55">';
 	}
 
-	/**
+    /**
+     * @since  0.8.0
+     */
+    public function dominant_colors_placeholder_noscript_callback() {
+        $noscript = get_option( 'dominant_colors_placeholder_noscript', 0 );
+        ?>
+        <input type="checkbox"
+               id="dominant_colors_placeholder_noscript"
+               name="dominant_colors_placeholder_noscript"
+               value="1" <?php checked( $noscript, 1 ); ?>>
+        <?php
+        _e( '(Adds a lot of HTML, but can be good for SEO and users w/o JavaScript) ' );
+    }
+
+    /**
 	 * @since  0.4.0
 	 *
 	 * @param $color

bin/install-wp-tests.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 
 if [ $# -lt 3 ]; then
-	echo "usage: $0 <db-name> <db-user> <db-pass> [db-host] [wp-version]"
+	echo "usage: $0 <db-name> <db-user> <db-pass> [db-host] [wp-version] [skip-database-creation]"
 	exit 1
 fi
 
@@ -10,9 +10,12 @@ DB_USER=$2
 DB_PASS=$3
 DB_HOST=${4-localhost}
 WP_VERSION=${5-latest}
+SKIP_DB_CREATE=${6-false}
 
-WP_TESTS_DIR=${WP_TESTS_DIR-/tmp/wordpress-tests-lib/includes}
-WP_CORE_DIR=${WP_CORE_DIR-/tmp/wordpress/}
+TMPDIR=${TMPDIR-/tmp}
+TMPDIR=$(echo $TMPDIR | sed -e "s/\/$//")
+WP_TESTS_DIR=${WP_TESTS_DIR-$TMPDIR/wordpress-tests-lib}
+WP_CORE_DIR=${WP_CORE_DIR-$TMPDIR/wordpress/}
 
 download() {
     if [ `which curl` ]; then
@@ -22,8 +25,19 @@ download() {
     fi
 }
 
-if [[ $WP_VERSION =~ [0-9]+\.[0-9]+(\.[0-9]+)? ]]; then
-	WP_TESTS_TAG="tags/$WP_VERSION"
+if [[ $WP_VERSION =~ ^[0-9]+\.[0-9]+\-(beta|RC)[0-9]+$ ]]; then
+	WP_BRANCH=${WP_VERSION%\-*}
+	WP_TESTS_TAG="branches/$WP_BRANCH"
+
+elif [[ $WP_VERSION =~ ^[0-9]+\.[0-9]+$ ]]; then
+	WP_TESTS_TAG="branches/$WP_VERSION"
+elif [[ $WP_VERSION =~ [0-9]+\.[0-9]+\.[0-9]+ ]]; then
+	if [[ $WP_VERSION =~ [0-9]+\.[0-9]+\.[0] ]]; then
+		# version x.x.0 means the first release of the major version, so strip off the .0 and download version x.x
+		WP_TESTS_TAG="tags/${WP_VERSION%??}"
+	else
+		WP_TESTS_TAG="tags/$WP_VERSION"
+	fi
 elif [[ $WP_VERSION == 'nightly' || $WP_VERSION == 'trunk' ]]; then
 	WP_TESTS_TAG="trunk"
 else
@@ -37,7 +51,6 @@ else
 	fi
 	WP_TESTS_TAG="tags/$LATEST_VERSION"
 fi
-
 set -ex
 
 install_wp() {
@@ -49,18 +62,34 @@ install_wp() {
 	mkdir -p $WP_CORE_DIR
 
 	if [[ $WP_VERSION == 'nightly' || $WP_VERSION == 'trunk' ]]; then
-		mkdir -p /tmp/wordpress-nightly
-		download https://wordpress.org/nightly-builds/wordpress-latest.zip  /tmp/wordpress-nightly/wordpress-nightly.zip
-		unzip -q /tmp/wordpress-nightly/wordpress-nightly.zip -d /tmp/wordpress-nightly/
-		mv /tmp/wordpress-nightly/wordpress/* $WP_CORE_DIR
+		mkdir -p $TMPDIR/wordpress-nightly
+		download https://wordpress.org/nightly-builds/wordpress-latest.zip  $TMPDIR/wordpress-nightly/wordpress-nightly.zip
+		unzip -q $TMPDIR/wordpress-nightly/wordpress-nightly.zip -d $TMPDIR/wordpress-nightly/
+		mv $TMPDIR/wordpress-nightly/wordpress/* $WP_CORE_DIR
 	else
 		if [ $WP_VERSION == 'latest' ]; then
 			local ARCHIVE_NAME='latest'
+		elif [[ $WP_VERSION =~ [0-9]+\.[0-9]+ ]]; then
+			# https serves multiple offers, whereas http serves single.
+			download https://api.wordpress.org/core/version-check/1.7/ $TMPDIR/wp-latest.json
+			if [[ $WP_VERSION =~ [0-9]+\.[0-9]+\.[0] ]]; then
+				# version x.x.0 means the first release of the major version, so strip off the .0 and download version x.x
+				LATEST_VERSION=${WP_VERSION%??}
+			else
+				# otherwise, scan the releases and get the most up to date minor version of the major release
+				local VERSION_ESCAPED=`echo $WP_VERSION | sed 's/\./\\\\./g'`
+				LATEST_VERSION=$(grep -o '"version":"'$VERSION_ESCAPED'[^"]*' $TMPDIR/wp-latest.json | sed 's/"version":"//' | head -1)
+			fi
+			if [[ -z "$LATEST_VERSION" ]]; then
+				local ARCHIVE_NAME="wordpress-$WP_VERSION"
+			else
+				local ARCHIVE_NAME="wordpress-$LATEST_VERSION"
+			fi
 		else
 			local ARCHIVE_NAME="wordpress-$WP_VERSION"
 		fi
-		download https://wordpress.org/${ARCHIVE_NAME}.tar.gz  /tmp/wordpress.tar.gz
-		tar --strip-components=1 -zxmf /tmp/wordpress.tar.gz -C $WP_CORE_DIR
+		download https://wordpress.org/${ARCHIVE_NAME}.tar.gz  $TMPDIR/wordpress.tar.gz
+		tar --strip-components=1 -zxmf $TMPDIR/wordpress.tar.gz -C $WP_CORE_DIR
 	fi
 
 	download https://raw.github.com/markoheijnen/wp-mysqli/master/db.php $WP_CORE_DIR/wp-content/db.php
@@ -69,7 +98,7 @@ install_wp() {
 install_test_suite() {
 	# portable in-place argument for both GNU sed and Mac OSX sed
 	if [[ $(uname -s) == 'Darwin' ]]; then
-		local ioption='-i .bak'
+		local ioption='-i.bak'
 	else
 		local ioption='-i'
 	fi
@@ -79,20 +108,28 @@ install_test_suite() {
 		# set up testing suite
 		mkdir -p $WP_TESTS_DIR
 		svn co --quiet https://develop.svn.wordpress.org/${WP_TESTS_TAG}/tests/phpunit/includes/ $WP_TESTS_DIR/includes
+		svn co --quiet https://develop.svn.wordpress.org/${WP_TESTS_TAG}/tests/phpunit/data/ $WP_TESTS_DIR/data
 	fi
 
 	if [ ! -f wp-tests-config.php ]; then
-		download https://develop.svn.wordpress.org/trunk/wp-tests-config-sample.php ${WP_TESTS_DIR}/../wp-tests-config.php
- 		sed $ioption "s:dirname( __FILE__ ) . '/src/':'$WP_CORE_DIR':" ${WP_TESTS_DIR}/../wp-tests-config.php
- 		sed $ioption "s/youremptytestdbnamehere/$DB_NAME/" ${WP_TESTS_DIR}/../wp-tests-config.php
- 		sed $ioption "s/yourusernamehere/$DB_USER/" ${WP_TESTS_DIR}/../wp-tests-config.php
- 		sed $ioption "s/yourpasswordhere/$DB_PASS/" ${WP_TESTS_DIR}/../wp-tests-config.php
- 		sed $ioption "s|localhost|${DB_HOST}|" ${WP_TESTS_DIR}/../wp-tests-config.php
+		download https://develop.svn.wordpress.org/${WP_TESTS_TAG}/wp-tests-config-sample.php "$WP_TESTS_DIR"/wp-tests-config.php
+		# remove all forward slashes in the end
+		WP_CORE_DIR=$(echo $WP_CORE_DIR | sed "s:/\+$::")
+		sed $ioption "s:dirname( __FILE__ ) . '/src/':'$WP_CORE_DIR/':" "$WP_TESTS_DIR"/wp-tests-config.php
+		sed $ioption "s/youremptytestdbnamehere/$DB_NAME/" "$WP_TESTS_DIR"/wp-tests-config.php
+		sed $ioption "s/yourusernamehere/$DB_USER/" "$WP_TESTS_DIR"/wp-tests-config.php
+		sed $ioption "s/yourpasswordhere/$DB_PASS/" "$WP_TESTS_DIR"/wp-tests-config.php
+		sed $ioption "s|localhost|${DB_HOST}|" "$WP_TESTS_DIR"/wp-tests-config.php
 	fi
 
 }
 
 install_db() {
+
+	if [ ${SKIP_DB_CREATE} = "true" ]; then
+		return 0
+	fi
+
 	# parse DB_HOST for port or socket references
 	local PARTS=(${DB_HOST//\:/ })
 	local DB_HOSTNAME=${PARTS[0]};

dominant-colors-lazy-loading.php

@@ -17,7 +17,7 @@
  * Plugin Name:       Dominant Colors Lazy Loading
  * Plugin URI:        https://manu.ninja/dominant-colors-for-lazy-loading-images
  * Description:       This plugin allows you to lazy load your images while showing the dominant color of each image as a placeholder – like Pinterest or Google Images.
- * Version:           0.7.0
+ * Version:           0.8.0
  * Author:            Manuel Wieser
  * Author URI:        https://manu.ninja/
  * License:           GPL-2.0+

includes/class-dominant-colors-lazy-loading.php

@@ -76,7 +76,7 @@ class Dominant_Colors_Lazy_Loading {
 	public function __construct() {
 
 		$this->plugin_name = 'dominant-colors-lazy-loading';
-		$this->version     = '0.7.0';
+		$this->version     = '0.8.0';
 
 		$this->load_dependencies();
 		$this->set_locale();

phpunit.xml.dist

@@ -1,3 +1,4 @@
+<?xml version="1.0"?>
 <phpunit
 	bootstrap="tests/phpunit/bootstrap.php"
 	backupGlobals="false"

public/class-dominant-colors-lazy-loading-public.php

@@ -180,8 +180,9 @@ public function filter( $content ) {
 				$dominant_color = get_option( 'dominant_colors_placeholder_fallback' );
 			}
 			if ( ! empty( $dominant_color ) ) {
+			    $noscript = get_option( 'dominant_colors_placeholder_noscript', false );
 				$content = str_replace( $image,
-					$this->replace_source_with_dominant_color( $image, $dominant_color, $format ), $content );
+					$this->replace_source_with_dominant_color( $image, $dominant_color, $format, $noscript ), $content );
 			}
 		}
 
@@ -228,7 +229,8 @@ public function theme_filter( $image, $attachment_id, $format = null ) {
 		}
 
 		if ( ! empty( $dominant_color ) ) {
-			$image = $this->replace_source_with_dominant_color( $image, $dominant_color, $format );
+            $noscript = get_option( 'dominant_colors_placeholder_noscript', false );
+			$image = $this->replace_source_with_dominant_color( $image, $dominant_color, $format, $noscript );
 		}
 
 		return $image;
@@ -271,10 +273,11 @@ public function get_gallery_attachment_ids( $post_id ) {
 	 * @param $image
 	 * @param $color
 	 * @param $format
+	 * @param $noscript
 	 *
 	 * @return string
 	 */
-	public function replace_source_with_dominant_color( $image, $color, $format ) {
+	public function replace_source_with_dominant_color( $image, $color, $format, $noscript = false ) {
 		if ( empty( $color ) ) {
 			return $image;
 		}
@@ -289,6 +292,11 @@ public function replace_source_with_dominant_color( $image, $color, $format ) {
 			return $image;
 		}
 
+        $noscript_element = '';
+		if ($noscript) {
+            $noscript_element = sprintf('<noscript>%s</noscript>', $image);
+        }
+
 		$image = str_replace( 'srcset', 'data-srcset', $image );
 
 		if ( preg_match( '/class="/', $image ) ) {
@@ -308,7 +316,7 @@ public function replace_source_with_dominant_color( $image, $color, $format ) {
 
 			return str_replace( $match_src[0],
 				sprintf( 'src="%s" data-src="%s" style="background: #%s;"', $placeholder, $image_src, $color ),
-				$image );
+				$image ) . $noscript_element;
 
 		} else {
 
@@ -332,7 +340,7 @@ public function replace_source_with_dominant_color( $image, $color, $format ) {
 					$image );
 			}
 
-			return $image;
+			return $image . $noscript_element;
 		}
 
 	}

public/css/dominant-colors-lazy-loading-public.css

@@ -11,3 +11,8 @@
     width: 100%;
     height: 100%;
 }
+
+/* A theme that works without JavaScript should have a `no-js` class, similar the default WordPress themes. */
+.no-js .dcll-placeholder {
+    display: none;
+}