Description

Summary

wp-bind return value mishandles the popover attribute.
data-wp-bind--popover="callbacks.popoverState" returns <div data-wp-bind--popover="callbacks.popoverState" popover="true">.

callbacks.popoverState returns "auto"|false but the attribute added to the DOM element is always string.

Expected Behavior

Per the docs I'd expect the attribute to exist/not-exist if a boolean value is returned, or to set the attribute equal to the returned string.

When wp-bind directive references a callback to get its final value:
The wp-bind directive will be executed each time there’s a change on any of the properties of the state or context used inside this callback.
The returned value in the callback function is used to change the value of the associated attribute.
The wp-bind will do different things when the DOM element is applied, depending on its value:

• If the value is true, the attribute is added: <div attribute>
• If the value is false, the attribute is removed: <div>
• If the value is a string, the attribute is added with its value assigned: <div attribute="value">
• If the attribute name starts with aria- or data- and the value is boolean (either true or false), the attribute is added to the DOM with the boolean value assigned as a string: <div aria-attribute="true">

Concretely:

• callbacks.popoverState returns true, the div should read <div popover>
• callbacks.popoverState returns false, the div should read <div>
• callbacks.popoverState returns "auto", the div should read <div popover="auto">
  • String values from MDN docs are "auto"|"manual"|"hint"

Step-by-step reproduction instructions

1. Scaffold an interactive block with npx @wordpress/create-block --template @wordpress/create-block-interactive-template
2. Add a boolean value to the block's state
3. Consume the newly created boolean in the block's render.php with data-wp-bind--popover
4. Update callbacks.logIsOpen to log typeof state['your-boolean-value'] to ensure it is, in fact, a boolean.

Screenshots, screen recording, code snippet

Chrome Element Inspector:

Console:

view.js:

Environment info

• WordPress via VS Code WordPress Playground Server (latest, 6.9)
• PHP 7.4
• Chrome 147.0.7727.117 (Official Build) (arm64)
• macOS 15.7.5

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure