Allow customization of block preview height

[jefferyto]

What problem does this address?

Before WordPress 6.5, the block preview height was not fixed, instead adapting to the height of the preview content. After 6.5, the block preview height appears to be fixed to 150px, I believe as a result of #59112.

150px is not tall enough for many (most?) blocks, but more importantly, any single fixed height will not work for all blocks.

What is your proposed solution?

Support either one or (ideally) both:

• Allow the block developer to explicitly indicate the ideal preview height, similar to setting viewportWidth.
• Allow the preview to adapt to the height of the preview content.

[annezazu]

cc @t-hamano as you worked on that prior PR!

[t-hamano]

Thanks for the report.

#59112 is meant to fix bugs that were originally not working as expected. Additionally, the height applied to the preview is a minimum value rather than a fixed value.

Are there any steps to reproduce this problem?

[jefferyto]

Additionally, the height applied to the preview is a minimum value rather than a fixed value.

It does not appear to be applied as a minimum value.

Are there any steps to reproduce this problem?

1. Add a new post or page.
2. Open the block selector.
3. Hover over a block to see the preview.

I am using Firefox 125.0.2 on Ubuntu 23.10.

WordPress 6.4.2:

WordPress 6.5.2:

[t-hamano]

Thanks for the reply.

You seem to be testing on Ubuntu, but can you check if it reproduces on other OS or browsers?

I couldn't reproduce it in my environment. I hope others will test this issue as well.

Environment Info

• OS: Windows 11
• Browser: Firefox 125.0.2 (64-bit)

[jefferyto]

I traced the issue to having this in my theme's editor stylesheet:

body {
    height: 100%;
}

(More specifically, this was set for the front-end and included in the editor stylesheet.)

I assume the preview component is setting the iframe height based on the height of the body element. I suggest setting height: auto inline to override any theme CSS.

[t-hamano]

I traced the issue to having this in my theme's editor stylesheet:

Could you tell me how this style is enqueued? If we can reproduce this problem in our environment, we may be able to decide whether to solve this problem with Gutenberg.

[jefferyto]

Could you tell me how this style is enqueued?

My theme is a classic theme, the editor stylesheet is enqueued with:

function after_setup_theme_editor_style() {
	add_editor_style();
}
add_action( 'after_setup_theme', 'after_setup_theme_editor_style' );

The stylesheets are written with Sass, and the editor stylesheet includes most of the styles from the front-end stylesheet as the theme also has some custom blocks.

[t-hamano]

I tested it with Twenty Twenty-One, but I can't reproduce it. (Regardless of whether Gutenberrg plugin is enabled)

I added body { height: 100% } here.

As the screenshot shows, the body element inside the preview iframe has height:auto overriding 100%.

[jefferyto]

For me the body { height: 100%; } in my editor stylesheet is transformed to .editor-styles-wrapper { height: 100%; } and so overrides body { height: auto; }. All other body references in the stylesheet are transformed to .editor-styles-wrapper when applied in the editor.

Edit: I made the same edit to Twenty Twenty-One and I see the issue (and body styles are still transformed to .editor-styles-wrapper).

[t-hamano]

I was able to reproduce this problem.

In order to reproduce this issue, the block editor must be non-iframed. That is, if you have a custom field enabled or a block registered with apiVersion 2.

However, this issue should not be caused by #59112. This is because #59112 makes changes to the edit-site package, but this issue can be reproduced using the post editor.

[t-hamano]

When I went back through the commit history, I found that this problem occurred in #57810.

I also provide detailed reproduction steps.

Steps

• Enable Twenty Twenty-One and add height: 100%; here. This stylesheet is loaded into the editor via add_editor_style().
• Enable custom fields in the editor. This will make the editor no longer an iframe.
• Open the main inserter, open the Patterns tab, and select one of the categories.

✅ Before #57810 is merged (commit hash: f6d29bd)

The height:100% defined in the theme is applied to the body element. This value will be overwritten by auto.

❌ Right after #57810 is merged (commit hash: 45eb9a5)

The height:100% defined in the theme is applied via the .editor-styles-wrapper selector. This value is not overwritten.