Merge pull request #237 from bigboxwc/release/3.4.0

release/3.4.0

Author: spencerfinnell

app/customize/output/color-gray-200.php

@@ -26,6 +26,7 @@
 			'.offcanvas-drawer__close',
 			'.page-title',
 			'.product__inner',
+			'.wc-block-grid__product',
 			'.widget',
 			'.woocommerce-MyAccount-navigation:after',
 			'.woocommerce-single-product-data__section',

app/customize/output/type.php

@@ -99,6 +99,7 @@
 			'.action-list__item-label',
 			'.widget-title',
 			'.product-title',
+			'.wc-block-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title',
 			'.woocommerce-terms-and-conditions-text',
 			'.product-category-more__inner',
 			'.woocommerce-loop-category__title',

app/customize/selector-functions.php

@@ -41,7 +41,6 @@ function( $selector ) use ( $state ) {
 function bigbox_customize_get_button_selectors() {
 	return [
 		'.button',
-		'button',
 		'.widget_layered_nav_filters a',
 		'.woocommerce-notice-list__item .woocommerce-Button',
 		'.woocommerce-notice-list__item .wc-forward',
@@ -52,6 +51,7 @@ function bigbox_customize_get_button_selectors() {
 		'.facetwp-facet .facetwp-autocomplete-update',
 		'.facetwp-facet .facetwp-slider-reset',
 		'.comment-form [type="submit"]',
+		'.wc-block-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-add-to-cart a:not(.added_to_cart)',
 	];
 }
 
@@ -71,6 +71,7 @@ function bigbox_customize_get_button_success_selectors() {
 		'.woocommerce-Button.button',
 		'.woocommerce-form-coupon [name="apply_coupon"]',
 		'.woocommerce-notice-list__item .wc-forward',
+		'.wc-block-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-add-to-cart .added_to_cart',
 	];
 }
 

app/integrations/facetwp/template-functions.php

@@ -24,6 +24,7 @@ function bigbox_facetwp_wp_enqueue_scripts() {
 
 	$deps = [
 		$stylesheet,
+		( $stylesheet . '-simplebar' ),
 		'jquery',
 	];
 

app/integrations/gutenberg/class-gutenberg.php

@@ -252,8 +252,17 @@ public function inline_editor_css( $settings ) {
 			$css->add( $config[ $x ] );
 		}
 
+		$css = $css->build();
+
+		/**  */
+		$inline_css = apply_filters( 'bigbox_customize_css_inline', true );
+
+		if ( $inline_css ) {
+			$css .= bigbox_customize_inline_css();
+		}
+
 		$settings['styles'][] = [
-			'css' => $css->build(),
+			'css' => $css,
 		];
 
 		return $settings;

app/integrations/woocommerce/template-functions.php

@@ -40,6 +40,7 @@ function bigbox_woocommerce_wp_enqueue_scripts() {
 
 	$deps = [
 		$stylesheet,
+		( $stylesheet . '-simplebar' ),
 		'wp-util',
 		'woocommerce',
 	];

app/integrations/woocommerce/wc-template-functions.php

@@ -78,6 +78,7 @@ function woocommerce_output_product_categories( $args = [] ) {
 	if ( $total > 5 ) {
 		$product_categories = array_slice( $product_categories, 0, 5 );
 	}
+
 	// End modification.
 	if ( ! $product_categories ) {
 		return false;

app/theme/assets.php

@@ -73,11 +73,21 @@ function bigbox_enqueue_scripts() {
 	$version    = bigbox_get_theme_version();
 	$stylesheet = bigbox_get_theme_name();
 
+	// SimpleBar.
+	wp_enqueue_script(
+		$stylesheet . '-simplebar',
+		get_template_directory_uri() . '/public/js/simplebar.min.js',
+		array(),
+		'4.1.0',
+		true
+	);
+
 	$deps = [
 		'hoverIntent',
+		( $stylesheet . '-simplebar' ),
 	];
 
-	// Combined application scripts.
+	// Application script.
 	wp_enqueue_script(
 		$stylesheet,
 		get_template_directory_uri() . '/public/js/app.min.js',

package-lock.json

@@ -3,7 +3,7 @@
 	"title": "BigBox",
 	"author": "Spencer Finnell",
 	"description": "Easily manage and scale WooCommerce product catalogs.",
-	"version": "3.3.0",
+	"version": "3.4.0",
 	"license": "GPL-2.0-or-later",
 	"main": "webpack.config.js",
 	"engines": {
@@ -36,6 +36,7 @@
 		"postcss-loader": "3.0.0",
 		"raw-loader": "3.1.0",
 		"sass-loader": "7.2.0",
+		"simplebar": "4.1.0",
 		"stylelint": "10.1.0",
 		"stylelint-config-wordpress": "14.0.0",
 		"svg-sprite-loader": "4.1.6",

package.json

@@ -1,3 +1,5 @@
+/* global SimpleBar */
+
 /**
  * Scroll a horizontal menu to the active item.
  *
@@ -11,6 +13,8 @@ const horizontalMenu = ( menuClass, activeClass ) => {
 		return;
 	}
 
+	// Custom scrolling.
+	const simpleBar = new SimpleBar( menu );
 	const activeLink = document.querySelector( `${ menuClass } ${ activeClass }` );
 
 	if ( ! activeLink ) {
@@ -20,7 +24,7 @@ const horizontalMenu = ( menuClass, activeClass ) => {
 	const activeOffset = activeLink.getBoundingClientRect();
 	const menuOffset = menu.getBoundingClientRect();
 
-	menu.scrollLeft = activeOffset.x + ( activeOffset.width / 2 ) + menu.scrollLeft - ( menuOffset.width / 2 );
+	simpleBar.getScrollElement().scrollLeft = activeOffset.x + ( activeOffset.width / 2 ) + menu.scrollLeft - ( menuOffset.width / 2 );
 };
 
 export default horizontalMenu;

resources/assets/js/app/horizontal-menu.js

@@ -8,4 +8,4 @@ import domReady from '@wordpress/dom-ready';
  */
 import horizontalMenu from './../app/horizontal-menu.js';
 
-domReady( horizontalMenu( '.woocommerce-MyAccount-navigation ul', '.is-active' ) );
+domReady( horizontalMenu( '.woocommerce-MyAccount-navigation', '.is-active' ) );

resources/assets/js/woocommerce/account-menu.js

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * Internal dependencies.
+ */
+import horizontalMenu from './../app/horizontal-menu.js';
+
+domReady( horizontalMenu( '.woocommerce-product-categories-wrapper' ) );

resources/assets/js/woocommerce/category-menu.js

@@ -17,3 +17,4 @@ import './checkout.js';
 import './products.js';
 import './lazyload.js';
 import './account-menu.js';
+import './category-menu.js';

resources/assets/js/woocommerce/index.js

@@ -20,6 +20,9 @@
 @import "~bootstrap/scss/mixins/grid";
 @import "~bootstrap/scss/grid";
 
+// SimpleBar
+@import "~simplebar/src/simplebar.css";
+
 /**
  * Internal dependencies
  */

resources/assets/scss/_config.scss

@@ -20,6 +20,9 @@ $use-margins: false;
 @import "elements/mark";
 
 // Styles shared on the frontend.
+@import "modules/star-rating";
+@import "modules/price";
+@import "modules/product";
 @import "modules/gutenberg";
 @import "modules/woocommerce-blocks";
 

resources/assets/scss/gutenberg.scss

@@ -1,11 +1,15 @@
-// [1] Give any potential scrollbar more room so it does not overlap.
+.woocommerce-product-categories-wrapper {
+	-webkit-overflow-scrolling: touch;
+	margin-bottom: $spacer;
+}
+
 .woocommerce-page ul.products-categories,
 .woocommerce ul.products-categories {
 	display: flex;
-	overflow-x: scroll;
-	-webkit-overflow-scrolling: touch;
 	position: relative;
-	padding-bottom: $spacer; // [1]
+
+	@include reset-list();
+
 	padding-left: 2px;
 	padding-right: 2px;
 
@@ -17,10 +21,7 @@
 			border-radius: $border-radius;
 		}
 
-
 		@include gray("background", "200");
-		bottom: $spacer;
-		height: calc(100% - #{$spacer});
 	}
 
 	@include vertical-spacing("margin", "down", (

resources/assets/scss/modules/products-categories.scss

@@ -1,7 +1,8 @@
-// [1] Give any potential scrollbar more room so it does not overlap.
 .woocommerce-MyAccount-navigation {
 	margin: -($spacer) 0 $spacer;
+	padding: 0 0 $spacer;
 	position: relative;
+	-webkit-overflow-scrolling: touch;
 
 	&::after {
 		content: "";
@@ -21,11 +22,9 @@
 
 		@include reset-list();
 
-		padding: 0 0 $spacer; // [1]
+		margin: 0;
+		padding: 0;
 		display: flex;
-		overflow-x: scroll;
-		overflow-y: hidden;
-		-webkit-overflow-scrolling: touch;
 
 		li {
 			flex: 1 0 auto;