Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cover Block height & overflowing problems when used inside a Column Block (6.6.0) #17921

Closed
mrfoxtalbot opened this issue Oct 12, 2019 · 12 comments · Fixed by #28455
Closed

Cover Block height & overflowing problems when used inside a Column Block (6.6.0) #17921

mrfoxtalbot opened this issue Oct 12, 2019 · 12 comments · Fixed by #28455
Assignees
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Status] In Progress Tracking issues with work in progress

Comments

@mrfoxtalbot
Copy link

mrfoxtalbot commented Oct 12, 2019

Describe the bug
Adding more than one cover block within the same column block will cause the cover block to overflow vertically outside the parent columns block, overlapping with the content below.

To reproduce
Steps to reproduce the behavior:

  1. Create new post.
  2. Add Column Block.
  3. Insert a two or more Cover Blocks inside the the same column block.
  4. The last Cover Block in the column will be way too tall and overflow into the content below.

Expected behavior
I would expect the Cover Block's height to adapt to its content. Instead of this, the block was way too tall and it overlapped with the blocks below.

Screenshots

This is only happening when the plugin is enabled (Version 6.6.0).
The error can be seen on this URL:
https://mrfoxtestingsite.wordpress.com/2019/10/11/cover-block-height-issues-when-used-inside-a-column-block/

If I use with the current WP core version of the editor (5.2) the Cover Block works as expected, here is an example:
https://gu10testing.wpcomstaging.com/2019/10/12/cover-block-height-issues-when-used-inside-a-column-block/

Desktop (please complete the following information):

  • OS: MacOs 10.13.6
  • I initially noticed this bug in Google Chrome Version 76.0.3809.132 but I was able to reproduce it in Firefox and Safari as well.

Additional context

  • Version 6.6.0
@swissspidy swissspidy added the [Block] Cover Affects the Cover Block - used to display content laid over a background image label Oct 14, 2019
@eduardozulian
Copy link

+1 to this. This overlap basically breaks the ability to use cover blocks inside columns.

The workaround is to add some CSS:

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

@brookewp
Copy link
Contributor

I've run into two cases of this on dotcom within the past 12 hours.

I also found that this happens when you add one cover block to each column and then add any block below it (instead of second cover block).

@susanjanec
Copy link

User reported this issue on 18851374-hc.

Provided CSS as workaround.

@mikeicode
Copy link

Ran into this again 2933340-zen

@jamiepalatnik
Copy link

Reported again in 20751930-hc, shared the CSS fix as a workaround.

@mikeicode
Copy link

Also 23334704-hc

@sourourn
Copy link

Another one: #25595953-hc

@khristiansnyder
Copy link

I also ran into this today. CSS workaround helped.

@mikeicode
Copy link

Ran into another, used the CSS fix to resolve

@TheSteveK
Copy link

Ran into this issue again in 22787411HC. Used the css fix

@detlefholtz
Copy link

Ran into this problem and used the CSS fix:

3664238-zd

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jan 25, 2021
@pauljacobson
Copy link

For tracking purposes, I came across this issue in 3783115-zen

In my case, I used the following to address a similar issue, along with overlapping text in a different block:

/* Adjust formatting on mobile in Alves to correct alignment and width issues / 3783115-zen pj */
.wp-block-column {
    flex-grow: 1;
    min-width: auto;
    word-break: unset;
}

div.wp-block-cover:nth-child(5)>div:nth-child(2)>p:nth-child(3) {
    line-height: normal !important;
}
/* End - Adjustments to Alves theme to cater for styling issues */

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Status] In Progress Tracking issues with work in progress
Projects
None yet
Development

Successfully merging a pull request may close this issue.