Changeset 65228

Timestamp:

11/03/2026 02:36:41 PM (9 days ago)

Author:

jonsurrell

Message:

Interactivity API: Remove event handler bind directives.

Server processing now removes data-wp-bind--on* directives from output.

Developed in: ​https://github.com/WordPress/wordpress-develop/pull/15396

Follow-up to r61885.

Props jonsurrell, ntsekouras, luisherranz.
See #66452.

Location:

trunk

Files:

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

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

@@ -1154 +1154 @@
          *              JSON encoder, and a value which cannot be sent to the client is rejected rather than passed to
          *              WP_HTML_Tag_Processor::set_attribute().
+         * @since 7.2.0 Event handler bind directives are removed.
          *
          * @param WP_Interactivity_API_Directives_Processor $p    The directives processor instance.
@@ -1160 +1161 @@
         private function data_wp_bind_processor( WP_Interactivity_API_Directives_Processor $p, string $mode ): void {
                 if ( 'enter' === $mode ) {
-                        $entries = $this->get_directive_entries( $p, 'bind' );
+                        $event_handler_prefix = 'data-wp-bind--on';
+                        $entries              = $this->get_directive_entries( $p, 'bind' );
                         foreach ( $entries as $entry ) {
+                                // Binding event handler attributes is not supported.
+                                if ( str_starts_with( $entry['attribute_name'], $event_handler_prefix ) ) {
+                                        $p->remove_attribute( $entry['attribute_name'] );
+                                        _doing_it_wrong(
+                                                __METHOD__,
+                                                sprintf(
+                                                        /* translators: %s: The directive, e.g. data-wp-on--click. */
+                                                        __( 'Binding event handler attributes is not supported. Please use "%s" instead.' ),
+                                                        esc_attr( 'data-wp-on--' . substr( $entry['attribute_name'], strlen( $event_handler_prefix ) ) )
+                                                ),
+                                                '6.9.2'
+                                        );
+                                        continue;
+                                }
+
                                 if ( empty( $entry['suffix'] ) || null !== $entry['unique_id'] ) {
                                         continue;
@@ -1180 +1197 @@
                                                 ),
                                                 '7.1.4'
-                                        );
-                                        continue;
-                                }
-
-                                // Skip if the suffix is an event handler.
-                                if ( str_starts_with( $entry['suffix'], 'on' ) ) {
-                                        _doing_it_wrong(
-                                                __METHOD__,
-                                                sprintf(
-                                                        /* translators: %s: The directive, e.g. data-wp-on--click. */
-                                                        __( 'Binding event handler attributes is not supported. Please use "%s" instead.' ),
-                                                        esc_attr( 'data-wp-on--' . substr( $entry['suffix'], 2 ) )
-                                                ),
-                                                '6.9.2'
                                         );
                                         continue;

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

@@ -990 +990 @@
                 );
         }
+
+        /**
+         * Data provider for event handler bindings.
+         *
+         * @return array<non-empty-string, array{ attribute: non-empty-string }> Data provider.
+         */
+        public static function data_event_handler_bindings(): array {
+                return array(
+                        'event handler'                         => array( 'attribute' => 'data-wp-bind--onclick' ),
+                        'event handler with an empty unique ID' => array( 'attribute' => 'data-wp-bind--onclick---' ),
+                        'event handler with a unique ID'        => array( 'attribute' => 'data-wp-bind--onclick---unique-id' ),
+                );
+        }
+
+        /**
+         * Tests that `data-wp-bind` removes event handler bindings.
+         *
+         * @ticket 66452
+         *
+         * @covers ::process_directives
+         *
+         * @dataProvider data_event_handler_bindings
+         *
+         * @expectedIncorrectUsage WP_Interactivity_API::data_wp_bind_processor
+         *
+         * @param non-empty-string $attribute Directive attribute name.
+         */
+        public function test_wp_bind_removes_event_handler_bindings( string $attribute ): void {
+                $html     = "<button att-before {$attribute}=\"myPlugin::state.id\" att-after>Text</button>";
+                $new_html = $this->interactivity->process_directives( $html );
+                $this->assertEqualHTML( '<button att-before att-after>Text</button>', $new_html );
+        }
+
+        /**
+         * Tests that `data-wp-bind` removes an event handler binding but still
+         * processes valid bind directives on the same element.
+         *
+         * @ticket 66452
+         *
+         * @covers ::process_directives
+         *
+         * @expectedIncorrectUsage WP_Interactivity_API::data_wp_bind_processor
+         */
+        public function test_wp_bind_removes_event_handler_binding_but_processes_valid_binds(): void {
+                $html     = '<button data-wp-bind--onclick="myPlugin::state.id" data-wp-bind--id="myPlugin::state.id">Text</button>';
+                $new_html = $this->interactivity->process_directives( $html );
+                $this->assertEqualHTML( '<button data-wp-bind--id="myPlugin::state.id" id="some-id">Text</button>', $new_html );
+        }
 }