On WP 5.8-beta4-51243 Block preview contents get cut-off

[alanjacobmathew]

WP 5.8-beta4-51243 Theme: Twenty Twenty One.

This might be an isolated issue.

Block preview gets cut-off and there is no way the user can read the complete content unless the user zooms out in the browser.

Here the warning gets cut-off and since there is no option to scroll, the user can't necessarily install the required plugin. In my case I know it's about "Product Table" plugin since it's mentioned once in the warning, but if the original preview text/preview image was larger(for eg: preview text in site logo) then there is a chance that more content would get cut-off since it is impossible to scroll.

Current preview :

Expected preview :

This can be solved hopefully by increasing the width of the preview block, or by limiting the characters the plugin developers can submit for preview.

[youknowriad]

Is this specific to 5.8. It's probably a bug that always existed, can we move this to a GitHub issue to debug it properly? ​https://github.com/WordPress/gutenberg/issues/new/choose

[alanjacobmathew]

@youknowriad

When tested with stable 5.7.2 the preview cut-off exists, even though I had to increase the zoom level this time.
5.7.2

[desrosj]

I am actually unable to reproduce this on 5.7.2 or 5.8 beta 4.

To test:

• Fresh install.
• Install Woocommerce
• Install the Gutenberg Block for WooCommerce Product Table block through the block inserter.
• Hover over the WooCommerce Product Table block.

I've tried with both Twenty Twenty-One and Twenty Twenty active, and in three different browsers on MacOS (Safari, Chrome, Firefox).

I'm going to close this out as a worksforme. Please retry with a fresh install to see if you're able to reproduce. If someone is still seeing the issue, feel free to reopen with more details.

[alanjacobmathew]

When testing with the latest version 5.8-beta4-51251, I guess there has been a design shift in the block inserter(from looking at the initial screenshot).

I can't reproduce the issue with WooCommerce + Product Table block right now, and everything works as expected, as long as my zoom level is normal.

Further Isolated condition:

In case the user has set their browser zoom level (say 125%), then even the preview of default 'column block' gets cut-off.

Like I said this might be a very rare case as not much users will be working with increased zoom level.

Maybe a solution like auto scroll of preview in-case the user hover on top that block for 'x+' seconds can be a temporary solution.