Make WordPress Core

Opened 2 months ago

Closed 2 months ago

#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
2 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 2 months ago by wongjn (previous) (diff)

#2 @jorbin
2 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
2 months ago

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

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

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


2 months ago

#5 @darerodz
2 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 2 months ago by darerodz (previous) (diff)

#6 @darerodz
2 months ago

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

#7 @cbravobernal
2 months ago

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