useRef doesn’t work for widgets in editor.BlockEdit

[MatzeKitt]

Description

I’m trying to do something based on a given block via the editor.BlockEdit filter. Since I need add some styles based on the given BlockEdit object, I use useRef() to get this object. While this is working fine in the regular block editor, it doesn’t work in the widget area. Instead of returning a proper reference of the BlockEdit, it always returns undefined.

This is a code example:

import { createHigherOrderComponent } from '@wordpress/compose';
import { useRef } from '@wordpress/element';
import { addFilter } from '@wordpress/hooks';

const addControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => {
	const blockRef = useRef( null );

	console.log( { blockRef } );

	return <BlockEdit { ...props } ref={ blockRef } />;
} );

addFilter( 'editor.BlockEdit', 'rh/block-notes/add-controls', addControls );

In the block editor, the console log will return the proper reference, while in the widget area, it doesn’t.

Step-by-step reproduction instructions

1. Load the code above.
2. Visit the widget area.
3. Look into the browser console.

Screenshots, screen recording, code snippet

No response

Environment info

– WordPress 6.5.3

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[stokesman]

The ref on BlockEdit doesn’t seem to be intentionally supported. I tried this on trunk and it errors. Some earlier versions of WP I tried it on the ref was always undefined (as you report in the widgets editor). So I doubt this will be considered a bug.

Since I need add some styles based on the given BlockEdit object, I use useRef() to get this object.

I’m wondering what adding some styles looks like. I'd expected you were intending to reference the block’s DOM element and perhaps add inline styles but (where this works) the reference is to a component. Maybe you're intending to add style tags dynamically it seems like the props would suffice for informing that and the ref would be unneeded. For instance the clientId is in the props and you could add styles with selectors based on that.

If you’re wanting a reference to blocks’s element from the filter workarounds are possible and I could post an example.

[MatzeKitt]

I add a container after the BlockEdit and want to make its position relative to the BlockEdit. That’s why I used this code:

if (
	blockRef?.current &&
	otherCondition
) {
	const block = document.getElementById( 'block-' + clientId );
	const blockStyles = window.getComputedStyle( block );

	style[ 'top' ] =
		( block.offsetHeight +
			parseFloat( blockStyles.marginBottom ) +
			parseFloat( blockStyles.paddingBottom ) ) *
		-1;
}

However, I now just use a check whether block exists instead of using the ref. Tends to be a little slower, but is still working.

[stokesman]

I'm glad to know you were able to keep progressing. Perhaps you might agree that this isn’t an bug and we can close the issue?

Tends to be a little slower, but is still working.

Just an idea but would it work to only add your container when the block is selected? (isSelected is in the props).

[MatzeKitt]

I’m not sure if I’m convinced that it’s no bug, since it works at least in the current block editor used in core in the post editor. 🤷🏻‍♂️

Just an idea but would it work to only add your container when the block is selected? (isSelected is in the props).

Unfortunately, no. It has to be visible all the time.

[stokesman]

I see your point about it being available in a release. Yet it doesn’t seem like it was intentional and perhaps more a bug that it became available (as in previous versions I tested it was not).

Besides that, I could be missing something but I’m failing to see its utility in your use case. In testing, I found the ref is available as long as the filtered block is present in the editor. Therefore a conditional for it will always have the same result. Well, other than the first render as expected the ref will not have been attached.