Merge pull request #98 from bigboxwc/release/2.2.0

release/2.2.0

Author: spencerfinnell

.browserslistrc

@@ -0,0 +1 @@
+extends @wordpress/browserslist-config

.eslintrc.js

@@ -1,3 +1,23 @@
+## [2.2.0] - 2018-12-27
+
+### New
+
+- Accessibility improvements:
+  - Better tabbing order for shop filters and results.
+  - "Skip to content" and "Skip to result" skip links.
+  - Ensure all focus outlines are visible.
+- Upgrade developer experience:
+  - Use more `@wordpress` `npm` packages (`eslint`, `browserslist`)
+  - Update JS coding standards.
+  - Update PHP coding standards.
+  - Update CSS coding standards.
+- Request a Google Fonts API key when generating font list.
+- Allow integrations to define helper files to be autoloaded.
+
+### Fix
+
+- Avoid error if offcanvas drawer source or target does not exist.
+
 ## [2.1.0] - 2018-12-18
 
 ### New
@@ -9,7 +29,7 @@
 ### Fix
 
 - Ensure button color is accurately reflected.
-- Coding standad updates.
+- Coding standard updates.
 
 ## [2.0.0] - 2018-11-06
 

CHANGELOG.md

@@ -2,15 +2,15 @@
 
 ## Getting Started
 
-If you prefer to set things up manually, be sure to have <a href="https://nodejs.org/en/">Node.js installed first</a>. You should be running a Node version matching the [current active LTS release](https://github.com/nodejs/Release#release-schedule) or newer for this plugin to work correctly. You can check your Node.js version by typing `node -v` in the Terminal prompt.
+Be sure to have <a href="https://nodejs.org/en/">Node.js installed first</a>. You should be running a Node version matching the [current active LTS release](https://github.com/nodejs/Release#release-schedule) or newer for this plugin to work correctly. You can check your Node.js version by typing `node -v` in the Terminal prompt.
 
 You should also have the latest release of <a href="https://npmjs.org">npm installed</a>, npm is a separate project from Node.js and is updated frequently. If you've just installed Node.js which includes a version of npm within the installation you most likely will need to also update your npm install. To update npm, type this into your terminal: `npm install npm@latest -g`
 
 To test the plugin, or to contribute to it, you can clone this repository and build the plugin files using Node. How you do that depends on whether you're developing locally or uploading the plugin to a remote host.
 
 ### Local Environment
 
-Next, open a terminal (or if on Windows, a command prompt) and navigate to the repository you cloned. Now type `npm run setup-theme` to get the dependencies all set up. Then you can type `npm run dev` in your terminal or command prompt to keep the theme building in the background as you work on it.
+Next, open a terminal (or if on Windows, a command prompt) and navigate to the repository you cloned. Now type `npm run setup-theme-dev` to get the dependencies all set up. Then you can type `npm run dev` in your terminal or command prompt to keep the theme building in the background as you work on it.
 
 ## Workflow
 
@@ -21,10 +21,11 @@ A good workflow for new contributors to follow is listed below:
 - Make code changes
 - Commit code changes within newly created branch
 - Push branch to forked repository
-- Submit Pull Request to `bigbox-theme` repository
+- Submit Pull Request to `bigbox` repository
 
 Ideally name your branches with prefixes and descriptions, like this: `[type]/[change]`. A good prefix would be:
 
 - `add/` = add a new feature
 - `try/` = experimental feature, "tentatively add"
-- `update/` = update an existing feature
+- `update/` = update an existing feature
+- `issue/` = solve an open issue

CONTRIBUTING.md

@@ -56,6 +56,14 @@ abstract class Integration {
 	 */
 	protected $dependencies;
 
+	/**
+	 * Additional functional files.
+	 *
+	 * @var array $helper_files
+	 * @since 2.2.0
+	 */
+	protected $helper_files = [];
+
 	/**
 	 * Additional inline CSS configuration items.
 	 *
@@ -79,6 +87,17 @@ public function __construct( $slug, $dependencies ) {
 		$this->dir          = get_template_directory() . $this->get_local_path();
 	}
 
+	/**
+	 * Load defined helper files.
+	 *
+	 * @since 2.2.0
+	 */
+	function load_helper_files() {
+		foreach ( $this->helper_files as $name ) {
+			include_once trailingslashit( $this->get_dir() ) . $name . '.php';
+		}
+	}
+
 	/**
 	 * Get the integrations local working path.
 	 *
@@ -125,6 +144,9 @@ public function is_active() {
 	 * Load inline CSS if any output controls are defined.
 	 *
 	 * @since 1.16.0
+	 *
+	 * @param array $configs Output configurations.
+	 * @return array $configs Output configurations with additional integration configurations.
 	 */
 	public function inline_css_configs( $configs ) {
 		if ( empty( $this->inline_css_configs ) ) {

app/class-integration.php

@@ -22,8 +22,14 @@
  * @return array
  */
 function bigbox_customize_controls_js_fonts( $settings ) {
+	$file = get_template_directory() . '/resources/data/google-fonts.json';
+
+	if ( ! file_exists( $file ) ) {
+		return $settings;
+	}
+
 	$settings['typography'] = [
-		'fontList' => json_decode( file_get_contents( get_template_directory() . '/resources/data/google-fonts.json' ) ), // @codingStandardsIgnoreLine
+		'fontList' => json_decode( file_get_contents( $file ) ), // @codingStandardsIgnoreLine
 	];
 
 	return $settings;
@@ -57,10 +63,12 @@ function bigbox_customize_register_type_sections( $wp_customize ) {
  * @param WP_Customize_Manager $wp_customize The Customizer object.
  */
 function bigbox_customize_register_type_controls( $wp_customize ) {
+	$google = bigbox_has_google_fonts();
+
 	$wp_customize->add_setting(
 		'type-font-family',
 		[
-			'default'           => 'Lato',
+			'default'           => $google ? 'Lato' : 'default',
 			'transport'         => 'postMessage',
 			'sanitize_callback' => 'sanitize_text_field',
 		]
@@ -141,7 +149,7 @@ function bigbox_customize_register_type_controls( $wp_customize ) {
 			/* translators: Customizer control label. */
 			'label'       => __( 'Base Font Weight', 'bigbox' ),
 			'description' => '',
-			'weight'      => 'regular',
+			'weight'      => $google ? 'regular' : 500,
 		],
 		'bold' => [
 			/* translators: Customizer control label. */

app/customize/controls/type.php

@@ -106,8 +106,9 @@
 	'outline-color'    => [
 		'selectors'    => [
 			'.is-tabbing *:focus',
-			'.is-tabbing .navbar--mobile *:focus',
-			'.is-tabbing .sub-menu *:focus',
+			'.is-tabbing .navbar .navbar--mobile :focus',
+			'.is-tabbing .navbar .navbar-search :focus',
+			'.is-tabbing .navbar .sub-menu :focus',
 		],
 		'declarations' => [
 			'outline-color' => esc_attr( $primary ),

app/customize/output/color-primary.php

@@ -54,11 +54,15 @@
 	],
 	'declarations' => [
 		'font-weight' => esc_attr( $weight_base ),
-		'font-family' => sprintf( '"%1$s", %2$s', esc_attr( $family ), esc_attr( $fallback ) ),
 		'font-size'   => esc_attr( "{$size}em" ),
 	],
 ];
 
+// Only add family if not using system default.
+if ( 'default' !== $family ) {
+	$base['declarations']['font-family'] = sprintf( '"%1$s", %2$s', esc_attr( $family ), esc_attr( $fallback ) );
+}
+
 return [
 	$base,
 

app/customize/output/type.php

@@ -13,6 +13,17 @@
 	exit; // Exit if accessed directly.
 }
 
+/**
+ * Determine if the Google Font list is available.
+ *
+ * @since 2.2.0
+ *
+ * @return bool
+ */
+function bigbox_has_google_fonts() {
+	return file_exists( get_template_directory() . '/resources/data/google-fonts.json' );
+}
+
 /**
  * Get the chosen family.
  *
@@ -21,7 +32,8 @@
  * @return string
  */
 function bigbox_get_theme_font_family() {
-	$family = get_theme_mod( 'type-font-family', 'Lato' );
+	$default = bigbox_has_google_fonts() ? 'Lato' : 'default';
+	$family  = get_theme_mod( 'type-font-family', $default );
 
 	/**
 	 * Filters the name of the font family used to generate custom CSS.
@@ -42,7 +54,7 @@ function bigbox_get_theme_font_family() {
  * @return string
  */
 function bigbox_get_theme_font_weight( $weight_type = 'base' ) {
-	$weight = get_theme_mod( "type-font-weight-{$weight_type}", 'base' === $weight_type ? 'normal' : 'bold' );
+	$weight = get_theme_mod( "type-font-weight-{$weight_type}", 'base' === $weight_type ? 500 : 700 );
 
 	/**
 	 * Filters the font weight used to generate custom CSS.

app/customize/type-functions.php

@@ -26,6 +26,19 @@
  */
 class FacetWP extends Integration implements Registerable, Service {
 
+	/**
+	 * Additional functional files.
+	 *
+	 * @var array $helper_files
+	 * @since 2.2.0
+	 */
+	protected $helper_files = [
+		'template-hooks',
+		'template-functions',
+		'default-facets',
+		'customize',
+	];
+
 	/**
 	 * Additional inline CSS configuration items.
 	 *
@@ -42,12 +55,9 @@ class FacetWP extends Integration implements Registerable, Service {
 	 * @since 1.0.0
 	 */
 	public function register() {
-		add_filter( 'bigbox_customize_inline_css_configs', [ $this, 'inline_css_configs' ] );
+		$this->load_helper_files();
 
-		include_once $this->get_dir() . '/template-hooks.php';
-		include_once $this->get_dir() . '/template-functions.php';
-		include_once $this->get_dir() . '/default-facets.php';
-		include_once $this->get_dir() . '/customize.php';
+		add_filter( 'bigbox_customize_inline_css_configs', [ $this, 'inline_css_configs' ] );
 	}
 
 }