6.5-rc1: ref may be null from getElement() in style bindings

[wongjn]

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:

   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:

   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:

• ​The documentation for wp-style does not explicitly state state.* cannot be used.
• ​The documentation for Accessing data in callbacks demonstrates usage of getElement() in a derived state:

  const { state } = store( "myPlugin", {
    state: {
      get someDerivedValue() {
        const context = getContext();
        const { ref } = getElement();
        // ...
      }
    }
  

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

[wongjn]

Seems to not be limited to just the wp-style binding nor derived state either:

<!-- wp:html -->
<div data-wp-interactive="test">
  <div data-wp-bind--foo="state.foo"></div>
  <div data-wp-bind--foo="actions.foo"></div>
  <div data-wp-bind--foo="callbacks.foo"></div>
  <div data-wp-class--foo="state.foo"></div>
  <div data-wp-class--foo="actions.foo"></div>
  <div data-wp-class--foo="callbacks.foo"></div>
  <div data-wp-style--foo="state.foo"></div>
  <div data-wp-style--foo="actions.foo"></div>
  <div data-wp-style--foo="callbacks.foo"></div>
  <div data-wp-text="state.foo"></div>
  <div data-wp-text="actions.foo"></div>
  <div data-wp-text="callbacks.foo"></div>
</div>
<!-- /wp:html -->

With:

import { store, getElement } from '@wordpress/interactivity';

store( 'test', {
  state: {
    get foo() {
      const { ref } = getElement();
      console.log( 'state.foo:', ref );
    },
  },
  actions: {
    foo() {
      const { ref } = getElement();
      console.log( 'actions.foo:', ref );
    },
  },
  callbacks: {
    foo() {
      const { ref } = getElement();
      console.log( 'callbacks.foo:', ref );
    },
  },
});

Produces:

state.foo: null
actions.foo: null
callbacks.foo: null
state.foo: null
actions.foo: null
callbacks.foo: null
state.foo: null
actions.foo: null
callbacks.foo: null
state.foo: null
actions.foo: null
callbacks.foo: null

[jorbin]

Moving to 6.5 for visibility and also moving it to the editor component as I think that is better match.

[wongjn]

Clarification about when ref is available in the ​wordpress/gutenberg version of this ticket.

[darerodz]

Yup. As @wongjn shared in the previous comment, there are some situations where ref is expected to be null, so this is not an actual bug.

A thoughtful explanation is available at ​https://github.com/WordPress/gutenberg/issues/59757#issuecomment-1996635033.

[darerodz]

I've created a PR in Gutenberg to update the ref documentation.

• ​https://github.com/WordPress/gutenberg/pull/59868