diff --git a/blocks/table/assets/admin-table-block.js b/blocks/table/assets/admin-table-block.js index 9a4515d..e18c19c 100644 --- a/blocks/table/assets/admin-table-block.js +++ b/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,11 +16,35 @@ 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(); @@ -27,8 +52,8 @@ class AdminTableBlock { } new AdminBlockInitializer( - '.wp-block-acf-table', - function (blockDiv) { - new AdminTableBlock(blockDiv); + '.table__main', + function (main) { + new AdminTableBlock(main); } ); diff --git a/blocks/table/assets/table-block.js b/blocks/table/assets/table-block.js index 5c32fa6..8a69705 100644 --- a/blocks/table/assets/table-block.js +++ b/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(); } } diff --git a/blocks/table/class-table-block.php b/blocks/table/class-table-block.php index 76dc95f..fb0be76 100644 --- a/blocks/table/class-table-block.php +++ b/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 - ); - } } diff --git a/blocks/table/templates/cell.php b/blocks/table/templates/cell.php index 8001e09..4c18a63 100644 --- a/blocks/table/templates/cell.php +++ b/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' ), -); ?> diff --git a/blocks/table/templates/row.php b/blocks/table/templates/row.php index 3ea22b4..0af5814 100644 --- a/blocks/table/templates/row.php +++ b/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' ), + ), + ), ); ?> diff --git a/includes/class-block.php b/includes/class-block.php index 3faac9d..71273b1 100644 --- a/includes/class-block.php +++ b/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 ); } diff --git a/includes/scripts/admin/register-admin-scripts.php b/includes/scripts/admin/register-admin-scripts.php index 968a020..4af61f1 100644 --- a/includes/scripts/admin/register-admin-scripts.php +++ b/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',