1.2.0 - WooCommerce Order Confirmation Template

.gitignore

@@ -5,4 +5,7 @@ node_modules
 package-lock.json
 vendor
 wp-content
-package.json
+package.json
+.DS_Store
+templates/.DS_Store
+.DS_Store

.phpcs.xml.dist

@@ -27,7 +27,6 @@
         <exclude name="Generic.WhiteSpace.DisallowSpaceIndent" />
         <exclude name="Generic.Arrays.DisallowShortArraySyntax" />
         <exclude name="Generic.Formatting.MultipleStatementAlignment.NotSameWarning" />
-        <exclude name="WordPress.PHP.DisallowShortTernary" />
         <exclude name="WordPress.PHP.YodaConditions.NotYoda" />
         <exclude name="WordPress.Arrays.ArrayKeySpacingRestrictions.SpacesAroundArrayKeys" />
         <exclude name="WordPress.Arrays.MultipleStatementAlignment.DoubleArrowNotAligned" />

assets/css/woocommerce/order-confirmation-billing-wrapper.css

@@ -0,0 +1,4 @@
+.woocommerce-order-confirmation-address-wrapper .wp-block-column:empty {
+	display: block;
+	order: 1;
+}

assets/css/woocommerce/order-confirmation-totals.css

@@ -0,0 +1,22 @@
+
+.wc-block-order-confirmation-totals thead th {
+	background-color:var( --wp--custom--wc--table--header--bg--color );
+	color: var( --wp--preset--color--base );
+	font-size: var( --wp--preset--font-size--small );
+	width:var( --wp--custom--wc--table--header--cell-width );
+}
+
+.wc-block-order-confirmation-totals table td,
+.wc-block-order-confirmation-totals table th {
+	border: var( --wp--custom--wc--table--border--width ) solid var( --wp--custom--wc--table--border--color );
+}
+
+.wc-block-order-confirmation-totals table tfoot tr:last-child td,
+.wc-block-order-confirmation-totals table tfoot tr:last-child th {
+    border-bottom-width: var( --wp--custom--wc--table--border--width );
+}
+
+.wc-block-order-confirmation-totals table .wc-block-order-confirmation-totals__note,
+.wc-block-order-confirmation-totals table .wc-block-order-confirmation-totals__total {
+	text-align: left;
+}

includes/classes/class-core.php

@@ -12,6 +12,7 @@
 use LSXD\Classes\Block_Setup;
 use LSXD\Classes\Block_Styles;
 use LSXD\Classes\Frontend;
+use LSXD\Classes\WooCommerce\WooCommerce;
 
 /**
  * The main file loading the rest of the files
@@ -66,6 +67,13 @@ class Core {
 	 */
 	public $frontend;
 
+	/**
+	 * All 3rd party integrations
+	 *
+	 * @var array
+	 */
+	public $integrations;
+
 	/**
 	 * Contructor
 	 */
@@ -87,6 +95,8 @@ public function init() {
 		$this->block_setup->init();
 		$this->block_styles->init();
 		$this->frontend->init();
+
+		$this->load_vendors();
 	}
 
 	/**
@@ -108,4 +118,14 @@ public function load_classes() {
 		require get_template_directory() . '/includes/classes/class-frontend.php';
 		$this->frontend = new Frontend();
 	}
+
+	/**
+	 * Loading the third party vendors.
+	 *
+	 * @return void
+	 */
+	public function load_vendors() {
+		require get_template_directory() . '/includes/classes/woocommerce/class-woocommerce.php';
+		$this->integrations['woocommerce'] = new WooCommerce();
+	}
 }

includes/classes/class-frontend.php

@@ -40,7 +40,7 @@ public function init() {
 		add_filter( 'wpforms_frontend_form_data', array( $this, 'wpforms_match_button_block' ) );
 		add_filter( 'woocommerce_account_menu_items', array( $this, 'woocommerce_account_menu_items_fix' ), 10, 2 );
 
-		//Yoast FAQ Block
+		// Yoast FAQ Block.
 		add_filter( 'render_block', array( $this, 'yoast_faq_tabindex' ), 20, 3 );
 	}
 
@@ -130,9 +130,9 @@ public function cf_async_disable( $tag, $handle, $src ) {
 	/**
 	 * Add a tabindex to the strong tag of the Yoast FAQ block.
 	 *
-	 * @param string|null   $pre_render   The pre-rendered content. Default null.
+	 * @param string|null   $block_content   The pre-rendered content. Default null.
 	 * @param array         $parsed_block The block being rendered.
-	 * @param WP_Block|null $parent_block If this is a nested block, a reference to the parent block.
+	 * @param WP_Block|null $block_obj If this is a nested block, a reference to the parent block.
 	 */
 	public function yoast_faq_tabindex( $block_content, $parsed_block, $block_obj ) {
 		// Determine if this is the custom block variation.

includes/classes/woocommerce/class-assets.php

@@ -0,0 +1,73 @@
+<?php
+/**
+ * The block styles file
+ *
+ * @package lsx-design
+ */
+
+namespace LSXD\Classes\WooCommerce;
+
+/**
+ * All the functions that run on the frontend and the rendering of the blocks.
+ *
+ * @package   LSX
+ * @author    LightSpeed
+ * @license   GPL3
+ * @link
+ * @copyright 2023 LightSpeed
+ */
+class Assets {
+
+	/**
+	 * Handles the conditional loading of the WooCommerce files.
+	 *
+	 * @var array
+	 */
+	private $assets = array();
+
+	/**
+	 * Contructor
+	 */
+	public function __construct() {
+		add_action( 'init', array( $this, 'enqueue_block_styles' ), 10 );
+	}
+
+	/**
+	 * Returns an array of the block assets.
+	 *
+	 * @return array
+	 */
+	private function get_assets() {
+		$this->assets = array(
+			'woocommerce/order-confirmation-totals' => array(
+				'handle' => 'lsxd-wc-order-confirmation-totals',
+				'src'    => get_template_directory_uri() . '/assets/css/woocommerce/order-confirmation-totals.css',
+				'path'   => get_template_directory() . '/assets/css/woocommerce/order-confirmation-totals.css',
+			),
+			'woocommerce/order-confirmation-billing-wrapper' => array(
+				'handle' => 'lsxd-wc-order-confirmation-billing-wrapper',
+				'src'    => get_template_directory_uri() . '/assets/css/woocommerce/order-confirmation-billing-wrapper.css',
+				'path'   => get_template_directory() . '/assets/css/woocommerce/order-confirmation-billing-wrapper.css',
+			),
+		);
+		return $this->assets;
+	}
+
+	/**
+	 * Registers our block specific styles.
+	 *
+	 * @return void
+	 */
+	public function enqueue_block_styles() {
+		foreach ( $this->get_assets() as $name => $asset ) {
+			wp_enqueue_block_style(
+				$name,
+				array(
+					'handle' => $asset['handle'],
+					'src'    => $asset['src'],
+					'path'   => $asset['path'],
+				),
+			);
+		}
+	}
+}

includes/classes/woocommerce/class-woocommerce.php

@@ -0,0 +1,53 @@
+<?php
+/**
+ * The core file
+ *
+ * @package lsx-design
+ */
+
+namespace LSXD\Classes\WooCommerce;
+
+/**
+ * The main file loading file for the WooCommerce related functions
+ *
+ * @package   LSX
+ * @author    LightSpeed
+ * @license   GPL3
+ * @link
+ * @copyright 2023 LightSpeed
+ */
+class WooCommerce {
+
+	/**
+	 * Undocumented variable
+	 *
+	 * @var Assets()
+	 */
+	public $assets;
+
+	/**
+	 * Contructor
+	 */
+	public function __construct() {
+		add_action( 'init', array( $this, 'init' ), 1 );
+	}
+
+	/**
+	 * Loads the actions we need.
+	 *
+	 * @return void
+	 */
+	public function init() {
+		if ( function_exists( 'WC' ) ) {
+			$this->load_classes();
+		}
+	}
+
+	/**
+	 * Loads the classes
+	 */
+	public function load_classes() {
+		require get_template_directory() . '/includes/classes/woocommerce/class-assets.php';
+		$this->assets = new Assets();
+	}
+}

includes/patterns/featured/cover-2-col.php

@@ -60,4 +60,3 @@
     <!-- /wp:columns --></div>
     <!-- /wp:group -->',
 );
-

includes/patterns/featured/cover-banner-image.php

@@ -34,4 +34,3 @@
     <!-- /wp:group --></div></div>
     <!-- /wp:cover -->',
 );
-

includes/patterns/featured/general-hero-one-column.php

@@ -28,4 +28,3 @@
 <!-- /wp:buttons --></div>
 <!-- /wp:group -->',
 );
-

includes/patterns/pages/page-about.php

@@ -218,4 +218,3 @@
     <!-- /wp:group --></div>
     <!-- /wp:group -->',
 );
-

includes/patterns/pages/page-contact.php

@@ -136,4 +136,3 @@
     <!-- /wp:buttons --></div>
     <!-- /wp:group -->',
 );
-

includes/patterns/pages/page-links.php

@@ -67,4 +67,3 @@
     <!-- /wp:group -->
     ',
 );
-

includes/patterns/pages/page-team.php

@@ -206,4 +206,3 @@
     <!-- /wp:group --></div>
     <!-- /wp:group -->',
 );
-

includes/patterns/pages/page-testimonials.php

@@ -142,4 +142,3 @@
     <!-- /wp:columns --></div>
     <!-- /wp:group -->',
 );
-

templates/order-confirmation.html

@@ -0,0 +1,55 @@
+<!-- wp:template-part {"slug":"header","tagName":"header","align":"wide","className":"site-header"} /-->
+
+<!-- wp:group {"tagName":"main","layout":{"inherit":true,"type":"constrained"}} -->
+<main class="wp-block-group">
+
+	<!-- wp:heading {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|small"}}},"fontSize":"x-large"} -->
+	<h2 class="wp-block-heading alignwide has-x-large-font-size" style="margin-bottom:var(--wp--preset--spacing--small)">Checkout</h2>
+	<!-- /wp:heading -->
+
+	<!-- wp:woocommerce/order-confirmation-status {"fontSize":"medium"} /-->
+
+	<!-- wp:woocommerce/order-confirmation-summary {"style":{"spacing":{"margin":{"top":"var:preset|spacing|small","bottom":"var:preset|spacing|medium"}}}} /-->
+
+	<!-- wp:woocommerce/order-confirmation-totals-wrapper {"align":"wide"} -->
+	<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"24px"}}} -->
+	<h3 class="wp-block-heading" style="font-size:24px">Order details</h3>
+	<!-- /wp:heading -->
+
+	<!-- wp:woocommerce/order-confirmation-totals {"lock":{"remove":true}} /-->
+	<!-- /wp:woocommerce/order-confirmation-totals-wrapper -->
+
+	<!-- wp:woocommerce/order-confirmation-downloads-wrapper {"align":"wide"} -->
+	<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"24px"}}} -->
+	<h3 class="wp-block-heading" style="font-size:24px">Downloads</h3>
+	<!-- /wp:heading -->
+
+	<!-- wp:woocommerce/order-confirmation-downloads {"lock":{"remove":true}} /-->
+	<!-- /wp:woocommerce/order-confirmation-downloads-wrapper -->
+
+	<!-- wp:columns {"align":"wide","className":"woocommerce-order-confirmation-address-wrapper"} -->
+	<div class="wp-block-columns alignwide woocommerce-order-confirmation-address-wrapper"><!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:woocommerce/order-confirmation-shipping-wrapper {"align":"wide"} -->
+	<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"24px"}}} -->
+	<h3 class="wp-block-heading" style="font-size:24px">Shipping address</h3>
+	<!-- /wp:heading -->
+
+	<!-- wp:woocommerce/order-confirmation-shipping-address {"lock":{"remove":true}} /-->
+	<!-- /wp:woocommerce/order-confirmation-shipping-wrapper --></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:woocommerce/order-confirmation-billing-wrapper {"align":"wide"} -->
+	<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"24px"}}} -->
+	<h3 class="wp-block-heading" style="font-size:24px">Billing address</h3>
+	<!-- /wp:heading -->
+
+	<!-- wp:woocommerce/order-confirmation-billing-address {"lock":{"remove":true}} /-->
+	<!-- /wp:woocommerce/order-confirmation-billing-wrapper --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->
+
+	<!-- wp:woocommerce/order-confirmation-additional-information /--></main>
+	<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

theme.json

@@ -243,7 +243,6 @@
 					"name": "Woocommerce",
 					"slug": "woo"
 				}
-
 			]
 
 		},
@@ -289,6 +288,20 @@
 			},
 			"spacing": {
 				"outer": "30px"
+			},
+			"wc": {
+				"table": {
+					"header": {
+						"bg" : {
+							"color": "#50575E"
+						},
+						"cell-width": "50%"
+					},
+					"border": {
+						"width": "2px",
+						"color": "var( --wp--preset--color--contrast )"
+					}
+				}
 			}
 		},
 		"layout": {