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.

Sign up for GitHub

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

Jump to bottom

Columns Block: container block overlaps adjacent blocks #7766

Closed
2one2 opened this issue Jul 7, 2018 · 11 comments
Closed

Columns Block: container block overlaps adjacent blocks #7766

2one2 opened this issue Jul 7, 2018 · 11 comments
Labels
[Block] Columns Affects the Columns Block [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P [Type] Bug An existing feature does not function as intended

Comments

@2one2
Copy link

2one2 commented Jul 7, 2018

As of version 3.2, columns block overlaps other blocks.

ezgif com-video-to-gif 1

Windows 10
Chrome 67 ( 64-bit)
@designsimply designsimply added [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed labels Jul 11, 2018
@designsimply designsimply changed the title Columns block overlaps other blocks Columns Block (beta): container block overlaps adjacent blocks Jul 11, 2018
@designsimply
Copy link
Member

@2one2 thank you for the report! I am closing this issue because I believe it will be addressed by #7694. @aduth can you correct me if that's wrong?

Also noting a related discussion at #7234 (comment).

@aduth
Copy link
Member

aduth commented Jul 12, 2018

I'm not sure #7694 will strictly address the specific design issues. Might be related to #7365 ? cc @jasmussen

@designsimply
Copy link
Member

Thank you for the feedback! Re-opening and marking as a bug.

@designsimply designsimply reopened this Jul 16, 2018
@designsimply designsimply added [Type] Bug An existing feature does not function as intended and removed [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed labels Jul 16, 2018
@chrisvanpatten chrisvanpatten mentioned this issue Jul 16, 2018
Closed
@chrisvanpatten
Copy link
Member

chrisvanpatten commented Jul 17, 2018 •
edited
Loading

I posted some additional screenshots in #7988 which I'll also share here. This was definitely caused by #7365.

untitled___ mindful _wordpress

untitled___ mindful _wordpress

kapture 2018-07-16 at 16 38 51

@designsimply designsimply mentioned this issue Jul 18, 2018
Closed
@designsimply
Copy link
Member

designsimply commented Jul 18, 2018 •
edited
Loading

Noting some helpful steps from #7919 which was marked as a duplicate:

Steps to reproduce the behavior:
  1. Add Column Block
  2. try to change Block to Full Width

@designsimply designsimply mentioned this issue Jul 19, 2018
Closed
@designsimply
Copy link
Member

Noting that #7920 also mentions not being able to select the full columns block due to overlap.

@jasmussen
Copy link
Contributor

Aspects of this were intentional, in that the block boundaries are drawn outside the actual footprint of the block. However I absolutely acknowledge the problem, notably from the helpful GIFs in #7766 (comment).

For now I'm going to take a stab at uncollapsing the margins for the columns block, that should address the primary issue with a paragraph being adjecent to a columns block.

However, I also think that #7694 is an important ingredient in improving the columbns block overall, and notably to address issues from #7919.

jasmussen pushed a commit that referenced this issue Jul 30, 2018
Try uncollapsing margins on the columns block.
cfce97a 
This is a first stab at fixing #7766.

It does not address it fully, I believe further work is necessary, including that of #7694. However this should at least improve the collapsing of the parent container.
@jasmussen jasmussen mentioned this issue Jul 30, 2018
Merged
jasmussen added a commit that referenced this issue Aug 1, 2018
@jasmussen
Try uncollapsing margins on the columns block. (#8283)
abb14b1 
* Try uncollapsing margins on the columns block.

This is a first stab at fixing #7766.

It does not address it fully, I believe further work is necessary, including that of #7694. However this should at least improve the collapsing of the parent container.

* Move to .1px.
@mtias
Copy link
Member

mtias commented Nov 12, 2018

This should be fixed after #11620

@mtias mtias closed this as completed Nov 12, 2018
@mtias mtias added the [Block] Columns Affects the Columns Block label Nov 12, 2018
@ZebulanStanphill
Copy link
Member

Noting that while the Columns block had this issue fixed (I think even before #11620), the Column blocks still have borders that are too tall:
image

jasmussen added a commit that referenced this issue Nov 15, 2018
@jasmussen
Columns: Improve margins, column child block, mobile.
883a929 
This PR aims to further improve the columns block, and improving a number of aspects and addressing recent feedback.

- It fixes an issue where fullwide columns had uneven margins, both left, center and right. Fixes #11869.
- It fixes a specificity issue with toolbar and breadcrumb positioning that bled into all child blocks.
- It improves the layout of individual column blocks, and fixes the toolbar positioning. This fixes feedback in #7766 (comment).
- It improves fullwide columns and how they appear on mobile.

Aside from that it simplifies the code a bit, and removes a couple of redundant overrides that were better fixed elsewhere.
@jasmussen jasmussen mentioned this issue Nov 15, 2018
Merged
jasmussen added a commit that referenced this issue Nov 15, 2018
@jasmussen
Columns: Improve margins, column child block, mobile.
53ed4c3 
This PR aims to further improve the columns block, and improving a number of aspects and addressing recent feedback.

- It fixes an issue where fullwide columns had uneven margins, both left, center and right. Fixes #11869.
- It fixes a specificity issue with toolbar and breadcrumb positioning that bled into all child blocks.
- It improves the layout of individual column blocks, and fixes the toolbar positioning. This fixes feedback in #7766 (comment).
- It improves fullwide columns and how they appear on mobile.

Aside from that it simplifies the code a bit, and removes a couple of redundant overrides that were better fixed elsewhere.
youknowriad pushed a commit that referenced this issue Nov 15, 2018
@jasmussen @youknowriad
Columns: Improve margins, column child block, mobile. (#11904)
46ebefa 
* Columns: Improve margins, column child block, mobile.

This PR aims to further improve the columns block, and improving a number of aspects and addressing recent feedback.

- It fixes an issue where fullwide columns had uneven margins, both left, center and right. Fixes #11869.
- It fixes a specificity issue with toolbar and breadcrumb positioning that bled into all child blocks.
- It improves the layout of individual column blocks, and fixes the toolbar positioning. This fixes feedback in #7766 (comment).
- It improves fullwide columns and how they appear on mobile.

Aside from that it simplifies the code a bit, and removes a couple of redundant overrides that were better fixed elsewhere.

* Fix issue with more than 2 columns.

* Prevent columns from growing wider than their set width.

* Use break-word for better word breaks.

* Copy editor style to frontend.
@ilovenataliekay
Copy link

I have been searching for a fix to this for a while...... I cannot edit anything inside of columns because I can't GET to them with the overlap.

@designsimply designsimply changed the title Columns Block (beta): container block overlaps adjacent blocks Columns Block: container block overlaps adjacent blocks Aug 16, 2019
@designsimply
Copy link
Member

designsimply commented Aug 16, 2019 •
edited
Loading

I see that some iterations have been made since this issue was originally opened and I just tested with WordPress 5.2.2 (no plugins) and I am not seeing the same overlap that was originally reported and noted in this issue. (16s)

@ilovenataliekay, if you're still having trouble, one potential workaround may be to try using the arrow keys to navigate. It has helped me in some cases.

@designsimply designsimply reopened this Aug 16, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Block] Columns Affects the Columns Block [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@mtias @designsimply @jasmussen @chrisvanpatten @aduth @ilovenataliekay @ZebulanStanphill @2one2