Skip to content

Commit d4790fd

Browse files
nicolas-jaussaudnicolas-jaussaud
committed
Elements: Add possibility to render the same element multiple times from the PHP side
1 parent bd299cc commit d4790fd

File tree

6 files changed

+111
-67
lines changed

6 files changed

+111
-67
lines changed

‎assets/build/index.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/src/index.jsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ const renderField = props => (
4242
if( props.onChange ) props.onChange(value)
4343
}}
4444
visibility={{
45-
condition: props.condition?.condition ?? false,
46-
actiElementComponenton: props.condition?.action ?? 'show',
45+
condition : props.condition?.condition ?? false,
46+
action : props.condition?.action ?? 'show',
4747
}}
4848
data={{
4949
getValue: store.getValue.bind(store)
@@ -54,9 +54,9 @@ const renderField = props => (
5454

5555
const renderElement = props => (
5656
<ControlContext.Provider value={{
57-
name : props.context ?? 'default',
58-
wrapper : `tf-context-${props.context ?? 'default'}`,
59-
getValue : store.getValue.bind(store),
57+
name : props.context ?? 'default',
58+
wrapper : `tf-context-${props.context ?? 'default'}`,
59+
getValue : store.getValue.bind(store),
6060
portalContainer : props.portalContainer ?? document.body
6161
}}>
6262
<Element
@@ -66,8 +66,8 @@ const renderElement = props => (
6666
if( props.onChange ) props.onChange(value)
6767
}}
6868
visibility={{
69-
condition: props.condition?.condition ?? false,
70-
action: props.condition?.action ?? 'show',
69+
condition : props.condition?.condition ?? false,
70+
action : props.condition?.action ?? 'show',
7171
}}
7272
data={{
7373
getValue: store.getValue.bind(store)
@@ -83,13 +83,15 @@ const init = () => {
8383

8484
const { fields, elements } = TangibleFields
8585
const items = []
86-
86+
8787
for( const field in fields ) {
8888
items.push( initItem(field, fields[ field ], 'fields') )
8989
}
9090

9191
for( const element in elements ) {
92-
items.push( initItem(element, elements[ element ], 'elements') )
92+
elements[ element ].forEach(instance => {
93+
items.push( initItem(element, instance, 'elements') )
94+
})
9395
}
9496

9597
/**

‎elements/index.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
$fields->format_element_args = function(
8484
string $name,
8585
array $args
86-
) use($fields) {
86+
) use($fields) : array {
8787

8888
$type = $args['type'] ?? '';
8989

‎enqueue.php‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,14 @@
2323

2424
$args['context'] = $fields->current_context;
2525

26-
$fields->enqueued[ $type ][ $name ] = $args;
26+
/**
27+
* An element can be rendered multiple times as it does not
28+
* contain a value
29+
*/
30+
if( $type === 'elements' ) {
31+
$fields->enqueued[ $type ][ $name ] []= $args;
32+
}
33+
else $fields->enqueued[ $type ][ $name ] = $args;
2734
};
2835

2936
$fields->enqueue = function(array $config = []) use($fields) {

‎tests/phpunit/cases/elements/render.php‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ class RenderElement_TestCase extends WP_UnitTestCase {
44

55
public function setUp() : void {
66
tangible_fields()->registered_elements = [];
7+
tangible_fields()->enqueued = [
8+
'fields' => [],
9+
'elements' => []
10+
];
711
}
812

913
public function test_elements_render() {
@@ -18,20 +22,40 @@ public function test_elements_render() {
1822
}
1923

2024
public function test_elements_render_enqueues_element() {
21-
tangible_fields()->register_element('test', [
25+
$fields = tangible_fields();
26+
$fields->register_element('test', [
2227
'type' => 'button',
2328
]);
2429

25-
$html = tangible_fields()->render_element('test');
30+
$html = $fields->render_element('test');
31+
preg_match('#tangible-element-test-[^"]+#', $html, $matches);
32+
[$element] = $matches;
33+
34+
$this->assertEquals(
35+
1,
36+
count( $fields->enqueued['elements']['test'] )
37+
);
2638

39+
$this->assertEquals([
40+
'type' => 'button',
41+
'element' => $element,
42+
'context' => 'default',
43+
], $fields->enqueued['elements']['test'][0] );
44+
45+
$html = $fields->render_element('test');
2746
preg_match('#tangible-element-test-[^"]+#', $html, $matches);
2847
[$element] = $matches;
2948

49+
$this->assertEquals(
50+
2,
51+
count( $fields->enqueued['elements']['test'] )
52+
);
53+
3054
$this->assertEquals([
3155
'type' => 'button',
3256
'element' => $element,
3357
'context' => 'default',
34-
], tangible_fields()->enqueued['elements']['test']);
58+
], $fields->enqueued['elements']['test'][1] );
3559
}
3660

3761
public function test_elements_render_compat() {
@@ -57,6 +81,6 @@ public function test_elements_render_compat() {
5781
'type' => 'button',
5882
'element' => $element,
5983
'context' => 'default',
60-
], tangible_fields()->enqueued['elements']['test']);
84+
], tangible_fields()->enqueued['elements']['test'][0]);
6185
}
6286
}

‎tests/phpunit/cases/enqueue.php‎

Lines changed: 62 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<?php
22
class Enqueue_TestCase extends WP_UnitTestCase {
3-
public function setUp(): void {
4-
tangible_fields()->enqueued = [
3+
public function setUp(): void {
4+
tangible_fields()->enqueued = [
55
'fields' => [],
66
'elements' => []
77
];
8-
tangible_fields()->is_enqueued = false;
9-
tangible_fields()->set_context('default');
8+
tangible_fields()->is_enqueued = false;
9+
tangible_fields()->set_context('default');
1010

11-
$GLOBALS['wp_styles'] = new WP_Styles();
12-
$GLOBALS['wp_scripts'] = new WP_Scripts();
13-
}
11+
$GLOBALS['wp_styles'] = new WP_Styles();
12+
$GLOBALS['wp_scripts'] = new WP_Scripts();
13+
}
1414

1515
function _test_items_enqueue_data() {
1616
return [
@@ -22,52 +22,58 @@ function _test_items_enqueue_data() {
2222
/**
2323
* @dataProvider _test_items_enqueue_data
2424
*/
25-
public function test_items_enqueue(string $type, array $args) {
26-
global $wp_version;
25+
public function test_items_enqueue(string $type, array $args) {
26+
global $wp_version;
2727
$this->assertEmpty(tangible_fields()->enqueued[ $type ], "There should not be enqueued $type yet");
28-
$this->assertFalse(tangible_fields()->is_enqueued);
28+
$this->assertFalse(tangible_fields()->is_enqueued);
2929

30-
tangible_fields()->maybe_enqueue_scripts();
31-
$this->assertFalse(tangible_fields()->is_enqueued);
30+
tangible_fields()->maybe_enqueue_scripts();
31+
$this->assertFalse(tangible_fields()->is_enqueued);
3232

33-
tangible_fields()->enqueue_item('test', $type, $args);
33+
tangible_fields()->enqueue_item('test', $type, $args);
3434
$args['context'] = 'default';
35-
$this->assertEquals(['test' => $args], tangible_fields()->enqueued[ $type ]);
36-
37-
$this->assertFalse(tangible_fields()->is_enqueued);
38-
$this->assertFalse(wp_styles()->query('tangible-fields-default'));
39-
$this->assertFalse(wp_scripts()->query('tangible-fields'));
40-
$this->assertFalse(wp_scripts()->get_data('tangible-fields', 'data'));
41-
42-
tangible_fields()->maybe_enqueue_scripts();
43-
44-
$this->assertTrue(tangible_fields()->is_enqueued);
45-
$this->assertEquals('tangible-fields-default', wp_styles()->query('tangible-fields-default')->handle);
46-
$this->assertEquals('tangible-fields', wp_scripts()->query('tangible-fields')->handle);
47-
48-
if ( version_compare($wp_version, '6.3', '>') ) {
49-
$data = wp_scripts()->get_inline_script_data('tangible-fields', 'before', false);
50-
} else {
51-
$data = wp_scripts()->print_inline_script('tangible-fields', 'before', false);
52-
}
53-
$this->assertGreaterThan(0, preg_match('#^var TangibleFields = (.+?);$#', $data, $matches), 'wp_add_inline_script does not have TangibleFields');
54-
$data = json_decode($matches[1], true);
5535

56-
$this->assertEquals([
36+
if ( $type === 'elements' ) {
37+
$this->assertEquals(['test' => [ $args ]], tangible_fields()->enqueued[ $type ]);
38+
}
39+
else {
40+
$this->assertEquals(['test' => $args], tangible_fields()->enqueued[ $type ]);
41+
}
42+
43+
$this->assertFalse(tangible_fields()->is_enqueued);
44+
$this->assertFalse(wp_styles()->query('tangible-fields-default'));
45+
$this->assertFalse(wp_scripts()->query('tangible-fields'));
46+
$this->assertFalse(wp_scripts()->get_data('tangible-fields', 'data'));
47+
48+
tangible_fields()->maybe_enqueue_scripts();
49+
50+
$this->assertTrue(tangible_fields()->is_enqueued);
51+
$this->assertEquals('tangible-fields-default', wp_styles()->query('tangible-fields-default')->handle);
52+
$this->assertEquals('tangible-fields', wp_scripts()->query('tangible-fields')->handle);
53+
54+
if ( version_compare($wp_version, '6.3', '>') ) {
55+
$data = wp_scripts()->get_inline_script_data('tangible-fields', 'before', false);
56+
} else {
57+
$data = wp_scripts()->print_inline_script('tangible-fields', 'before', false);
58+
}
59+
$this->assertGreaterThan(0, preg_match('#^var TangibleFields = (.+?);$#', $data, $matches), 'wp_add_inline_script does not have TangibleFields');
60+
$data = json_decode($matches[1], true);
61+
62+
$this->assertEquals([
5763
'api',
5864
'fields',
5965
'elements',
6066
'dynamics',
6167
'mimetypes'
6268
], array_keys($data));
63-
}
69+
}
6470

6571
/**
66-
* @dataProvider _test_items_enqueue_data
67-
*/
68-
public function test_fields_enqueue_conditions(string $type, array $args) {
69-
global $wp_version;
70-
tangible_fields()->enqueue_item('test', $type, $args);
72+
* @dataProvider _test_items_enqueue_data
73+
*/
74+
public function test_fields_enqueue_conditions(string $type, array $args) {
75+
global $wp_version;
76+
tangible_fields()->enqueue_item('test', $type, $args);
7177

7278
$args['condition'] = [
7379
'action' => 'show',
@@ -78,18 +84,23 @@ public function test_fields_enqueue_conditions(string $type, array $args) {
7884
],
7985
];
8086

81-
tangible_fields()->enqueue_item('field', $type, $args);
87+
tangible_fields()->enqueue_item('field', $type, $args);
88+
tangible_fields()->maybe_enqueue_scripts();
8289

83-
tangible_fields()->maybe_enqueue_scripts();
90+
if ( version_compare($wp_version, '6.3', '>') ) {
91+
preg_match('#^var TangibleFields = (.+?);$#', wp_scripts()->get_inline_script_data('tangible-fields', 'before', false), $matches);
92+
} else {
93+
preg_match('#^var TangibleFields = (.+?);$#', wp_scripts()->print_inline_script('tangible-fields', 'before', false), $matches);
94+
}
8495

85-
if ( version_compare($wp_version, '6.3', '>') ) {
86-
preg_match('#^var TangibleFields = (.+?);$#', wp_scripts()->get_inline_script_data('tangible-fields', 'before', false), $matches);
87-
} else {
88-
preg_match('#^var TangibleFields = (.+?);$#', wp_scripts()->print_inline_script('tangible-fields', 'before', false), $matches);
89-
}
90-
$data = json_decode($matches[1], true);
96+
$data = json_decode($matches[1], true);
9197

92-
$this->assertArrayNotHasKey('condition', $data[ $type ]['test']);
93-
$this->assertEquals($args['condition'], $data[ $type ]['field']['condition']);
94-
}
98+
$this->assertArrayNotHasKey('condition', $data[ $type ]['test']);
99+
$this->assertEquals(
100+
$args['condition'],
101+
$type === 'elements'
102+
? $data[ $type ]['field'][0]['condition']
103+
: $data[ $type ]['field']['condition']
104+
);
105+
}
95106
}

0 commit comments

Comments
 (0)