Opened 11 months ago
Closed 11 months ago
#60744 closed defect (bug) (fixed)
6.5-rc1: ref may be null from getElement() in style bindings
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | 6.5 | Priority: | normal |
Severity: | normal | Version: | 6.5 |
Component: | Editor | Keywords: | |
Focuses: | Cc: |
Description
Reproduction
- Install and set up WordPress 6.5-RC1
- Activate Twenty Twenty-Four theme.
- 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 -->
- Create a
test.js
file in the root oftwentytwentyfour
:import { store, getElement } from '@wordpress/interactivity'; store( 'test', { state: { get foo() { const { ref } = getElement(); console.log( ref ); }, }, });
- 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' ) ); } );
- Go to a webpage that renders the modified template from step 3.
- 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)
Change History (7)
#2
@
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
@
11 months ago
Clarification about when ref
is available in the wordpress/gutenberg version of this ticket.
This ticket was mentioned in Slack in #core-editor by swissspidy. View the logs.
11 months ago
#5
@
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.
Note: See
TracTickets for help on using
tickets.
Seems to not be limited to just the
wp-style
binding nor derived state either:With:
Produces: