Corrected table-block specificity issues. Refactored block adaptabili…

blocks/table/assets/_table.scss

@@ -5,9 +5,6 @@
 @mixin render {
 	.table__outer-wrapper,
 	.wp-block-acf-table {
-		background-color: white;
-		color: globals.$color-a;
-
 		& * {
 			color: inherit;
 		}
@@ -19,8 +16,6 @@
 
 	.table__wrapper {
 		@extend %container__wrapper;
-		padding-top: calc(globals.$space-vertical * 1.6875);
-		padding-bottom: calc(globals.$space-vertical * 2.65625);
 	}
 
 	.table__inner {
@@ -47,31 +42,6 @@
 		}
 	}
 
-	.table__additional-content {
-		margin-bottom: calc(globals.$space-bottom * -1);
-
-		.wp-block-heading,
-		p {
-			max-width: 970px;
-
-			&:not(.has-text-align-right, .has-text-align-left) {
-				margin-left: auto;
-				margin-right: auto;
-				text-align: center;
-			}
-
-			&.has-text-align-right {
-				margin-left: auto;
-			}
-		}
-
-		@include integrated-buttons.render;
-
-		.wp-block-buttons-is-layout-flex {
-			justify-content: center;
-		}
-	}
-
 	.table__table.block-editor-block-list__layout {
 		display: table;
 
@@ -99,26 +69,14 @@
 		overflow: hidden;
 	}
 
-	.table__table-wrapper {
-		margin: 0 -4px;
-
-		@media only screen and (min-width: globals.$breakpoint-medium) {
-			margin: 0 -8px;
-		}
-	}
-
 	.table__table {
 		min-width: 100%;
 		border-collapse: collapse;
 	}
 
 	.table__table-cell {
-		padding: 0 4px;
 		vertical-align: top;
-
-		@media only screen and (min-width: globals.$breakpoint-medium) {
-			padding: 0 8px;
-		}
+		padding: 0;
 	}
 
 	.table__table-row {
@@ -131,10 +89,6 @@
 		}
 	}
 
-	.table__table-row--has-bottom-space .table__table-cell {
-		padding-bottom: 5px;
-	}
-
 	.table__table-cell-content-outer,
 	.wp-block-acf-table-table-row-cell-cell-content {
 		width: min-content;
@@ -146,9 +100,7 @@
 	}
 
 	.table__table-cell-content-inner {
-		p {
-			margin-bottom: 0;
-			font-size: 1.5rem;
-		}
+		width: 100%;
+		padding: globals.$space-vertical globals.$space-horizontal 0;
 	}
 }

blocks/table/assets/admin-table-block.js

@@ -0,0 +1,34 @@
+class AdminTableBlock {
+
+	elements = {};
+
+	constructor(blockDiv) {
+		this.elements.blockDiv = blockDiv;
+		this.setObserver();
+		this.applyMatchHeight();
+	}
+
+	setObserver() {
+		const observer = new MutationObserver(
+			() => {
+				this.applyMatchHeight();
+			}
+		);
+
+		observer.observe(this.elements.blockDiv.get(0), { childList: true, subtree: true });
+	}
+
+	applyMatchHeight() {
+		const tableCellContent = this.elements.blockDiv.find('.table__table-cell-content');
+
+		tableCellContent.matchHeight({ remove: true });
+		tableCellContent.matchHeight();
+	}
+}
+
+new AdminBlockInitializer(
+	'.wp-block-acf-table',
+	function (blockDiv) {
+		new AdminTableBlock(blockDiv);
+	}
+);

blocks/table/assets/table-block.js

@@ -0,0 +1,30 @@
+class TableBlock {
+
+	elements = {};
+
+	constructor(wrapper) {
+		this.loadElements(wrapper);
+		this.applyMatchHeight();
+	}
+
+	loadElements(wrapper) {
+		this.elements.wrapper = wrapper;
+		this.elements.tableCellContent = wrapper.find('.table__table-cell-content');
+	}
+
+	applyMatchHeight() {
+		this.elements.tableCellContent.matchHeight();
+	}
+}
+
+jQuery(document).ready(
+	() => {
+		const wrappers = jQuery('.table__wrapper');
+
+		wrappers.each(
+			(index) => {
+				new TableBlock(wrappers.eq(index));
+			}
+		);
+	}
+);

blocks/table/class-table-block.php

@@ -2,22 +2,21 @@
 /**
  * Table block class.
  *
- * @package Sovereign Health Care
+ * @package Creode Blocks
  */
 
 namespace Creode_Blocks;
 
+use Exception;
+
 /**
  * Table block class.
  *
  * @wordpress-block-version 2.3.0
  */
 class Table_Block extends Block {
 
-	use Trait_Has_Modifier_Classes;
 	use Trait_Has_Reduce_Bottom_Space_Option;
-	use Trait_Has_Icons;
-	use Trait_Has_Color_Choices;
 
 	/**
 	 * The blocks icon from https://developer.wordpress.org/resource/dashicons/ or an inline SVG.
@@ -40,21 +39,6 @@ protected function label(): string {
 		return 'Table';
 	}
 
-	/**
-	 * {@inheritdoc}
-	 */
-	protected function setup(): bool {
-		add_action(
-			'wp_enqueue_scripts',
-			function () {
-				$this->check_js_dependencies();
-			},
-			20
-		);
-
-		return true;
-	}
-
 	/**
 	 * {@inheritdoc}
 	 */
@@ -104,16 +88,7 @@ protected function child_blocks(): array {
 					new Child_Block(
 						'row',
 						'Table Row',
-						array(
-							array(
-								'key'           => 'field_table_row_has_bottom_space',
-								'label'         => 'Bottom Space',
-								'name'          => 'has_bottom_space',
-								'type'          => 'true_false',
-								'message'       => 'Has bottom space?',
-								'default_value' => true,
-							),
-						),
+						array(),
 						__DIR__ . '/templates/row.php',
 						array(
 							new Child_Block(
@@ -165,6 +140,40 @@ protected function template(): string {
 		return __DIR__ . '/templates/block.php';
 	}
 
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function scripts(): array {
+		return array(
+			new Script(
+				'table-block',
+				plugin_dir_url( __FILE__ ) . 'assets/table-block.js',
+				array(
+					'jquery',
+					'match-height',
+				),
+				'1'
+			),
+		);
+	}
+
+	/**
+	 * {@inheritdoc}
+	 */
+	protected function admin_scripts(): array {
+		return array(
+			new Script(
+				'admin-table-block',
+				plugin_dir_url( __FILE__ ) . 'assets/admin-table-block.js',
+				array(
+					'admin-block-initializer',
+					'match-height',
+				),
+				'1'
+			),
+		);
+	}
+
 	/**
 	 * {@inheritdoc}
 	 */
@@ -179,25 +188,38 @@ protected function supports(): array {
 	}
 
 	/**
-	 * {@inheritdoc
+	 * {@inheritdoc}
 	 */
-	protected function scripts(): array {
-		return array(
-			new Script( 'match-table-height', plugin_dir_url( __FILE__ ) . 'assets/match-table-height.js', array( 'match-height' ), '1' ),
-		);
+	protected function setup(): bool {
+		$this->check_js_dependencies();
+		return parent::setup();
 	}
 
 	/**
 	 * Checks if the js dependencies are working correctly.
 	 *
-	 * @throws \Exception If dependencies are not met.
+	 * @throws Exception If dependencies are not met.
 	 *
 	 * @return void
 	 */
 	protected function check_js_dependencies() {
-		// Check if we have match heights script.
-		if ( ! wp_script_is( 'match-height', 'registered' ) ) {
-			throw new \Exception( 'Please ensure that the match heights script has been registered. You can find an example of how to add this to existing projects inside the theme package.' );
-		}
+		add_action(
+			'wp_enqueue_scripts',
+			function () {
+				if ( ! wp_script_is( 'match-height', 'registered' ) ) {
+					throw new Exception( 'Please ensure that jQuery Match Height has been registered as a frontend script with the handle "match-height". https://github.com/liabru/jquery-match-height.' );
+				}
+			},
+			1000
+		);
+		add_action(
+			'admin_enqueue_scripts',
+			function () {
+				if ( ! wp_script_is( 'match-height', 'registered' ) ) {
+					throw new Exception( 'Please ensure that jQuery Match Height has been registered as an admin script with the handle "match-height". https://github.com/liabru/jquery-match-height.' );
+				}
+			},
+			1000
+		);
 	}
 }

blocks/table/templates/additional-content.php

@@ -2,7 +2,7 @@
 /**
  * Table block template file.
  *
- * @package Sovereign Health Care
+ * @package Creode Blocks
  */
 
 $allowed_inner_blocks = array(

blocks/table/templates/block.php

@@ -2,7 +2,7 @@
 /**
  * Table block template file.
  *
- * @package Sovereign Health Care
+ * @package Creode Blocks
  */
 
 /**