Update build tools (#1674)

Along with adding linting tools, commit also introduces the following changes:
- Adds our suite of tooling for code styling/linting and closes #1656
- Updates the license information which closes #1669
- Adds browserlist config instead of defining manually which closes #1497
- Removes grunt and uses npm instead for building which closes #1433
- Moving away from grunt has fixed #1662

.browserslistrc

@@ -1,5 +1 @@
-# Browsers that we support
+extends @wordpress/browserslist-config
-
-> 0.1%
-ie 8
-ie 9

.editorconfig

@@ -18,7 +18,10 @@ trim_trailing_whitespace = true
 [*.txt]
 trim_trailing_whitespace = false
 
-[*.{md,json,yml}]
+[*.{md,yml}]
 trim_trailing_whitespace = false
 indent_style = space
 indent_size = 2
+
+[*.json]
+indent_style = tab

.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+	extends: [ 'plugin:@woocommerce/eslint-plugin/recommended' ],
+	globals: {
+		jQuery: 'readonly',
+	},
+	settings: {},
+	rules: {
+		'woocommerce/feature-flag': 'off',
+		'@wordpress/no-global-active-element': 'warn',
+	},
+	ignorePatterns: [ '**/*.min.js' ],
+};

.gitattributes

@@ -0,0 +1,14 @@
+.* export-ignore
+/e2e export-ignore
+composer.json export-ignore
+composer.lock export-ignore
+package.json export-ignore
+package-lock.json export-ignore
+phpcs.xml export-ignore
+phpunit.xml export-ignore
+README.md export-ignore
+CONTRIBUTING.md export-ignore
+STOREFRONT_STATUS.md export-ignore
+renovate.json export-ignore
+node_modules export-ignore
+*.scss export-ignore

.github/workflows/approved-with-labels.yml

@@ -0,0 +1,14 @@
+on: pull_request_review
+name: Add Labels to Approved Pull Requests
+jobs:
+  labelWhenApproved:
+    name: Label when approved
+    runs-on: ubuntu-latest
+    steps:
+    - name: Label when approved
+      uses: pullreminders/label-when-approved-action@master
+      env:
+        APPROVALS: "1"
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        ADD_LABEL: "status: ready to merge"
+        REMOVE_LABEL: "status:%20needs%20review"

.github/workflows/e2e-tests.yml

@@ -0,0 +1,51 @@
+name: End-to-End Tests
+
+on:
+    push:
+        branches: [trunk]
+    pull_request:
+jobs:
+    Setup:
+        name: Setup
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - name: Cache node modules
+              uses: actions/cache@v2
+              env:
+                  cache-name: cache-node-modules
+              with:
+                  # npm cache files are stored in `~/.npm` on Linux/macOS
+                  path: ~/.npm
+                  key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+                  restore-keys: |
+                      ${{ runner.os }}-build-${{ env.cache-name }}-
+                      ${{ runner.os }}-build-
+                      ${{ runner.os }}-
+
+            - name: Use Node.js 14.x
+              uses: actions/setup-node@v1
+              with:
+                  node-version: 14.x
+
+            - name: Npm install and build
+              run: |
+                  npm ci
+                  npm run build
+
+            - name: Install WordPress
+              run: |
+                  chmod -R 767 ./ # TODO: Possibly integrate in wp-env
+                  npm run wp-env start
+                  npm run wp-env run tests-cli wp theme activate storefront
+
+            - name: Running the tests
+              run: |
+                  npm run test:e2e
+
+            - name: Archive debug artifacts (screenshots, HTML snapshots)
+              uses: actions/upload-artifact@v2
+              if: always()
+              with:
+                  name: failures-artifacts
+                  path: artifacts

.github/workflows/js-css-linting.yml

@@ -0,0 +1,79 @@
+name: JavaScript and CSS Linting
+
+on:
+  pull_request:
+  push:
+    branches: [trunk]
+
+jobs:
+  Setup:
+    name: Setup for Jobs
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cache node modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-build-${{ env.cache-name }}-
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+      - name: Install Node Dependencies
+        run: npm install
+
+  JSLintingCheck:
+    name: Lint JavaScript
+    needs: Setup
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cache node modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-build-${{ env.cache-name }}-
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+      - name: Install Node Dependencies
+        run: npm install
+      - name: Save Code Linting Report JSON
+        run: npm run lint:js:report
+        # Continue to the next step even if this fails
+        continue-on-error: true
+      - name: Upload ESLint report
+        uses: actions/upload-artifact@v2
+        with:
+          name: eslint_report.json
+          path: eslint_report.json
+      - name: Annotate Code Linting Results
+        uses: ataylorme/eslint-annotate-action@1.2.0
+        with:
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          report-json: "eslint_report.json"
+
+  CSSLintingCheck:
+    name: Lint CSS
+    needs: Setup
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cache node modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-build-${{ env.cache-name }}-
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+      - name: Install Node Dependencies
+        run: npm install
+      - name: Lint CSS
+        run: npm run lint:css

.github/workflows/php-coding-standards.yml

@@ -0,0 +1,63 @@
+name: PHP Coding Standards
+
+on:
+    push:
+        branches:
+            - trunk
+    pull_request:
+
+jobs:
+    # Runs PHP coding standards checks.
+    # Note: Inspired by https://github.com/WordPress/wordpress-develop/blob/master/.github/workflows/coding-standards.yml
+    #
+    # Violations are reported inline with annotations.
+    #
+    # Performs the following steps:
+    # - Checks out the repository.
+    # - Configures caching for Composer.
+    # - Sets up PHP.
+    # - Logs debug information.
+    # - Installs Composer dependencies (from cache if possible).
+    # - Logs PHP_CodeSniffer debug information.
+    # - Runs PHPCS on the full codebase with warnings suppressed.
+    # - todo: Configure Slack notifications for failing scans.
+    phpcs:
+        name: PHP coding standards
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v2
+
+            - name: Get Composer cache directory
+              id: composer-cache
+              run: echo "::set-output name=dir::$(composer config cache-files-dir)"
+
+            - name: Set up Composer caching
+              uses: actions/cache@v2
+              env:
+                  cache-name: cache-composer-dependencies
+              with:
+                  path: ${{ steps.composer-cache.outputs.dir }}
+                  key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
+                  restore-keys: |
+                      ${{ runner.os }}-composer-
+            - name: Set up PHP
+              uses: shivammathur/setup-php@v2
+              with:
+                  php-version: '7.4'
+                  coverage: none
+                  tools: composer, cs2pr
+
+            - name: Log debug information
+              run: |
+                  php --version
+                  composer --version
+            - name: Install Composer dependencies
+              run: |
+                  composer install --prefer-dist --no-suggest --no-progress --no-ansi --no-interaction
+                  echo "${PWD}/vendor/bin" >> $GITHUB_PATH
+            - name: Log PHPCS debug information
+              run: phpcs -i
+
+            - name: Run PHPCS on all files
+              run: phpcs ./inc -q -n --report=checkstyle | cs2pr

.gitignore

@@ -8,10 +8,8 @@
 
 # Sass
 .sass-cache
-
+node_modules
-# Grunt
+storefront
-/node_modules/
-/storefront/
 storefront.zip
 npm-debug.log
 
@@ -30,4 +28,4 @@ config.codekit
 .DS_Store
 
 # Composer
-/vendor
+vendor

.jshintrc

@@ -1,24 +0,0 @@
-{
-	"boss": true,
-	"curly": true,
-	"eqeqeq": true,
-	"eqnull": true,
-	"es3": true,
-	"expr": true,
-	"immed": true,
-	"noarg": true,
-	"onevar": true,
-	"quotmark": "single",
-	"trailing": true,
-	"undef": true,
-	"unused": true,
-
-	"browser": true,
-
-	"globals": {
-		"_": false,
-		"Backbone": false,
-		"jQuery": false,
-		"wp": false
-	}
-}

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require( '@wordpress/prettier-config' );

.stylelintignore

@@ -0,0 +1,2 @@
+assets/css/sass/vendors/**
+*.js

.stylelintrc

@@ -1,14 +0,0 @@
-{
-    "extends": [
-        "stylelint-config-wordpress/scss"
-    ],
-    "rules": {
-        "font-family-no-missing-generic-family-keyword": null,
-        "no-descending-specificity": null,
-        "no-duplicate-selectors": null,
-        "selector-class-pattern": null,
-        "value-keyword-case": null,
-        "scss/selector-no-redundant-nesting-selector": null,
-        "selector-id-pattern": null
-    }
-}

.stylelintrc.json

@@ -0,0 +1,19 @@
+{
+	"extends": "@wordpress/stylelint-config",
+	"rules": {
+		"at-rule-empty-line-before": null,
+		"at-rule-no-unknown": null,
+		"comment-empty-line-before": null,
+		"declaration-block-no-duplicate-properties": null,
+		"declaration-property-unit-allowed-list": null,
+		"font-weight-notation": null,
+		"max-line-length": null,
+		"no-descending-specificity": null,
+		"no-duplicate-selectors": null,
+		"rule-empty-line-before": null,
+		"selector-class-pattern": null,
+		"value-keyword-case": null,
+		"font-family-no-missing-generic-family-keyword": null,
+		"selector-id-pattern": null
+	}
+}

.travis.yml

@@ -1,18 +0,0 @@
-language: generic
-
-services:
-    - docker
-
-before_install:
-    - nvm install --lts
-
-install:
-    - npm install
-    - composer install
-
-jobs:
-    include:
-        - name: End-to-end (e2e) tests
-          script:
-            - npm run build
-            - npm run e2e:ci

CONTRIBUTING.md

@@ -4,14 +4,15 @@ Community made patches, localizations, bug reports and contributions are always
 
 When contributing please ensure you follow the guidelines below to help us keep on top of things.
 
-__Please Note:__
+**Please Note:**
 
-GitHub is for *bug reports and contributions only* - if you have a support question or a request for a customization this is not the right place to post it. Use [WooThemes Support](https://support.woothemes.com) for customer support, [WordPress.org](http://wordpress.org/support/themes/storefront) for community support, and for customizations we recommend one of the following services:
+GitHub is for _bug reports and contributions only_ - if you have a support question or a request for a customization this is not the right place to post it. Use [WooThemes Support](https://support.woothemes.com) for customer support, [WordPress.org](http://wordpress.org/support/themes/storefront) for community support, and for customizations we recommend one of the following services:
 
-- [Woo Experts](https://woocommerce.com/experts/)
+-   [Woo Experts](https://woocommerce.com/experts/)
-- [Codeable](https://codeable.io/)
+-   [Codeable](https://codeable.io/)
 
 ## Storefront Status
+
 Please read [this document](./STOREFRONT_STATUS.md) explaining the current status of Storefront development.
 
 ## Contributing To The Core
@@ -24,11 +25,11 @@ Reporting issues is a great way to became a contributor as it doesn't require te
 
 If something isn't working, congratulations you've found a bug! Help us fix it by submitting an issue report:
 
-* Make sure you have a [GitHub account](https://github.com/signup/free)
+-   Make sure you have a [GitHub account](https://github.com/signup/free)
-* Search the [Existing Issues](https://github.com/woothemes/storefront/issues) to be sure that the one you've noticed isn't already there
+-   Search the [Existing Issues](https://github.com/woothemes/storefront/issues) to be sure that the one you've noticed isn't already there
-* Submit a report for your issue
+-   Submit a report for your issue
-  * Clearly describe the issue (including steps to reproduce it if it's a bug)
+    -   Clearly describe the issue (including steps to reproduce it if it's a bug)
-  * Make sure you fill in the earliest version that you know has the issue.
+    -   Make sure you fill in the earliest version that you know has the issue.
 
 ### Making Changes
 
@@ -37,14 +38,15 @@ Making changes to the core is a key way to help us improve Storefront. You will
 If you think something could be improved and you're able to do so, make your changes and submit a Pull Request. We'll be pleased to get it :)
 
 #### Set up your development environment
-Storefront utilises technologies such as [Grunt](http://gruntjs.com/), [Sass](http://sass-lang.com/), [Bourbon](http://bourbon.io/) and [Susy](http://susy.oddbird.net/) to standardise and speed up development. You should familiarise yourself with each before contributing. To get started with your Storefront development environment:
 
-* Install [Node.js](https://nodejs.org/en/) with NPM, its package manager.
+To get started with your Storefront development environment:
-* Install [Composer](https://getcomposer.org), a PHP dependency manager.
+
-* [Fork](https://help.github.com/articles/fork-a-repo/) the [Storefront repository](https://github.com/woothemes/storefront) on GitHub.
+-   Install [Node.js](https://nodejs.org/en/) with NPM, its package manager.
-* Pull the Storefront project dependencies into your environment by navigating to your `/storefront/` directory in Terminal then run `npm install`.
+-   Install [Composer](https://getcomposer.org), a PHP dependency manager.
-* Run `composer install` to set up PHP dependencies.
+-   [Fork](https://help.github.com/articles/fork-a-repo/) the [Storefront repository](https://github.com/woothemes/storefront) on GitHub.
-* Run Grunt jobs with the command `npm run build`. This will create local copies of Storefront css (we do not version control the .css files) and minify them and JS scripts.
+-   Pull the Storefront project dependencies into your environment by navigating to your `/storefront/` directory in Terminal then run `npm install`.
+-   Run `composer install` to set up PHP dependencies.
+-   Run the build script the command `npm run build`. This will create local copies of Storefront css (we do not version control the .css files) and minify those and the JS scripts.
 
 You're now ready to go! You can now activate Storefront in your WordPress install and begin making changes.
 
@@ -52,35 +54,34 @@ You're now ready to go! You can now activate Storefront in your WordPress instal
 
 There are two ways to do this. See NPM commands below for more info about what commands are available.
 
-- `npm start` (recommended)
+-   `npm start` (recommended)
-- manually build using `npm build`, `npm build:dev` or `npm run css`
+-   Manually build using `npm run build`
 
 ##### NPM commands
 
 Storefront has npm commands configured for essential development & release tasks:
 
-- `npm run build:dev`: Builds a development version of the theme.
+-   `npm run build:dev`: Builds files. Does not create a release archive.
-- `npm start`: Watches for changes to source files and continuously builds a development version.
+-   `npm start`: Watches for changes to source files and continuously builds a development version.
-- `npm run build`: Builds a production version of the theme.
+-   `npm run build`: Builds a production version of the theme and creates a release archive.
 
 There are some other commands which may be used occasionally:
 
-- `npm run css`: Runs the css build step only.
+-   `npm run build:css`: Runs the css build step only.
-- `npm run lint:php`: Checks PHP source files against the PHP coding standards.
+-   `npm run build:js`: Runs the JS build step only.
-- `npm run lint:php:fix`: Automatically fix PHP standards issues (if possible).
+-   `npm run lint`: Checks source files against the PHP coding standards.
-- `npm run wp-env`: Provides access to a [wp-env development environment](https://developer.wordpress.org/block-editor/packages/packages-env/). This can be used for testing theme changes locally, or running e2e tests.
+-   `npm run wp-env`: Provides access to a [wp-env development environment](https://developer.wordpress.org/block-editor/packages/packages-env/). This can be used for testing theme changes locally, or running e2e tests.
-- `npm run e2e`: Runs the end-to-end tests. Requries that the e2e environment is started (currently using wp-env).
+-   `npm run test:e2e`: Runs the end-to-end tests. Requires that the e2e environment is started (currently using wp-env).
-- `npm run e2e:ci`: Starts `wp-env` and runs the end-to-end tests (typically used in ci contexts).
 
 #### How To Submit A PR
 
-* Make the changes to your forked repository
+-   Make the changes to your forked repository
-  * **Ensure you stick to the WordPress Coding Standards for [PHP](http://make.wordpress.org/core/handbook/coding-standards/php/), [CSS](https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/) and [Javascript](https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/).**
+    -   **Ensure you stick to the WordPress Coding Standards for [PHP](http://make.wordpress.org/core/handbook/coding-standards/php/), [CSS](https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/) and [Javascript](https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/).**
-  * Ensure you use LF line endings - no crazy Windows line endings please :)
+    -   Ensure you use LF line endings - no crazy Windows line endings please :)
-* When committing, reference your issue number (#1234) and include a note about the fix
+-   When committing, reference your issue number (#1234) and include a note about the fix
-* Push the changes to your fork and submit a pull request on the master branch of the Storefront repository.
+-   Push the changes to your fork and submit a pull request on the master branch of the Storefront repository.
-* Please **don't** modify the changelog - this will be maintained by the Storefront developers.
+-   Please **don't** modify the changelog - this will be maintained by the Storefront developers.
-* Please **don't** add your localizations or update the .pot files - these will also be maintained by the Storefront developers. To contribute to the localization of Storefront, please join the [translate.wordpress.org project](https://translate.wordpress.org/projects/wp-themes/storefront). This is much needed, if you speak a language that needs translating consider yourself officially invited to the party.
+-   Please **don't** add your localizations or update the .pot files - these will also be maintained by the Storefront developers. To contribute to the localization of Storefront, please join the [translate.wordpress.org project](https://translate.wordpress.org/projects/wp-themes/storefront). This is much needed, if you speak a language that needs translating consider yourself officially invited to the party.
 
 After you follow the step above, the next stage will be waiting on us to merge your Pull Request. We review them all, and make suggestions and changes as and if necessary.
 
@@ -94,5 +95,5 @@ If Storefront is already 100% translated for your language, join the team anyway
 
 # Additional Resources
 
-* [General GitHub documentation](http://help.github.com/)
+-   [General GitHub documentation](http://help.github.com/)
-* [GitHub pull request documentation](http://help.github.com/send-pull-requests/)
+-   [GitHub pull request documentation](http://help.github.com/send-pull-requests/)

Gruntfile.js

@@ -1,494 +0,0 @@
-/* jshint node:true */
-module.exports = function( grunt ) {
-	'use strict';
-
-	var sass = require( 'node-sass' );
-
-	var processors = [ require( 'autoprefixer' )() ];
-	if ( grunt.option('env') === 'production' ) {
-		processors.push( require( 'cssnano' )() );
-	}
-
-	grunt.initConfig({
-
-		// Autoprefixer.
-		postcss: {
-			options: {
-				processors: processors
-			},
-			dist: {
-				src: [
-					'style.css',
-					'assets/css/admin/*.css',
-					'assets/css/admin/welcome-screen/welcome.css',
-					'assets/css/admin/customizer/customizer.css',
-					'assets/css/woocommerce/extensions/*.css',
-					'assets/css/woocommerce/woocommerce.css',
-					'assets/css/woocommerce/woocommerce-legacy.css',
-					'assets/css/jetpack/infinite-scroll.css',
-					'assets/css/jetpack/widgets.css',
-					'assets/css/base/*.css'
-				]
-			}
-		},
-
-		// JavaScript linting with JSHint.
-		jshint: {
-			options: {
-				jshintrc: '.jshintrc'
-			},
-			all: [
-				'Gruntfile.js',
-				'assets/js/*.js',
-				'!assets/js/*.min.js',
-				'assets/js/admin/*.js',
-				'!assets/js/admin/*.min.js',
-				'assets/js/woocommerce/*.js',
-				'!assets/js/woocommerce/*.min.js',
-				'assets/js/woocommerce/extensions/*.js',
-				'!assets/js/woocommerce/extensions/*.min.js'
-			]
-		},
-
-		// Sass linting with Stylelint.
-		stylelint: {
-			options: {
-				configFile: '.stylelintrc'
-			},
-			all: [
-				'assets/css/**/*.scss',
-				'!assets/css/sass/vendors/**/*.scss'
-			]
-		},
-
-		// Minify .js files.
-		uglify: {
-			options: {
-				output: {
-					comments: 'some'
-				}
-			},
-			main: {
-				files: [{
-					expand: true,
-					cwd: 'assets/js/',
-					src: [
-						'*.js',
-						'!*.min.js'
-					],
-					dest: 'assets/js/',
-					ext: '.min.js'
-				}]
-			},
-			vendor: {
-				files: [{
-					expand: true,
-					cwd: 'assets/js/vendor/',
-					src: [
-						'*.js',
-						'!*.min.js'
-					],
-					dest: 'assets/js/vendor/',
-					ext: '.min.js'
-				}]
-			},
-			woocommerce: {
-				files: [{
-					expand: true,
-					cwd: 'assets/js/woocommerce/',
-					src: [
-						'*.js',
-						'!*.min.js'
-					],
-					dest: 'assets/js/woocommerce/',
-					ext: '.min.js'
-				}]
-			},
-			extensions: {
-				files: [{
-					expand: true,
-					cwd: 'assets/js/woocommerce/extensions/',
-					src: [
-						'*.js',
-						'!*.min.js'
-					],
-					dest: 'assets/js/woocommerce/extensions/',
-					ext: '.min.js'
-				}]
-			},
-			admin: {
-				files: [{
-					expand: true,
-					cwd: 'assets/js/admin/',
-					src: [
-						'*.js',
-						'!*.min.js'
-					],
-					dest: 'assets/js/admin/',
-					ext: '.min.js'
-				}]
-			}
-		},
-
-		// Compile all .scss files.
-		sass: {
-			dist: {
-				options: {
-					implementation: sass,
-					require: 'susy',
-					sourceMap: false,
-					includePaths: require( 'bourbon' ).includePaths
-				},
-				files: [{
-					'style.css': 'style.scss',
-					'assets/css/admin/admin.css': 'assets/css/admin/admin.scss',
-					'assets/css/admin/plugin-install.css': 'assets/css/admin/plugin-install.scss',
-					'assets/css/admin/welcome-screen/welcome.css': 'assets/css/admin/welcome-screen/welcome.scss',
-					'assets/css/admin/customizer/customizer.css': 'assets/css/admin/customizer/customizer.scss',
-					'assets/css/woocommerce/extensions/bookings.css': 'assets/css/woocommerce/extensions/bookings.scss',
-					'assets/css/woocommerce/extensions/brands.css': 'assets/css/woocommerce/extensions/brands.scss',
-					'assets/css/woocommerce/extensions/wishlists.css': 'assets/css/woocommerce/extensions/wishlists.scss',
-					'assets/css/woocommerce/extensions/ajax-layered-nav.css': 'assets/css/woocommerce/extensions/ajax-layered-nav.scss',
-					'assets/css/woocommerce/extensions/variation-swatches.css': 'assets/css/woocommerce/extensions/variation-swatches.scss',
-					'assets/css/woocommerce/extensions/composite-products.css': 'assets/css/woocommerce/extensions/composite-products.scss',
-					'assets/css/woocommerce/extensions/photography.css': 'assets/css/woocommerce/extensions/photography.scss',
-					'assets/css/woocommerce/extensions/product-reviews-pro.css': 'assets/css/woocommerce/extensions/product-reviews-pro.scss',
-					'assets/css/woocommerce/extensions/smart-coupons.css': 'assets/css/woocommerce/extensions/smart-coupons.scss',
-					'assets/css/woocommerce/extensions/deposits.css': 'assets/css/woocommerce/extensions/deposits.scss',
-					'assets/css/woocommerce/extensions/bundles.css': 'assets/css/woocommerce/extensions/bundles.scss',
-					'assets/css/woocommerce/extensions/ship-multiple-addresses.css': 'assets/css/woocommerce/extensions/ship-multiple-addresses.scss',
-					'assets/css/woocommerce/extensions/advanced-product-labels.css': 'assets/css/woocommerce/extensions/advanced-product-labels.scss',
-					'assets/css/woocommerce/extensions/mix-and-match.css': 'assets/css/woocommerce/extensions/mix-and-match.scss',
-					'assets/css/woocommerce/extensions/memberships.css': 'assets/css/woocommerce/extensions/memberships.scss',
-					'assets/css/woocommerce/extensions/quick-view.css': 'assets/css/woocommerce/extensions/quick-view.scss',
-					'assets/css/woocommerce/extensions/product-recommendations.css': 'assets/css/woocommerce/extensions/product-recommendations.scss',
-					'assets/css/woocommerce/woocommerce.css': 'assets/css/woocommerce/woocommerce.scss',
-					'assets/css/woocommerce/woocommerce-legacy.css': 'assets/css/woocommerce/woocommerce-legacy.scss',
-					'assets/css/jetpack/infinite-scroll.css': 'assets/css/jetpack/infinite-scroll.scss',
-					'assets/css/jetpack/widgets.css': 'assets/css/jetpack/widgets.scss',
-					'assets/css/base/icons.css': 'assets/css/base/icons.scss',
-					'assets/css/base/gutenberg-blocks.css': 'assets/css/base/gutenberg-blocks.scss',
-					'assets/css/base/gutenberg-editor.css': 'assets/css/base/gutenberg-editor.scss'
-				}]
-			}
-		},
-
-		// Minify all .css files.
-		cssmin: {
-			admin: {
-				expand: true,
-				cwd: 'assets/css/admin/',
-				src: ['*.css'],
-				dest: 'assets/css/admin/',
-				ext: '.css'
-			},
-			welcome: {
-				expand: true,
-				cwd: 'assets/css/admin/welcome-screen/',
-				src: ['*.css'],
-				dest: 'assets/css/admin/welcome-screen/',
-				ext: '.css'
-			},
-			customizer: {
-				expand: true,
-				cwd: 'assets/css/admin/customizer/',
-				src: ['*.css'],
-				dest: 'assets/css/admin/customizer/',
-				ext: '.css'
-			}
-		},
-
-		// Watch changes for assets.
-		watch: {
-			css: {
-				files: [
-					'style.scss',
-					'assets/css/admin/welcome-screen/*.scss',
-					'assets/css/woocommerce/*.scss',
-					'assets/css/woocommerce/extensions/*.scss',
-					'assets/css/jetpack/*.scss',
-					'assets/css/base/*.scss',
-					'assets/css/components/*.scss',
-					'assets/css/sass/utils/*.scss',
-					'assets/css/sass/vendors/*.scss'
-				],
-				tasks: [
-					'sass',
-					'css'
-				]
-			},
-			js: {
-				files: [
-					// main js
-					'assets/js/**/*.js',
-					'!assets/js/**/*.min.js',
-
-					// customizer js
-					'assets/js/customizer/**/*.js',
-					'!assets/js/customizer/**/*..min.js',
-
-					// WooCommerce js
-					'assets/js/woocommerce/**/*.js',
-					'!assets/js/woocommerce/**/*.min.js',
-
-					// Extensions js
-					'assets/js/woocommerce/extensions/**/*.js',
-					'!assets/js/woocommerce/extensions/**/*.min.js',
-
-					// Welcome screen js
-					'assets/js/admin/welcome-screen/**/*.js',
-					'!assets/js/admin/welcome-screen/**/*.min.js'
-				],
-				tasks: [
-					'jshint',
-					'uglify'
-				]
-			}
-		},
-
-		// Generate POT files.
-		makepot: {
-			options: {
-				type: 'wp-theme',
-				domainPath: 'languages',
-				potHeaders: {
-					'report-msgid-bugs-to': 'https://github.com/woothemes/storefront/issues',
-					'language-team': 'LANGUAGE <EMAIL@ADDRESS>'
-				}
-			},
-			frontend: {
-				options: {
-					potFilename: 'storefront.pot',
-					exclude: [
-						'storefront/.*' // Exclude deploy directory
-					]
-				}
-			}
-		},
-
-		// Check textdomain errors.
-		checktextdomain: {
-			options:{
-				text_domain: 'storefront',
-				keywords: [
-					'__:1,2d',
-					'_e:1,2d',
-					'_x:1,2c,3d',
-					'esc_html__:1,2d',
-					'esc_html_e:1,2d',
-					'esc_html_x:1,2c,3d',
-					'esc_attr__:1,2d',
-					'esc_attr_e:1,2d',
-					'esc_attr_x:1,2c,3d',
-					'_ex:1,2c,3d',
-					'_n:1,2,4d',
-					'_nx:1,2,4c,5d',
-					'_n_noop:1,2,3d',
-					'_nx_noop:1,2,3c,4d'
-				]
-			},
-			files: {
-				src:  [
-					'**/*.php', // Include all files
-					'!node_modules/**' // Exclude node_modules/
-				],
-				expand: true
-			}
-		},
-
-		// Creates deploy-able theme
-		copy: {
-			deploy: {
-				src: [
-					'**',
-					'.htaccess',
-					'!.*',
-					'!.*/**',
-					'!*.md',
-					'!*.scss',
-					'!.DS_Store',
-					'!assets/css/**/*.scss',
-					'!assets/css/sass/**',
-					'!assets/js/src/**',
-					'!composer.json',
-					'!composer.lock',
-					'!Gruntfile.js',
-					'!node_modules/**',
-					'!npm-debug.log',
-					'!package.json',
-					'!package-lock.json',
-					'!phpcs.xml',
-					'!storefront/**',
-					'!storefront.zip',
-					'!vendor/**'
-				],
-				dest: 'storefront',
-				expand: true,
-				dot: true
-			}
-		},
-
-		// RTLCSS
-		rtlcss: {
-			main: {
-				options: {
-					plugins: [
-						{
-							name: 'swap-fontawesome-directional-icons',
-							priority: 10,
-							directives: {
-								control: {},
-								value: []
-							},
-							processors: [
-								{
-									expr: /content/im,
-									action: function( prop, value ) {
-										if ( value === '"\\f190"' ) { // arrow-circle-o-left
-											value = '"\\f18e"';
-										} else if ( value === '"\\f18e"' ) { // arrow-circle-o-right
-											value = '"\\f190"';
-										} else if ( value === '"\\f191"' ) { // caret-square-o-left
-											value = '"\\f152"';
-										} else if ( value === '"\\f152"' ) { // caret-square-o-right
-											value = '"\\f191"';
-										} else if ( value === '"\\f100"' ) { // angle-double-left
-											value = '"\\f101"';
-										} else if ( value === '"\\f101"' ) { // angle-double-right
-											value = '"\\f100"';
-										} else if ( value === '"\\f104"' ) { // angle-left
-											value = '"\\f105"';
-										} else if ( value === '"\\f105"' ) { // angle-right
-											value = '"\\f104"';
-										} else if ( value === '"\\f0a8"' ) { // arrow-circle-left
-											value = '"\\f0a9"';
-										} else if ( value === '"\\f0a9"' ) { // arrow-circle-right
-											value = '"\\f0a8"';
-										} else if ( value === '"\\f060"' ) { // arrow-left
-											value = '"\\f061"';
-										} else if ( value === '"\\f061"' ) { // arrow-right
-											value = '"\\f060"';
-										} else if ( value === '"\\f0d9"' ) { // caret-left
-											value = '"\\f0da"';
-										} else if ( value === '"\\f0da"' ) { // caret-right
-											value = '"\\f0d9"';
-										} else if ( value === '"\\f137"' ) { // chevron-circle-left
-											value = '"\\f138"';
-										} else if ( value === '"\\f138"' ) { // chevron-circle-right
-											value = '"\\f137"';
-										} else if ( value === '"\\f053"' ) { // chevron-left
-											value = '"\\f054"';
-										} else if ( value === '"\\f054"' ) { // chevron-right
-											value = '"\\f053"';
-										} else if ( value === '"\\f0a5"' ) { // hand-o-left
-											value = '"\\f0a4"';
-										} else if ( value === '"\\f0a4"' ) { // hand-o-right
-											value = '"\\f0a5"';
-										} else if ( value === '"\\f177"' ) { // long-arrow-left
-											value = '"\\f178"';
-										} else if ( value === '"\\f178"' ) { // long-arrow-right
-											value = '"\\f177"';
-										} else if ( value === '"\\f191"' ) { // toggle-left
-											value = '"\\f152"';
-										} else if ( value === '"\\f152"' ) { // toggle-right
-											value = '"\\f191"';
-										} else if ( value === '"\\f30b"' ) { // long-arrow-alt-right
-											value = '"\\f30a"';
-										} else if ( value === '"\\f30a"' ) { // long-arrow-alt-left
-											value = '"\\f30b"';
-										}
-										return { prop: prop, value: value };
-									}
-								}
-							]
-						}
-					]
-				},
-				expand: true,
-				ext: '-rtl.css',
-				src: [
-					'style.css',
-					'assets/css/woocommerce/extensions/bookings.css',
-					'assets/css/woocommerce/extensions/brands.css',
-					'assets/css/woocommerce/extensions/wishlists.css',
-					'assets/css/woocommerce/extensions/ajax-layered-nav.css',
-					'assets/css/woocommerce/extensions/variation-swatches.css',
-					'assets/css/woocommerce/extensions/composite-products.css',
-					'assets/css/woocommerce/extensions/photography.css',
-					'assets/css/woocommerce/extensions/product-reviews-pro.css',
-					'assets/css/woocommerce/extensions/smart-coupons.css',
-					'assets/css/woocommerce/extensions/deposits.css',
-					'assets/css/woocommerce/extensions/bundles.css',
-					'assets/css/woocommerce/extensions/ship-multiple-addresses.css',
-					'assets/css/woocommerce/extensions/advanced-product-labels.css',
-					'assets/css/woocommerce/extensions/mix-and-match.css',
-					'assets/css/woocommerce/extensions/memberships.css',
-					'assets/css/woocommerce/extensions/quick-view.css',
-					'assets/css/woocommerce/extensions/product-recommendations.css',
-					'assets/css/woocommerce/woocommerce.css',
-					'assets/css/woocommerce/woocommerce-legacy.css',
-					'assets/css/admin/admin.css',
-					'assets/css/admin/welcome-screen/welcome.css',
-					'assets/css/admin/customizer/customizer.css',
-					'assets/css/jetpack/infinite-scroll.css',
-					'assets/css/jetpack/widgets.css',
-					'assets/css/base/icons.css',
-					'assets/css/base/gutenberg-blocks.css',
-					'assets/css/base/gutenberg-editor.css'
-				]
-			}
-		},
-		compress: {
-			zip: {
-				options: {
-					archive: './storefront.zip',
-					mode: 'zip'
-				},
-				files: [
-					{ src: './storefront/**' }
-				]
-			}
-		}
-	});
-
-	// Load NPM tasks to be used here
-	grunt.loadNpmTasks( 'grunt-contrib-jshint' );
-	grunt.loadNpmTasks( 'grunt-contrib-uglify' );
-	grunt.loadNpmTasks( 'grunt-sass' );
-	grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
-	grunt.loadNpmTasks( 'grunt-contrib-watch' );
-	grunt.loadNpmTasks( 'grunt-wp-i18n' );
-	grunt.loadNpmTasks( 'grunt-checktextdomain' );
-	grunt.loadNpmTasks( 'grunt-contrib-copy' );
-	grunt.loadNpmTasks( 'grunt-rtlcss' );
-	grunt.loadNpmTasks( '@lodder/grunt-postcss' );
-	grunt.loadNpmTasks( 'grunt-contrib-compress' );
-	grunt.loadNpmTasks( 'grunt-stylelint' );
-
-
-	// Register tasks
-	grunt.registerTask( 'default', [
-		'css',
-		'jshint',
-		'uglify'
-	]);
-
-	grunt.registerTask( 'css', [
-		'stylelint',
-		'sass',
-		'postcss',
-		'cssmin',
-		'rtlcss'
-	]);
-
-	grunt.registerTask( 'dev', [
-		'default',
-		'makepot'
-	]);
-
-	grunt.registerTask( 'deploy', [
-		'dev',
-		'copy',
-		'compress'
-	]);
-};

README.md

@@ -3,40 +3,45 @@
 </h1>
 
 <p align="center">
-  <a href="https://packagist.org/packages/woocommerce/woocommerce"><img src="https://poser.pugx.org/woocommerce/woocommerce/license" alt="license"></a>
+  <img src="https://poser.pugx.org/woocommerce/woocommerce/license" alt="license">
   <a href="https://woocommerce.com/"><img src="http://img.shields.io/badge/Designed%20for-WooCommerce-a46497.svg" alt="Designed for WooCommerce"></a>
   <img src="https://img.shields.io/wordpress/theme/dt/storefront.svg" alt="WordPress.org downloads">
   <img src="https://img.shields.io/wordpress/theme/r/storefront.svg" alt="WordPress.org rating">
-  <a href="https://scrutinizer-ci.com/g/woothemes/storefront/build-status/master"><img src="https://scrutinizer-ci.com/g/woothemes/storefront/badges/build.png?b=master" alt="Build Status"></a>
 </p>
 
-*Storefront* is a robust and flexible [WordPress](https://wordpress.org) theme, designed and built by the team at [WooCommerce](https://woocommerce.com/) to help you make the most out of using the [WooCommerce](https://woocommerce.com) plugin to power your online store. It's available to download for free from the WordPress [theme repository](https://wordpress.org/themes/storefront/).
+_Storefront_ is a robust and flexible [WordPress](https://wordpress.org) theme, designed and built by the team at [WooCommerce](https://woocommerce.com/) to help you make the most out of using the [WooCommerce](https://woocommerce.com) plugin to power your online store. It's available to download for free from the WordPress [theme repository](https://wordpress.org/themes/storefront/).
 
 It features deep integration with WooCommerce core plus several of the most popular extensions:
 
-* [WooCommerce Bookings](https://woocommerce.com/products/woocommerce-bookings/)
+-   [WooCommerce Bookings](https://woocommerce.com/products/woocommerce-bookings/)
-* [WooCommerce Wishlists](https://woocommerce.com/products/woocommerce-wishlists/)
+-   [WooCommerce Wishlists](https://woocommerce.com/products/woocommerce-wishlists/)
-* [WooCommerce Brands](https://woocommerce.com/products/brands/)
+-   [WooCommerce Brands](https://woocommerce.com/products/brands/)
-* [WooCommerce Subscriptions](https://woocommerce.com/products/woocommerce-subscriptions/)
+-   [WooCommerce Subscriptions](https://woocommerce.com/products/woocommerce-subscriptions/)
 
 For developers, Storefront is the perfect starting point for your project. It's lean and extensible codebase will allow you to easily add functionality to your site via child theme and/or custom plugin(s).
 
 ## Storefront Status
+
 Please read [this document](./STOREFRONT_STATUS.md) explaining the current status of Storefront development.
 
 ## Storefront extensions
+
 Looking to take your storefront powered store to the next level? Be sure to checkout the premium [Storefront extensions](https://woocommerce.com/product-category/storefront-extensions/).
 
 ## Storefront Documentation
+
 You can view detailed Storefront documentation on the [WooCommerce documentation website](https://docs.woocommerce.com/documentation/themes/storefront/).
 
 ## Storefront in your language
+
 Storefront translations can be downloaded from [WordPress.org](https://translate.wordpress.org/projects/wp-themes/storefront). To use one of these translations it is recommended that you upload it to `wp-content/languages/themes/storefront-pt_BR.mo`. Adding it to this location means the file will not be lost when you update Storefront. It is however possible to add a translation to the `languages` folder in your child theme if you'd prefer.
 
 ## Storefront help & support
+
 WooCommerce customers can get support at the [WooCommerce support portal](https://woocommerce.com/contact-us/). Otherwise, you can try posting on the [WordPress support forums](https://wordpress.org/support/theme/storefront/). Please remember, GitHub is for bug reports and contributions, _not_ support.
 
 ## Contributing to Storefront
+
 If you have a patch, or you've stumbled upon an issue with Storefront core, you can contribute this back to the code. Please read our [contributor guidelines](https://github.com/woocommerce/storefront/blob/master/CONTRIBUTING.md) for more information about how you can do this.
 
 If you have an idea or feature request please take a look at the [Storefront Ideasboard](http://ideas.woocommerce.com/forums/275029-storefront) to see if it's already been suggested, planned, or is under development. If not, please add it there.
@@ -44,4 +49,5 @@ If you have an idea or feature request please take a look at the [Storefront Ide
 You can keep up with the latest Storefront developments on the [dev blog](https://woocommerce.wordpress.com/category/storefront/).
 
 ## Testing Storefront
+
 Want to help test upcoming Storefront releases? Check out the [Storefront Beta Tester](https://github.com/seb86/Storefront-Beta-Tester) plugin.

README.txt

@@ -6,8 +6,8 @@ Stable tag: 3.5.1
 Version: 3.5.1
 WC requires at least: 4.2
 WC tested up to: 5.0
-License: GPLv2 or later
+License: GPLv3 or later
-License URI: https://www.gnu.org/licenses/gpl-2.0.html
+License URI: https://www.gnu.org/licenses/gpl-3.0.html
 Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, editor-style
 
 Storefront is the perfect theme for your next WooCommerce project.

assets/css/base/gutenberg-blocks.scss

@@ -4,7 +4,7 @@
 
 // Susy
 // Susy grid system. See: http://oddbird.net/susy/docs/
-@import "node_modules/susy/sass/susy";
+@import "susy";
 
 // Vendors
 // External libraries and frameworks.

assets/css/base/gutenberg-editor.scss

@@ -4,7 +4,7 @@
 
 // Susy
 // Susy grid system. See: http://oddbird.net/susy/docs/
-@import "node_modules/susy/sass/susy";
+@import "susy";
 
 // Vendors
 // External libraries and frameworks.

assets/css/base/icons.scss

@@ -2,7 +2,7 @@
 
 // Susy
 // Susy grid system. See: http://susydocs.oddbird.net/en/latest/
-@import "../../../node_modules/susy/sass/susy";
+@import "susy";
 
 // Utilities
 // Sass tools and helpers used across the project.

assets/css/woocommerce/extensions/bookings.scss

@@ -8,7 +8,7 @@
 @import "bourbon";
 @import "../../sass/utils/variables";
 @import "../../sass/utils/mixins";
-@import "../../../../node_modules/susy/sass/susy";
+@import "susy";
 @import "../../sass/vendors/modular-scale";
 
 #wc-bookings-booking-form {

assets/css/woocommerce/extensions/brands.scss

@@ -8,7 +8,7 @@
 @import "bourbon";
 @import "../../sass/utils/variables";
 @import "../../sass/utils/mixins";
-@import "../../../../node_modules/susy/sass/susy";
+@import "susy";
 @import "../../sass/vendors/modular-scale";
 
 /**

assets/css/woocommerce/extensions/bundles.scss

@@ -9,7 +9,7 @@
 @import "bourbon";
 @import "../../sass/utils/variables";
 @import "../../sass/utils/mixins";
-@import "../../../../node_modules/susy/sass/susy";
+@import "susy";
 @import "../../sass/vendors/modular-scale";
 
 /**

assets/css/woocommerce/extensions/composite-products.scss

@@ -9,7 +9,7 @@
 @import "bourbon";
 @import "../../sass/utils/variables";
 @import "../../sass/utils/mixins";
-@import "../../../../node_modules/susy/sass/susy";
+@import "susy";
 @import "../../sass/vendors/modular-scale";
 
 /**

assets/css/woocommerce/extensions/memberships.scss

@@ -8,7 +8,7 @@
 @import "bourbon";
 @import "../../sass/utils/variables";
 @import "../../sass/utils/mixins";
-@import "../../../../node_modules/susy/sass/susy";
+@import "susy";
 @import "../../sass/vendors/modular-scale";
 @import "../../sass/vendors/font-awesome/variables";
 

assets/css/woocommerce/extensions/photography.scss

@@ -8,7 +8,7 @@
 @import "bourbon";
 @import "../../sass/utils/variables";
 @import "../../sass/utils/mixins";
-@import "../../../../node_modules/susy/sass/susy";
+@import "susy";
 @import "../../sass/vendors/modular-scale";
 
 .woocommerce,

assets/css/woocommerce/extensions/product-recommendations.scss

@@ -9,7 +9,7 @@
 @import "bourbon";
 @import "../../sass/utils/variables";
 @import "../../sass/utils/mixins";
-@import "../../../../node_modules/susy/sass/susy";
+@import "susy";
 @import "../../sass/vendors/modular-scale";
 
 /**

assets/css/woocommerce/extensions/product-reviews-pro.scss

@@ -8,7 +8,7 @@
 @import "bourbon";
 @import "../../sass/utils/variables";
 @import "../../sass/utils/mixins";
-@import "../../../../node_modules/susy/sass/susy";
+@import "susy";
 @import "../../sass/vendors/modular-scale";
 
 .woocommerce,

assets/css/woocommerce/extensions/ship-multiple-addresses.scss

@@ -8,7 +8,7 @@
 @import "bourbon";
 @import "../../sass/utils/variables";
 @import "../../sass/utils/mixins";
-@import "../../../../node_modules/susy/sass/susy";
+@import "susy";
 @import "../../sass/vendors/modular-scale";
 
 .woocommerce-page {

assets/css/woocommerce/extensions/smart-coupons.scss

@@ -6,7 +6,7 @@
  * Imports
  */
 @import "../../sass/utils/variables";
-@import "../../../../node_modules/susy/sass/susy";
+@import "susy";
 @import "../../sass/vendors/modular-scale";
 
 .woocommerce,

assets/css/woocommerce/extensions/wishlists.scss

@@ -8,7 +8,7 @@
 @import "bourbon";
 @import "../../sass/utils/variables";
 @import "../../sass/utils/mixins";
-@import "../../../../node_modules/susy/sass/susy";
+@import "susy";
 @import "../../sass/vendors/modular-scale";
 
 #wl-wrapper.wl-button-wrap {

assets/css/woocommerce/woocommerce.scss

@@ -8,7 +8,7 @@
 @import "bourbon";
 @import "../sass/utils/variables";
 @import "../sass/utils/mixins";
-@import "../../../node_modules/susy/sass/susy";
+@import "susy";
 @import "../sass/vendors/modular-scale";
 
 // Animations

assets/js/admin/admin.js

@@ -1,5 +1,5 @@
 /* global ajaxurl, storefrontNUX */
-( function( wp, $ ) {
+( function ( wp, $ ) {
 	'use strict';
 
 	if ( ! wp ) {
@@ -7,28 +7,35 @@
 	}
 
 	/*
-	* Ajax request that will hide the Storefront NUX admin notice or message.
+	 * Ajax request that will hide the Storefront NUX admin notice or message.
-	*/
+	 */
-	function dismiss_nux() {
+	function dismissNux() {
-		$.ajax({
+		$.ajax( {
-			type:     'POST',
+			type: 'POST',
-			url:      ajaxurl,
+			url: ajaxurl,
-			data:     { nonce: storefrontNUX.nonce, action: 'storefront_dismiss_notice' },
+			data: {
-			dataType: 'json'
+				nonce: storefrontNUX.nonce,
-		});
+				action: 'storefront_dismiss_notice',
+			},
+			dataType: 'json',
+		} );
 	}
 
-	$( function() {
+	$( function () {
 		// Dismiss notice
-		$( document ).on( 'click', '.sf-notice-nux .notice-dismiss', function() {
+		$( document ).on(
-			dismiss_nux();
+			'click',
-		});
+			'.sf-notice-nux .notice-dismiss',
+			function () {
+				dismissNux();
+			}
+		);
 
 		// Dismiss notice inside theme page.
-		$( document ).on( 'click', '.sf-nux-dismiss-button', function() {
+		$( document ).on( 'click', '.sf-nux-dismiss-button', function () {
-			dismiss_nux();
+			dismissNux();
 			$( '.storefront-intro-setup' ).hide();
 			$( '.storefront-intro-message' ).fadeIn( 'slow' );
-		});
+		} );
-	});
+	} );
-})( window.wp, jQuery );
+} )( window.wp, jQuery );

assets/js/admin/customizer.js

@@ -1,15 +1,17 @@
 /* global _wpCustomizeSFGuidedTourSteps */
-( function( wp, $ ) {
+( function ( wp, $ ) {
 	'use strict';
 
-	if ( ! wp || ! wp.customize ) { return; }
+	if ( ! wp || ! wp.customize ) {
+		return;
+	}
 
 	// Set up our namespace.
-	var api = wp.customize;
+	const api = wp.customize;
 
 	api.SFGuidedTourSteps = [];
 
-	if ( 'undefined' !== typeof _wpCustomizeSFGuidedTourSteps ) {
+	if ( typeof _wpCustomizeSFGuidedTourSteps !== 'undefined' ) {
 		$.extend( api.SFGuidedTourSteps, _wpCustomizeSFGuidedTourSteps );
 	}
 
@@ -21,13 +23,13 @@
 		$container: null,
 		currentStep: -1,
 
-		init: function() {
+		init() {
 			this._setupUI();
 		},
 
-		_setupUI: function() {
+		_setupUI() {
-			var self = this,
+			const self = this,
-			    $wpCustomize = $( 'body.wp-customizer .wp-full-overlay' );
+				$wpCustomize = $( 'body.wp-customizer .wp-full-overlay' );
 
 			this.$container = $( '<div/>' ).addClass( 'sf-guided-tour' );
 
@@ -38,45 +40,56 @@
 			this._addListeners();
 
 			// Initial position
-			this.$container.css( ! $( 'body' ).hasClass( 'rtl' ) ? 'left' : 'right', ( $( '#customize-controls' ).width() + 10 ) + 'px' ).on( 'transitionend', function() {
+			this.$container
-				self.$container.addClass( 'sf-loaded' );
+				.css(
-			});
+					! $( 'body' ).hasClass( 'rtl' ) ? 'left' : 'right',
+					$( '#customize-controls' ).width() + 10 + 'px'
+				)
+				.on( 'transitionend', function () {
+					self.$container.addClass( 'sf-loaded' );
+				} );
 
 			// Show first step
 			this._showNextStep();
 
-			$( document ).on( 'click', '.sf-guided-tour-step .sf-nux-button', function() {
+			$( document ).on(
-				self._showNextStep();
+				'click',
-				return false;
+				'.sf-guided-tour-step .sf-nux-button',
-			});
+				function () {
-
-			$( document ).on( 'click', '.sf-guided-tour-step .sf-guided-tour-skip', function() {
-				if ( 0 === self.currentStep ) {
-					self._hideTour( true );
-				} else {
 					self._showNextStep();
+					return false;
 				}
+			);
 
-				return false;
+			$( document ).on(
-			});
+				'click',
+				'.sf-guided-tour-step .sf-guided-tour-skip',
+				function () {
+					if ( self.currentStep === 0 ) {
+						self._hideTour( true );
+					} else {
+						self._showNextStep();
+					}
+
+					return false;
+				}
+			);
 		},
 
-		_addListeners: function() {
+		_addListeners() {
-			var self = this;
+			const self = this;
 
-			api.state( 'expandedSection' ).bind( function() {
+			api.state( 'expandedSection' ).bind( function () {
 				self._adjustPosition();
-			});
+			} );
 
-			api.state( 'expandedPanel' ).bind( function() {
+			api.state( 'expandedPanel' ).bind( function () {
 				self._adjustPosition();
-			});
+			} );
 		},
 
-		_adjustPosition: function() {
+		_adjustPosition() {
-			var step            = this._getCurrentStep(),
+			const step = this._getCurrentStep();
-				expandedSection = api.state( 'expandedSection' ).get(),
-				expandedPanel   = api.state( 'expandedPanel' ).get();
 
 			if ( ! step ) {
 				return;
@@ -84,14 +97,21 @@
 
 			this.$container.removeClass( 'sf-inside-section' );
 
+			const expandedSection = api.state( 'expandedSection' ).get();
+			const expandedPanel = api.state( 'expandedPanel' ).get();
+
 			if ( expandedSection && step.section === expandedSection.id ) {
-				this._moveContainer( $( expandedSection.container[1] ).find( '.customize-section-title' ) );
+				this._moveContainer(
+					$( expandedSection.container[ 1 ] ).find(
+						'.customize-section-title'
+					)
+				);
 				this.$container.addClass( 'sf-inside-section' );
-			} else if ( false === expandedSection && false === expandedPanel ) {
+			} else if ( expandedSection === false && expandedPanel === false ) {
 				if ( this._isTourHidden() ) {
 					this._revealTour();
 				} else {
-					var selector = this._getSelector( step.section );
+					const selector = this._getSelector( step.section );
 					this._moveContainer( selector );
 				}
 			} else {
@@ -99,63 +119,88 @@
 			}
 		},
 
-		_hideTour: function( remove ) {
+		_hideTour( remove ) {
-			var self = this;
+			const self = this;
 
 			// Already hidden?
 			if ( this._isTourHidden() ) {
 				return;
 			}
 
-			this.$container.css({
+			const containerOffset = this.$container.offset();
+
+			this.$container.css( {
 				transform: '',
-				top: this.$container.offset().top
+				top: containerOffset.top,
-			});
+			} );
 
-			$( 'body' ).addClass( 'sf-exiting' ).on( 'animationend.storefront webkitAnimationEnd.storefront', function() {
+			$( 'body' )
-				$( this ).removeClass( 'sf-exiting' ).off( 'animationend.storefront webkitAnimationEnd.storefront' ).addClass( 'sf-hidden' );
+				.addClass( 'sf-exiting' )
-				self.$container.hide();
+				.on(
+					'animationend.storefront webkitAnimationEnd.storefront',
+					function () {
+						$( this )
+							.removeClass( 'sf-exiting' )
+							.off(
+								'animationend.storefront webkitAnimationEnd.storefront'
+							)
+							.addClass( 'sf-hidden' );
+						self.$container.hide();
 
-				if ( ! _.isUndefined( remove ) && true === remove ) {
+						if (
-					self._removeTour();
+							typeof remove !== 'undefined' &&
-				}
+							remove === true
-			});
+						) {
+							self._removeTour();
+						}
+					}
+				);
 		},
 
-		_revealTour: function() {
+		_revealTour() {
-			 var self = this;
+			const self = this;
 
 			$( 'body' ).removeClass( 'sf-hidden' );
 
 			self.$container.show();
 
-			$( 'body' ).addClass( 'sf-entering' ).on( 'animationend.storefront webkitAnimationEnd.storefront', function() {
+			const containerOffset = this.$container.offset();
-				$( this ).removeClass( 'sf-entering' ).off( 'animationend.storefront webkitAnimationEnd.storefront' );
+			const offsetTop = parseInt( containerOffset.top, 10 );
 
-				self.$container.css({
+			$( 'body' )
-					top: 'auto',
+				.addClass( 'sf-entering' )
-					transform: 'translateY(' + parseInt( self.$container.offset().top, 10 ) + 'px)'
+				.on(
-				});
+					'animationend.storefront webkitAnimationEnd.storefront',
-			});
+					function () {
+						$( this )
+							.removeClass( 'sf-entering' )
+							.off(
+								'animationend.storefront webkitAnimationEnd.storefront'
+							);
+
+						self.$container.css( {
+							top: 'auto',
+							transform: 'translateY(' + offsetTop + 'px)',
+						} );
+					}
+				);
 		},
 
-		_removeTour: function() {
+		_removeTour() {
 			this.$container.remove();
 		},
 
-		_closeAllSections: function() {
+		_closeAllSections() {
 			api.section.each( function ( section ) {
 				section.collapse( { duration: 0 } );
-			});
+			} );
 
 			api.panel.each( function ( panel ) {
 				panel.collapse( { duration: 0 } );
-			});
+			} );
 		},
 
-		_showNextStep: function() {
+		_showNextStep() {
-			var step, template;
-
 			if ( this._isLastStep() ) {
 				this._hideTour( true );
 				return;
@@ -164,17 +209,17 @@
 			this._closeAllSections();
 
 			// Get next step
-			step = this._getNextStep();
+			const step = this._getNextStep();
 
 			// Convert line breaks to paragraphs
 			step.message = this._lineBreaksToParagraphs( step.message );
 
 			// Load template
-			template = wp.template( 'sf-guided-tour-step' );
+			const template = wp.template( 'sf-guided-tour-step' );
 
 			this.$container.removeClass( 'sf-first-step' );
 
-			if ( 0 === this.currentStep ) {
+			if ( this.currentStep === 0 ) {
 				step.first_step = true;
 				this.$container.addClass( 'sf-first-step' );
 			}
@@ -189,55 +234,67 @@
 			this.$container.html( template( step ) );
 		},
 
-		_moveContainer: function( $selector ) {
+		_moveContainer( $selector ) {
-			var self = this, position;
+			const self = this;
 
 			if ( ! $selector ) {
 				return;
 			}
 
-			position = parseInt( $selector.offset().top, 10 ) + ( $selector.height() / 2 ) - 44;
+			const position =
+				parseInt( $selector.offset().top, 10 ) +
+				$selector.height() / 2 -
+				44;
 
-			this.$container.addClass( 'sf-moving' ).css({ 'transform': 'translateY(' + parseInt( position, 10 ) + 'px)' }).on( 'transitionend.storefront', function() {
+			this.$container
-				self.$container.removeClass( 'sf-moving' );
+				.addClass( 'sf-moving' )
-				self.$container.off( 'transitionend.storefront' );
+				.css( {
-			} );
+					transform: 'translateY(' + position + 'px)',
+				} )
+				.on( 'transitionend.storefront', function () {
+					self.$container.removeClass( 'sf-moving' );
+					self.$container.off( 'transitionend.storefront' );
+				} );
 		},
 
-		_getSelector: function( pointTo ) {
+		_getSelector( pointTo ) {
-			var sectionOrPanel = api.section( pointTo ) ? api.section( pointTo ) : api.panel( pointTo );
+			const sectionOrPanel = api.section( pointTo )
+				? api.section( pointTo )
+				: api.panel( pointTo );
 
 			// Check whether this is a section, panel, or a regular selector
-			if ( ! _.isUndefined( sectionOrPanel ) ) {
+			if ( typeof sectionOrPanel !== 'undefined' ) {
-				return $( sectionOrPanel.container[0] );
+				return $( sectionOrPanel.container[ 0 ] );
 			}
 
 			return $( pointTo );
 		},
 
-		_getCurrentStep: function() {
+		_getCurrentStep() {
 			return api.SFGuidedTourSteps[ this.currentStep ];
 		},
 
-		_getNextStep: function() {
+		_getNextStep() {
 			this.currentStep = this.currentStep + 1;
 			return api.SFGuidedTourSteps[ this.currentStep ];
 		},
 
-		_isTourHidden: function() {
+		_isTourHidden() {
-			return ( ( $( 'body' ).hasClass( 'sf-hidden' ) ) ? true : false );
+			return $( 'body' ).hasClass( 'sf-hidden' ) ? true : false;
 		},
 
-		_isLastStep: function() {
+		_isLastStep() {
-			return ( ( ( this.currentStep + 1 ) < api.SFGuidedTourSteps.length ) ? false : true );
+			return this.currentStep + 1 < api.SFGuidedTourSteps.length
+				? false
+				: true;
 		},
 
-		_lineBreaksToParagraphs: function( message ) {
+		_lineBreaksToParagraphs( message ) {
 			return '<p>' + message.replace( '\n\n', '</p><p>' ) + '</p>';
-		}
+		},
 	};
 
-	$( document ).ready( function() {
+	$( document ).ready( function () {
 		api.SFGuidedTour.init();
-	});
+	} );
 } )( window.wp, jQuery );

assets/js/admin/plugin-install.js

@@ -1,13 +1,13 @@
-( function( wp, $ ) {
+( function ( wp, $ ) {
 	'use strict';
 
 	if ( ! wp ) {
 		return;
 	}
 
-	$( function() {
+	$( function () {
-		$( document ).on( 'click', '.sf-install-now', function( event ) {
+		$( document ).on( 'click', '.sf-install-now', function ( event ) {
-			var $button = $( event.target );
+			const $button = $( event.target );
 
 			if ( $button.hasClass( 'activate-now' ) ) {
 				return true;
@@ -15,15 +15,21 @@
 
 			event.preventDefault();
 
-			if ( $button.hasClass( 'updating-message' ) || $button.hasClass( 'button-disabled' ) ) {
+			if (
+				$button.hasClass( 'updating-message' ) ||
+				$button.hasClass( 'button-disabled' )
+			) {
 				return;
 			}
 
-			if ( wp.updates.shouldRequestFilesystemCredentials && ! wp.updates.ajaxLocked ) {
+			if (
+				wp.updates.shouldRequestFilesystemCredentials &&
+				! wp.updates.ajaxLocked
+			) {
 				wp.updates.requestFilesystemCredentials( event );
 
-				$( document ).on( 'credential-modal-cancel', function() {
+				$( document ).on( 'credential-modal-cancel', function () {
-					var $message = $( '.sf-install-now.updating-message' );
+					const $message = $( '.sf-install-now.updating-message' );
 
 					$message
 						.removeClass( 'updating-message' )
@@ -34,8 +40,8 @@
 			}
 
 			wp.updates.installPlugin( {
-				slug: $button.data( 'slug' )
+				slug: $button.data( 'slug' ),
 			} );
-		});
+		} );
-	});
+	} );
-})( window.wp, jQuery );
+} )( window.wp, jQuery );

assets/js/footer.js

@@ -4,27 +4,38 @@
  * Adds a class required to reveal the search in the handheld footer bar.
  * Also hides the handheld footer bar when an input is focused.
  */
-( function() {
+( function () {
 	// Wait for DOM to be ready.
-	document.addEventListener( 'DOMContentLoaded', function() {
+	// eslint-disable-next-line @wordpress/no-global-event-listener
-		if ( 0 === document.getElementsByClassName( 'storefront-handheld-footer-bar' ).length ) {
+	document.addEventListener( 'DOMContentLoaded', function () {
+		if (
+			document.getElementsByClassName( 'storefront-handheld-footer-bar' )
+				.length === 0
+		) {
 			return;
 		}
 
 		// Add class to footer search when clicked.
-		[].forEach.call( document.querySelectorAll( '.storefront-handheld-footer-bar .search > a' ), function( anchor ) {
+		[].forEach.call(
-			anchor.addEventListener( 'click', function( event ) {
+			document.querySelectorAll(
-				anchor.parentElement.classList.toggle( 'active' );
+				'.storefront-handheld-footer-bar .search > a'
-				event.preventDefault();
+			),
-			} );
+			function ( anchor ) {
-		} );
+				anchor.addEventListener( 'click', function ( event ) {
+					anchor.parentElement.classList.toggle( 'active' );
+					event.preventDefault();
+				} );
+			}
+		);
 
 		// Add focus class to body when an input field is focused.
 		// This is used to hide the Handheld Footer Bar when an input is focused.
-		var footer_bar = document.getElementsByClassName( 'storefront-handheld-footer-bar' );
+		const footerBar = document.getElementsByClassName(
-		var forms      = document.forms;
+			'storefront-handheld-footer-bar'
-		var isFocused  = function( focused ) {
+		);
-			return function( event ) {
+		const forms = document.forms;
+		const isFocused = function ( focused ) {
+			return function ( event ) {
 				if ( !! focused && event.target.tabIndex !== -1 ) {
 					document.body.classList.add( 'sf-input-focused' );
 				} else {
@@ -33,9 +44,9 @@
 			};
 		};
 
-		if ( footer_bar.length && forms.length ) {
+		if ( footerBar.length && forms.length ) {
-			for ( var i = 0; i < forms.length; i++ ) {
+			for ( let i = 0; i < forms.length; i++ ) {
-				if ( footer_bar[0].contains( forms[ i ] ) ) {
+				if ( footerBar[ 0 ].contains( forms[ i ] ) ) {
 					continue;
 				}
 

assets/js/homepage.js

@@ -3,50 +3,57 @@
  *
  * Handles behaviour of the homepage featured image
  */
-( function() {
+( function () {
-
 	/**
 	 * Set hero content dimensions / layout
 	 * Run adaptive backgrounds and set colors
 	 */
-	document.addEventListener( 'DOMContentLoaded', function() {
+	// eslint-disable-next-line @wordpress/no-global-event-listener
-		var homepageContent = document.querySelector( '.page-template-template-homepage .type-page.has-post-thumbnail' );
+	document.addEventListener( 'DOMContentLoaded', function () {
+		const homepageContent = document.querySelector(
+			'.page-template-template-homepage .type-page.has-post-thumbnail'
+		);
 
 		if ( ! homepageContent ) {
-
 			// Only apply layout to the homepage content component if it exists on the page
 			return;
 		}
 
-		var entries = homepageContent.querySelectorAll( '.entry-title, .entry-content' );
+		const entries = homepageContent.querySelectorAll(
-		for ( var i = 0; i < entries.length; i++ ) {
+			'.entry-title, .entry-content'
+		);
+		for ( let i = 0; i < entries.length; i++ ) {
 			entries[ i ].classList.add( 'loaded' );
 		}
 
-		var siteMain         = document.querySelector( '.site-main' );
+		const siteMain = document.querySelector( '.site-main' );
-		var htmlDirValue     = document.documentElement.getAttribute( 'dir' );
+		const htmlDirValue = document.documentElement.getAttribute( 'dir' );
-		var updateDimensions = function() {
+
+		const updateDimensions = function () {
 			if ( updateDimensions._tick ) {
-				cancelAnimationFrame( updateDimensions._tick );
+				window.cancelAnimationFrame( updateDimensions._tick );
 			}
 
-			updateDimensions._tick = requestAnimationFrame( function() {
+			updateDimensions._tick = window.requestAnimationFrame( function () {
 				updateDimensions._tick = null;
 
 				// Make the homepage content full width and centrally aligned.
+				// eslint-disable-next-line @wordpress/no-global-event-listener
 				homepageContent.style.width = window.innerWidth + 'px';
 
 				if ( htmlDirValue !== 'rtl' ) {
-					homepageContent.style.marginLeft = -siteMain.getBoundingClientRect().left + 'px';
+					homepageContent.style.marginLeft =
+						-siteMain.getBoundingClientRect().left + 'px';
 				} else {
-					homepageContent.style.marginRight = -siteMain.getBoundingClientRect().left + 'px';
+					homepageContent.style.marginRight =
+						-siteMain.getBoundingClientRect().left + 'px';
 				}
 			} );
 		};
 
 		// On window resize, set hero content dimensions / layout.
+		// eslint-disable-next-line @wordpress/no-global-event-listener
 		window.addEventListener( 'resize', updateDimensions );
 		updateDimensions();
 	} );
-
 } )();

assets/js/navigation.js

@@ -6,22 +6,21 @@
  * Handles toggling the navigation menu for small screens.
  * Also adds a focus class to parent li's for accessibility.
  */
-( function() {
+( function () {
-
+	// eslint-disable-next-line @wordpress/no-global-event-listener
-	// Wait for DOM to be ready.
+	document.addEventListener( 'DOMContentLoaded', function () {
-	document.addEventListener( 'DOMContentLoaded', function() {
+		const container = document.getElementById( 'site-navigation' );
-		var container = document.getElementById( 'site-navigation' );
 		if ( ! container ) {
 			return;
 		}
 
-		var button = container.querySelector( 'button' );
+		const button = container.querySelector( 'button' );
 
 		if ( ! button ) {
 			return;
 		}
 
-		var menu = container.querySelector( 'ul' );
+		const menu = container.querySelector( 'ul' );
 
 		// Hide menu toggle button if menu is empty and return early.
 		if ( ! menu ) {
@@ -33,121 +32,178 @@
 		menu.setAttribute( 'aria-expanded', 'false' );
 		menu.classList.add( 'nav-menu' );
 
-		button.addEventListener( 'click', function() {
+		button.addEventListener( 'click', function () {
 			container.classList.toggle( 'toggled' );
-			var expanded = container.classList.contains( 'toggled' ) ? 'true' : 'false';
+			const expanded = container.classList.contains( 'toggled' )
+				? 'true'
+				: 'false';
 			button.setAttribute( 'aria-expanded', expanded );
 			menu.setAttribute( 'aria-expanded', expanded );
 		} );
 
 		// Add dropdown toggle that displays child menu items.
-		var handheld = document.getElementsByClassName( 'handheld-navigation' );
+		const handheld = document.getElementsByClassName(
+			'handheld-navigation'
+		);
 
 		if ( handheld.length > 0 ) {
-			[].forEach.call( handheld[0].querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' ), function( anchor ) {
+			[].forEach.call(
+				handheld[ 0 ].querySelectorAll(
+					'.menu-item-has-children > a, .page_item_has_children > a'
+				),
+				function ( anchor ) {
+					// Add dropdown toggle that displays child menu items
+					const btn = document.createElement( 'button' );
+					btn.setAttribute( 'aria-expanded', 'false' );
+					btn.classList.add( 'dropdown-toggle' );
 
-				// Add dropdown toggle that displays child menu items
+					const btnSpan = document.createElement( 'span' );
-				var btn = document.createElement( 'button' );
+					btnSpan.classList.add( 'screen-reader-text' );
-				btn.setAttribute( 'aria-expanded', 'false' );
+					btnSpan.appendChild(
-				btn.classList.add( 'dropdown-toggle' );
+						document.createTextNode(
+							storefrontScreenReaderText.expand
+						)
+					);
 
-				var btnSpan = document.createElement( 'span' );
+					btn.appendChild( btnSpan );
-				btnSpan.classList.add( 'screen-reader-text' );
-				btnSpan.appendChild( document.createTextNode( storefrontScreenReaderText.expand ) );
 
-				btn.appendChild( btnSpan );
+					anchor.parentNode.insertBefore( btn, anchor.nextSibling );
 
-				anchor.parentNode.insertBefore( btn, anchor.nextSibling );
+					// Set the active submenu dropdown toggle button initial state
-
+					if (
-				// Set the active submenu dropdown toggle button initial state
+						anchor.parentNode.classList.contains(
-				if ( anchor.parentNode.classList.contains( 'current-menu-ancestor' ) ) {
+							'current-menu-ancestor'
-					btn.setAttribute( 'aria-expanded', 'true' );
+						)
-					btn.classList.add( 'toggled-on' );
+					) {
-					btn.nextElementSibling.classList.add( 'toggled-on' );
+						btn.setAttribute( 'aria-expanded', 'true' );
-				}
+						btn.classList.add( 'toggled-on' );
-
+						btn.nextElementSibling.classList.add( 'toggled-on' );
-				// Add event listener
-				btn.addEventListener( 'click', function() {
-					btn.classList.toggle( 'toggled-on' );
-
-					// Remove text inside span
-					while ( btnSpan.firstChild ) {
-						btnSpan.removeChild( btnSpan.firstChild );
 					}
 
-					var expanded = btn.classList.contains( 'toggled-on' );
+					// Add event listener
+					btn.addEventListener( 'click', function () {
+						btn.classList.toggle( 'toggled-on' );
 
-					btn.setAttribute( 'aria-expanded', expanded );
+						// Remove text inside span
-					btnSpan.appendChild( document.createTextNode( expanded ? storefrontScreenReaderText.collapse : storefrontScreenReaderText.expand ) );
+						while ( btnSpan.firstChild ) {
-					btn.nextElementSibling.classList.toggle( 'toggled-on' );
+							btnSpan.removeChild( btnSpan.firstChild );
-				} );
+						}
-			} );
+
+						const expanded = btn.classList.contains( 'toggled-on' );
+
+						btn.setAttribute( 'aria-expanded', expanded );
+						btnSpan.appendChild(
+							document.createTextNode(
+								expanded
+									? storefrontScreenReaderText.collapse
+									: storefrontScreenReaderText.expand
+							)
+						);
+						btn.nextElementSibling.classList.toggle( 'toggled-on' );
+					} );
+				}
+			);
 		}
 
 		// Add focus class to parents of sub-menu anchors.
-		[].forEach.call( document.querySelectorAll( '.site-header .menu-item > a, .site-header .page_item > a, .site-header-cart a' ), function( anchor ) {
+		[].forEach.call(
-			anchor.addEventListener( 'focus', function() {
+			document.querySelectorAll(
+				'.site-header .menu-item > a, .site-header .page_item > a, .site-header-cart a'
+			),
+			function ( anchor ) {
+				anchor.addEventListener( 'focus', function () {
+					// Remove focus class from other sub-menus previously open.
+					const elems = document.querySelectorAll( '.focus' );
 
-				// Remove focus class from other sub-menus previously open.
+					[].forEach.call( elems, function ( el ) {
-				var elems = document.querySelectorAll( '.focus' );
+						if ( ! el.contains( anchor ) ) {
+							el.classList.remove( 'focus' );
 
-				[].forEach.call( elems, function( el ) {
+							// Remove blocked class, if it exists.
-					if ( ! el.contains( anchor ) ) {
+							if ( el.firstChild && el.firstChild.classList ) {
-						el.classList.remove( 'focus' );
+								el.firstChild.classList.remove( 'blocked' );
-
+							}
-						// Remove blocked class, if it exists.
-						if ( el.firstChild && el.firstChild.classList ) {
-							el.firstChild.classList.remove( 'blocked' );
 						}
-					}
+					} );
+
+					// Add focus class.
+					const li = anchor.parentNode;
+
+					li.classList.add( 'focus' );
 				} );
-
+			}
-				// Add focus class.
+		);
-				var li = anchor.parentNode;
-
-				li.classList.add( 'focus' );
-			} );
-		} );
 
 		// Ensure the dropdowns close when user taps outside the site header
-		[].forEach.call( document.querySelectorAll( 'body #page > :not( .site-header )' ), function( element ) {
+		[].forEach.call(
-			element.addEventListener( 'click', function() {
+			document.querySelectorAll( 'body #page > :not( .site-header )' ),
-				[].forEach.call( document.querySelectorAll( '.focus, .blocked' ), function( el ) {
+			function ( element ) {
-					el.classList.remove( 'focus' );
+				element.addEventListener( 'click', function () {
-					el.classList.remove( 'blocked' );
+					[].forEach.call(
+						document.querySelectorAll( '.focus, .blocked' ),
+						function ( el ) {
+							el.classList.remove( 'focus' );
+							el.classList.remove( 'blocked' );
+						}
+					);
 				} );
-			} );
+			}
-		} );
+		);
 
 		// Add an identifying class to dropdowns when on a touch device
 		// This is required to switch the dropdown hiding method from a negative `left` value to `display: none`.
-		if ( ( 'ontouchstart' in window || navigator.maxTouchPoints ) && window.innerWidth > 767 ) {
+		if (
-			[].forEach.call( document.querySelectorAll( '.site-header ul ul, .site-header-cart .widget_shopping_cart' ), function( element ) {
+			( 'ontouchstart' in window || window.navigator.maxTouchPoints ) &&
-				element.classList.add( 'sub-menu--is-touch-device' );
+			window.innerWidth > 767
-			} );
+		) {
+			[].forEach.call(
+				document.querySelectorAll(
+					'.site-header ul ul, .site-header-cart .widget_shopping_cart'
+				),
+				function ( element ) {
+					element.classList.add( 'sub-menu--is-touch-device' );
+				}
+			);
 
 			// Add blocked class to links that open sub-menus, and prevent from navigating away on first touch.
-			var acceptClick = false;
+			let acceptClick = false;
 
-			[].forEach.call( document.querySelectorAll( '.site-header .menu-item > a, .site-header .page_item > a, .site-header-cart a' ), function( anchor ) {
+			[].forEach.call(
-				anchor.addEventListener( 'click', function( event ) {
+				document.querySelectorAll(
-					if ( anchor.classList.contains( 'blocked' ) && false === acceptClick ) {
+					'.site-header .menu-item > a, .site-header .page_item > a, .site-header-cart a'
-						event.preventDefault();
+				),
-					}
+				function ( anchor ) {
+					anchor.addEventListener( 'click', function ( event ) {
+						if (
+							anchor.classList.contains( 'blocked' ) &&
+							acceptClick === false
+						) {
+							event.preventDefault();
+						}
 
-					acceptClick = false;
+						acceptClick = false;
-				} );
+					} );
 
-				anchor.addEventListener( 'pointerup', function( event ) {
+					anchor.addEventListener( 'pointerup', function ( event ) {
-					if ( anchor.classList.contains( 'blocked' ) || 'mouse' === event.pointerType ) {
+						if (
-						acceptClick = true;
+							anchor.classList.contains( 'blocked' ) ||
-					} else if ( ( 'cart-contents' === anchor.className && anchor.parentNode.nextElementSibling && '' !== anchor.parentNode.nextElementSibling.textContent.trim() ) || anchor.nextElementSibling ) {
+							event.pointerType === 'mouse'
-						anchor.classList.add( 'blocked' );
+						) {
-					} else {
+							acceptClick = true;
-						acceptClick = true;
+						} else if (
-					}
+							( anchor.className === 'cart-contents' &&
-				} );
+								anchor.parentNode.nextElementSibling &&
-			} );
+								anchor.parentNode.nextElementSibling.textContent.trim() !==
+									'' ) ||
+							anchor.nextElementSibling
+						) {
+							anchor.classList.add( 'blocked' );
+						} else {
+							acceptClick = true;
+						}
+					} );
+				}
+			);
 		}
 	} );
 } )();

assets/js/skip-link-focus-fix.js

@@ -1,19 +1,36 @@
-( function() {
+( function () {
-	var is_webkit = navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1,
+	const isWebkit =
-	    is_opera  = navigator.userAgent.toLowerCase().indexOf( 'opera' )  > -1,
+			window.navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1,
-	    is_ie     = navigator.userAgent.toLowerCase().indexOf( 'msie' )   > -1;
+		isOpera =
+			window.navigator.userAgent.toLowerCase().indexOf( 'opera' ) > -1,
+		isIe = window.navigator.userAgent.toLowerCase().indexOf( 'msie' ) > -1;
 
-	if ( ( is_webkit || is_opera || is_ie ) && document.getElementById && window.addEventListener ) {
+	if (
-		window.addEventListener( 'hashchange', function() {
+		( isWebkit || isOpera || isIe ) &&
-			var element = document.getElementById( location.hash.substring( 1 ) );
+		document.getElementById &&
+		window.addEventListener
+	) {
+		// eslint-disable-next-line @wordpress/no-global-event-listener
+		window.addEventListener(
+			'hashchange',
+			function () {
+				const element = document.getElementById(
+					window.location.hash.substring( 1 )
+				);
 
-			if ( element ) {
+				if ( element ) {
-				if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
+					if (
-					element.tabIndex = -1;
+						! /^(?:a|select|input|button|textarea)$/i.test(
+							element.tagName
+						)
+					) {
+						element.tabIndex = -1;
+					}
+
+					element.focus();
 				}
-
+			},
-				element.focus();
+			false
-			}
+		);
-		}, false );
 	}
-})();
+} )();

assets/js/sticky-add-to-cart.js

@@ -1,55 +1,90 @@
 /*global storefront_sticky_add_to_cart_params */
-( function() {
+( function () {
-	document.addEventListener( 'DOMContentLoaded', function() {
+	// eslint-disable-next-line @wordpress/no-global-event-listener
-		var stickyAddToCart = document.getElementsByClassName( 'storefront-sticky-add-to-cart' );
+	document.addEventListener( 'DOMContentLoaded', function () {
+		const stickyAddToCart = document.getElementsByClassName(
+			'storefront-sticky-add-to-cart'
+		);
 
 		if ( ! stickyAddToCart.length ) {
 			return;
 		}
 
+		// eslint-disable-next-line camelcase
 		if ( typeof storefront_sticky_add_to_cart_params === 'undefined' ) {
 			return;
 		}
 
-		var trigger = document.getElementsByClassName( storefront_sticky_add_to_cart_params.trigger_class );
+		const trigger = document.getElementsByClassName(
+			storefront_sticky_add_to_cart_params.trigger_class
+		);
 
 		if ( trigger.length > 0 ) {
-			var stickyAddToCartToggle = function() {
+			const stickyAddToCartToggle = function () {
-				if ( ( trigger[0].getBoundingClientRect().top + trigger[0].scrollHeight ) < 0 ) {
+				if (
-					stickyAddToCart[0].classList.add( 'storefront-sticky-add-to-cart--slideInDown' );
+					trigger[ 0 ].getBoundingClientRect().top +
-					stickyAddToCart[0].classList.remove( 'storefront-sticky-add-to-cart--slideOutUp' );
+						trigger[ 0 ].scrollHeight <
-				} else if ( stickyAddToCart[0].classList.contains( 'storefront-sticky-add-to-cart--slideInDown' ) ) {
+					0
-					stickyAddToCart[0].classList.add( 'storefront-sticky-add-to-cart--slideOutUp' );
+				) {
-					stickyAddToCart[0].classList.remove( 'storefront-sticky-add-to-cart--slideInDown' );
+					stickyAddToCart[ 0 ].classList.add(
+						'storefront-sticky-add-to-cart--slideInDown'
+					);
+					stickyAddToCart[ 0 ].classList.remove(
+						'storefront-sticky-add-to-cart--slideOutUp'
+					);
+				} else if (
+					stickyAddToCart[ 0 ].classList.contains(
+						'storefront-sticky-add-to-cart--slideInDown'
+					)
+				) {
+					stickyAddToCart[ 0 ].classList.add(
+						'storefront-sticky-add-to-cart--slideOutUp'
+					);
+					stickyAddToCart[ 0 ].classList.remove(
+						'storefront-sticky-add-to-cart--slideInDown'
+					);
 				}
 			};
 
 			stickyAddToCartToggle();
 
-			window.addEventListener( 'scroll', function() {
+			// eslint-disable-next-line @wordpress/no-global-event-listener
+			window.addEventListener( 'scroll', function () {
 				stickyAddToCartToggle();
 			} );
 
 			// Get product id
-			var product_id = null;
+			let productId = null;
 
-			document.body.classList.forEach( function( item ){
+			document.body.classList.forEach( function ( item ) {
-				if ( 'postid-' === item.substring( 0, 7 ) ) {
+				if ( item.substring( 0, 7 ) === 'postid-' ) {
-					product_id = item.replace( /[^0-9]/g, '' );
+					productId = item.replace( /[^0-9]/g, '' );
 				}
 			} );
 
-			if ( product_id ) {
+			if ( productId ) {
-				var product = document.getElementById( 'product-' + product_id );
+				const product = document.getElementById(
+					'product-' + productId
+				);
 
 				if ( product ) {
-					if ( ! product.classList.contains( 'product-type-simple' ) && ! product.classList.contains( 'product-type-external' ) ) {
+					if (
-						var selectOptions = document.getElementsByClassName( 'storefront-sticky-add-to-cart__content-button' );
+						! product.classList.contains( 'product-type-simple' ) &&
+						! product.classList.contains( 'product-type-external' )
+					) {
+						const selectOptions = document.getElementsByClassName(
+							'storefront-sticky-add-to-cart__content-button'
+						);
 
-						selectOptions[0].addEventListener( 'click', function( event ) {
+						selectOptions[ 0 ].addEventListener(
-							event.preventDefault();
+							'click',
-							document.getElementById( 'product-' + product_id ).scrollIntoView();
+							function ( event ) {
-						} );
+								event.preventDefault();
+								document
+									.getElementById( 'product-' + productId )
+									.scrollIntoView();
+							}
+						);
 					}
 				}
 			}

assets/js/woocommerce/extensions/brands.js

@@ -3,30 +3,44 @@
  *
  * Adds sticky functionality to the brands index.
  */
- ( function() {
+( function () {
- 	document.addEventListener( 'DOMContentLoaded', function() {
+	// eslint-disable-next-line @wordpress/no-global-event-listener
-		var brandsAZ = document.getElementsByClassName( 'brands_index' );
+	document.addEventListener( 'DOMContentLoaded', function () {
+		const brandsAZ = document.getElementsByClassName( 'brands_index' );
 
 		if ( ! brandsAZ.length ) {
 			return;
 		}
 
-		var adminBar              = document.body.classList.contains( 'admin-bar' ) ? 32 : 0,
+		const adminBar = document.body.classList.contains( 'admin-bar' )
-			brandsContainerHeight = document.getElementById( 'brands_a_z' ).scrollHeight,
+				? 32
-			brandsAZHeight        = brandsAZ[0].scrollHeight + 40;
+				: 0,
+			brandsContainerHeight = document.getElementById( 'brands_a_z' )
+				.scrollHeight,
+			brandsAZHeight = brandsAZ[ 0 ].scrollHeight + 40;
 
-		var stickyBrandsAZ = function() {
+		const stickyBrandsAZ = function () {
-			if ( window.innerWidth > 768 && brandsAZ[0].getBoundingClientRect().top < 0 ) {
+			if (
-				brandsAZ[0].style.paddingTop = Math.min( ( Math.abs( brandsAZ[0].getBoundingClientRect().top ) + 20 + adminBar ), brandsContainerHeight - brandsAZHeight ) + 'px';
+				window.innerWidth > 768 &&
+				brandsAZ[ 0 ].getBoundingClientRect().top < 0
+			) {
+				brandsAZ[ 0 ].style.paddingTop =
+					Math.min(
+						Math.abs( brandsAZ[ 0 ].getBoundingClientRect().top ) +
+							20 +
+							adminBar,
+						brandsContainerHeight - brandsAZHeight
+					) + 'px';
 			} else {
-				brandsAZ[0].style.paddingTop = 0;
+				brandsAZ[ 0 ].style.paddingTop = 0;
 			}
 		};
 
 		stickyBrandsAZ();
 
-		window.addEventListener( 'scroll', function() {
+		// eslint-disable-next-line @wordpress/no-global-event-listener
+		window.addEventListener( 'scroll', function () {
 			stickyBrandsAZ();
 		} );
- 	} );
+	} );
 } )();

assets/js/woocommerce/header-cart.js

@@ -2,18 +2,27 @@
  * Makes the header cart content scrollable if the height of the dropdown exceeds the window height.
  * Mouseover is used as items can be added to the cart via ajax and we'll need to recheck.
  */
-( function() {
+( function () {
-	if ( document.body.classList.contains( 'woocommerce-cart' ) || document.body.classList.contains( 'woocommerce-checkout' ) || window.innerWidth < 768 || ! document.getElementById( 'site-header-cart' ) ) {
+	if (
+		document.body.classList.contains( 'woocommerce-cart' ) ||
+		document.body.classList.contains( 'woocommerce-checkout' ) ||
+		window.innerWidth < 768 ||
+		! document.getElementById( 'site-header-cart' )
+	) {
 		return;
 	}
 
-	window.addEventListener( 'load', function() {
+	// eslint-disable-next-line @wordpress/no-global-event-listener
-		var cart = document.querySelector( '.site-header-cart' );
+	window.addEventListener( 'load', function () {
+		const cart = document.querySelector( '.site-header-cart' );
 
-		cart.addEventListener( 'mouseover', function() {
+		cart.addEventListener( 'mouseover', function () {
-			var windowHeight  = window.outerHeight,
+			const windowHeight = window.outerHeight,
-				cartBottomPos = this.querySelector( '.widget_shopping_cart_content' ).getBoundingClientRect().bottom + this.offsetHeight,
+				cartBottomPos =
-				cartList      = this.querySelector( '.cart_list' );
+					this.querySelector(
+						'.widget_shopping_cart_content'
+					).getBoundingClientRect().bottom + this.offsetHeight,
+				cartList = this.querySelector( '.cart_list' );
 
 			if ( cartBottomPos > windowHeight ) {
 				cartList.style.maxHeight = '15em';

composer.json

@@ -1,45 +1,55 @@
 {
-  "name": "woocommerce/storefront",
+	"name": "woocommerce/storefront",
-  "description": "Storefront is a robust and flexible WordPress theme, designed and built by the team at WooCommerce to help you make the most out of using the WooCommerce plugin to power your online store. It's available to download for free from the WordPress theme repository.",
+	"description": "Storefront is a robust and flexible WordPress theme, designed and built by the team at WooCommerce to help you make the most out of using the WooCommerce plugin to power your online store. It's available to download for free from the WordPress theme repository.",
-  "homepage": "https://woocommerce.com/",
+	"homepage": "https://woocommerce.com/",
-  "type": "wordpress-theme",
+	"type": "wordpress-theme",
-  "license": "GPL-2.0+",
+	"license": "GPL-3.0+",
-  "require": {
+	"require": {
-    "composer/installers": "1.11.0"
+		"composer/installers": "1.11.0"
-  },
+	},
-  "require-dev": {
+	"archive": {
-    "squizlabs/php_codesniffer": "3.6.0",
+		"exclude": [
-    "wp-coding-standards/wpcs": "2.3.0",
+			"!/assets",
-    "woocommerce/woocommerce-sniffs": "0.1.0",
+			"/assets/css/sass",
-    "phpcompatibility/php-compatibility": "9.3.5",
+			"/assets/css/**/*.scss",
-    "woocommerce/woocommerce-git-hooks": "*",
+			"!/languages",
-    "dealerdirect/phpcodesniffer-composer-installer": "0.7.0"
+			"!/style.css",
-  },
+			"!/style-rtl.css"
-  "scripts": {
+		]
-    "pre-update-cmd": [
+	},
-      "WooCommerce\\GitHooks\\Hooks::preHooks"
+	"require-dev": {
-    ],
+		"squizlabs/php_codesniffer": "3.6.0",
-    "pre-install-cmd": [
+		"wp-coding-standards/wpcs": "2.3.0",
-      "WooCommerce\\GitHooks\\Hooks::preHooks"
+		"woocommerce/woocommerce-sniffs": "^0.1.0",
-    ],
+		"phpcompatibility/php-compatibility": "9.3.5",
-    "post-install-cmd": [
+		"woocommerce/woocommerce-git-hooks": "*",
-      "WooCommerce\\GitHooks\\Hooks::postHooks"
+		"dealerdirect/phpcodesniffer-composer-installer": "0.7.0"
-    ],
+	},
-    "post-update-cmd": [
+	"scripts": {
-      "WooCommerce\\GitHooks\\Hooks::postHooks"
+		"pre-update-cmd": [
-    ],
+			"WooCommerce\\GitHooks\\Hooks::preHooks"
-    "phpcs": [
+		],
-      "phpcs --extensions=php -s -p"
+		"pre-install-cmd": [
-    ],
+			"WooCommerce\\GitHooks\\Hooks::preHooks"
-    "phpcbf": [
+		],
-      "phpcbf --extensions=php -p"
+		"post-install-cmd": [
-    ]
+			"WooCommerce\\GitHooks\\Hooks::postHooks"
-  },
+		],
-  "extra": {
+		"post-update-cmd": [
-    "scripts-description": {
+			"WooCommerce\\GitHooks\\Hooks::postHooks"
-      "test": "Run unit tests",
+		],
-      "phpcs": "Analyze code against the WordPress coding standards with PHP_CodeSniffer",
+		"phpcs": [
-      "phpcbf": "Fix coding standards warnings/errors automatically with PHP Code Beautifier"
+			"phpcs --extensions=php -s -p"
-    }
+		],
-  }
+		"phpcbf": [
+			"phpcbf --extensions=php -p"
+		]
+	},
+	"extra": {
+		"scripts-description": {
+			"test": "Run unit tests",
+			"phpcs": "Analyze code against the WordPress coding standards with PHP_CodeSniffer",
+			"phpcbf": "Fix coding standards warnings/errors automatically with PHP Code Beautifier"
+		}
+	}
 }

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "9724b5bcbb25809847a81a10bc99a0a4",
+    "content-hash": "9113a7cc59a85375a5f1fc1ae0303f97",
     "packages": [
         {
             "name": "composer/installers",
@@ -502,6 +502,10 @@
                 "woocommerce",
                 "wordpress"
             ],
+            "support": {
+                "issues": "https://github.com/woocommerce/woocommerce-sniffs/issues",
+                "source": "https://github.com/woocommerce/woocommerce-sniffs/tree/master"
+            },
             "time": "2020-08-06T18:23:45+00:00"
         },
         {
@@ -558,5 +562,5 @@
     "prefer-lowest": false,
     "platform": [],
     "platform-dev": [],
-    "plugin-api-version": "1.1.0"
+    "plugin-api-version": "2.0.0"
 }

e2e/specs/browser.test.js

@@ -6,4 +6,4 @@ describe( 'Storefront', () => {
 	it( 'should have "built with Storefront" footer', async () => {
 		await expect( page ).toMatch( 'Built with Storefront & WooCommerce.' );
 	} );
-});
+} );

inc/nux/class-storefront-nux-starter-content.php

@@ -35,7 +35,7 @@ if ( ! class_exists( 'Storefront_NUX_Starter_Content' ) ) :
 			add_filter( 'the_title', array( $this, 'filter_auto_draft_title' ), 10, 2 );
 			add_action( 'customize_preview_init', array( $this, 'update_homepage_content' ), 10 );
 
-			if ( ! isset( $_GET['sf_starter_content'] ) || 1 !== absint( $_GET['sf_starter_content'] ) ) { // WPCS: input var ok.
+			if ( ! isset( $_GET['sf_starter_content'] ) || 1 !== absint( $_GET['sf_starter_content'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 				add_filter( 'storefront_starter_content', '__return_empty_array' );
 			}
 		}
@@ -246,7 +246,7 @@ if ( ! class_exists( 'Storefront_NUX_Starter_Content' ) ) :
 		 * @return array $content
 		 */
 		public function filter_start_content( $content, $config ) {
-			if ( ! isset( $_GET['sf_starter_content'] ) || 1 !== absint( $_GET['sf_starter_content'] ) ) { // WPCS: input var ok.
+			if ( ! isset( $_GET['sf_starter_content'] ) || 1 !== absint( $_GET['sf_starter_content'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 				return $content;
 			}
 
@@ -260,8 +260,8 @@ if ( ! class_exists( 'Storefront_NUX_Starter_Content' ) ) :
 			// Remove some of the content if necessary.
 			$tasks = array();
 
-			if ( isset( $_GET['sf_tasks'] ) && '' !== sanitize_text_field( wp_unslash( $_GET['sf_tasks'] ) ) ) { // WPCS: input var ok.
+			if ( isset( $_GET['sf_tasks'] ) && '' !== sanitize_text_field( wp_unslash( $_GET['sf_tasks'] ) ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-				$tasks = explode( ',', sanitize_text_field( wp_unslash( $_GET['sf_tasks'] ) ) ); // WPCS: input var ok.
+				$tasks = explode( ',', sanitize_text_field( wp_unslash( $_GET['sf_tasks'] ) ) ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 			}
 
 			$tasks = $this->validate_tasks( $tasks );
@@ -1177,6 +1177,7 @@ if ( ! class_exists( 'Storefront_NUX_Starter_Content' ) ) :
 				'post_type'      => $post_type,
 				'post_status'    => 'auto-draft',
 				'posts_per_page' => -1,
+				// phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_query
 				'meta_query'     => array(
 					array(
 						'key'     => '_customize_draft_post_name',

inc/woocommerce/class-storefront-woocommerce-adjacent-products.php

@@ -83,6 +83,7 @@ if ( ! class_exists( 'Storefront_WooCommerce_Adjacent_Products' ) ) :
 			$this->current_product = $post->ID;
 
 			// Try to get a valid product via `get_adjacent_post()`.
+			// phpcs:ignore WordPress.CodeAnalysis.AssignmentInCondition.FoundInWhileCondition
 			while ( $adjacent = $this->get_adjacent() ) {
 				$product = wc_get_product( $adjacent->ID );
 

languages/storefront.pot

@@ -1,17 +1,17 @@
 # <!=Copyright (C) 2021 Automattic
-# This file is distributed under the GNU General Public License v2 or later.=!>
+# This file is distributed under the GNU General Public License v3 or later.=!>
 msgid ""
 msgstr ""
 "Project-Id-Version: Storefront 3.5.1\n"
-"Report-Msgid-Bugs-To: https://github.com/woothemes/storefront/issues\n"
+"Report-Msgid-Bugs-To: https://wordpress.org/support/theme/storefront\n"
-"POT-Creation-Date: 2021-03-17 14:13:28+00:00\n"
+"POT-Creation-Date: 2021-05-05 21:46:34+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "PO-Revision-Date: 2021-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
-"Language-Team: LANGUAGE <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
-"X-Generator: grunt-wp-i18n 1.0.3\n"
+"X-Generator: node-wp-i18n 1.2.5\n"
 
 #: 404.php:19
 msgid "Oops! That page can&rsquo;t be found."
@@ -270,7 +270,7 @@ msgstr ""
 msgid "Collapse child menu"
 msgstr ""
 
-#: inc/class-storefront.php:487
+#: inc/class-storefront.php:485
 msgid "Post Navigation"
 msgstr ""
 
@@ -800,6 +800,10 @@ msgid ""
 "displayed with the title revealed on hover."
 msgstr ""
 
+#: inc/woocommerce/class-storefront-woocommerce.php:226
+msgid "breadcrumbs"
+msgstr ""
+
 #: inc/woocommerce/storefront-woocommerce-template-functions.php:91
 msgid "View your shopping cart"
 msgstr ""

package.json

@@ -1,70 +1,104 @@
 {
-  "name": "storefront",
+	"name": "storefront",
-  "title": "Storefront",
+	"title": "Storefront",
-  "version": "3.5.1",
+	"version": "3.5.1",
-  "homepage": "http://woocommerce.com/storefront/",
+	"homepage": "http://woocommerce.com/storefront/",
-  "repository": {
+	"repository": {
-    "type": "git",
+		"type": "git",
-    "url": "https://github.com/woothemes/storefront.git"
+		"url": "https://github.com/woothemes/storefront.git"
-  },
+	},
-  "scripts": {
+	"assets": {
-    "build": "grunt deploy --env=production",
+		"js": {
-    "build:dev": "grunt",
+			"min": "assets/js/**/**/*.min.js assets/js/**/*.min.js assets/js/*.min.js",
-    "css": "grunt css",
+			"src": "assets/js/*.js assets/js/**/*.js assets/js/**/**/*.js"
-    "start": "grunt watch",
+		},
-    "labels:dry": "github-label-sync --labels ./.github/label-sync-config.json --allow-added-labels --dry-run woocommerce/storefront",
+		"css": {
-    "labels:sync": "github-label-sync --labels ./.github/label-sync-config.json --allow-added-labels woocommerce/storefront",
+			"min": "assets/css/**/*.css assets/css/**/**/*.css *.css",
-    "wp-env": "wp-env",
+			"src": "assets/css/**/*.scss assets/css/**/**/*.scss *.scss"
-    "e2e": "jest",
+		}
-    "e2e:ci": "npm run wp-env start && npm run wp-env run tests-cli wp theme activate storefront && npm run e2e"
+	},
-  },
+	"rtlcssConfig": {
-  "jest": {
+		"options": {
-    "preset": "jest-puppeteer",
+			"autoRename": false,
-    "setupFilesAfterEnv": [
+			"autoRenameStrict": false,
-      "expect-puppeteer"
+			"blacklist": {},
-    ],
+			"clean": true,
-    "globals": {
+			"greedy": false,
-      "STORE_URL": "http://localhost:8802"
+			"processUrls": false,
-    }
+			"stringMap": []
-  },
+		},
-  "config": {
+		"plugins": [],
-    "wp_org_slug": "storefront",
+		"map": false
-    "translate": true
+	},
-  },
+	"scripts": {
-  "license": "GPL-2.0+",
+		"build:dev": "npm run build:js && npm run build:css",
-  "main": "Gruntfile.js",
+		"build": "npm run build:js && npm run build:css && npm run makepot",
-  "devDependencies": {
+		"postbuild": "npm run -s archive",
-    "@lodder/grunt-postcss": "3.0.1",
+		"archive": "rm -rf $npm_package_name && composer archive --file=$npm_package_name --format=zip",
-    "@wordpress/env": "4.0.3",
+		"postarchive": "rm -rf $npm_package_name && unzip $npm_package_name.zip -d $npm_package_name && rm $npm_package_name.zip && zip -r $npm_package_name.zip $npm_package_name && rm -rf $npm_package_name",
-    "autoprefixer": "10.2.5",
+		"prebuild:js": "rm -f $npm_package_assets_js_min",
-    "bourbon": "7.0.0",
+		"build:js": "echo \"$(tput setaf \"3\")Building JS Files$(tput sgr0)\"; for f in $npm_package_assets_js_src; do file=${f%.js}; echo \"$(tput setaf \"3\")Building $f$(tput sgr0)\"; node_modules/.bin/uglifyjs $f -c -m > $file.min.js; done",
-    "cssnano": "5.0.2",
+		"prebuild:css": "rm -f $npm_package_assets_css_min",
-    "grunt": "1.4.0",
+		"build:css": "echo \"$(tput setaf \"3\")Building CSS Files$(tput sgr0)\"; sass -I node_modules/bourbon/core -I node_modules/susy/sass assets/css:assets/css --style compressed --no-source-map && sass -I node_modules/bourbon/core -I node_modules/susy/sass style.scss:style.css --style compressed --no-source-map",
-    "grunt-checktextdomain": "1.0.1",
+		"postbuild:css": "npm run autoprefixer && npm run rtlcss",
-    "grunt-contrib-compress": "2.0.0",
+		"autoprefixer": "echo \"$(tput setaf \"3\")Running Autoprefixer$(tput sgr0)\"; for f in $npm_package_assets_css_min; do file=${f%.css}; postcss $f --use autoprefixer -r --verbose --no-map; done",
-    "grunt-contrib-copy": "1.0.0",
+		"rtlcss": "echo \"$(tput setaf \"3\")Building RTL CSS$(tput sgr0)\"; for f in $npm_package_assets_css_min; do file=${f%.css}; rtlcss $f $file-rtl.css; done",
-    "grunt-contrib-cssmin": "3.0.0",
+		"makepot": "echo \"$(tput setaf \"3\")Updating POT file$(tput sgr0)\"; wpi18n addtextdomain storefront; wpi18n makepot --domain-path languages --pot-file storefront.pot --type theme --exclude node_modules",
-    "grunt-contrib-jshint": "3.0.0",
+		"watchsass": "sass -I node_modules/bourbon/core -I node_modules/susy/sass assets/css:assets/css --style compressed --watch --no-source-map",
-    "grunt-contrib-uglify": "5.0.1",
+		"watchjs": "onchange \"assets/js/**/*.js\" -d 1000 -k -e \"assets/js/**/*.min.js\" -- npm run build:js",
-    "grunt-contrib-watch": "1.1.0",
+		"start": "concurrently --kill-others \"npm run watchjs\" \"npm run watchsass\"",
-    "grunt-rtlcss": "2.0.2",
+		"labels:dry": "github-label-sync --labels ./.github/label-sync-config.json --allow-added-labels --dry-run woocommerce/storefront",
-    "grunt-sass": "3.1.0",
+		"labels:sync": "github-label-sync --labels ./.github/label-sync-config.json --allow-added-labels woocommerce/storefront",
-    "grunt-stylelint": "0.16.0",
+		"lint": "npm run lint:php && npm run lint:css && npm run lint:js",
-    "grunt-wp-i18n": "1.0.3",
+		"lint:ci": "npm run lint:js && npm run lint:css",
-    "jest": "26.6.3",
+		"lint:css": "stylelint 'assets/**/*.scss'",
-    "jest-puppeteer": "5.0.3",
+		"lint:css-fix": "stylelint 'assets/**/*.scss' --fix",
-    "node-sass": "5.0.0",
+		"lint:js": "wp-scripts lint-js assets/js --ext=js,ts,tsx",
-    "postcss": "8.2.14",
+		"lint:js:report": "npm run lint:js -- --output-file eslint_report.json --ext=js,ts,tsx --format json",
-    "puppeteer": "9.1.1",
+		"lint:js-fix": "eslint assets/js --ext=js,jsx,ts,tsx --fix",
-    "stylelint": "13.13.1",
+		"lint:php": "composer run-script phpcs ./inc",
-    "stylelint-config-wordpress": "17.0.0",
+		"wp-env": "wp-env",
-    "susy": "2.2.14"
+		"test:e2e": "jest"
-  },
+	},
-  "engines": {
+	"jest": {
-    "node": "14.16.1",
+		"preset": "jest-puppeteer",
-    "npm": "6.14.13"
+		"setupFilesAfterEnv": [
-  },
+			"expect-puppeteer"
-  "dependencies": {
+		],
-    "github-label-sync": "^2.0.0"
+		"globals": {
-  }
+			"STORE_URL": "http://localhost:8802"
+		}
+	},
+	"config": {
+		"wp_org_slug": "storefront",
+		"translate": true
+	},
+	"license": "GPL-3.0+",
+	"devDependencies": {
+		"@woocommerce/eslint-plugin": "^1.1.0",
+		"@wordpress/browserslist-config": "^3.0.3",
+		"@wordpress/env": "4.0.3",
+		"@wordpress/prettier-config": "^1.0.3",
+		"@wordpress/scripts": "^15.0.1",
+		"@wordpress/stylelint-config": "^19.0.3",
+		"autoprefixer": "^10.2.5",
+		"bourbon": "^7.0.0",
+		"browserslist": "^4.16.6",
+		"concurrently": "^6.0.2",
+		"github-label-sync": "^2.0.0",
+		"jest": "26.6.3",
+		"jest-puppeteer": "5.0.3",
+		"lodash": "^4.17.21",
+		"node-wp-i18n": "^1.2.5",
+		"onchange": "^7.1.0",
+		"postcss-cli": "^8.3.1",
+		"puppeteer": "9.1.1",
+		"rtlcss": "^3.1.2",
+		"susy": "2.2.14",
+		"uglify-js": "^3.13.5"
+	},
+	"engines": {
+		"node": "14.16.1",
+		"npm": "6.14.13"
+	}
 }

phpcs.xml

@@ -1,34 +1,60 @@
 <?xml version="1.0"?>
 <ruleset name="WordPress Coding Standards">
-	<!-- See https://github.com/squizlabs/PHP_CodeSniffer/wiki/Annotated-ruleset.xml -->
+	<description>WooCommerce Dev Ruleset</description>
-	<!-- See https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/blob/develop/WordPress-Core/ruleset.xml -->
-
-	<description>WooCommerce dev PHP_CodeSniffer ruleset.</description>
 
 	<!-- Exclude paths -->
-	<exclude-pattern>*/storefront/node_modules/*</exclude-pattern>
+	<exclude-pattern>*/node_modules/*</exclude-pattern>
-	<exclude-pattern>*/storefront/vendor/*</exclude-pattern>
+	<exclude-pattern>*/vendor/*</exclude-pattern>
-	<exclude-pattern>*/storefront/storefront/*</exclude-pattern>
+	<exclude-pattern>*/tests/*</exclude-pattern>
+	<exclude-pattern>*/languages/*</exclude-pattern>
 
 	<!-- Configs -->
 	<config name="minimum_supported_wp_version" value="5.3" />
-	<config name="testVersion" value="5.6-"/>
+	<config name="testVersion" value="7.0-" />
 
 	<!-- Rules -->
 	<rule ref="WooCommerce-Core" />
-	<rule ref="PHPCompatibility">
+
-		<exclude name="PHPCompatibility.PHP.NewFunctions.hash_equalsFound" />
-		<exclude name="PHPCompatibility.PHP.NewInterfaces.jsonserializableFound" />
-		<exclude name="PHPCompatibility.PHP.NewKeywords.t_namespaceFound" />
-	</rule>
-	<rule ref="WordPress" />
 	<rule ref="WordPress.WP.I18n">
 		<properties>
 			<property name="text_domain" type="array" value="storefront" />
 		</properties>
 	</rule>
-	<rule ref="Squiz.Commenting">
+
-		<exclude name="Squiz.Commenting.LongConditionClosingComment" />
+	<rule ref="PHPCompatibility">
-		<exclude name="Squiz.Commenting.PostStatementComment" />
+		<exclude-pattern>tests/</exclude-pattern>
 	</rule>
+
+	<rule ref="WordPress.Files.FileName.InvalidClassFileName">
+		<exclude-pattern>*/**/abstract-*.php</exclude-pattern>
+		<exclude-pattern>tests/*</exclude-pattern>
+		<exclude-pattern>src/*</exclude-pattern>
+	</rule>
+
+	<rule ref="WordPress.Files.FileName.NotHyphenatedLowercase">
+		<exclude-pattern>src/*</exclude-pattern>
+		<exclude-pattern>tests/*</exclude-pattern>
+	</rule>
+
+	<rule ref="Squiz.Commenting.FileComment.MissingPackageTag">
+		<exclude-pattern>src/</exclude-pattern>
+		<exclude-pattern>tests/php</exclude-pattern>
+	</rule>
+	<rule ref="Squiz.Commenting.FileComment.Missing">
+		<exclude-pattern>src/</exclude-pattern>
+		<exclude-pattern>tests/php</exclude-pattern>
+	</rule>
+
+	<rule ref="Generic.Commenting">
+		<exclude-pattern>tests/</exclude-pattern>
+	</rule>
+
+	<rule ref="Generic.Commenting.Todo">
+		<exclude name="Generic.Commenting.Todo.TaskFound"/>
+		<exclude name="Generic.Commenting.Todo.CommentFound"/>
+	</rule>
+
+	<rule ref="Generic.Arrays.DisallowShortArraySyntax.Found">
+		<exclude-pattern>src/*</exclude-pattern>
+    </rule>
 </ruleset>

style.scss

@@ -7,8 +7,8 @@ Description:  Storefront is the perfect theme for your next WooCommerce project.
 Version:      3.5.1
 Tested up to: 5.6.0
 Requires PHP: 5.6.0
-License:      GNU General Public License v2 or later
+License:      GNU General Public License v3 or later
-License URI:  https://www.gnu.org/licenses/gpl-2.0.html
+License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  storefront
 Tags:         e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, editor-style
 
@@ -36,23 +36,23 @@ Note: Do not edit this file. If you wish to add your own CSS, go to Customizer >
 
 // Bourbon
 // See: https://www.bourbon.io/docs/latest/
-@import 'bourbon';
+@import "bourbon";
 
 // Susy
 // Susy grid system. See: http://oddbird.net/susy/docs/
-@import 'node_modules/susy/sass/susy';
+@import "susy";
 
 // Vendors
 // External libraries and frameworks.
-@import 'assets/css/sass/vendors/normalize';
+@import "assets/css/sass/vendors/normalize";
-@import 'assets/css/sass/vendors/modular-scale';
+@import "assets/css/sass/vendors/modular-scale";
 
 // Utilities
 // Sass tools and helpers used across the project.
-@import 'assets/css/sass/utils/variables';
+@import "assets/css/sass/utils/variables";
-@import 'assets/css/sass/utils/mixins';
+@import "assets/css/sass/utils/mixins";
 
 // Base
 // Includes all the main Storefront CSS.
-@import 'assets/css/base/base';
+@import "assets/css/base/base";
-@import 'assets/css/base/layout';
+@import "assets/css/base/layout";