Accessing the scrollTop of scrollContainer (.interface-interface-skeleton__content) is throwing in BlockStyles

[alshakero]

Description

The BlockStyles component does some calculation to figure the right position of the BlockStylesPreviewPanelFill. It uses the scrollTop of scrollContainer (.interface-interface-skeleton__content), which can be null at times, thus throwing an error.

The bug was likely introduced in #34522. I don't fully understand the changes in #34522, but this tiny change in this line might be sufficient to resolve the issue:

- setContainerScrollTop( scrollContainer.scrollTop + 16 );
+ setContainerScrollTop( scrollContainer?.scrollTop ?? 0 + 16 );

Step-by-step reproduction instructions

See Automattic/wp-calypso#56922 (comment).

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

cc @ramonjd

[tellisbethel]

I have a user running into the error: TypeError: Cannot read properties of null (reading 'scrollTop'). This happens when they try adding anything to their sidebar widget on their Tojours theme.

I was going to add their case to the following report, but the highlighted comment led me here:
Automattic/wp-calypso#56922 (comment)

Let me know if more info, like the full error message, is necessary, or if I'm posting in the wrong place! :)

[ramonjd]

Thanks for the report everyone. I'll look into this.