Skip to content

Commit 08e459d

Browse files
luisherranzluisherranz
committed
Interactivity API: Support unique IDs in server-side directives processing.
Server-side logic to support unique IDs in the Interactivity API directives to match what the client is doing (WordPress/gutenberg#72161). Props santosguillamot, darerodz, luisherranz. Fixes #64106. git-svn-id: https://develop.svn.wordpress.org/trunk@61020 602fd350-edb4-49c9-b593-d223f7449a82
1 parent edaed03 commit 08e459d

File tree

8 files changed

+876
-173
lines changed

8 files changed

+876
-173
lines changed

‎src/wp-includes/interactivity-api/class-wp-interactivity-api.php‎

Lines changed: 181 additions & 106 deletions
Large diffs are not rendered by default.

‎tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-bind.php‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,4 +398,22 @@ public function test_wp_bind_handles_true_value() {
398398
list($p) = $this->process_directives( $html );
399399
$this->assertSame( true, $p->get_attribute( 'id' ) );
400400
}
401+
402+
/**
403+
* Tests ignores unique IDs in bind directive.
404+
*
405+
* @ticket 64106
406+
*
407+
* @covers ::process_directives
408+
*/
409+
public function test_wp_bind_ignores_unique_ids() {
410+
$html = '<div data-wp-bind--id="myPlugin::state.trueValue"></div>';
411+
list($p) = $this->process_directives( $html );
412+
$this->assertSame( true, $p->get_attribute( 'id' ) );
413+
414+
$html = '<div data-wp-bind--id---unique-id="myPlugin::state.trueValue"></div>';
415+
list($p) = $this->process_directives( $html );
416+
$this->assertNull( $p->get_attribute( 'id' ) );
417+
$this->assertNull( $p->get_attribute( 'id---unique-id' ) );
418+
}
401419
}

‎tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-class.php‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ public function test_wp_class_sets_multiple_class_names() {
7676
data-wp-class--other-class="myPlugin::state.true"
7777
>Text</div>';
7878
list($p) = $this->process_directives( $html );
79-
$this->assertSame( 'some-class other-class', $p->get_attribute( 'class' ) );
79+
$this->assertSame( 'other-class some-class', $p->get_attribute( 'class' ) );
8080
}
8181

8282
/**
@@ -328,4 +328,25 @@ public function test_wp_class_sets_class_name_on_falsy_values() {
328328
list($p) = $this->process_directives( $html );
329329
$this->assertNull( $p->get_attribute( 'class' ) );
330330
}
331+
332+
/**
333+
* Tests that classes with several dashes can be used.
334+
*
335+
* @ticket 64106
336+
*
337+
* @covers ::process_directives
338+
*/
339+
public function test_wp_class_can_use_several_dashes() {
340+
$html = '<div data-wp-class--main-bg--color="myPlugin::state.true">Text</div>';
341+
list($p) = $this->process_directives( $html );
342+
$this->assertSame( 'main-bg--color', $p->get_attribute( 'class' ) );
343+
344+
$html = '<div data-wp-class--main-bg---color="myPlugin::state.true">Text</div>';
345+
list($p) = $this->process_directives( $html );
346+
$this->assertSame( 'main-bg---color', $p->get_attribute( 'class' ) );
347+
348+
$html = '<div data-wp-class--main-bg----color="myPlugin::state.true">Text</div>';
349+
list($p) = $this->process_directives( $html );
350+
$this->assertSame( 'main-bg----color', $p->get_attribute( 'class' ) );
351+
}
331352
}

‎tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-context.php‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -522,4 +522,45 @@ public function test_wp_context_directive_replaces_old_context_after_closing_tag
522522
$p->next_tag( array( 'class_name' => 'test' ) );
523523
$this->assertSame( 'some-id-1', $p->get_attribute( 'id' ) );
524524
}
525+
526+
/**
527+
* Tests supports multiple context directives in the same element.
528+
*
529+
* @ticket 64106
530+
*
531+
* @covers ::process_directives
532+
*/
533+
public function test_wp_context_supports_multiple_directives_in_the_same_element() {
534+
$html = '
535+
<div
536+
data-wp-interactive="directive-context/multiple"
537+
data-wp-context=\'{ "prop": "parent", "parent": true }\'
538+
>
539+
<div
540+
data-wp-context---id2=\'other-namespace::{ "prop": true }\'
541+
data-wp-context=\'{ "prop": "default", "default": true }\'
542+
data-wp-context---id1=\'{ "prop": "id1", "id1": true }\'
543+
>
544+
<span
545+
class="test"
546+
data-wp-bind--data-test-prop="context.prop"
547+
data-wp-bind--data-test-parent="context.parent"
548+
data-wp-bind--data-test-default="context.default"
549+
data-wp-bind--data-test-id1="context.id1"
550+
data-wp-bind--data-test-other="other-namespace::context.prop"
551+
></span>
552+
</div>
553+
</div>
554+
';
555+
list($p) = $this->process_directives( $html );
556+
$this->assertSame( 'id1', $p->get_attribute( 'data-test-prop' ) );
557+
foreach ( array( 'parent', 'default', 'id1', 'other' ) as $attribute ) {
558+
$attr_name = "data-test-$attribute";
559+
$this->assertSame(
560+
'true',
561+
$p->get_attribute( $attr_name ),
562+
"Failed asserting that $attr_name equals 'true'"
563+
);
564+
}
565+
}
525566
}

‎tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-each.php‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -580,8 +580,6 @@ public function test_wp_each_nested_template_tags_using_previous_item_as_list()
580580
* @ticket 60356
581581
*
582582
* @covers ::process_directives
583-
*
584-
* @expectedIncorrectUsage WP_Interactivity_API::_process_directives
585583
*/
586584
public function test_wp_each_unbalanced_tags() {
587585
$original = '' .
@@ -600,8 +598,6 @@ public function test_wp_each_unbalanced_tags() {
600598
* @ticket 60356
601599
*
602600
* @covers ::process_directives
603-
*
604-
* @expectedIncorrectUsage WP_Interactivity_API::_process_directives
605601
*/
606602
public function test_wp_each_unbalanced_tags_in_nested_template_tags() {
607603
$this->interactivity->state( 'myPlugin', array( 'list2' => array( 3, 4 ) ) );
@@ -684,4 +680,36 @@ public function test_wp_each_doesnt_process_with_manual_server_directive_process
684680
$new = $this->interactivity->process_directives( $original );
685681
$this->assertSame( $expected, $new );
686682
}
683+
684+
/**
685+
* Tests it doesn't support multiple directives.
686+
*
687+
* @ticket 64106
688+
*
689+
* @covers ::process_directives
690+
*/
691+
public function test_wp_each_doesnt_support_multiple_directives() {
692+
$original = '' .
693+
'<div data-wp-interactive="directive-each">' .
694+
'<template data-wp-each="myPlugin::state.list" data-wp-each--item="myPlugin::state.list">' .
695+
'<span data-wp-text="myPlugin::context.item"></span>' .
696+
'</template>' .
697+
'<template data-wp-each---unique-id="myPlugin::state.list">' .
698+
'<span data-wp-text="myPlugin::context.item"></span>' .
699+
'</template>' .
700+
'<div data-wp-bind--id="myPlugin::state.after">Text</div>' .
701+
'</div>';
702+
$expected = '' .
703+
'<div data-wp-interactive="directive-each">' .
704+
'<template data-wp-each="myPlugin::state.list" data-wp-each--item="myPlugin::state.list">' .
705+
'<span data-wp-text="myPlugin::context.item"></span>' .
706+
'</template>' .
707+
'<template data-wp-each---unique-id="myPlugin::state.list">' .
708+
'<span data-wp-text="myPlugin::context.item"></span>' .
709+
'</template>' .
710+
'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>' .
711+
'</div>';
712+
$new = $this->interactivity->process_directives( $original );
713+
$this->assertSame( $expected, $new );
714+
}
687715
}

‎tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-style.php‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ public function test_wp_style_sets_multiple_style_properties() {
190190
data-wp-style--background="myPlugin::state.green"
191191
>Text</div>';
192192
list($p) = $this->process_directives( $html );
193-
$this->assertSame( 'color:green;background:green;', $p->get_attribute( 'style' ) );
193+
$this->assertSame( 'background:green;color:green;', $p->get_attribute( 'style' ) );
194194
}
195195

196196
/**
@@ -448,4 +448,30 @@ public function test_wp_style_doesnt_add_style_property_on_falsy_values() {
448448
list($p) = $this->process_directives( $html );
449449
$this->assertNull( $p->get_attribute( 'style' ) );
450450
}
451+
452+
/**
453+
* Tests it can use CSS variables.
454+
*
455+
* @ticket 64106
456+
*
457+
* @covers ::process_directives
458+
*/
459+
public function test_wp_style_can_use_CSS_variables() {
460+
$html = '<div data-wp-style----text-color="myPlugin::state.green">Text</div>';
461+
list($p) = $this->process_directives( $html );
462+
$this->assertSame( '--text-color:green;', $p->get_attribute( 'style' ) );
463+
}
464+
465+
/**
466+
* Tests it ignores unique IDs.
467+
*
468+
* @ticket 64106
469+
*
470+
* @covers ::process_directives
471+
*/
472+
public function test_wp_style_ignores_unique_ids() {
473+
$html = '<div data-wp-style--color---unique-id="myPlugin::state.green">Text</div>';
474+
list($p) = $this->process_directives( $html );
475+
$this->assertNull( $p->get_attribute( 'style' ) );
476+
}
451477
}

‎tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-text.php‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
*
1313
* @group interactivity-api
1414
*/
15-
class Tests_Interactivity_API_WpInteractivityAPIWPText extends WP_UnitTestCase {
15+
class Tests_WP_Interactivity_API_WP_Text extends WP_UnitTestCase {
1616
/**
1717
* Instance of WP_Interactivity_API.
1818
*
@@ -131,8 +131,6 @@ public function test_wp_text_sets_inner_content_even_with_unbalanced_but_differe
131131
* @ticket 60356
132132
*
133133
* @covers ::process_directives
134-
*
135-
* @expectedIncorrectUsage WP_Interactivity_API::_process_directives
136134
*/
137135
public function test_wp_text_fails_with_unbalanced_and_same_tags_inside_content() {
138136
$html = '<div data-wp-text="myPlugin::state.text">Text<div></div>';
@@ -154,4 +152,35 @@ public function test_wp_text_cant_set_inner_html_in_the_content() {
154152
$new_html = $this->interactivity->process_directives( $html );
155153
$this->assertSame( '<div data-wp-text="myPlugin::state.text">&lt;span&gt;Updated&lt;/span&gt;</div>', $new_html );
156154
}
155+
156+
/**
157+
* Tests it ignores suffixes and unique-ids.
158+
*
159+
* @ticket 64106
160+
*
161+
* @covers ::process_directives
162+
*/
163+
public function test_wp_text_ignores_suffixes_and_unique_ids() {
164+
$html = '<span data-wp-text--suffix="myPlugin::state.text">Text</span>';
165+
$new_html = $this->interactivity->process_directives( $html );
166+
$this->assertSame( $html, $new_html );
167+
168+
$html = '<span data-wp-text---unique-id="myPlugin::state.text">Text</span>';
169+
$new_html = $this->interactivity->process_directives( $html );
170+
$this->assertSame( $html, $new_html );
171+
}
172+
173+
/**
174+
* Tests first `data-wp-text` works even when suffixes and unique-ids are included.
175+
*
176+
* @ticket 64106
177+
*
178+
* @covers ::process_directives
179+
*/
180+
public function test_wp_text_works_even_when_suffixes_and_unique_ids_are_included() {
181+
$original = '<span data-wp-text--suffix="myPlugin::state.text" data-wp-text---unique-id="myPlugin::state.text" data-wp-text="myPlugin::state.text">Text</span>';
182+
$expected = '<span data-wp-text--suffix="myPlugin::state.text" data-wp-text---unique-id="myPlugin::state.text" data-wp-text="myPlugin::state.text">Updated</span>';
183+
$new_html = $this->interactivity->process_directives( $original );
184+
$this->assertSame( $expected, $new_html );
185+
}
157186
}

0 commit comments

Comments
 (0)