Feature/table block 2

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

@@ -2,9 +2,10 @@ class AdminTableBlock {
 
 	elements = {};
 
-	constructor(blockDiv) {
-		this.elements.blockDiv = blockDiv;
+	constructor(main) {
+		this.elements.main = main;
 		this.setObserver();
+		this.listenForVisibilityChanges();
 		this.applyMatchHeight();
 	}
 
@@ -15,20 +16,44 @@ class AdminTableBlock {
 			}
 		);
 
-		observer.observe(this.elements.blockDiv.get(0), { childList: true, subtree: true });
+		observer.observe(this.elements.main.get(0), { childList: true, subtree: true });
+	}
+
+	listenForVisibilityChanges() {
+		const visibilityStates = new WeakMap();
+		const checker = () => {
+			const tableCellContents = this.elements.main.find('.table__table-cell-content');
+			let hasChanged = false;
+
+			tableCellContents.each(
+				(index) => {
+					const tableCellContent = tableCellContents.eq(index);
+					const isVisible = tableCellContent.is(':visible');
+
+					if (!hasChanged && visibilityStates.get(tableCellContent.get(0)) !== isVisible) {
+						this.applyMatchHeight();
+						hasChanged = true;
+					}
+
+					visibilityStates.set(tableCellContent.get(0), isVisible);
+				}
+			);
+			requestAnimationFrame(checker);
+		};
+		requestAnimationFrame(checker);
 	}
 
 	applyMatchHeight() {
-		const tableCellContent = this.elements.blockDiv.find('.table__table-cell-content');
+		const tableCellContent = this.elements.main.find('.table__table-cell-content');
 
 		tableCellContent.matchHeight({ remove: true });
 		tableCellContent.matchHeight();
 	}
 }
 
 new AdminBlockInitializer(
-	'.wp-block-acf-table',
-	function (blockDiv) {
-		new AdminTableBlock(blockDiv);
+	'.table__main',
+	function (main) {
+		new AdminTableBlock(main);
 	}
 );

blocks/table/assets/table-block.js

@@ -4,6 +4,7 @@ class TableBlock {
 
 	constructor(wrapper) {
 		this.loadElements(wrapper);
+		this.listenForVisibilityChanges();
 		this.applyMatchHeight();
 	}
 
@@ -12,7 +13,30 @@ class TableBlock {
 		this.elements.tableCellContent = wrapper.find('.table__table-cell-content');
 	}
 
+	listenForVisibilityChanges() {
+		const visibilityStates = new WeakMap();
+		const checker = () => {
+			let hasChanged = false;
+			this.elements.tableCellContent.each(
+				(index) => {
+					const tableCellContent = this.elements.tableCellContent.eq(index);
+					const isVisible = tableCellContent.is(':visible');
+
+					if (!hasChanged && visibilityStates.get(tableCellContent.get(0)) !== isVisible) {
+						this.applyMatchHeight();
+						hasChanged = true;
+					}
+
+					visibilityStates.set(tableCellContent.get(0), isVisible);
+				}
+			);
+			requestAnimationFrame(checker);
+		};
+		requestAnimationFrame(checker);
+	}
+
 	applyMatchHeight() {
+		this.elements.tableCellContent.matchHeight({ remove: true });
 		this.elements.tableCellContent.matchHeight();
 	}
 }

blocks/table/class-table-block.php

@@ -186,40 +186,4 @@ protected function supports(): array {
 			),
 		);
 	}
-
-	/**
-	 * {@inheritdoc}
-	 */
-	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.
-	 *
-	 * @return void
-	 */
-	protected function check_js_dependencies() {
-		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/cell.php

@@ -13,16 +13,11 @@
 $block = Creode_Blocks\Helpers::get_block_by_name( 'table' );
 
 $colspan = $block->get_field( 'colspan' );
-
-$inner_block_template = array(
-	array( 'acf/table-table-row-cell-cell-content' ),
-);
 ?>
 
 <?php if ( $is_preview ) : ?>
 	<InnerBlocks
 		allowedBlocks="<?php echo esc_attr( wp_json_encode( array() ) ); ?>"
-		template="<?php echo esc_attr( wp_json_encode( $inner_block_template ) ); ?>"
 		class="table__table-cell"
 	/>
 <?php else : ?>

blocks/table/templates/row.php

@@ -22,9 +22,27 @@ function ( $modifier_class ) {
 );
 
 $inner_block_template = array(
-	array( 'acf/table-table-row-cell' ),
-	array( 'acf/table-table-row-cell' ),
-	array( 'acf/table-table-row-cell' ),
+	array(
+		'acf/table-table-row-cell',
+		array(),
+		array(
+			array( 'acf/table-table-row-cell-cell-content' ),
+		),
+	),
+	array(
+		'acf/table-table-row-cell',
+		array(),
+		array(
+			array( 'acf/table-table-row-cell-cell-content' ),
+		),
+	),
+	array(
+		'acf/table-table-row-cell',
+		array(),
+		array(
+			array( 'acf/table-table-row-cell-cell-content' ),
+		),
+	),
 );
 ?>
 

includes/class-block.php

@@ -127,8 +127,12 @@ private function enqueue_admin_scripts(): void {
 		$scripts = $this->admin_scripts();
 
 		add_action(
-			'admin_enqueue_scripts',
+			'enqueue_block_assets',
 			function () use ( $scripts ) {
+				if ( ! is_admin() ) {
+					return;
+				}
+
 				foreach ( $scripts as $script ) {
 					wp_enqueue_script( $script->handle, $script->src, $script->deps, $script->ver, true );
 				}

includes/scripts/admin/register-admin-scripts.php

@@ -7,8 +7,28 @@
 
 // Register admin scripts.
 add_action(
-	'admin_enqueue_scripts',
+	'enqueue_block_assets',
 	function () {
+		if ( ! is_admin() ) {
+			return;
+		}
+
+		// Ensure all default scripts are registered.
+		$wp_scripts = new WP_Scripts();
+		wp_default_scripts( $wp_scripts );
+		wp_default_packages_vendor( $wp_scripts );
+		wp_default_packages_scripts( $wp_scripts );
+
+		// Register libraries.
+		wp_register_script(
+			'match-height',
+			'https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js',
+			array( 'jquery' ),
+			'0.7.2',
+			true
+		);
+
+		// Register block scripts.
 		wp_register_script(
 			'admin-helpers',
 			plugin_dir_url( __FILE__ ) . 'admin-helpers.js',