Skip to content

Using viewheight for blocks in patterns creates weird previews #43865

@Humanify-nl

Description

@Humanify-nl

Description

The Cover block is a good example of a block that makes good use of the viewheight unit.

In pattern previews (in the pattern sidebar, explorer or page creation modal) this creates a problem where things are not scaled accordingly and even weirdly so. This used to be workable. But in the page creation previews, this problem becomes a bit more prevalent.

Page creation modal is also less friendly, with displaying a disrupting flickering pattern for a page with a vh container in it. Using the * Viewport Width = 1920px in the file header removes the flickering, but the scale is still very off, especially compared to other patterns.

I think this is a bug, yet it behaves exactly as it should (it scales to vh / vw), but this is not usable in pattern previews when they are a bit more lengthy.

Step-by-step reproduction instructions

  1. Default TT2 theme.
  2. Create a cover block, set it to full width & 70vh (min-height), put something in it.
  3. Fill out the page (this is optional but to fully illustrate the problem, you need a whole page)
  4. Do copy all content and paste it in a page-pattern.php with default file-header and add * Block Types: core/post-content in the header.
  5. Go to admin, make new page, see creation modal open - see the preview of the pattern.
  6. To really feel the difference, copy the page, and replace the 700vh with pixel value, and compare the previews.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.0.1 (& 6.0.2)
No Gutenberg

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] PatternsA collection of blocks that can be synced (previously reusable blocks) or unsynced[Type] BugAn existing feature does not function as intended

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions