Make WordPress Core

#60744 closed defect (bug) (fixed)

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

Reported by: wongjn's profile wongjn Owned by:
Milestone: 6.5 Priority: normal
Severity: normal Version: 6.5
Component: Editor Keywords:
Focuses: Cc:

Description

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:

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

Change History (7)

#1 @wongjn
11 months ago

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
Last edited 11 months ago by wongjn (previous) (diff)

#2 @jorbin
11 months ago

  • Component changed from Themes to Editor
  • Milestone changed from Awaiting Review to 6.5

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

#3 @wongjn
11 months ago

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

Last edited 11 months ago by wongjn (previous) (diff)

This ticket was mentioned in Slack in #core-editor by swissspidy. View the logs.


11 months ago

#5 @darerodz
11 months ago

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.

Last edited 11 months ago by darerodz (previous) (diff)

#6 @darerodz
11 months ago

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

#7 @cbravobernal
11 months ago

  • Resolution set to fixed
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.