Verse: Fix line-wrap rendering on front-end of site #28109
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ItsJonQ
added
[Type] Bug
|
Size Change: +2.09 kB (0%) Total Size: 1.3 MB
ℹ️ View Unchanged
|
WunderBart
reviewed
Jan 11, 2021
| @@ -1,5 +1,4 @@ | |||
| pre.wp-block-verse { | |||
| font-family: inherit; | |||
| overflow: auto; | |||
| white-space: nowrap; | |||
There was a problem hiding this comment.
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
There was a problem hiding this comment.
I think we should use prep-wrap so it's explicit and matches what is in the editor.
There was a problem hiding this comment.
It looks like the richtext editor forces a wrap regardless of what we do here:
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:
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:
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.
There was a problem hiding this comment.
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 👍
kjellr
approved these changes
Jan 11, 2021
|
Thanks all! |
youknowriad
pushed a commit
that referenced
this pull request
Jan 12, 2021
* Verse: Fix line-wrap rendering on front-end of site * Adjust white-space to use pre-wrap
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This update fixes the front-end rendering of the text content of the Verse block.
Below is a screenshot of the correctly rendered formatted text for Verse:
Resolves: #28108
How has this been tested?
Local Gutenberg
npm run devTypes of changes
white-spaceCSS for the Verse blockChecklist: