diff --git a/blocks/table/assets/_table.scss b/blocks/table/assets/_table.scss index 5832acb..526ea02 100644 --- a/blocks/table/assets/_table.scss +++ b/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; } } diff --git a/blocks/table/assets/admin-table-block.js b/blocks/table/assets/admin-table-block.js new file mode 100644 index 0000000..9a4515d --- /dev/null +++ b/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); + } +); diff --git a/blocks/table/assets/match-table-height.js b/blocks/table/assets/match-table-height.js deleted file mode 100644 index 8dd1b3b..0000000 --- a/blocks/table/assets/match-table-height.js +++ /dev/null @@ -1,31 +0,0 @@ -(function() { - 'use strict'; - - const selectors = [ - '.table__table-cell-content' - ]; - - // Function to apply matchHeight to all elements matching selectors - function applyMatchHeight() { - const elements = jQuery(selectors.join(', ')); - - // Remove existing matchHeight to prevent duplication - elements.matchHeight({ remove: true }); - // Apply matchHeight to all matching elements - elements.matchHeight(); - } - - jQuery(document).ready( - () => { - applyMatchHeight(); - - const observer = new MutationObserver( - () => { - applyMatchHeight(); - } - ); - - observer.observe(document.body, {childList: true, subtree: true}); - } - ); -})(); diff --git a/blocks/table/assets/table-block.js b/blocks/table/assets/table-block.js new file mode 100644 index 0000000..5c32fa6 --- /dev/null +++ b/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)); + } + ); + } +); diff --git a/blocks/table/class-table-block.php b/blocks/table/class-table-block.php index 2648948..76dc95f 100644 --- a/blocks/table/class-table-block.php +++ b/blocks/table/class-table-block.php @@ -2,11 +2,13 @@ /** * Table block class. * - * @package Sovereign Health Care + * @package Creode Blocks */ namespace Creode_Blocks; +use Exception; + /** * Table block class. * @@ -14,10 +16,7 @@ */ 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 + ); } } diff --git a/blocks/table/templates/additional-content.php b/blocks/table/templates/additional-content.php index 81c84c6..2597917 100644 --- a/blocks/table/templates/additional-content.php +++ b/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( diff --git a/blocks/table/templates/block.php b/blocks/table/templates/block.php index e129593..ba90569 100644 --- a/blocks/table/templates/block.php +++ b/blocks/table/templates/block.php @@ -2,7 +2,7 @@ /** * Table block template file. * - * @package Sovereign Health Care + * @package Creode Blocks */ /** diff --git a/blocks/table/templates/cell-content.php b/blocks/table/templates/cell-content.php index a3269eb..0ce0f04 100644 --- a/blocks/table/templates/cell-content.php +++ b/blocks/table/templates/cell-content.php @@ -2,7 +2,7 @@ /** * Table block template file. * - * @package Sovereign Health Care + * @package Creode Blocks */ /** @@ -12,6 +12,15 @@ */ $block = Creode_Blocks\Helpers::get_block_by_name( 'table' ); +$modifier_classes = apply_filters( 'creode_blocks_table_cell_content_modifier_classes', array() ); + +$modifier_classes = array_map( + function ( $modifier_class ) { + return 'table__table-cell-content--' . $modifier_class; + }, + $modifier_classes +); + $allowed_inner_blocks = array( 'core/paragraph', ); @@ -30,9 +39,7 @@
'table__table-cell-content-outer' ) ); ?>> -
+
get_field( 'has_bottom_space' ); -if ( is_null( $has_bottom_space ) || ! empty( $has_bottom_space ) ) { - $modifier_classes[] = 'has-bottom-space'; -} +$modifier_classes = apply_filters( 'creode_blocks_table_row_modifier_classes', array() ); $modifier_classes = array_map( function ( $modifier_class ) { diff --git a/blocks/table/templates/table.php b/blocks/table/templates/table.php index 28d6e35..74917d3 100644 --- a/blocks/table/templates/table.php +++ b/blocks/table/templates/table.php @@ -2,7 +2,7 @@ /** * Table block template file. * - * @package Sovereign Health Care + * @package Creode Blocks */ /**