WordPress.org
Get WordPress

Make WordPress Core


Ignore:
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.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r59083 r59131  
    13761376                $this->assertSame( 'myItem', $method->invoke( $this->interactivity, '-my-item-' ) );
    13771377        }
     1378
     1379        /**
     1380         * Tests that `wp_interactivity_get_element` returns an array with the
     1381         * current element's attributes.
     1382         *
     1383         * @ticket 62136
     1384         *
     1385         * @covers wp_interactivity_get_element
     1386         * @covers ::process_directives
     1387         */
     1388        public function test_get_element_returns_current_element_representation() {
     1389                /*
     1390                 * The global WP_Interactivity_API instance is momentarily replaced to
     1391                 * make the global function `wp_interactivity_get_element` work as expected.
     1392                 */
     1393                global $wp_interactivity;
     1394                $wp_interactivity_prev = $wp_interactivity;
     1395                $wp_interactivity      = $this->interactivity;
     1396
     1397                $this->interactivity->state(
     1398                        'myPlugin',
     1399                        array(
     1400                                'dataTest' => function () {
     1401                                        $element = wp_interactivity_get_element();
     1402                                        return $element['attributes']['data-test'];
     1403                                },
     1404                        )
     1405                );
     1406
     1407                $html = <<<HTML
     1408                        <section data-wp-interactive="myPlugin">
     1409                                <div class="buttons">
     1410                                        <button
     1411                                                class="button"
     1412                                                data-test="button 1"
     1413                                                data-wp-bind--data-test-value="state.dataTest"
     1414                                        ></button>
     1415                                        <button
     1416                                                class="button"
     1417                                                data-test="button 2"
     1418                                                data-wp-bind--data-test-value="state.dataTest"
     1419                                        ></button>
     1420                                </div>
     1421                        </section>
     1422HTML;
     1423
     1424                $processed_html = $this->interactivity->process_directives( $html );
     1425                $p              = new WP_HTML_Tag_Processor( $processed_html );
     1426                $p->next_tag( 'button' );
     1427                $this->assertSame( 'button 1', $p->get_attribute( 'data-test-value' ) );
     1428                $p->next_tag( 'button' );
     1429                $this->assertSame( 'button 2', $p->get_attribute( 'data-test-value' ) );
     1430
     1431                // Restore the original WP_Interactivity_API instance.
     1432                $wp_interactivity = $wp_interactivity_prev;
     1433        }
     1434
     1435        /**
     1436         * Tests that the attributes returned by `wp_interactivity_get_element` are
     1437         * those originally present before directives are processed.
     1438         *
     1439         * @ticket 62136
     1440         *
     1441         * @covers wp_interactivity_get_element
     1442         * @covers ::process_directives
     1443         */
     1444        public function test_get_element_returns_original_attributes_only() {
     1445                /*
     1446                 * The global WP_Interactivity_API instance is momentarily replaced to
     1447                 * make the global function `wp_interactivity_get_element` work as expected.
     1448                 */
     1449                global $wp_interactivity;
     1450                $wp_interactivity_prev = $wp_interactivity;
     1451                $wp_interactivity      = $this->interactivity;
     1452
     1453                $attributes = null;
     1454
     1455                $this->interactivity->state(
     1456                        'myPlugin',
     1457                        array(
     1458                                'processAttributes' => function () use ( &$attributes ) {
     1459                                        $element = wp_interactivity_get_element();
     1460                                        $attributes = $element['attributes'];
     1461                                        return 'processed';
     1462                                },
     1463                        )
     1464                );
     1465
     1466                $html = <<<HTML
     1467                        <section data-wp-interactive="myPlugin">
     1468                                <div class="buttons">
     1469                                        <button
     1470                                                disabled
     1471                                                class="original"
     1472                                                data-attr="original"
     1473                                                data-wp-bind--data-attr="state.processAttributes"
     1474                                        ></button>
     1475                                </div>
     1476                        </section>
     1477HTML;
     1478
     1479                $processed_html = $this->interactivity->process_directives( $html );
     1480
     1481                $this->assertSame(
     1482                        array(
     1483                                'disabled'                => true,
     1484                                'class'                   => 'original',
     1485                                'data-attr'               => 'original',
     1486                                'data-wp-bind--data-attr' => 'state.processAttributes',
     1487                        ),
     1488                        $attributes
     1489                );
     1490
     1491                $p = new WP_HTML_Tag_Processor( $processed_html );
     1492                $p->next_tag( 'button' );
     1493                $this->assertSame( 'processed', $p->get_attribute( 'data-attr' ) );
     1494
     1495                // Restore the original WP_Interactivity_API instance.
     1496                $wp_interactivity = $wp_interactivity_prev;
     1497        }
     1498
     1499        /**
     1500         * Tests that `wp_interactivity_get_element` should not be called outside of
     1501         * `process_directives` execution.
     1502         *
     1503         * @ticket 62136
     1504         *
     1505         * @covers wp_interactivity_get_element
     1506         * @expectedIncorrectUsage WP_Interactivity_API::get_element
     1507         */
     1508        public function test_get_element_outside_of_directive_processing() {
     1509                $element = $this->interactivity->get_element();
     1510                $this->assertNull( $element );
     1511        }
    13781512}
Note: See TracChangeset for help on using the changeset viewer.