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

Increasing number of columns causes them to overlap #5130

Closed
maddisondesigns opened this issue Feb 19, 2018 · 17 comments
Closed

Increasing number of columns causes them to overlap #5130

maddisondesigns opened this issue Feb 19, 2018 · 17 comments
Labels
[Type] Bug An existing feature does not function as intended

Comments

@maddisondesigns
Copy link

Issue Overview

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

gutenberg-multicolumns3

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

@jeffpaul jeffpaul added the [Type] Bug An existing feature does not function as intended label Mar 8, 2018
@ZebulanStanphill
Copy link
Member

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.
image

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
Copy link
Member

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
Copy link
Author

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

gutenberg-columnsblockoverlap

@ZebulanStanphill
Copy link
Member

ZebulanStanphill commented May 1, 2018

@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
Copy link
Author

@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
Copy link
Member

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

@GlennMartin1
Copy link

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

Please confirm, and close if resolved.

@maddisondesigns
Copy link
Author

@GlennMartin1 This is still not resolved in 3.0.1

gutenberg_columnblockoverlap

@ZebulanStanphill
Copy link
Member

@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
Copy link
Author

@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
Copy link
Member

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

@maddisondesigns
Copy link
Author

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

gutenberg_columnsblockstilloverlaps

@ZebulanStanphill
Copy link
Member

@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
Copy link
Author

@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
Copy link
Member

@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
Copy link
Member

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

@maddisondesigns
Copy link
Author

@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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

5 participants