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

Verse: Fix line-wrap rendering on front-end of site #28109

Merged
merged 2 commits into from
Jan 11, 2021
Merged

Verse: Fix line-wrap rendering on front-end of site #28109

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4d8d5f1
Verse: Fix line-wrap rendering on front-end of site
Jan 11, 2021
aa21900
Adjust white-space to use pre-wrap
Jan 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-library/src/verse/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
pre.wp-block-verse {
font-family: inherit;
overflow: auto;
white-space: nowrap;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the original PR, a pre-wrap was considered here. Should we use it explicitly instead of removing the whole thing? AFAIK the pre tag's default white-space value is pre. cc @scruffian @kjellr

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should use prep-wrap so it's explicit and matches what is in the editor.

Copy link
Contributor

@kjellr kjellr Jan 11, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like the richtext editor forces a wrap regardless of what we do here:

Screen Shot 2021-01-11 at 2 39 29 PM

Currently in the this PR, removing the rule (and defaulting to whitespace: pre) keeps long words in the same line, and scrolls them horizontally if necessary:

Screen Shot 2021-01-11 at 2 43 38 PM

If we did go with pre-wrap, very long words would wrap, though not exactly the same way they do in the editor. In my testing, they wrap onto their own single line, but then don't continue wrapping beyond there, instead forcing a horizontal scroll:

Screen Shot 2021-01-11 at 2 43 32 PM

So given that, I'd recommend pre-wrap since it's closer to what the editor does in the near term. But the better solution would be to try to get the editor to mimic whitespace: pre and stop wrapping the text.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So given that, I'd recommend pre-wrap since it's closer to what the editor does in the near term

@kjellr Cool. I'm happy to help with that 👍

white-space: pre-wrap;
}