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

Columns Block (beta): long content in doesn't wrap and pushes editor off page #7921

Closed
maddisondesigns opened this issue Jul 12, 2018 · 11 comments
Labels
[Block] Columns Affects the Columns Block [Feature] Blocks Overall functionality of blocks [Type] Bug An existing feature does not function as intended

Comments

@maddisondesigns
Copy link

Describe the bug
Adding in long amounts of text pushes the whole editor off the edge of the page.

gutenberg_columnblockforcesblockoffedgeofpage

To Reproduce
Steps to reproduce the behavior:

  1. Add column Block
  2. Add some text to one column
  3. Add text without spaces to another column

Expected behavior
Content should wrap

macOS Sierra 10.12.1
Firefox Quantum 61.0.1 (64-bit)
Gutenberg 3.2.0

@maddisondesigns maddisondesigns changed the title Content in Column Block pushes content off edge of page Long content in Column Block doesn't wrap and pushes editor off page Jul 12, 2018
@designsimply designsimply changed the title Long content in Column Block doesn't wrap and pushes editor off page Columns Block (beta): long content in doesn't wrap and pushes editor off page Jul 16, 2018
@designsimply designsimply added [Type] Bug An existing feature does not function as intended [Feature] Blocks Overall functionality of blocks labels Jul 16, 2018
@designsimply
Copy link
Member

Tested and confirmed using WordPress 4.9.7 and Gutenberg 3.2.0 on Firefox 61.0.1 on macOS 10.13.5.

screen shot 2018-07-16 at mon jul 16 4 50 59 pm

@maddisondesigns
Copy link
Author

This also breaks the front-end as well and causes horizontal scrolling.

gutenberg_columnscontentdoesntbreakword

You need to add word-break: break-all; on .wp-block-column

@eddhurst
Copy link

Testing this on 3.9 - I think the back-end issue here has been resolved somewhere along the line.

screen shot 2018-09-26 at 13 54 59

The front end issue however has not been resolved.

screen shot 2018-09-26 at 13 58 50

@ZebulanStanphill
Copy link
Member

I can still reproduce this issue in master. (Tested in Firefox Beta.)
image

@maddisondesigns
Copy link
Author

Can confirm, yep, this is still an issue on the front-end and back-end.

Back-end vid: https://cl.ly/c7e79cefe9c6

Front-end vid: https://cl.ly/bbc80ba11159

@maddisondesigns
Copy link
Author

@eddhurst Not sure why you would do word-break: break-word;. The allowable values for word-break are normal | keep-all | break-all.

https://www.w3.org/TR/css-text-3/#word-break-property

@eddhurst
Copy link

eddhurst commented Sep 28, 2018

@maddisondesigns That is true, but word-break: break-all; is definitely not the expected behaviour of text within a column - and aggressively breaks words, even if they would otherwise wrap.

break-word is unofficial, but supported by Chrome, Safari and other WebKit/Blink browsers: https://caniuse.com/#search=word-break

Edit - strike that, I stupidly thought Firefox was in that list as well, sorry about that. The issue with break-all is that is ends up looking like this:

break-word

screen shot 2018-09-28 at 11 38 34

break-all

screen shot 2018-09-28 at 11 38 44

@eddhurst
Copy link

I have updated the initial PR, which correctly fixes this issue. I realised that word-break: break-word is effectively just treated as word-wrap: break-word

word-wrap has much better browser support and is understood by FF, IE and Edge.

@eddhurst
Copy link

This appears to have been fixed in the last few updates to columns

@ajtruckle
Copy link

@designsimply
Copy link
Member

I replied to your forum post with the results of a test I ran.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Columns Affects the Columns Block [Feature] Blocks Overall functionality of blocks [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

6 participants