Merge branch 'develop' into fix/345-dialog-accessibility

Author: aaemnnosttv

.eslintrc.json

@@ -7,22 +7,6 @@
     "browser": true,
     "es6": true
   },
-  "settings": {
-    "react": {
-      "version": "16.2.0"
-    }
-  },
-  "globals": {
-    "React": "readonly",
-    "googlesitekit": "readonly",
-    "googlesitekitAdminbar": "readonly",
-    "googlesitekitDashboard": "readonly",
-    "googlesitekitSettings": "readonly",
-    "lodash": "readonly",
-    "googlesitekitCurrentModule": "readonly",
-    "gtag": "readonly",
-    "process": "readonly"
-  },
   "rules": {
     "no-restricted-globals": [
       "error",
@@ -31,7 +15,10 @@
         "message": "Use 'global' instead."
       }
     ],
-    "react/jsx-fragments": ["error", "element"],
+    "react/jsx-fragments": [
+      "error",
+      "element"
+    ],
     "valid-jsdoc": "warn"
   },
   "overrides": [
@@ -44,21 +31,7 @@
       },
       "globals": {
         "browser": true,
-        "page": true,
-        "wp": true
-      },
-      "rules": {
-        "no-restricted-globals": [
-          "off"
-        ]
-      }
-    },
-    {
-      "files": [
-        "stories/**/*.js"
-      ],
-      "globals": {
-        "window": false
+        "page": true
       },
       "rules": {
         "no-restricted-globals": [

.github/ISSUE_TEMPLATE/bug_report.md

@@ -43,6 +43,10 @@ _Do not alter or remove anything below. The following sections will be managed b
 
 * <!-- One or more bullet points for how to technically resolve the issue. -->
 
+## QA Brief
+
+* <!-- One or more bullet points for how to test that the issue has been resolved. -->
+
 ## Changelog entry
 
 * <!-- One sentence summarizing the PR, to be used in the changelog. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -18,7 +18,11 @@ _Do not alter or remove anything below. The following sections will be managed b
 
 ## Implementation Brief
 
-* <!-- One or more bullet points for how to technically resolve the issue. -->
+* <!-- One or more bullet points for how to technically implement the feature. -->
+
+## QA Brief
+
+* <!-- One or more bullet points for how to test that the feature works as expected. -->
 
 ## Changelog entry
 

.gitignore

@@ -11,7 +11,7 @@ phpunit.xml
 npm-debug.log
 /dist
 /languages
-google-site-kit.zip
+google-site-kit*.zip
 
 # Editors
 *.esproj

.storybook/config.js

@@ -35,9 +35,9 @@ import {
 /**
  * Internal dependencies
  */
-import '../dist/assets/css/wpdashboard.css';
-import '../dist/assets/css/adminbar.css';
-import '../dist/assets/css/admin.css';
+import '../assets/sass/wpdashboard.scss';
+import '../assets/sass/adminbar.scss';
+import '../assets/sass/admin.scss';
 import '../vendor/johnpbloch/wordpress-core/wp-admin/css/common.css';
 import '../vendor/johnpbloch/wordpress-core/wp-admin/css/dashboard.css';
 import '../vendor/johnpbloch/wordpress-core/wp-admin/css/edit.css';
@@ -73,42 +73,19 @@ wp.element.createPortal = createPortal;
 wp.i18n.__ = __ || {};
 wp.i18n.setLocaleData = setLocaleData || {};
 wp.i18n.sprintf = sprintf || {};
-window.wp = window.wp || wp;
-window.React = React;
-window.lodash = lodash;
-window.googlesitekit = window.googlesitekit || googlesitekit;
-window.googlesitekit.setup = window.googlesitekit.setup || googlesitekit.setup;
-window.googlesitekit.admin = window.googlesitekit.admin || googlesitekit.admin;
-window.googlesitekit.modules = window.googlesitekit.modules || googlesitekit.modules;
-window.googlesitekit.admin.assetsRoot = '/assets/';
-window.googlesitekit.isStorybook = true;
-window._googlesitekitBase = {
+global.wp = global.wp || wp;
+global.React = React;
+global.lodash = lodash;
+global.googlesitekit = global.googlesitekit || googlesitekit;
+global.googlesitekit.setup = global.googlesitekit.setup || googlesitekit.setup;
+global.googlesitekit.admin = global.googlesitekit.admin || googlesitekit.admin;
+global.googlesitekit.modules = global.googlesitekit.modules || googlesitekit.modules;
+global.googlesitekit.admin.assetsRoot = '/assets/';
+global.googlesitekit.isStorybook = true;
+global._googlesitekitBase = {
 	basePrefix: 'wp_',
 	splashURL: 'http://localhost/wp-admin/admin.php?page=googlesitekit-splash',
 };
-window.wp.apiFetch = ( vars ) => {
-	const { modules } = window.googlesitekit;
-	const match = vars.path.match( /google-site-kit\/v1\/modules\/([\w-]+)\/data\/([\w-]+)/ );
-
-	if ( match && match[ 1 ] && match[ 2 ] ) {
-		const [ , identifier, datapoint ] = match;
-
-		if ( identifier && datapoint && modules[ identifier ] && modules[ identifier ][ datapoint ] ) {
-			return Promise.resolve( modules[ identifier ][ datapoint ] );
-		}
-	}
-
-	// eslint-disable-next-line no-console
-	console.warn( 'apiFetch', vars );
-
-	return {
-		then: () => {
-			return {
-				catch: () => false,
-			};
-		},
-	};
-};
 
 // Global Decorator.
 addDecorator( ( story ) => <div className="googlesitekit-plugin-preview">

.storybook/webpack.config.js

@@ -1,27 +1,47 @@
 const path = require( 'path' );
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 
 module.exports = async ( { config } ) => {
 	config.resolve = {
 		...config.resolve,
 		alias: {
 			...config.resolve.alias,
+			'@wordpress/api-fetch$': path.resolve( __dirname, 'wp-api-fetch-mock.js' ),
 			SiteKitCore: path.resolve( __dirname, '../assets/js/' ),
 			GoogleComponents: path.resolve( __dirname, '../assets/js/components/' ),
 			GoogleUtil: path.resolve( __dirname, '../assets/js/util/' ),
 			GoogleModules: path.resolve( __dirname, '../assets/js/modules/' ),
 		},
 	};
 
+	config.plugins = [
+		...config.plugins,
+		new MiniCssExtractPlugin(),
+	];
+
+	config.module.rules.push(
+		{
+			test: /\.scss$/,
+			use: [
+				MiniCssExtractPlugin.loader,
+				'css-loader',
+				'postcss-loader',
+				{
+					loader: 'sass-loader',
+					options: {
+						includePaths: [ path.resolve( __dirname, '../node_modules/' ) ],
+					},
+				},
+			],
+		},
+	);
+
 	config.module.rules.push(
 		{
 			test: /\.(png|woff|woff2|eot|ttf|svg|gif)$/,
 			use: { loader: 'url-loader?limit=100000' },
 		}
 	);
 
-	config.externals = {
-		'@wordpress/api-fetch': [ 'wp', 'apiFetch' ],
-	};
-
 	return config;
 };

.storybook/wp-api-fetch-mock.js

@@ -0,0 +1,23 @@
+export default ( vars ) => {
+	const { modules } = global.googlesitekit;
+	const match = vars.path.match( /google-site-kit\/v1\/modules\/([\w-]+)\/data\/([\w-]+)/ );
+
+	if ( match && match[ 1 ] && match[ 2 ] ) {
+		const [ , identifier, datapoint ] = match;
+
+		if ( identifier && datapoint && modules[ identifier ] && modules[ identifier ][ datapoint ] ) {
+			return Promise.resolve( modules[ identifier ][ datapoint ] );
+		}
+	}
+
+	// eslint-disable-next-line no-console
+	console.warn( 'apiFetch', vars );
+
+	return {
+		then: () => {
+			return {
+				catch: () => false,
+			};
+		},
+	};
+};

.travis.yml

@@ -39,7 +39,7 @@ branches:
 # Before install, failures in this section will result in build status 'errored'
 before_install:
   - |
-    if [[ "$JS" == "1" ]] || [[ "$E2E" == "1" ]] || [[ "$SNIFF" == "1" ]]; then
+    if [[ "$JS" == "1" ]] || [[ "$VRT" == "1" ]] || [[ "$E2E" == "1" ]] || [[ "$SNIFF" == "1" ]]; then
       nvm install
       npm ci
     fi
@@ -48,7 +48,7 @@ before_install:
       docker run --rm -v "$PWD:/app" -v "$HOME/.cache/composer:/tmp/cache" composer install
     fi
   - |
-    if [[ "$JS" == "1" ]]; then
+    if [[ "$VRT" == "1" ]]; then
       docker run --rm -v "$PWD:/app" -v "$HOME/.cache/composer:/tmp/cache" composer install --no-scripts
     fi
   - |
@@ -74,18 +74,20 @@ script:
     fi
   - |
     if [[ "$JS" == "1" ]]; then
-      npm run build || exit 1 # Build for tests.
       npm run test:js || exit 1 # JS unit tests
       npm run test || exit 1 # Bundle size test
-      travis_retry npm run travis:visualtest || exit 1 # Visual regression tests
+    fi
+  - |
+    if [[ "$VRT" == "1" ]]; then
+      travis_retry npm run travis:visualtest || exit 1
     fi
   - |
     if [[ "$PHP" == "1" ]]; then
       composer test || exit 1
     fi
   - |
     if [[ "$E2E" == "1" ]]; then
-      npm run build || exit 1 # Build for tests.
+      npm run build:test || exit 1 # Build for tests.
       npm run env:start || exit 1
       npm run test:e2e:ci || exit 1 # E2E tests.
     fi
@@ -106,10 +108,12 @@ jobs:
       env: WP_VERSION=latest PHP=1
     - name: PHP Tests (PHP 7.4, WordPress Multisite latest)
       php: 7.4
-      env: WP_VERSION=latest WP_MULTISITE=1 PHP=1 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+      env: WP_VERSION=latest WP_MULTISITE=1 PHP=1
     - name: JS Tests
       php: 7.4
-      env: WP_VERSION=latest JS=1
+      env: WP_VERSION=latest JS=1 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+    - name: Visual Regression
+      env: VRT=1
     - name: PHP Tests (PHP nightly, WordPress trunk)
       stage: test
       php: nightly

assets/js/ads.js

@@ -5,7 +5,10 @@
  * If the file does load, `googlesitekit.canAdsRun` is set to true.
  */
 
-global.googlesitekit = global.googlesitekit || {};
+if ( global.googlesitekit === undefined ) {
+	global.googlesitekit = {};
+}
+
 global.googlesitekit.canAdsRun = true;
 
 // Ensure that this flag does not get wiped at a later stage during pageload.

assets/js/api-fetch-shim.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch__non-shim';
+
+if ( global._googlesitekitAPIFetchData ) {
+	if ( global._googlesitekitAPIFetchData.rootURL ) {
+		apiFetch.use( apiFetch.createRootURLMiddleware( global._googlesitekitAPIFetchData.rootURL ) );
+	}
+
+	if ( global._googlesitekitAPIFetchData.nonceMiddleware ) {
+		apiFetch.nonceMiddleware = apiFetch.createNonceMiddleware();
+		apiFetch.use( apiFetch.createNonceMiddleware( global._googlesitekitAPIFetchData.nonceMiddleware ) );
+		apiFetch.use( apiFetch.mediaUploadMiddleware );
+		apiFetch.nonceEndpoint = global._googlesitekitAPIFetchData.nonceEndpoint;
+	}
+}
+
+export * from '@wordpress/api-fetch__non-shim';
+
+export default apiFetch;