Changeset 59131

Timestamp:

09/30/2024 05:05:24 PM (2 years ago)

Author:

czapla

Message:

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( $contextbuttonText )

? $contextbuttonText
: $elementattributesdata-default-button-text;

},

) );
`

Includes unit tests to cover the new functionality.

Props darerodz, swissspidy, cbravobernal, czapla.
Fixes #62136.

Location:

trunk

Files:

• src/wp-includes/interactivity-api/class-wp-interactivity-api.php (modified) (4 diffs)
• src/wp-includes/interactivity-api/interactivity-api.php (modified) (1 diff)
• tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php (modified) (1 diff)

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

@@ -97 +97 @@
 
         /**
+         * 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;
+        /**
          * Gets and/or sets the initial state of an Interactivity API store for a
          * given namespace.
@@ -297 +306 @@
                         ? $context[ $store_namespace ]
                         : array();
+        }
+        /**
+         * 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'
+                        );
+                }
+
+                return $this->current_element;
         }
 
@@ -448 +477 @@
                                 'enter' => ! $p->is_tag_closer(),
                                 'exit'  => $p->is_tag_closer() || ! $p->has_and_visits_its_closer_tag(),
+                        );
+
+                        // 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,
                         );
 
@@ -471 +513 @@
                                 }
                         }
+
+                        // Clear the current element.
+                        $this->current_element = null;
                 }
 

trunk/src/wp-includes/interactivity-api/interactivity-api.php

@@ -126 +126 @@
         return wp_interactivity()->get_context( $store_namespace );
 }
+
+/**
+ * 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();
+}

trunk/tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php

@@ -1376 +1376 @@
                 $this->assertSame( 'myItem', $method->invoke( $this->interactivity, '-my-item-' ) );
         }
+
+        /**
+         * 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 );
+        }
 }