Merge branch 'master' of https://github.com/Automattic/_s

* 'master' of https://github.com/Automattic/_s: (92 commits)
  Remove PHPCS Ignore Around $content-width (Automattic#1450)
  Use _S_VERSION constant when enqueuing customizer.js (Automattic#1445)
  Update composer and node dependencies (Automattic#1444)
  Add missing s in languages directory name (Automattic#1442)
  Exclude alignment classes from RTL conversion (Automattic#1435)
  Add new required header fields for style.css (Automattic#1432)
  Remove redundant font-size declarations (Automattic#1434)
  Refactor navigation.js to Javascript ES6 (Automattic#1423)
  Delete the custom bundle script in favor of an npm package (Automattic#1433)
  Fix small typo (Automattic#1428)
  Re-organize SASS structure (Automattic#1425)
  Add a SASS watcher command (Automattic#1427)
  Remove the skip link focus fix (Automattic#1424)
  Replace className.indexOf with classList.contains (Automattic#1422)
  Use CSS grid for gallery styles (Automattic#1246)
  Update README.md documentation (Automattic#1419)
  Add a bundle script to generate a zip file for theme distribution (Automattic#1417)
  Update npm dependencies (Automattic#1418)
  Float implies the use of the block layout (Automattic#960)
  Use the system font stack from WP admin (Automattic#1416)
  ...

.eslintrc

@@ -0,0 +1,8 @@
+{
+    "extends": [
+        "plugin:@wordpress/eslint-plugin/esnext"
+    ],
+    "env": {
+        "browser": true
+    }
+}

.github/CONTRIBUTING.md

@@ -4,7 +4,7 @@ Thanks for contributing to `_s` (Underscores) — you rock!
 
 `_s` is maintained by the [Automattic Theme Team](https://themeshaper.com/about/).
 
-## Submitting issues
+## Reporting issues
 
 Before submitting your issue, make sure it has not been discussed earlier. You can search for existing tickets [here](https://github.com/Automattic/_s/search).
 
@@ -15,13 +15,22 @@ Here are some tips to consider and to help you write a great report:
 * `_s` uses HTML5 markup.
 * We decided not to include translations [[#50](https://github.com/Automattic/_s/pull/50)] beyond the existing `_s.pot` file, a RTL stylesheet [[#263](https://github.com/Automattic/_s/pull/263)], or editor styles [[#225](https://github.com/Automattic/_s/pull/225)], as they are likely to change during development of an `_s` based theme.
 
-## Contributing code
+## Sending a Pull Request
 
 Found a bug you can fix? Fantastic! Patches are always welcome. Here's a few tips for crafting a great pull request:
 
 * Include the purpose of your PR. Be explicit about the issue your PR solves.
 * Reference any existing issues that relate to your PR. This allows everyone to easily see all related discussions.
-* When submitting a change that affects CSS, please make sure that both SCSS sources and output CSS have been updated equally.
+* `_s` complies with the [WordPress Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/) and any PR should comply as well.
+
+### Before submitting a pull request, please make sure the following is done:
+
+1. Fork the repo and create your branch from master.
+2. Run `npm install` and `composer install`.
+3. When submitting a change that affects SCSS sources, please make sure there is no linting errors using `npm run lint:scss`, then generate the css files using `npm run compile:css` and `npm run compile:rtl`.
+4. When submitting a change that affects PHP files, please make sure there is no syntax or linting errors by running `composer lint:php` then `composer lint:wpcs`.
+5. When submitting a change that affects JS files, please make sure there is no linting errors by running `npm run lint:js`.
+6. When submitting a change that affects text strings, make sure to regenerate the POT file by running `composer make-pot`.
 
 By contributing code to `_s`, you grant its use under the [GNU General Public License v2 (or later)](LICENSE).
 

.gitignore

@@ -0,0 +1,6 @@
+/node_modules
+/vendor
+package-lock.json
+composer.lock
+style.css.map
+.DS_Store

.stylelintrc.json

@@ -0,0 +1,16 @@
+{
+    "extends": [
+        "stylelint-config-wordpress/scss"
+    ],
+    "ignoreFiles": [
+        "sass/_normalize.scss"
+    ],
+    "rules": {
+        "font-family-no-missing-generic-family-keyword": null,
+        "no-descending-specificity": null,
+        "block-no-empty": null,
+        "no-duplicate-selectors": null,
+        "font-family-no-duplicate-names": null,
+        "selector-class-pattern": null
+    }
+}

.travis.yml

@@ -4,88 +4,68 @@
 # For use with the Underscores WordPress theme.
 # @link https://github.com/Automattic/_s
 
-# Ditch sudo and use containers.
-# @link https://docs.travis-ci.com/user/migrating-from-legacy/#Why-migrate-to-container-based-infrastructure%3F
-# @link https://docs.travis-ci.com/user/workers/container-based-infrastructure/#Routing-your-build-to-container-based-infrastructure
-sudo: false
-dist: trusty
+# Tell Travis CI which OS and which distro to use.
+os: linux
+dist: xenial
+
+# Cache directories between builds.
+# @link https://docs.travis-ci.com/user/caching/#arbitrary-directories
+cache:
+  directories:
+    # Cache directory for npm.
+    - $HOME/.npm
+    # Cache directory for older Composer versions.
+    - $HOME/.composer/cache/files
+    # Cache directory for more recent Composer versions.
+    - $HOME/.cache/composer/files
 
 # Declare project language.
-# @link https://about.travis-ci.org/docs/user/languages/php/
-language: php
+# @link https://docs.travis-ci.com/user/languages/php/
+language:
+  - php
 
-# Declare versions of PHP to use. Use one decimal max.
-# @link https://docs.travis-ci.com/user/build-configuration/
-matrix:
-    fast_finish: true
+php:
+  - 5.6
+  - 7.0
+  - 7.1
+  - 7.2
+  - 7.3
 
-    include:
-        # Current $required_php_version for WordPress: 5.2.4
-        # aliased to 5.2.17
-        - php: '5.2'
-          dist: precise
-        # aliased to a recent 5.6.x version
-        - php: '5.6'
-          env: SNIFF=1
-        # aliased to a recent 7.0.x version
-        - php: '7.0'
-        # aliased to a recent 7.2.x version
-        - php: '7.2'
-        # aliased to a recent hhvm version
-        - php: 'hhvm'
+jobs:
+  fast_finish: true
+  include:
+    - php: 7.4
+      env: SNIFF=1
 
-    allow_failures:
-        - php: 'hhvm'
+before_install:
+  # Speed up build time by disabling Xdebug.
+  - phpenv config-rm xdebug.ini || echo 'No xdebug config.'
+  # Download and install the latest long-term support release of node.
+  - if [[ "$SNIFF" == 1 ]]; then nvm install --lts; fi
+  # Install Composer dependencies.
+  - composer install
+  # Install NPM dependencies.
+  - if [[ "$SNIFF" == 1 ]]; then npm install; fi
 
-# Use this to prepare the system to install prerequisites or dependencies.
-# e.g. sudo apt-get update.
-# Failures in this section will result in build status 'errored'.
-# before_install:
+script:
+  # Validate the composer.json file.
+  # @link https://getcomposer.org/doc/03-cli.md#validate
+  - composer validate --no-check-all --strict
 
-# Use this to prepare your build for testing.
-# e.g. copy database configurations, environment variables, etc.
-# Failures in this section will result in build status 'errored'.
-before_script:
-    - export PHPCS_DIR=/tmp/phpcs
-    - export SNIFFS_DIR=/tmp/sniffs
-    # Install CodeSniffer for WordPress Coding Standards checks.
-    - if [[ "$SNIFF" == "1" ]]; then git clone -b 2.9.1 --depth 1 https://github.com/squizlabs/PHP_CodeSniffer.git $PHPCS_DIR; fi
-    # Install WordPress Coding Standards.
-    - if [[ "$SNIFF" == "1" ]]; then git clone -b 0.11.0 --depth 1 https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git $SNIFFS_DIR; fi
-    # Install PHP Compatibility sniffs.
-    - if [[ "$SNIFF" == "1" ]]; then git clone -b 7.1.5 --depth 1 https://github.com/wimg/PHPCompatibility.git $SNIFFS_DIR/PHPCompatibility; fi
-    # Set install path for PHPCS sniffs.
-    # @link https://github.com/squizlabs/PHP_CodeSniffer/blob/4237c2fc98cc838730b76ee9cee316f99286a2a7/CodeSniffer.php#L1941
-    - if [[ "$SNIFF" == "1" ]]; then $PHPCS_DIR/scripts/phpcs --config-set installed_paths $SNIFFS_DIR; fi
-    # After CodeSniffer install you should refresh your path.
-    - if [[ "$SNIFF" == "1" ]]; then phpenv rehash; fi
-    # Install JSCS: JavaScript Code Style checker.
-    # @link http://jscs.info/
-    - if [[ "$SNIFF" == "1" ]]; then npm install -g jscs; fi
-    # Install JSHint, a JavaScript Code Quality Tool.
-    # @link http://jshint.com/docs/
-    - if [[ "$SNIFF" == "1" ]]; then npm install -g jshint; fi
-    # Pull in the WP Core jshint rules.
-    - if [[ "$SNIFF" == "1" ]]; then wget https://develop.svn.wordpress.org/trunk/.jshintrc; fi
+  # Search for PHP syntax errors using PHP Parallel Lint.
+  # @link https://github.com/php-parallel-lint/PHP-Parallel-Lint
+  - composer lint:php
 
-# Run test script commands.
-# Default is specific to project language.
-# All commands must exit with code 0 on success. Anything else is considered failure.
-script:
-    # Search for PHP syntax errors.
-    - find -L . -name '*.php' -print0 | xargs -0 -n 1 -P 4 php -l
-    # Run the theme through JSHint.
-    - if [[ "$SNIFF" == "1" ]]; then jshint .; fi
-    # Run the theme through JavaScript Code Style checker.
-    - if [[ "$SNIFF" == "1" ]]; then jscs .; fi
-    # WordPress Coding Standards.
-    # @link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards
-    # @link https://pear.php.net/package/PHP_CodeSniffer/
-    # Uses a custom ruleset based on WordPress. This ruleset is automatically
-    # picked up by PHPCS as it's named `phpcs.xml(.dist)`.
-    - if [[ "$SNIFF" == "1" ]]; then $PHPCS_DIR/scripts/phpcs; fi
+  # Check the PHP files with the coding standards documented in the phpcs.xml.dist file.
+  - if [[ "$SNIFF" == 1 ]]; then composer lint:wpcs; fi
+
+  # Check the JS files with the lint-js script defined in the @wordpress/scripts package.
+  - if [[ "$SNIFF" == 1 ]]; then npm run lint:js; fi
+
+  # Check the SCSS files with the lint-style script defined in the @wordpress/scripts package.
+  - if [[ "$SNIFF" == 1 ]]; then npm run lint:scss; fi
 
 # Receive notifications for build results.
-# @link https://docs.travis-ci.com/user/notifications/#Email-notifications
+# @link https://docs.travis-ci.com/user/notifications/#configuring-email-notifications
 notifications:
     email: false

404.php

@@ -7,54 +7,54 @@
  * @package _s
  */
 
-get_header(); ?>
+get_header();
+?>
 
-	<div id="primary" class="content-area">
-		<main id="main" class="site-main">
+	<main id="primary" class="site-main">
 
-			<section class="error-404 not-found">
-				<header class="page-header">
-					<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', '_s' ); ?></h1>
-				</header><!-- .page-header -->
+		<section class="error-404 not-found">
+			<header class="page-header">
+				<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', '_s' ); ?></h1>
+			</header><!-- .page-header -->
 
-				<div class="page-content">
-					<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', '_s' ); ?></p>
+			<div class="page-content">
+				<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', '_s' ); ?></p>
 
 					<?php
-						get_search_form();
+					get_search_form();
 
-						the_widget( 'WP_Widget_Recent_Posts' );
+					the_widget( 'WP_Widget_Recent_Posts' );
 					?>
 
 					<div class="widget widget_categories">
 						<h2 class="widget-title"><?php esc_html_e( 'Most Used Categories', '_s' ); ?></h2>
 						<ul>
-						<?php
-							wp_list_categories( array(
-								'orderby'    => 'count',
-								'order'      => 'DESC',
-								'show_count' => 1,
-								'title_li'   => '',
-								'number'     => 10,
-							) );
-						?>
+							<?php
+							wp_list_categories(
+								array(
+									'orderby'    => 'count',
+									'order'      => 'DESC',
+									'show_count' => 1,
+									'title_li'   => '',
+									'number'     => 10,
+								)
+							);
+							?>
 						</ul>
 					</div><!-- .widget -->
 
 					<?php
+					/* translators: %1$s: smiley */
+					$_s_archive_content = '<p>' . sprintf( esc_html__( 'Try looking in the monthly archives. %1$s', '_s' ), convert_smilies( ':)' ) ) . '</p>';
+					the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=</h2>$_s_archive_content" );
 
-						/* translators: %1$s: smiley */
-						$archive_content = '<p>' . sprintf( esc_html__( 'Try looking in the monthly archives. %1$s', '_s' ), convert_smilies( ':)' ) ) . '</p>';
-						the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=</h2>$archive_content" );
-
-						the_widget( 'WP_Widget_Tag_Cloud' );
+					the_widget( 'WP_Widget_Tag_Cloud' );
 					?>
 
-				</div><!-- .page-content -->
-			</section><!-- .error-404 -->
+			</div><!-- .page-content -->
+		</section><!-- .error-404 -->
 
-		</main><!-- #main -->
-	</div><!-- #primary -->
+	</main><!-- #main -->
 
 <?php
 get_footer();

README.md

@@ -7,39 +7,64 @@ Hi. I'm a starter theme called `_s`, or `underscores`, if you like. I'm a theme
 
 My ultra-minimal CSS might make me look like theme tartare but that means less stuff to get in your way when you're designing your awesome theme. Here are some of the other more interesting things you'll find here:
 
+* A modern workflow with a pre-made command-line interface to turn your project into a more pleasant experience.
 * A just right amount of lean, well-commented, modern, HTML5 templates.
-* A helpful 404 template.
-* A custom header implementation in `inc/custom-header.php` just add the code snippet found in the comments of `inc/custom-header.php` to your `header.php` template.
+* A custom header implementation in `inc/custom-header.php`. Just add the code snippet found in the comments of `inc/custom-header.php` to your `header.php` template.
 * Custom template tags in `inc/template-tags.php` that keep your templates clean and neat and prevent code duplication.
 * Some small tweaks in `inc/template-functions.php` that can improve your theming experience.
 * A script at `js/navigation.js` that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in `functions.php`.
-* 2 sample CSS layouts in `layouts/` for a sidebar on either side of your content.
+* 2 sample layouts in `sass/layouts/` made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice in `sass/style.scss`.
+Note: `.no-sidebar` styles are automatically loaded.
 * Smartly organized starter CSS in `style.css` that will help you to quickly get your design off the ground.
+* Full support for `WooCommerce plugin` integration with hooks in `inc/woocommerce.php`, styling override woocommerce.css with product gallery features (zoom, swipe, lightbox) enabled.
 * Licensed under GPLv2 or later. :) Use it to make something cool.
 
-Getting Started
+Installation
 ---------------
 
-If you want to keep it simple, head over to https://underscores.me and generate your `_s` based theme from there. You just input the name of the theme you want to create, click the "Generate" button, and you get your ready-to-awesomize starter theme.
+### Requirements
 
-If you want to set things up manually, download `_s` from GitHub. The first thing you want to do is copy the `_s` directory and change the name to something else (like, say, `megatherium-is-awesome`), and then you'll need to do a five-step find and replace on the name in all the templates.
+`_s` requires the following dependencies:
 
-1. Search for `'_s'` (inside single quotations) to capture the text domain.
-2. Search for `_s_` to capture all the function names.
-3. Search for `Text Domain: _s` in `style.css`.
-4. Search for <code>&nbsp;_s</code> (with a space before it) to capture DocBlocks.
-5. Search for `_s-` to capture prefixed handles.
+- [Node.js](https://nodejs.org/)
+- [Composer](https://getcomposer.org/)
 
-OR
+### Quick Start
 
-1. Search for: `'_s'` and replace with: `'megatherium-is-awesome'`
-2. Search for: `_s_` and replace with: `megatherium_is_awesome_`
-3. Search for: `Text Domain: _s` and replace with: `Text Domain: megatherium-is-awesome` in `style.css`.
-4. Search for: <code>&nbsp;_s</code> and replace with: <code>&nbsp;Megatherium_is_Awesome</code>
-5. Search for: `_s-` and replace with: `megatherium-is-awesome-`
+Clone or download this repository, change its name to something else (like, say, `megatherium-is-awesome`), and then you'll need to do a six-step find and replace on the name in all the templates.
+
+1. Search for `'_s'` (inside single quotations) to capture the text domain and replace with: `'megatherium-is-awesome'`.
+2. Search for `_s_` to capture all the functions names and replace with: `megatherium_is_awesome_`.
+3. Search for `Text Domain: _s` in `style.css` and replace with: `Text Domain: megatherium-is-awesome`.
+4. Search for <code>&nbsp;_s</code> (with a space before it) to capture DocBlocks and replace with: <code>&nbsp;Megatherium_is_Awesome</code>.
+5. Search for `_s-` to capture prefixed handles and replace with: `megatherium-is-awesome-`.
+6. Search for `_S_` (in uppercase) to capture constants and replace with: `MEGATHERIUM_IS_AWESOME_`.
 
 Then, update the stylesheet header in `style.css`, the links in `footer.php` with your own information and rename `_s.pot` from `languages` folder to use the theme's slug. Next, update or delete this readme.
 
+### Setup
+
+To start using all the tools that come with `_s`  you need to install the necessary Node.js and Composer dependencies :
+
+```sh
+$ composer install
+$ npm install
+```
+
+### Available CLI commands
+
+`_s` comes packed with CLI commands tailored for WordPress theme development :
+
+- `composer lint:wpcs` : checks all PHP files against [PHP Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/php/).
+- `composer lint:php` : checks all PHP files for syntax errors.
+- `composer make-pot` : generates a .pot file in the `languages/` directory.
+- `npm run compile:css` : compiles SASS files to css.
+- `npm run compile:rtl` : generates an RTL stylesheet.
+- `npm run watch` : watches all SASS files and recompiles them to css when they change.
+- `npm run lint:scss` : checks all SASS files against [CSS Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/).
+- `npm run lint:js` : checks all JavaScript files against [JavaScript Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/).
+- `npm run bundle` : generates a .zip archive for distribution, excluding development and system files.
+
 Now you're ready to go! The next step is easy to say, but harder to do: make an awesome WordPress theme. :)
 
 Good luck!