From 5c0b55dad7311922e0b8261ca24047dd238dffcb Mon Sep 17 00:00:00 2001 From: Jamie Sykes Date: Tue, 11 Nov 2025 16:32:29 +0000 Subject: [PATCH 1/9] Initial Commit of table block. --- blocks/all.php | 1 + blocks/table/assets/_table.scss | 206 ++++++++++++++++++ blocks/table/class-table-block.php | 165 ++++++++++++++ blocks/table/templates/additional-content.php | 21 ++ blocks/table/templates/block.php | 65 ++++++ blocks/table/templates/cell-content.php | 80 +++++++ blocks/table/templates/cell.php | 41 ++++ blocks/table/templates/row.php | 50 +++++ blocks/table/templates/table.php | 55 +++++ 9 files changed, 684 insertions(+) create mode 100644 blocks/table/assets/_table.scss create mode 100644 blocks/table/class-table-block.php create mode 100644 blocks/table/templates/additional-content.php create mode 100644 blocks/table/templates/block.php create mode 100644 blocks/table/templates/cell-content.php create mode 100644 blocks/table/templates/cell.php create mode 100644 blocks/table/templates/row.php create mode 100644 blocks/table/templates/table.php diff --git a/blocks/all.php b/blocks/all.php index 9f3aa9e..9814998 100644 --- a/blocks/all.php +++ b/blocks/all.php @@ -48,3 +48,4 @@ function ( array $categories ) { require_once plugin_dir_path( __FILE__ ) . 'mobile-menu/class-mobile-menu-block.php'; require_once plugin_dir_path( __FILE__ ) . 'post-listing/class-post-listing-block.php'; require_once plugin_dir_path( __FILE__ ) . 'search-and-filter/class-search-and-filter-block.php'; +require_once plugin_dir_path( __FILE__ ) . 'table/class-table-block.php'; diff --git a/blocks/table/assets/_table.scss b/blocks/table/assets/_table.scss new file mode 100644 index 0000000..0fb2c65 --- /dev/null +++ b/blocks/table/assets/_table.scss @@ -0,0 +1,206 @@ +@use '/scss/globals'; +@use '/scss/extenders/container'; +@use '/scss/mixins/integrated-buttons'; + +@mixin render { + .table__outer-wrapper, + .wp-block-acf-table { + background-color: white; + color: globals.$color-a; + + & * { + color: inherit; + } + } + + .table__outer-wrapper { + @extend %container__outer-wrapper; + } + + .table__wrapper { + @extend %container__wrapper; + padding-top: calc(globals.$space-vertical * 1.6875); + padding-bottom: calc(globals.$space-vertical * 2.65625); + } + + .table__inner { + @extend %container__inner; + } + + .table__sections { + display: grid; + gap: globals.$space-vertical globals.$space-horizontal; + grid-template-columns: 1fr; + } + + .table__outer-wrapper .table__section--device-visibility-desktop-only { + display: none; + + @media only screen and (min-width: globals.$breakpoint-large) { + display: block; + } + } + + .table__outer-wrapper .table__section--device-visibility-mobile-only { + @media only screen and (min-width: globals.$breakpoint-large) { + display: none; + } + } + + .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; + + .wp-block-acf-table-table-row { + display: table-row-group; + } + + .table__table-row { + display: table-row; + } + + .wp-block-acf-table-table-row-cell { + display: table-cell; + vertical-align: top; + } + } + + .table__section--table { + overflow: auto; + } + + .table__table-outer-wrapper { + width: max-content; + min-width: 100%; + 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; + } + } + + .table__table-row { + .table__table-cell { + &:first-child { + .table__table-cell-content { + justify-content: flex-start; + } + } + } + } + + .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; + min-width: 100%; + background-color: globals.$color-b; + color: globals.$color-a; + + @media only screen and (min-width: globals.$breakpoint-medium) { + width: auto; + } + + &:has(.table__table-cell-content--style-1) { + background-color: transparent; + } + + &:has(.table__table-cell-content--curved-corners-top-left) { + border-top-left-radius: 50px; + } + + &:has(.table__table-cell-content--curved-corners-top-right) { + border-top-right-radius: 50px; + } + + &:has(.table__table-cell-content--curved-corners-bottom-left) { + border-bottom-left-radius: 50px; + } + + &:has(.table__table-cell-content--curved-corners-bottom-right) { + border-bottom-right-radius: 50px; + } + } + + .table__table-cell-content { + display: flex; + align-items: center; + justify-content: center; + padding: calc(globals.$space-vertical * 0.7) globals.$space-horizontal; + + @media only screen and (min-width: globals.$breakpoint-medium) { + padding: calc(globals.$space-vertical * 1.1875) calc(globals.$space-horizontal * 1.875); + } + } + + .table__table-cell-content--style-1 { + padding-left: 0; + padding-right: 0; + } + + .table__table-cell-content .table__icon-svg-wrapper { + width: 26px; + margin-right: globals.$space-horizontal; + + svg { + width: 100%; + height: auto; + + path { + fill: var(--icon-color, globals.$color-a); + } + } + } + + .table__table-cell-content-inner { + p { + margin-bottom: 0; + font-size: 1.5rem; + } + } +} diff --git a/blocks/table/class-table-block.php b/blocks/table/class-table-block.php new file mode 100644 index 0000000..09f9477 --- /dev/null +++ b/blocks/table/class-table-block.php @@ -0,0 +1,165 @@ + 'field_table_id', + 'label' => 'ID', + 'name' => 'id', + 'type' => 'text', + ), + ); + } + + /** + * {@inheritdoc} + */ + protected function child_blocks(): array { + return array( + new Child_Block( + 'additional-content', + 'Additional Content', + array(), + __DIR__ . '/templates/additional-content.php', + array(), + 'text' + ), + new Child_Block( + 'table', + 'Table', + array( + array( + 'key' => 'field_table_device_visibility', + 'label' => 'Device Visibility', + 'name' => 'device_visibility', + 'type' => 'select', + 'instructions' => 'Please choose which devices the table should be visible on.', + 'choices' => array( + 'all' => 'All', + 'desktop-only' => 'Desktop Only', + 'mobile-only' => 'Mobile Only', + ), + ), + ), + __DIR__ . '/templates/table.php', + 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, + ), + ), + __DIR__ . '/templates/row.php', + array( + new Child_Block( + 'cell', + 'Table Cell', + array( + array( + 'key' => 'field_table_cell_colspan', + 'label' => 'Colspan', + 'name' => 'colspan', + 'type' => 'number', + 'instructions' => 'The number of columns the cell should span. This will not be reflected in the editor.', + 'default_value' => 1, + ), + ), + __DIR__ . '/templates/cell.php', + array( + new Child_Block( + 'cell-content', + 'Table Cell Content', + array(), + __DIR__ . '/templates/cell-content.php', + array(), + 'text', + array( + 'mode' => false, + 'color' => array( + 'text' => true, + 'background' => true, + ), + ), + ), + ), + 'table-col-after' + ), + ), + 'table-row-after' + ), + ), + 'editor-table' + ), + ); + } + + /** + * {@inheritdoc} + */ + protected function template(): string { + return __DIR__ . '/templates/block.php'; + } + + /** + * {@inheritdoc} + */ + protected function supports(): array { + return array( + 'mode' => false, + 'color' => array( + 'text' => true, + 'background' => true, + ), + ); + } +} diff --git a/blocks/table/templates/additional-content.php b/blocks/table/templates/additional-content.php new file mode 100644 index 0000000..81c84c6 --- /dev/null +++ b/blocks/table/templates/additional-content.php @@ -0,0 +1,21 @@ + + +
+ +
diff --git a/blocks/table/templates/block.php b/blocks/table/templates/block.php new file mode 100644 index 0000000..e129593 --- /dev/null +++ b/blocks/table/templates/block.php @@ -0,0 +1,65 @@ +get_field( 'id' ); + +$inner_block_template = array( + array( + 'acf/table-additional-content', + array(), + array( + array( + 'core/heading', + array( + 'level' => 2, + 'content' => 'Table', + ), + ), + array( + 'core/paragraph', + array( + 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id porta mauris, at varius eros. Maecenas rutrum vehicula ante, et iaculis metus ultricies id. Morbi vel bibendum tortor, non egestas ipsum. Suspendisse potenti. Donec faucibus interdum lorem, in bibendum elit varius quis. Sed in lectus in sapien bibendum rhoncus.', + ), + ), + ), + ), + array( 'acf/table-table' ), + array( + 'acf/table-additional-content', + array(), + array( + array( + 'core/buttons', + array(), + array( + array( 'core/button' ), + ), + ), + ), + ), +); +?> + +
+ id="" + +> + +
diff --git a/blocks/table/templates/cell-content.php b/blocks/table/templates/cell-content.php new file mode 100644 index 0000000..2c4801f --- /dev/null +++ b/blocks/table/templates/cell-content.php @@ -0,0 +1,80 @@ +get_field( 'style' ); +if ( ! empty( $style ) ) { + $modifier_classes[] = 'style-' . $style; +} + +$curved_corners = $block->get_field( 'curved_corners' ); +if ( ! empty( $curved_corners ) ) { + foreach ( $curved_corners as $corner ) { + $modifier_classes[] = 'curved-corners-' . $corner; + } +} + +$modifier_classes = array_map( + function ( $modifier_class ) { + return 'table__table-cell-content--' . $modifier_class; + }, + $modifier_classes +); + +$icon = $block->get_icon_svg( 'table', false ); +$icon_color = $block->get_field( 'icon_color' ); + +$allowed_inner_blocks = array( + 'core/paragraph', +); +$inner_block_template = array( + array( + 'core/paragraph', + array( + 'content' => 'Table cell content.', + ), + ), +); +?> + + + +
'table__table-cell-content-outer' ) ); ?>> + + +
+ style="--icon-color: get_color_code_by_slug( $icon_color ) ); ?>;" +> + + + ' ); + ?> + + + +
+ + +
+ diff --git a/blocks/table/templates/cell.php b/blocks/table/templates/cell.php new file mode 100644 index 0000000..bf442e6 --- /dev/null +++ b/blocks/table/templates/cell.php @@ -0,0 +1,41 @@ +get_field( 'colspan' ); + +$inner_block_template = array( + array( 'acf/table-table-row-cell-cell-content' ), +); +?> + + + + + + colspan="" + + > + + + diff --git a/blocks/table/templates/row.php b/blocks/table/templates/row.php new file mode 100644 index 0000000..016efb1 --- /dev/null +++ b/blocks/table/templates/row.php @@ -0,0 +1,50 @@ +get_field( 'has_bottom_space' ); +if ( is_null( $has_bottom_space ) || ! empty( $has_bottom_space ) ) { + $modifier_classes[] = 'has-bottom-space'; +} + +$modifier_classes = array_map( + function ( $modifier_class ) { + return 'table__table-row--' . $modifier_class; + }, + $modifier_classes +); + +$inner_block_template = array( + array( 'acf/table-table-row-cell' ), + array( 'acf/table-table-row-cell' ), + array( 'acf/table-table-row-cell' ), +); +?> + + + + + + + + diff --git a/blocks/table/templates/table.php b/blocks/table/templates/table.php new file mode 100644 index 0000000..28d6e35 --- /dev/null +++ b/blocks/table/templates/table.php @@ -0,0 +1,55 @@ +get_field( 'device_visibility' ); +if ( ! empty( $device_visibility ) ) { + $modifier_classes[] = 'device-visibility-' . $device_visibility; +} + +$modifier_classes = array_map( + function ( $modifier_class ) { + return 'table__section--' . $modifier_class; + }, + $modifier_classes +); + +$inner_block_template = array( + array( 'acf/table-table-row' ), + array( 'acf/table-table-row' ), + array( 'acf/table-table-row' ), +); +?> + +
+
+
+ + + + + +
+ +
+
+
From f76ac6c5a5a405a92591eef108e7825b5f4618ec Mon Sep 17 00:00:00 2001 From: Jamie Sykes Date: Tue, 11 Nov 2025 16:49:06 +0000 Subject: [PATCH 2/9] Removes specific modifiers and styles for icons, curved corners and styles. --- blocks/table/assets/_table.scss | 25 ----------------- blocks/table/templates/cell-content.php | 36 +------------------------ 2 files changed, 1 insertion(+), 60 deletions(-) diff --git a/blocks/table/assets/_table.scss b/blocks/table/assets/_table.scss index 0fb2c65..13f87ec 100644 --- a/blocks/table/assets/_table.scss +++ b/blocks/table/assets/_table.scss @@ -145,26 +145,6 @@ @media only screen and (min-width: globals.$breakpoint-medium) { width: auto; } - - &:has(.table__table-cell-content--style-1) { - background-color: transparent; - } - - &:has(.table__table-cell-content--curved-corners-top-left) { - border-top-left-radius: 50px; - } - - &:has(.table__table-cell-content--curved-corners-top-right) { - border-top-right-radius: 50px; - } - - &:has(.table__table-cell-content--curved-corners-bottom-left) { - border-bottom-left-radius: 50px; - } - - &:has(.table__table-cell-content--curved-corners-bottom-right) { - border-bottom-right-radius: 50px; - } } .table__table-cell-content { @@ -178,11 +158,6 @@ } } - .table__table-cell-content--style-1 { - padding-left: 0; - padding-right: 0; - } - .table__table-cell-content .table__icon-svg-wrapper { width: 26px; margin-right: globals.$space-horizontal; diff --git a/blocks/table/templates/cell-content.php b/blocks/table/templates/cell-content.php index 2c4801f..a3269eb 100644 --- a/blocks/table/templates/cell-content.php +++ b/blocks/table/templates/cell-content.php @@ -12,30 +12,6 @@ */ $block = Creode_Blocks\Helpers::get_block_by_name( 'table' ); -$modifier_classes = array(); - -$style = $block->get_field( 'style' ); -if ( ! empty( $style ) ) { - $modifier_classes[] = 'style-' . $style; -} - -$curved_corners = $block->get_field( 'curved_corners' ); -if ( ! empty( $curved_corners ) ) { - foreach ( $curved_corners as $corner ) { - $modifier_classes[] = 'curved-corners-' . $corner; - } -} - -$modifier_classes = array_map( - function ( $modifier_class ) { - return 'table__table-cell-content--' . $modifier_class; - }, - $modifier_classes -); - -$icon = $block->get_icon_svg( 'table', false ); -$icon_color = $block->get_field( 'icon_color' ); - $allowed_inner_blocks = array( 'core/paragraph', ); @@ -55,18 +31,8 @@ function ( $modifier_class ) {
- style="--icon-color: get_color_code_by_slug( $icon_color ) ); ?>;" + class="table__table-cell-content" > - - - ' ); - ?> - - Date: Tue, 11 Nov 2025 16:49:34 +0000 Subject: [PATCH 3/9] Removes alignment on table items. These should be handled manually. --- blocks/table/assets/_table.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/blocks/table/assets/_table.scss b/blocks/table/assets/_table.scss index 13f87ec..8098482 100644 --- a/blocks/table/assets/_table.scss +++ b/blocks/table/assets/_table.scss @@ -149,8 +149,6 @@ .table__table-cell-content { display: flex; - align-items: center; - justify-content: center; padding: calc(globals.$space-vertical * 0.7) globals.$space-horizontal; @media only screen and (min-width: globals.$breakpoint-medium) { From 760423f45688fc969be923b823db9ad230b28e97 Mon Sep 17 00:00:00 2001 From: Jamie Sykes Date: Tue, 11 Nov 2025 16:52:37 +0000 Subject: [PATCH 4/9] Remove rules associated with icons. --- blocks/table/assets/_table.scss | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/blocks/table/assets/_table.scss b/blocks/table/assets/_table.scss index 8098482..6e6877a 100644 --- a/blocks/table/assets/_table.scss +++ b/blocks/table/assets/_table.scss @@ -156,20 +156,6 @@ } } - .table__table-cell-content .table__icon-svg-wrapper { - width: 26px; - margin-right: globals.$space-horizontal; - - svg { - width: 100%; - height: auto; - - path { - fill: var(--icon-color, globals.$color-a); - } - } - } - .table__table-cell-content-inner { p { margin-bottom: 0; From 6174e545e3923f93b8502db67153eeabf796429e Mon Sep 17 00:00:00 2001 From: Jamie Sykes Date: Tue, 11 Nov 2025 16:52:47 +0000 Subject: [PATCH 5/9] Remove rules associated with colours and backgrounds. --- blocks/table/assets/_table.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/blocks/table/assets/_table.scss b/blocks/table/assets/_table.scss index 6e6877a..c8f0ae1 100644 --- a/blocks/table/assets/_table.scss +++ b/blocks/table/assets/_table.scss @@ -139,8 +139,6 @@ .wp-block-acf-table-table-row-cell-cell-content { width: min-content; min-width: 100%; - background-color: globals.$color-b; - color: globals.$color-a; @media only screen and (min-width: globals.$breakpoint-medium) { width: auto; From 333c4744d1cfbf5f7d5b8e5b59dae27a0d19e2b2 Mon Sep 17 00:00:00 2001 From: Jamie Sykes Date: Wed, 12 Nov 2025 09:55:04 +0000 Subject: [PATCH 6/9] Removal of padding as this should be project controlled. --- blocks/table/assets/_table.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/blocks/table/assets/_table.scss b/blocks/table/assets/_table.scss index c8f0ae1..4e67c3e 100644 --- a/blocks/table/assets/_table.scss +++ b/blocks/table/assets/_table.scss @@ -147,11 +147,6 @@ .table__table-cell-content { display: flex; - padding: calc(globals.$space-vertical * 0.7) globals.$space-horizontal; - - @media only screen and (min-width: globals.$breakpoint-medium) { - padding: calc(globals.$space-vertical * 1.1875) calc(globals.$space-horizontal * 1.875); - } } .table__table-cell-content-inner { From eb47081bc92f880abfab99b8b02a082bbe542275 Mon Sep 17 00:00:00 2001 From: Jamie Sykes Date: Wed, 12 Nov 2025 11:07:47 +0000 Subject: [PATCH 7/9] Remove auto width from desktop as it led to some strange issues with column widths. --- blocks/table/assets/_table.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/blocks/table/assets/_table.scss b/blocks/table/assets/_table.scss index 4e67c3e..5832acb 100644 --- a/blocks/table/assets/_table.scss +++ b/blocks/table/assets/_table.scss @@ -139,10 +139,6 @@ .wp-block-acf-table-table-row-cell-cell-content { width: min-content; min-width: 100%; - - @media only screen and (min-width: globals.$breakpoint-medium) { - width: auto; - } } .table__table-cell-content { From ca22b29b2509269914d4a6394b29d1069b67e440 Mon Sep 17 00:00:00 2001 From: Jamie Sykes Date: Wed, 12 Nov 2025 11:08:11 +0000 Subject: [PATCH 8/9] Setup match height functionality for the table block. --- blocks/table/assets/match-table-height.js | 31 +++++++++++++++++++++++ blocks/table/class-table-block.php | 10 ++++++++ 2 files changed, 41 insertions(+) create mode 100644 blocks/table/assets/match-table-height.js diff --git a/blocks/table/assets/match-table-height.js b/blocks/table/assets/match-table-height.js new file mode 100644 index 0000000..8dd1b3b --- /dev/null +++ b/blocks/table/assets/match-table-height.js @@ -0,0 +1,31 @@ +(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/class-table-block.php b/blocks/table/class-table-block.php index 09f9477..6227fca 100644 --- a/blocks/table/class-table-block.php +++ b/blocks/table/class-table-block.php @@ -162,4 +162,14 @@ protected function supports(): array { ), ); } + + /** + * {@inheritdoc + */ + protected function scripts(): array { + return array( + new Script( 'match-height', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js', array( 'jquery' ), '0.7.2' ), + new Script( 'match-table-height', plugin_dir_url( __FILE__ ) . 'assets/match-table-height.js', array( 'match-height' ), '1' ), + ); + } } From 357b641be1d7d049b54bbaf998a4c1670b79dafc Mon Sep 17 00:00:00 2001 From: Jamie Sykes Date: Wed, 12 Nov 2025 17:39:50 +0000 Subject: [PATCH 9/9] Adds in dependency check prior to registering the block. This will ensure that we make it clear that the dependency is available. --- blocks/table/class-table-block.php | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/blocks/table/class-table-block.php b/blocks/table/class-table-block.php index 6227fca..2648948 100644 --- a/blocks/table/class-table-block.php +++ b/blocks/table/class-table-block.php @@ -40,6 +40,21 @@ 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} */ @@ -168,8 +183,21 @@ protected function supports(): array { */ protected function scripts(): array { return array( - new Script( 'match-height', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js', array( 'jquery' ), '0.7.2' ), new Script( 'match-table-height', plugin_dir_url( __FILE__ ) . 'assets/match-table-height.js', array( 'match-height' ), '1' ), ); } + + /** + * Checks if the js dependencies are working correctly. + * + * @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.' ); + } + } }