[wp-trac] [WordPress Trac] #60744: 6.5-rc1: ref may be null from getElement() in style bindings

[WordPress Trac]

#60744: 6.5-rc1: ref may be null from getElement() in style bindings
--------------------------+-----------------------------
 Reporter:  wongjn        |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Themes        |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 == Reproduction

 1. Install and set up WordPress 6.5-RC1
 2. Activate Twenty Twenty-Four theme.
 3. Append the following code to any template (i.e. `templates/home.html`):
 {{{
 <!-- wp:html -->
 <div data-wp-interactive="test">
   <div data-wp-style--foo="state.foo"></div>
 </div>
 <!-- /wp:html -->
 }}}
 4. Create a `test.js` file in the root of `twentytwentyfour`:
 {{{#!js
 import { store, getElement } from '@wordpress/interactivity';

 store( 'test', {
   state: {
     get foo() {
       const { ref } = getElement();
       console.log( ref );
     },
   },
 });
 }}}
 5. Append the following code to `functions.php`:
 {{{#!php
 add_action(
         'wp_enqueue_scripts',
         function () {
                 wp_enqueue_script_module(
                         'test',
                         get_theme_file_uri( 'test.js' ),
                         array( '@wordpress/interactivity' )
                 );
         }
 );
 }}}
 6. Go to a webpage that renders the modified template from step 3.
 7. Open browser developer tools, observe that `null` is output in the
 console, instead of the JavaScript DOM object representing an element.

 == Description

 I believe that the `ref` to the HTML element should be available, since:
 - [https://developer.wordpress.org/block-editor/reference-guides/packages
 /packages-interactivity/packages-interactivity-api-reference/#wp-style The
 documentation for wp-style] does not explicitly state `state.*` cannot be
 used.
 - [https://developer.wordpress.org/block-editor/reference-guides/packages
 /packages-interactivity/packages-interactivity-api-reference/#accessing-
 data-in-callbacks The documentation for Accessing data in callbacks]
 demonstrates usage of `getElement()` in a derived state:
 {{{#!js
 const { state } = store( "myPlugin", {
   state: {
     get someDerivedValue() {
       const context = getContext();
       const { ref } = getElement();
       // ...
     }
   }
 }}}

 (Sorry, was not sure which ''Component'' this belongs in)

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/60744>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform