Inline style rule for full-height Cover Block in 5.7 can't easily be overridden

[markhowellsmead]

What problem does this address?

The new full-height button on the Cover Block adds a style attribute to the container, containing min-height: 100vh. This can only be overridden by Theme CSS with an unreliable [style="min-height:100vh"] selector.

The need for overriding the rule is e.g. in the event that the site has a header bar taking up e.g. 150px at the top of the page. Then, the first Cover Block would need to be min-height calc(100vh - 150px), so that the bottom edge of the Block isn't below the fold.

What is your proposed solution?

Apply the CSS rule through an appropriate CSS class name, which can then be overridden by the Theme CSS if necessary.

[DhrRob]

+1.

Right now, this is only solvable through hacky CSS. Such as:
.wp-block-cover[style="min-height:100vh"] { min-height: calc( 100vh - 75px ) !important; }

[talldan]

There's an input field for adjusting the height, which is why it's an inline style:

[talldan]

I could see how that wouldn't work if it needed to take into account a pixel value though.

[talldan]

Labelled as an enhancement, but it probably needs some more thought as to what the right solution is.

I suppose one option is that by default a classname is used, but when the user adjusts the input it switches to an inline style.

edit: It's worth reading through the PR to see why it was implemented the way it was - #26615

[markhowellsmead]

This is still a problem. It also doesn't take svh units into account, which would fix problems for mobile users. Perhaps a class name for this specific instance would be a better way to go.

[markhowellsmead]

Bumping this -- it's still a problem for theme and plugin developers.

[markhowellsmead]

Still a problem.

[markhowellsmead]

Bumping this -- it's still a problem for theme and plugin developers. Copying in @WordPress/outreach for feedback.

[cbirdsong]

Related:

• Add support for presets in minimum height fields #48810