Increasing number of columns causes them to overlap

[maddisondesigns]

Issue Overview

When you add more columns to the Columns block, they start overlapping

Steps to Reproduce (for bugs)

1. Insert Columns block
2. Add Image block in first column
3. Click Column block and increase number of columns to 6
4. Try to insert text in columns

Expected Behavior

Columns should never overlap

Current Behavior

Trying to add content in columns is impossible as they overlap when the number is increased

Firefox Quantum 58.0.2 (64-bit)
Gutenberg 2.2.0
WP 4.9.4

[ZebulanStanphill]

Thanks to #5658 and other recent changes, this problem has been reduced quite a bit, but there are still cases where blocks in columns are overlapping each other.

Seeing as that buttons wrap/break long strings of characters, I assume the same could be done for paragraphs, and thus essentially fix this issue for the most part.

It also does not help that the default content width in Gutenberg is not exactly wide, and most responsive layouts would have switched a 6-column layout to a stacked 3-column layout by the time the content width became the same as the default Gutenberg content width.

[ZebulanStanphill]

Actually, it seems like this issue is fixed. #6049 can be considered separate from this issue, and aside from text break/wrap issues, columns appear to not be overlapping each other at all anymore. I think this issue can be closed now.

[maddisondesigns]

Nope. Columns still overlap in v2.7.0. Not only that, content extends past the edge of the block.

[ZebulanStanphill]

@maddisondesigns Wait, is this ticket about text-wrap/break issues or just columns overlapping in general?

Because I made a separate issue for text breaking/wrapping. Are you using Firefox? The text breaking/wrapping issue does not occur on Chrome/Chromium. (It is because of a difference in default CSS values between Firefox and Chrome/Chromium.) Actually, this text break/wrap issue happens in any block, not just columns. See #6049.

In the original post of this issue, images are shown overlapping other columns. This no longer happens, so I assumed that would be enough to consider this issue fixed, since #6049 covers the other issue and is more specific.

[maddisondesigns]

@SuperGeniusZeb This was originally created for the issue of text/content overlapping columns. Yep, I'm using Firefox Quantum (59.0.2 64-bit). When I re-tested this earlier today, I also noticed that content is now also extending past the edge of the block container.

The original issue wasn't specifically related to images overlapping, it was about all content overlapping. It just so happened that my example used an image to show the problem. If you look at the original gif I attached, you can see both text and images overlapping.

[ZebulanStanphill]

@maddisondesigns So should this issue or my issue (#6049) be closed? Because they are clearly duplicates.

[GlennMartin1]

@maddisondesigns, I think this issue is resolved since 3.0.

Please confirm, and close if resolved.

[maddisondesigns]

@GlennMartin1 This is still not resolved in 3.0.1

[ZebulanStanphill]

@maddisondesigns it is still a duplicate of #6049 (or I guess vice-versa), though. I think that this issue should be closed as mine is focused on the remaining text issue whereas this one was originally also about images overlapping other blocks, which has now been fixed.

[maddisondesigns]

@SuperGeniusZeb This was never just about images overlapping. It was about column block content in general, overlapping other columns. I posted a screenshot back in the beginning of May, showing how content is still overlapping.

[ZebulanStanphill]

Thanks to #7472, I think this can be closed now. 😃

[maddisondesigns]

@SuperGeniusZeb Nope. Column Block content still overlaps with Gutenberg 3.1.1

[ZebulanStanphill]

@maddisondesigns Have you tested in master? The issue is not occurring for me there. (Also, weirdly, master seems to still be using the 3.1.0 as its version number.) Also, what browser are you using?

[maddisondesigns]

@SuperGeniusZeb No, this was just tested with the 3.1.1 version of the plugin from .org. I'm using Firefox Quantum 61.0 (64-bit)

[ZebulanStanphill]

@maddisondesigns Okay, the fix came in #7472, which I guess is not in 3.1.1. If you want to test the master branch, you can do the following:

1. Open a terminal and change directory to some folder you want to clone the gutenberg repository into.
2. Use git clone https://github.com/WordPress/gutenberg.git (You will have to have git installed, of course.)
3. Once that is done, enter the newly-created gutenberg directory from your terminal.
4. Run npm run package-plugin to build the project.
5. Once this finishes, there will be a ZIP archive called gutenberg.zip in the gutenberg directory. You can upload this file to your WordPress installation. (You need to uninstall the current installation of Gutenberg on your website first, though.)

Of course, I recommend not opening up any existing posts/pages created on the release version of Gutenberg while using the master branch unless you want to risk them getting messed up due to block changes that get made in master but then reverted before an official release.

Also, once a new version comes out, you will be able to update to it just like you would if you were updating from a release version. As mentioned before, it seems that currently, the master branch has the wrong version number for some reason, because it is using 3.1.0 when the latest release is actually 3.1.1; so if you install the master version of the plugin, the plugin will think it can be updated to a newer version... and it can, except that the newer version is actually older. 😛

[karmatosed]

I just tried to replicate this one and couldn't so for now closing.

[maddisondesigns]

@karmatosed Content doesn't seem to overlap but now it just pushes the whole editor off the page instead. I've just opened a new Issue for this (#7921)