Merge pull request #235 from bigboxwc/issue/228

Add Support for JS-Rendered WooCommerce Product Blocks

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/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;

resources/assets/scss/gutenberg.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/modules/woocommerce-blocks.scss

@@ -1,3 +1,99 @@
+.wc-block-grid {
+
+	@for $i from 2 to 9 {
+		&.has-#{$i}-columns .wc-block-grid__product {
+			font-size: 1em;
+			flex: 1 0 calc(#{ 100% / $i } - #{ $spacer });
+			max-width: 100% / $i;
+		}
+	}
+
+	&.has-4-columns:not(.alignwide):not(.alignfull),
+	&.has-5-columns:not(.alignfull),
+	&.has-6-columns:not(.alignfull),
+	&.has-7-columns,
+	&.has-8-columns {
+
+		.wc-block-grid__product {
+			font-size: 1rem;
+		}
+	}
+
+	.wc-block-grid__products {
+
+		.wc-block-grid__product {
+			@extend .product__inner;
+
+			margin: 0 $spacer $spacer 0;
+			padding: 0 0 $spacer 0;
+			text-align: left;
+
+			&,
+			.wc-block-grid__product-price,
+			.wc-block-grid__product-add-to-cart a {
+				font-size: 1rem;
+			}
+
+			.wc-block-grid__product-image {
+				@extend .product__preview;
+			}
+
+			.wc-block-grid__product-title {
+				
+				@extend .product__title;
+			}
+
+			.wc-block-grid__product-add-to-cart a {
+
+				@include button;
+				@include button--size-xs();
+
+				&.added::after {
+					display: none;
+				}
+			}
+
+			.wc-block-grid__product-price {
+				display: flex;
+				margin: ($spacer / 2) 0;
+			}
+
+			.wc-block-grid__product-onsale {
+				display: none;
+			}
+
+			.wc-block-grid__product-rating {
+
+				.star-rating {
+					overflow: visible;
+					width: auto;
+					height: auto;
+					line-height: 1;
+					font-size: 1em;
+					font-family: inherit;
+					font-weight: inherit;
+					display: inherit;
+					margin: 0;
+
+					&::before {
+						display: none;
+					}
+
+					span {
+						overflow: visible;
+						position: relative;
+						padding-top: 0;
+
+						&::before {
+							display: none;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
 .wc-block-featured-product {
 	padding: ($spacer * 2) 0;
 

resources/views/nux/admin-page.php

@@ -32,5 +32,3 @@
 <div id="poststuff" class="wrap bigbox-setup-guide-steps">
 	<?php do_accordion_sections( 'bigbox-setup-steps', 'normal', null ); ?>
 </div>
-
-<script>!function(e,o,n){window.HSCW=o,window.HS=n,n.beacon=n.beacon||{};var t=n.beacon;t.userConfig={},t.readyQueue=[],t.config=function(e){this.userConfig=e},t.ready=function(e){this.readyQueue.push(e)},o.config={docs:{enabled:!0,baseUrl:"https://bigbox.helpscoutdocs.com/"},contact:{enabled:!1,formId:"e015d0b0-45ce-11e8-8d65-0ee9bb0328ce"}};var r=e.getElementsByTagName("script")[0],c=e.createElement("script");c.type="text/javascript",c.async=!0,c.src="https://djtflbt20bdde.cloudfront.net/",r.parentNode.insertBefore(c,r)}(document,window.HSCW||{},window.HS||{});</script>