Skip to content
This repository was archived by the owner on Dec 18, 2025. It is now read-only.

Commit ecfebf5

Browse files
creode-devcreode-dev
authored
Merge pull request #82 from creode/feature/table_block
Feature/table block
2 parents 164562e + 238697a commit ecfebf5

10 files changed

Lines changed: 667 additions & 0 deletions

File tree

‎blocks/all.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,4 @@ function ( array $categories ) {
4949
require_once plugin_dir_path( __FILE__ ) . 'post-listing/class-post-listing-block.php';
5050
require_once plugin_dir_path( __FILE__ ) . 'search-and-filter/class-search-and-filter-block.php';
5151
require_once plugin_dir_path( __FILE__ ) . 'tabs/class-tabs-block.php';
52+
require_once plugin_dir_path( __FILE__ ) . 'table/class-table-block.php';

‎blocks/table/assets/_table.scss‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
@use '/scss/globals';
2+
@use '/scss/extenders/container';
3+
@use '/scss/mixins/integrated-buttons';
4+
5+
@mixin render {
6+
.table__outer-wrapper,
7+
.wp-block-acf-table {
8+
background-color: white;
9+
color: globals.$color-a;
10+
11+
& * {
12+
color: inherit;
13+
}
14+
}
15+
16+
.table__outer-wrapper {
17+
@extend %container__outer-wrapper;
18+
}
19+
20+
.table__wrapper {
21+
@extend %container__wrapper;
22+
padding-top: calc(globals.$space-vertical * 1.6875);
23+
padding-bottom: calc(globals.$space-vertical * 2.65625);
24+
}
25+
26+
.table__inner {
27+
@extend %container__inner;
28+
}
29+
30+
.table__sections {
31+
display: grid;
32+
gap: globals.$space-vertical globals.$space-horizontal;
33+
grid-template-columns: 1fr;
34+
}
35+
36+
.table__outer-wrapper .table__section--device-visibility-desktop-only {
37+
display: none;
38+
39+
@media only screen and (min-width: globals.$breakpoint-large) {
40+
display: block;
41+
}
42+
}
43+
44+
.table__outer-wrapper .table__section--device-visibility-mobile-only {
45+
@media only screen and (min-width: globals.$breakpoint-large) {
46+
display: none;
47+
}
48+
}
49+
50+
.table__additional-content {
51+
margin-bottom: calc(globals.$space-bottom * -1);
52+
53+
.wp-block-heading,
54+
p {
55+
max-width: 970px;
56+
57+
&:not(.has-text-align-right, .has-text-align-left) {
58+
margin-left: auto;
59+
margin-right: auto;
60+
text-align: center;
61+
}
62+
63+
&.has-text-align-right {
64+
margin-left: auto;
65+
}
66+
}
67+
68+
@include integrated-buttons.render;
69+
70+
.wp-block-buttons-is-layout-flex {
71+
justify-content: center;
72+
}
73+
}
74+
75+
.table__table.block-editor-block-list__layout {
76+
display: table;
77+
78+
.wp-block-acf-table-table-row {
79+
display: table-row-group;
80+
}
81+
82+
.table__table-row {
83+
display: table-row;
84+
}
85+
86+
.wp-block-acf-table-table-row-cell {
87+
display: table-cell;
88+
vertical-align: top;
89+
}
90+
}
91+
92+
.table__section--table {
93+
overflow: auto;
94+
}
95+
96+
.table__table-outer-wrapper {
97+
width: max-content;
98+
min-width: 100%;
99+
overflow: hidden;
100+
}
101+
102+
.table__table-wrapper {
103+
margin: 0 -4px;
104+
105+
@media only screen and (min-width: globals.$breakpoint-medium) {
106+
margin: 0 -8px;
107+
}
108+
}
109+
110+
.table__table {
111+
min-width: 100%;
112+
border-collapse: collapse;
113+
}
114+
115+
.table__table-cell {
116+
padding: 0 4px;
117+
vertical-align: top;
118+
119+
@media only screen and (min-width: globals.$breakpoint-medium) {
120+
padding: 0 8px;
121+
}
122+
}
123+
124+
.table__table-row {
125+
.table__table-cell {
126+
&:first-child {
127+
.table__table-cell-content {
128+
justify-content: flex-start;
129+
}
130+
}
131+
}
132+
}
133+
134+
.table__table-row--has-bottom-space .table__table-cell {
135+
padding-bottom: 5px;
136+
}
137+
138+
.table__table-cell-content-outer,
139+
.wp-block-acf-table-table-row-cell-cell-content {
140+
width: min-content;
141+
min-width: 100%;
142+
}
143+
144+
.table__table-cell-content {
145+
display: flex;
146+
}
147+
148+
.table__table-cell-content-inner {
149+
p {
150+
margin-bottom: 0;
151+
font-size: 1.5rem;
152+
}
153+
}
154+
}

‎blocks/table/assets/match-table-height.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
(function() {
2+
'use strict';
3+
4+
const selectors = [
5+
'.table__table-cell-content'
6+
];
7+
8+
// Function to apply matchHeight to all elements matching selectors
9+
function applyMatchHeight() {
10+
const elements = jQuery(selectors.join(', '));
11+
12+
// Remove existing matchHeight to prevent duplication
13+
elements.matchHeight({ remove: true });
14+
// Apply matchHeight to all matching elements
15+
elements.matchHeight();
16+
}
17+
18+
jQuery(document).ready(
19+
() => {
20+
applyMatchHeight();
21+
22+
const observer = new MutationObserver(
23+
() => {
24+
applyMatchHeight();
25+
}
26+
);
27+
28+
observer.observe(document.body, {childList: true, subtree: true});
29+
}
30+
);
31+
})();

‎blocks/table/class-table-block.php‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<?php
2+
/**
3+
* Table block class.
4+
*
5+
* @package Sovereign Health Care
6+
*/
7+
8+
namespace Creode_Blocks;
9+
10+
/**
11+
* Table block class.
12+
*
13+
* @wordpress-block-version 2.3.0
14+
*/
15+
class Table_Block extends Block {
16+
17+
use Trait_Has_Modifier_Classes;
18+
use Trait_Has_Reduce_Bottom_Space_Option;
19+
use Trait_Has_Icons;
20+
use Trait_Has_Color_Choices;
21+
22+
/**
23+
* The blocks icon from https://developer.wordpress.org/resource/dashicons/ or an inline SVG.
24+
*
25+
* @var string
26+
*/
27+
protected $icon = 'editor-table';
28+
29+
/**
30+
* {@inheritdoc}
31+
*/
32+
protected function name(): string {
33+
return 'table';
34+
}
35+
36+
/**
37+
* {@inheritdoc}
38+
*/
39+
protected function label(): string {
40+
return 'Table';
41+
}
42+
43+
/**
44+
* {@inheritdoc}
45+
*/
46+
protected function setup(): bool {
47+
add_action(
48+
'wp_enqueue_scripts',
49+
function () {
50+
$this->check_js_dependencies();
51+
},
52+
20
53+
);
54+
55+
return true;
56+
}
57+
58+
/**
59+
* {@inheritdoc}
60+
*/
61+
protected function fields(): array {
62+
return array(
63+
array(
64+
'key' => 'field_table_id',
65+
'label' => 'ID',
66+
'name' => 'id',
67+
'type' => 'text',
68+
),
69+
);
70+
}
71+
72+
/**
73+
* {@inheritdoc}
74+
*/
75+
protected function child_blocks(): array {
76+
return array(
77+
new Child_Block(
78+
'additional-content',
79+
'Additional Content',
80+
array(),
81+
__DIR__ . '/templates/additional-content.php',
82+
array(),
83+
'text'
84+
),
85+
new Child_Block(
86+
'table',
87+
'Table',
88+
array(
89+
array(
90+
'key' => 'field_table_device_visibility',
91+
'label' => 'Device Visibility',
92+
'name' => 'device_visibility',
93+
'type' => 'select',
94+
'instructions' => 'Please choose which devices the table should be visible on.',
95+
'choices' => array(
96+
'all' => 'All',
97+
'desktop-only' => 'Desktop Only',
98+
'mobile-only' => 'Mobile Only',
99+
),
100+
),
101+
),
102+
__DIR__ . '/templates/table.php',
103+
array(
104+
new Child_Block(
105+
'row',
106+
'Table Row',
107+
array(
108+
array(
109+
'key' => 'field_table_row_has_bottom_space',
110+
'label' => 'Bottom Space',
111+
'name' => 'has_bottom_space',
112+
'type' => 'true_false',
113+
'message' => 'Has bottom space?',
114+
'default_value' => true,
115+
),
116+
),
117+
__DIR__ . '/templates/row.php',
118+
array(
119+
new Child_Block(
120+
'cell',
121+
'Table Cell',
122+
array(
123+
array(
124+
'key' => 'field_table_cell_colspan',
125+
'label' => 'Colspan',
126+
'name' => 'colspan',
127+
'type' => 'number',
128+
'instructions' => 'The number of columns the cell should span. This will not be reflected in the editor.',
129+
'default_value' => 1,
130+
),
131+
),
132+
__DIR__ . '/templates/cell.php',
133+
array(
134+
new Child_Block(
135+
'cell-content',
136+
'Table Cell Content',
137+
array(),
138+
__DIR__ . '/templates/cell-content.php',
139+
array(),
140+
'text',
141+
array(
142+
'mode' => false,
143+
'color' => array(
144+
'text' => true,
145+
'background' => true,
146+
),
147+
),
148+
),
149+
),
150+
'table-col-after'
151+
),
152+
),
153+
'table-row-after'
154+
),
155+
),
156+
'editor-table'
157+
),
158+
);
159+
}
160+
161+
/**
162+
* {@inheritdoc}
163+
*/
164+
protected function template(): string {
165+
return __DIR__ . '/templates/block.php';
166+
}
167+
168+
/**
169+
* {@inheritdoc}
170+
*/
171+
protected function supports(): array {
172+
return array(
173+
'mode' => false,
174+
'color' => array(
175+
'text' => true,
176+
'background' => true,
177+
),
178+
);
179+
}
180+
181+
/**
182+
* {@inheritdoc
183+
*/
184+
protected function scripts(): array {
185+
return array(
186+
new Script( 'match-table-height', plugin_dir_url( __FILE__ ) . 'assets/match-table-height.js', array( 'match-height' ), '1' ),
187+
);
188+
}
189+
190+
/**
191+
* Checks if the js dependencies are working correctly.
192+
*
193+
* @throws \Exception If dependencies are not met.
194+
*
195+
* @return void
196+
*/
197+
protected function check_js_dependencies() {
198+
// Check if we have match heights script.
199+
if ( ! wp_script_is( 'match-height', 'registered' ) ) {
200+
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.' );
201+
}
202+
}
203+
}

0 commit comments

Comments
 (0)