Site logo

Archived topic

"Cover" block

11 replies · Started by Michal Janata on February 3, 2021

Viewing posts 1–12 of 12

Hi,
I would like to report 2 issues with the "Cover" block, which is included as part of WordPress.
1) The block is enormously high, breaking page layout
When the block is added, it is extremely high (thousands of pixels), basically breaking the layout of the whole page. I was able to fix this with the following Additional CSS:

.wp-block-cover {
    height: auto;
}

2) The cover color doesn't fill the entire content
I am not using images, so I only know about colors. When the block is added and set to "Wide", it should replace the background with image/color in the full width of the content box (at least it does in the Twenty Twenty theme). In GP, it doesn't fill the whole width, rather having padding on sides with respect to the content box. I think this is a bug. I was able to fix this with the following Additional CSS:

.wp-block-cover.alignwide {
    margin-left: -40px;
    padding-left: 57px;
    margin-right: -40px;
    padding-right: 57px;
}

I think it may be broken for other alignments as well (I only use "Wide") and obviously these hard-coded values should instead respect customizer settings.

Thanks :-)

Hi, my case is a bit different, I am using no page builder and I am not using GenerateBlocks. Anyway, the first issue does not seem related to what you're linking. As for the second one, I don't know the source code of WP, so I cannot comment on its quality. However, if GeneratePress is breaking core WordPress blocks and as a solution recommends not using them, that is a serious concern for me going forward.

For posterity, copying from the other thread: I have seen GenerateBlocks and it seems really nice. However, GeneratePress and GenerateBlocks are two separate products and I would like to be able to use stock WordPress blocks with GP without being forced to use GB as well.

Can you link me to the page in question so I can see the issue?

Hi,
ok, I found a difference - in my case, the cover block is inside a columns block together with other content. If I move it outside, it is no longer so huge (however, it's not wide even then)

in my case, the cover block is inside a columns block together with other content.

Hmm I feel like a cover block should not be inside of a columns block as it should cover the entire container width.

(however, it’s not wide even then)

Not sure if I understand. I did a wide width cover block and a full width cover block in this page and both seem to work for me:
https://wordpress-202309-991531.cloudwaysapps.com/6-2/

1) Cover block inside columns is a bit of an edge case, however it may be used sometimes to cover just one of the columns. Either way, it shouldn't totally break the whole page...
2) Yes, the cover is now wide, but the content is wider too - it doesn't have the correct padding. See the demo page and the images inside the cover block and outside of it...

1) I'd say that WordPress didn't design the cover block to be used inside the columns - you could check with their support team and see what their opinion is on this.

I also try doing this in my install and didn't break the page either:
https://www.screencast.com/t/JQ7gTY0YW

2) Still not sure if I'm seeing the issue. When alignwide or alignfull is used, the content padding is ignored.

Hi,
1) I think that's because you don't have any other content in the columns
2) If you put a Media&Text block inside the cover block and bellow it, are the images aligned the same? For me, they're not...

1) I added a paragraph block under the cover block that is inside the columns here:
https://www.screencast.com/t/enkDHf1K

2) Hmm I'm actually unable to add a block inside of the cover block. WordPress really didn't design the cover block to be used as a nested block like this - you can confirm this with WP's support team.

GenerateBlocks is a much better solution.

This archived topic is closed to new replies.