<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[59131] trunk: Interactivity API: Add `wp_interactivity_get_element()` function.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/59131">59131</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/59131","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>czapla</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2024-09-30 17:05:24 +0000 (Mon, 30 Sep 2024)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Interactivity API: Add `wp_interactivity_get_element()` function.
Introduces the `wp_interactivity_get_element()` function to the Interactivity API, analogous to the `getElement()` function in the `@wordpress/interactivity` JavaScript module. This function allows access to the current element being processed during directive processing.
The function returns an array containing the `attributes` property, which includes only the originally defined attributes present on the element. Attributes added or modified by directive processing are not included. This is intended for use in derived state properties inside `wp_interactivity_state()`, similar to how `wp_interactivity_get_context()` is used.
Example usage:
```php
wp_interactivity_state( 'myPlugin', array(
'buttonText' => function() {
$context = wp_interactivity_get_context();
$element = wp_interactivity_get_element();
return isset( $context['buttonText'] )
? $context['buttonText']
: $element['attributes']['data-default-button-text'];
},
) );
```
Includes unit tests to cover the new functionality.
Props darerodz, swissspidy, cbravobernal, czapla.
Fixes <a href="https://core.trac.wordpress.org/ticket/62136">#62136</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesinteractivityapiclasswpinteractivityapiphp">trunk/src/wp-includes/interactivity-api/class-wp-interactivity-api.php</a></li>
<li><a href="#trunksrcwpincludesinteractivityapiinteractivityapiphp">trunk/src/wp-includes/interactivity-api/interactivity-api.php</a></li>
<li><a href="#trunktestsphpunittestsinteractivityapiwpInteractivityAPIphp">trunk/tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesinteractivityapiclasswpinteractivityapiphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/interactivity-api/class-wp-interactivity-api.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/interactivity-api/class-wp-interactivity-api.php 2024-09-30 16:16:44 UTC (rev 59130)
+++ trunk/src/wp-includes/interactivity-api/class-wp-interactivity-api.php 2024-09-30 17:05:24 UTC (rev 59131)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -96,6 +96,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> private $context_stack = null;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Representation in array format of the element currently being processed.
+ *
+ * This is only available during directive processing, otherwise it is `null`.
+ *
+ * @since 6.7.0
+ * @var array<mixed>|null
+ */
+ private $current_element = null;
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Gets and/or sets the initial state of an Interactivity API store for a
</span><span class="cx" style="display: block; padding: 0 10px"> * given namespace.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -297,7 +306,27 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ? $context[ $store_namespace ]
</span><span class="cx" style="display: block; padding: 0 10px"> : array();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Returns an array representation of the current element being processed.
+ *
+ * The returned array contains a copy of the element attributes.
+ *
+ * @since 6.7.0
+ *
+ * @return array|null Current element.
+ */
+ public function get_element(): ?array {
+ if ( null === $this->current_element ) {
+ _doing_it_wrong(
+ __METHOD__,
+ __( 'The element can only be read during directive processing.' ),
+ '6.7.0'
+ );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return $this->current_element;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Registers the `@wordpress/interactivity` script modules.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -449,6 +478,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'exit' => $p->is_tag_closer() || ! $p->has_and_visits_its_closer_tag(),
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Get the element attributes to include them in the element representation.
+ $element_attrs = array();
+ $attr_names = $p->get_attribute_names_with_prefix( '' ) ?? array();
+
+ foreach ( $attr_names as $name ) {
+ $element_attrs[ $name ] = $p->get_attribute( $name );
+ }
+
+ // Assign the current element right before running its directive processors.
+ $this->current_element = array(
+ 'attributes' => $element_attrs,
+ );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> foreach ( $modes as $mode => $should_run ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! $should_run ) {
</span><span class="cx" style="display: block; padding: 0 10px"> continue;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -470,6 +512,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> call_user_func_array( $func, array( $p, $mode, &$tag_stack ) );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Clear the current element.
+ $this->current_element = null;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $unbalanced ) {
</span></span></pre></div>
<a id="trunksrcwpincludesinteractivityapiinteractivityapiphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/interactivity-api/interactivity-api.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/interactivity-api/interactivity-api.php 2024-09-30 16:16:44 UTC (rev 59130)
+++ trunk/src/wp-includes/interactivity-api/interactivity-api.php 2024-09-30 17:05:24 UTC (rev 59131)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -125,3 +125,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> function wp_interactivity_get_context( ?string $store_namespace = null ): array {
</span><span class="cx" style="display: block; padding: 0 10px"> return wp_interactivity()->get_context( $store_namespace );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * Returns an array representation of the current element being processed.
+ *
+ * The function should be used only during directive processing.
+ *
+ * @since 6.7.0
+ *
+ * @return array|null Current element.
+ */
+function wp_interactivity_get_element(): ?array {
+ return wp_interactivity()->get_element();
+}
</ins></span></pre></div>
<a id="trunktestsphpunittestsinteractivityapiwpInteractivityAPIphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php 2024-09-30 16:16:44 UTC (rev 59130)
+++ trunk/tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php 2024-09-30 17:05:24 UTC (rev 59131)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1375,4 +1375,138 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( 'myItem', $method->invoke( $this->interactivity, 'my-item-' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( 'myItem', $method->invoke( $this->interactivity, '-my-item-' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ /**
+ * Tests that `wp_interactivity_get_element` returns an array with the
+ * current element's attributes.
+ *
+ * @ticket 62136
+ *
+ * @covers wp_interactivity_get_element
+ * @covers ::process_directives
+ */
+ public function test_get_element_returns_current_element_representation() {
+ /*
+ * The global WP_Interactivity_API instance is momentarily replaced to
+ * make the global function `wp_interactivity_get_element` work as expected.
+ */
+ global $wp_interactivity;
+ $wp_interactivity_prev = $wp_interactivity;
+ $wp_interactivity = $this->interactivity;
+
+ $this->interactivity->state(
+ 'myPlugin',
+ array(
+ 'dataTest' => function () {
+ $element = wp_interactivity_get_element();
+ return $element['attributes']['data-test'];
+ },
+ )
+ );
+
+ $html = <<<HTML
+ <section data-wp-interactive="myPlugin">
+ <div class="buttons">
+ <button
+ class="button"
+ data-test="button 1"
+ data-wp-bind--data-test-value="state.dataTest"
+ ></button>
+ <button
+ class="button"
+ data-test="button 2"
+ data-wp-bind--data-test-value="state.dataTest"
+ ></button>
+ </div>
+ </section>
+HTML;
+
+ $processed_html = $this->interactivity->process_directives( $html );
+ $p = new WP_HTML_Tag_Processor( $processed_html );
+ $p->next_tag( 'button' );
+ $this->assertSame( 'button 1', $p->get_attribute( 'data-test-value' ) );
+ $p->next_tag( 'button' );
+ $this->assertSame( 'button 2', $p->get_attribute( 'data-test-value' ) );
+
+ // Restore the original WP_Interactivity_API instance.
+ $wp_interactivity = $wp_interactivity_prev;
+ }
+
+ /**
+ * Tests that the attributes returned by `wp_interactivity_get_element` are
+ * those originally present before directives are processed.
+ *
+ * @ticket 62136
+ *
+ * @covers wp_interactivity_get_element
+ * @covers ::process_directives
+ */
+ public function test_get_element_returns_original_attributes_only() {
+ /*
+ * The global WP_Interactivity_API instance is momentarily replaced to
+ * make the global function `wp_interactivity_get_element` work as expected.
+ */
+ global $wp_interactivity;
+ $wp_interactivity_prev = $wp_interactivity;
+ $wp_interactivity = $this->interactivity;
+
+ $attributes = null;
+
+ $this->interactivity->state(
+ 'myPlugin',
+ array(
+ 'processAttributes' => function () use ( &$attributes ) {
+ $element = wp_interactivity_get_element();
+ $attributes = $element['attributes'];
+ return 'processed';
+ },
+ )
+ );
+
+ $html = <<<HTML
+ <section data-wp-interactive="myPlugin">
+ <div class="buttons">
+ <button
+ disabled
+ class="original"
+ data-attr="original"
+ data-wp-bind--data-attr="state.processAttributes"
+ ></button>
+ </div>
+ </section>
+HTML;
+
+ $processed_html = $this->interactivity->process_directives( $html );
+
+ $this->assertSame(
+ array(
+ 'disabled' => true,
+ 'class' => 'original',
+ 'data-attr' => 'original',
+ 'data-wp-bind--data-attr' => 'state.processAttributes',
+ ),
+ $attributes
+ );
+
+ $p = new WP_HTML_Tag_Processor( $processed_html );
+ $p->next_tag( 'button' );
+ $this->assertSame( 'processed', $p->get_attribute( 'data-attr' ) );
+
+ // Restore the original WP_Interactivity_API instance.
+ $wp_interactivity = $wp_interactivity_prev;
+ }
+
+ /**
+ * Tests that `wp_interactivity_get_element` should not be called outside of
+ * `process_directives` execution.
+ *
+ * @ticket 62136
+ *
+ * @covers wp_interactivity_get_element
+ * @expectedIncorrectUsage WP_Interactivity_API::get_element
+ */
+ public function test_get_element_outside_of_directive_processing() {
+ $element = $this->interactivity->get_element();
+ $this->assertNull( $element );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre>
</div>
</div>
</body>
</html>