Verse Block: long lines scroll horizontally in the editor

[maddisondesigns]

Issue Overview

Text in Verse block scrolls horizontally.

Steps to Reproduce (for bugs)

1. Insert Verse Block
2. Type stuff

Expected Behaviour

Text should never scroll horizontally

Current Behavior

Text scrolls horizontally rather than continuing on the next line

Gutenberg 1.9.1
Firefox Quantum 57.0.1 (64-bit)
WordPress 4.9.1

[youknowriad]

This is a specificity of the verse block, It won't be a verse block anymore if we remove this.

#2835 (comment)

[maddisondesigns]

I'm not understanding what the point of the Verse block is, or why it should scroll.

[youknowriad]

I think the idea is that the text in verse block respects white space and new lines, if you do not want a space or a new line, it doesn't break. It has this CSS property white-space: nowrap;. It makes it the block of choice to write poetry, verses and stuff like that.

I think @jasmussen could speak more about this.

[jasmussen]

The idea of the verse block is exactly to allow you to write poetry, haikus, verses, where the indentation and whitespace can be important. Like this:

Slow dulcimer, gavotte and bow, in autumn,   
Bashō and his friends go out to view the moon;   
In summer, gasoline rainbow in the gutter,

The secret courtesy that courses like ichor   
Through the old form of the rude, full-scale joke,   
Impossible to tell in writing. “Bashō”

Like that, but without the code font.

However I do agree that scrollbars take you out of it. Verses in bookform can sometimes break the lines forcefully, but then they indent the next lines a little, like this:

Slow dulcimer, gavotte and bow, in autumn,   
Bashō and his friends go out to view the
    moon;   
In summer, gasoline rainbow in the gutter,

The secret courtesy that courses like ichor   
Through the old form of the rude, full-scale
     joke,   
Impossible to tell in writing. “Bashō”

If we can achieve something like that using text indent and word break, that would feel like a nice compromise to me.

[maddisondesigns]

Using the Gutenberg theme, this is the Verse block.

And this is the Code Block

They're basically identical.

Does adding this block really adhere to the WordPress philosophy that states "The rule of thumb is that the core should provide features that 80% or more of end users will actually appreciate and use"? I would be highly sceptical.

If you want to write multiple lines, and also not write it in Courier, then why can't you simply shift-enter inside a Paragraph block? And if that minuscule audience specifically wants to respect white-space, then they can add a style to the CSS Panel in the Customizer.

[maddisondesigns]

Guaranteed, if I raised a trac ticket after WP 5.0 was released, to get this block added to core, it would be closed (as not doing) within 15 minutes!

[jasmussen]

I do agree with the similarities between preformatted and verse, to the point that I even suggested merging the two: #1729

That's why I also think it would be good to make the verse block more unique, which is why it'd be cool to explore some improvements like the linebreak behavior you suggest, then at least there'd be different use cases for the two. Longer term it would be fun to explore additional verse styles in the inspector, making the block more unique in a way that wouldn't be fitting for either preformatted or basic text.

Curiously, though, building a "poet block" was one of the first requests we received when starting work on this: https://wordpress.slack.com/archives/C02QB2JS7/p1484800211001617

☝️ since receiving that request, I've noted how much poetry is actually being written on blogs across the world (most of it bad, but that's beside the point :D ). I was blind to it before, but it's opened my eyes to the fact that it's a real use case.

[maddisondesigns]

From what I can see is that it looks like it was suggest by Matt, which shouldn't automatically ensure that it gets added to core.

While I'm still very sceptical that it would pass the 80% rule, if you believe that it does, then that's fine. If that's the case though, then it needs to be styled significantly different to the way it's been currently styled.

Also, I still don't like the idea of horizontal scrolling. In #1483, which I opened 6 months ago, there needs to be a way to change the content width of the editor, much like you can do now with editor-style.css and by setting html .mceContentBody {max-width: 900px;}.

Assuming the existing editor block width is same size as the content area on the front-end, then it would still makes sense that the content wraps down to the next line, rather than horizontally scrolls. I'm guessing that anyone who is writing poetry/haiku's isn't going to want their content horizontally scrolling on the front-end, so why should it scroll on the back-end.

[youknowriad]

there needs to be a way to change the content width of the editor, much like you can do now with editor-style.css and by setting html .mceContentBody {max-width: 900px;}.

I think you can achieve something similar by enqueuing editor styles. I don't think we're using max-width maybe margin. We'll have to try how do it.

[karmatosed]

For now I am closing this as whether we include the verse block or not, the intended use for this is what has been outlined. We totally may not include all the blocks we have now, that's something to be considered. I also think it's good to think that sometimes experimenting with blocks is fun, for what it's worth I think the verse block is pretty nifty.

[maddisondesigns]

So, you're just gonna leave it scrolling in the Editor, even though on the front-end it wraps!? I thought one of the principles of Gutenberg was to make the editing experience more closely align with what you see on the front-end. The current implementation of the verse block does the complete opposite of what you see on the front-end. Regardless of whether the verse block is in the final core product, it's in Gutenberg now and therefore should be fixed. I will be extremely surprised if anyone decides to remove this block from the core product, especially since it was suggested by Matt.

[karmatosed]

@maddisondesigns I standby having one long sentence like you demonstrated is not at all the idea of a verse block.

That said, totally into being pragmatic about this if you have a solution for wrapping the same on the back end but keeping the points raised, thanks for looking into this. I still maintain that the intended use is valid. Let's shift this to a bug and get your fix in. Thanks for working on that.

[ZebulanStanphill]

Idea: use margin-left with a positive value and text-indent with a negative value to make the text lines start where they normally would without a margin, but the parts of lines that break onto a new line would be indented by the margin. Here is what that looks like with margin-left: 20px and text-indent: -20px.

Idea taken from here: https://www.sitepoint.com/community/t/word-wrap-indent/1352/4

Pinging @karmatosed and @maddisondesigns.

[ZebulanStanphill]

In the future, something like text-indent: 20px hanging could be used, but right now hanging is not in a recommended version of the CSS specification and is not supported in any major browser.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
https://drafts.csswg.org/css-text-3/#text-indent-property

[karmatosed]

How does that work across different sized devices @SuperGeniusZeb ?

[ZebulanStanphill]

@karmatosed Just fine. The overflow lines appear indented while the start of a new line appears to not be indented. The text-indent CSS property only affects the start of a hard new line, not one caused by wrapping, so by using a negative indent and applying a positive indent to the entire text, you can have only wrap-lines appear to be indented.

Also, I just noticed that in my previous comment I mentioned each-line when I meant hanging. I have now corrected my statement.

[designsimply]

So, you're just gonna leave it scrolling in the Editor, even though on the front-end it wraps!?

I tested using Firefox 61.0.1 on macOS 10.13.5 and found that the verse block behaves the same way in the editor compared to the front-end: both allow horizontal scrolling. @maddisondesigns is this also what you are seeing with Gutenberg 3.2.0? If you are seeing something different, may I please ask your browser and OS version?

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=13900&action=edit and http://alittletestblog.com/2018/07/10/verse-block-test/ running WordPress 4.9.7 and Gutenberg 3.2.0 using Firefox 61.0.1 on macOS 10.13.5.}

Labeling note: I feel this should be [Type] Enhancement instead of [Type] Bug because the block works as intended based on its original design and the issue makes a suggestion for how to improve it. Agree?

[maddisondesigns]

@designsimply It depends what theme you're using.

In TwentySeventeen and TwentyTwelve it scrolls in the editor and scrolls on the front-end
In TwentyFifteen it scrolls in the editor and wraps on the front-end

Horizontal scrolling of any sort, within a web page is a horrible user experience. About the only time it's acceptable is when you're displaying a block of code where wrapping the text can make the code harder to read.

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

[ZebulanStanphill]

I agree that having horizontal scrolling in the Verse block seems weird, as you would not usually expect to see that used for a poem. I think the text indentation solution I suggested above is the right approach.

[brandonpayton]

Hi @ZebulanStanphill, since all the Verse block text has the same parent element, the negative text-indent and positive margin-left isn't enough to fix this issue because subsequent stanzas will also be shifted left by the margin.

For now, since we don't appear to have a good alternative solution, let's add a rule so Verse blocks consistently do not wrap lines in the editor or on the front end. I'll create a PR.