Style Book: Box shadow is cut off

[annezazu]

Description

Using 6.2 beta 3, when setting box shadow with the style book open, I noticed the shadow is cut off in the preview.

This implemented the feature: #46502 so tagging in @madhusudhand to investigate along with @andrewserong for the Style Book with Rob out.

Related, I noticed the box shadow sometimes isn't showing up in the Styles interface for Buttons when it used to appear. Instead, I'm met with an empty fly out view. I couldn't replicate this consistently so not opening an issue for now.

Step-by-step reproduction instructions

1. Use 6.2 beta 3 and TT3
2. Open Appearance > Editor
3. Open Styles > Blocks > Button > Shadow
4. Set a shadow and turn on the Style Book
5. Note that the shadow gets cut off

Screenshots, screen recording, code snippet

Environment info

• 6.2 beta 3
• TT3
• GB 15.2

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

[andrewserong]

Oh, what an interesting one. It looks like the BlockPreview component uses useResizeObserver to get the content size of the previewed blocks, which sets the height of the preview. Since box shadow occurs outside of the content size, it gets cut off. It might be possible to tweak the styling rules that we pass to BlockPreview within the Style Book to allow an offset that gives enough breathing room for the different shadow styles — I'm not sure how doable it'd be to determine how much breathing room is required, but we should at least be able to give enough to fix the main display issues.

I might not get a chance to work on this today, so if no-one beats me to it, I'll look into a fix on Monday.

[andrewserong]

I've had a go at a naive fix over in #48470

[andrewserong]

Update: I think the most viable of the options explored so far (and that seems consistent with how the Style Book should ideally work) is ready for review over in #48664 — that approach lifts the iframe for the previews up to encompass the whole content area of the Style Book which will allow big shadows to be rendered beyond the area of the block preview.