Varia: Restructure WC styles to only appear when WC is active

varia/functions.php

@@ -308,3 +308,10 @@ require get_template_directory() . '/inc/icon-functions.php';
  * Custom template tags for the theme.
  */
 require get_template_directory() . '/inc/template-tags.php';
+
+/**
+ * Load WooCommerce compatibility file.
+ */
+if ( class_exists( 'WooCommerce' ) ) {
+	require get_template_directory() . '/inc/woocommerce.php';
+}

varia/inc/woocommerce.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * WooCommerce Compatibility File
+ *
+ * @link https://woocommerce.com/
+ *
+ * @package Varia
+ */
+/**
+ * WooCommerce setup function.
+ *
+ * @link https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/
+ * @link https://github.com/woocommerce/woocommerce/wiki/Enabling-product-gallery-features-(zoom,-swipe,-lightbox)-in-3.0.0
+ *
+ * @return void
+ */
+function varia_woocommerce_setup() {
+	add_theme_support( 'woocommerce', apply_filters( 'varia_woocommerce_args', array(
+		'single_image_width'    => 750,
+		'thumbnail_image_width' => 350,
+		'product_grid'          => array(
+			'default_columns' => 2,
+			'default_rows'    => 6,
+			'min_columns'     => 1,
+			'max_columns'     => 6,
+			'min_rows'        => 1
+		)
+	) ) );
+	add_theme_support( 'wc-product-gallery-zoom' );
+	add_theme_support( 'wc-product-gallery-lightbox' );
+	add_theme_support( 'wc-product-gallery-slider' );
+}
+add_action( 'after_setup_theme', 'varia_woocommerce_setup' );
+
+/**
+ * Enqueue scripts and styles.
+ */
+function varia_woocommerce_scripts() {
+
+	// WooCommerce styles
+	wp_enqueue_style( 'varia-woocommerce-style', get_template_directory_uri() . '/style-woocommerce.css', array(), wp_get_theme()->get( 'Version' ) );
+
+}
+add_action( 'wp_enqueue_scripts', 'varia_woocommerce_scripts' );
+

varia/package.json

@@ -38,6 +38,7 @@
     "build:style-editor": "node-sass style-editor.scss style-editor.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r style-editor.css",
     "build:rtl": "rtlcss style.css style-rtl.css",
     "build:print": "node-sass print.scss print.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r print.css",
+    "build:woocommerce": "node-sass style-woocommerce.scss style-woocommerce.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r style.css",
     "build": "run-p \"build:*\"",
     "watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
     "child-theme": "sh ../theme-dev-utils/build-child-theme.sh"

varia/sass/abstracts/_extends.scss

@@ -0,0 +1,26 @@
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+%button-style {
+	@include crop-text(map-deep-get($config-button, "font", "line-height"));
+	color: #{map-deep-get($config-button, "color", "text")};
+	cursor: pointer;
+	font-weight: #{map-deep-get($config-button, "font", "weight")};
+	font-family: #{map-deep-get($config-button, "font", "family")};
+	font-size: #{map-deep-get($config-button, "font", "size")};
+	background-color: #{map-deep-get($config-button, "color", "background")};
+	border-radius: #{map-deep-get($config-button, "border-radius")};
+	border-width: 0;
+	padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
+
+	&:hover,
+	&:focus,
+	&.has-focus {
+		color: #{map-deep-get($config-button, "color", "text-hover")};
+		background-color: #{map-deep-get($config-button, "color", "background-hover")};
+	}
+}
+

varia/sass/abstracts/_imports.scss

@@ -6,3 +6,4 @@
 @import "functions";
 @import "config-global";
 @import "mixins";
+@import "extends";

varia/sass/blocks/button/_style.scss

@@ -1,29 +1,6 @@
 /**
- * Placeholder button style
- * - Since buttons appear in various blocks,
- *   let’s use a placeholder to keep them all
- *   in-sync
+ * Button
  */
-%button-style {
-	@include crop-text(map-deep-get($config-button, "font", "line-height"));
-	color: #{map-deep-get($config-button, "color", "text")};
-	cursor: pointer;
-	font-weight: #{map-deep-get($config-button, "font", "weight")};
-	font-family: #{map-deep-get($config-button, "font", "family")};
-	font-size: #{map-deep-get($config-button, "font", "size")};
-	background-color: #{map-deep-get($config-button, "color", "background")};
-	border-radius: #{map-deep-get($config-button, "border-radius")};
-	border-width: 0;
-	padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
-
-	&:hover,
-	&:focus,
-	&.has-focus {
-		color: #{map-deep-get($config-button, "color", "text-hover")};
-		background-color: #{map-deep-get($config-button, "color", "background-hover")};
-	}
-}
-
 button,
 .button,
 input[type="submit"],

varia/sass/vendors/_imports.scss

@@ -4,5 +4,4 @@
  */
 
 @import "jetpack";
-@import "woocommerce/woocommerce";
 // @import "wpcom";

varia/sass/vendors/_woocommerce.scss

@@ -72,24 +72,24 @@ $border_radius: map-deep-get($config-global, "border-radius", "sm");
 }
 
 // Blocks
-@import "blocks/button/style";
+@import "woocommerce/blocks/button/style";
 
 // Components
-@import "components/cart-sidebar";
-@import "components/cart-collaterals";
-@import "components/notices";
-@import "components/onsale";
-@import "components/password-strength-meter";
-@import "components/product-loops";
-@import "components/reviews";
-@import "components/star-rating";
-@import "components/tables";
+@import "woocommerce/components/cart-sidebar";
+@import "woocommerce/components/cart-collaterals";
+@import "woocommerce/components/notices";
+@import "woocommerce/components/onsale";
+@import "woocommerce/components/password-strength-meter";
+@import "woocommerce/components/product-loops";
+@import "woocommerce/components/reviews";
+@import "woocommerce/components/star-rating";
+@import "woocommerce/components/tables";
 
 // Layout
-@import "layout/structure";
+@import "woocommerce/layout/structure";
 
 // Pages
-@import "pages/account";
-@import "pages/cart";
-@import "pages/product-page";
-@import "pages/single-product";
+@import "woocommerce/pages/account";
+@import "woocommerce/pages/cart";
+@import "woocommerce/pages/product-page";
+@import "woocommerce/pages/single-product";

varia/style-editor-content-width.scss

@@ -9,6 +9,7 @@
 @import "sass/abstracts/functions";
 @import "sass/abstracts/config-global";
 @import "sass/abstracts/mixins";
+@import "sass/abstracts/extends";
 
 /**
  * Structure

varia/style-editor.css

@@ -112,6 +112,77 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+.site-header .main-navigation button,
+.site-header .main-navigation .button,
+.site-header .main-navigation input[type="submit"],
+.site-header .main-navigation .wp-block-button__link,
+.site-header .main-navigation .wp-block-file__button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: sans-serif;
+	font-size: 1.2rem;
+	background-color: blue;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.site-header .main-navigation button:before,
+.site-header .main-navigation .button:before,
+.site-header .main-navigation input[type="submit"]:before,
+.site-header .main-navigation .wp-block-button__link:before,
+.site-header .main-navigation .wp-block-file__button:before, .site-header .main-navigation button:after,
+.site-header .main-navigation .button:after,
+.site-header .main-navigation input[type="submit"]:after,
+.site-header .main-navigation .wp-block-button__link:after,
+.site-header .main-navigation .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.site-header .main-navigation button:before,
+.site-header .main-navigation .button:before,
+.site-header .main-navigation input[type="submit"]:before,
+.site-header .main-navigation .wp-block-button__link:before,
+.site-header .main-navigation .wp-block-file__button:before {
+	margin-bottom: -0.12em;
+}
+
+.site-header .main-navigation button:after,
+.site-header .main-navigation .button:after,
+.site-header .main-navigation input[type="submit"]:after,
+.site-header .main-navigation .wp-block-button__link:after,
+.site-header .main-navigation .wp-block-file__button:after {
+	margin-top: -0.11em;
+}
+
+.site-header .main-navigation button:hover,
+.site-header .main-navigation .button:hover,
+.site-header .main-navigation input:hover[type="submit"],
+.site-header .main-navigation .wp-block-button__link:hover,
+.site-header .main-navigation .wp-block-file__button:hover, .site-header .main-navigation button:focus,
+.site-header .main-navigation .button:focus,
+.site-header .main-navigation input:focus[type="submit"],
+.site-header .main-navigation .wp-block-button__link:focus,
+.site-header .main-navigation .wp-block-file__button:focus, .site-header .main-navigation button.has-focus,
+.site-header .main-navigation .has-focus.button,
+.site-header .main-navigation input.has-focus[type="submit"],
+.site-header .main-navigation .has-focus.wp-block-button__link,
+.site-header .main-navigation .has-focus.wp-block-file__button {
+	color: white;
+	background-color: indigo;
+}
+
 /**
  * Base
  * - Reset the browser
@@ -1364,81 +1435,13 @@ table th,
 
 .site-header .main-navigation {
 	/**
- * Placeholder button style
- * - Since buttons appear in various blocks,
- *   let’s use a placeholder to keep them all
- *   in-sync
+ * Button
  */
 	/**
  * Block Options
  */
 }
 
-.site-header .main-navigation button,
-.site-header .main-navigation .button,
-.site-header .main-navigation input[type="submit"],
-.site-header .main-navigation .wp-block-button__link,
-.site-header .main-navigation .wp-block-file__button {
-	line-height: 1;
-	color: white;
-	cursor: pointer;
-	font-weight: bold;
-	font-family: sans-serif;
-	font-size: 1.2rem;
-	background-color: blue;
-	border-radius: 9px;
-	border-width: 0;
-	padding: 16px 16px;
-}
-
-.site-header .main-navigation button:before,
-.site-header .main-navigation .button:before,
-.site-header .main-navigation input[type="submit"]:before,
-.site-header .main-navigation .wp-block-button__link:before,
-.site-header .main-navigation .wp-block-file__button:before, .site-header .main-navigation button:after,
-.site-header .main-navigation .button:after,
-.site-header .main-navigation input[type="submit"]:after,
-.site-header .main-navigation .wp-block-button__link:after,
-.site-header .main-navigation .wp-block-file__button:after {
-	content: '';
-	display: block;
-	height: 0;
-	width: 0;
-}
-
-.site-header .main-navigation button:before,
-.site-header .main-navigation .button:before,
-.site-header .main-navigation input[type="submit"]:before,
-.site-header .main-navigation .wp-block-button__link:before,
-.site-header .main-navigation .wp-block-file__button:before {
-	margin-bottom: -0.12em;
-}
-
-.site-header .main-navigation button:after,
-.site-header .main-navigation .button:after,
-.site-header .main-navigation input[type="submit"]:after,
-.site-header .main-navigation .wp-block-button__link:after,
-.site-header .main-navigation .wp-block-file__button:after {
-	margin-top: -0.11em;
-}
-
-.site-header .main-navigation button:hover,
-.site-header .main-navigation .button:hover,
-.site-header .main-navigation input:hover[type="submit"],
-.site-header .main-navigation .wp-block-button__link:hover,
-.site-header .main-navigation .wp-block-file__button:hover, .site-header .main-navigation button:focus,
-.site-header .main-navigation .button:focus,
-.site-header .main-navigation input:focus[type="submit"],
-.site-header .main-navigation .wp-block-button__link:focus,
-.site-header .main-navigation .wp-block-file__button:focus, .site-header .main-navigation button.has-focus,
-.site-header .main-navigation .has-focus.button,
-.site-header .main-navigation input.has-focus[type="submit"],
-.site-header .main-navigation .has-focus.wp-block-button__link,
-.site-header .main-navigation .has-focus.wp-block-file__button {
-	color: white;
-	background-color: indigo;
-}
-
 .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link {
 	color: blue;
 	background: transparent;

varia/style-editor.scss

@@ -9,6 +9,7 @@
 @import "sass/abstracts/functions";
 @import "sass/abstracts/config-global";
 @import "sass/abstracts/mixins";
+@import "sass/abstracts/extends";
 
 /**
  * Base

varia/style-woocommerce.scss

@@ -0,0 +1,18 @@
+/**
+ * Varia Editor Content Width Styles
+ */
+
+/**
+ * Abstracts
+ * - Mixins, variables and functions
+ */
+@import "sass/abstracts/functions";
+@import "sass/abstracts/config-global";
+@import "sass/abstracts/mixins";
+@import "sass/abstracts/extends";
+
+/**
+ * WooCommerce
+ * - Only sets the default width for blocks in the editor
+ */
+@import "sass/vendors/woocommerce";