Block preview - server-side rendered block previews not vertically centered

[mikejolley]

Describe the bug
During implementation of some previews for SSR blocks, I noticed that when the rendered block content is longer than the initial loading state, the vertical alignment (which appears calculated) is not re-calculated. This gives something like this:

You can see the alignment is based on the loading state:

To reproduce
Our code is here woocommerce/woocommerce-blocks#1064

I think it can be replicated with an SSR block which renders long content.

Expected behavior
Once the SSR block is finished rendering, vertical alignment should be re-calculated, and any long content cut off in the preview.

cc @nerrad

[nerrad]

Assuming BlockPreview is used for this (I think it it is?), It appears that triggerRecompute would cause the preview to re-render. I wonder a couple things here:

Could we create a custom <BlockPreviewProvider> context exposing certain elements so that blocks in a preview can discover they are in a preview? Feasibly you could have something like:

• useIsPreview which returns whether the block is in a preview or not.
• useTriggerPreviewViewportRecalc (naming is hard, gotta be something better) that basically allows for triggering the re-render of the preview in cases like this where the block content has changed. You could feasibly implement that directly in ServerSideRender to handle this specific bug (but of course that would require either converting ServerSideRender to a functional component or wrapping it in a hoc exposing the trigger.

I did add this to the WP 5.3 must have only because I think since block previews are likely to be utilized extensively once WP 5.3 ships, it's a pretty glaring issue that would be good to address. However, I realize that some of my suggestions for fixing this are probably outside the scope of adding to WP 5.3 at this stage of things (I'm not sure how we can fix otherwise though... unless implementors simply avoid rendering via SSR for previews and simply implement static previews for now?).

[kathrynwp]

Hi @mikejolley @nerrad @talldan - I've been trying to determine whether if this is still an issue, but so far I haven't been able to replicate. These are the steps I used:

• Activate WooCommerce
• Import test product data (All Products > Import > Select sample-products.csv)
• Open a page
• Click the block inserter, then click "Browse all"
• Hover over "Newest products" block

This is what I see:

Tested with:

WordPress 6.0.1
Theme: Twenty Twenty-Two
Gutenberg plugin 13.8.0 active or inactive
No other plugins active

If this is no longer an issue, or if there are other steps needed to replicate, please let me know!

[kathrynwp]

I'm going to go ahead and close this out, but if you are still experiencing the original issue, feel free to add a comment with additional details and I’ll be glad to reopen it.