Title of the post in Gutenberg is not displayed full text

[u1qqlv]

Describe the bug
If the title of the post in Gutenberg is long and it has 2 lines, then only one line is displayed sometimes

To reproduce
Steps to reproduce the behavior:

1. Create a new post and add a long title (so it will move to a new line)
2. Save the post and press ctrl + f5 to do a hard refresh, (sometimes when you visit first time you do not need a hard refresh) to visit the post

Expected behavior
So see the full title not only half the title

Screenshots
Screenshot what I see ----------------------------->

Screenshot what I expected to see ----------------------------->

Desktop (please complete the following information):

• OS: Windows 7 64 bit
• Browser Chrome
• Version 76.0.3809.132 (Official Build) (64-bit) - latest

Additional context

• Gutenberg is a disaster, it's 2019 and so many bugs, I will try to report some more

[u1qqlv]

Gutenberg version is 6.4.0 and so many bugs, it should be BETA 0.6.4.0

[talldan]

@u1qqlv Thanks for creating this issue. I haven't been able to reproduce it despite a number of attempts, but I'll keep it open just to see if there are any more reports.

Please could you avoid posting additional commentary like "Gutenberg is a disaster". Those kind of comments belong in a blog post. This is an open-source project and it's important that every contributor is made to feel welcome.

[TeachMeHowToUse2FA]

I've been seeing this mistake for a long time. It can be reproduced. This does not always happen, so I can assume that it is related to incorrect calculation of the height element in post-title component.

Оn the example above, on the third attempt, he showed everything normal. Try the long headings of 4-5 lines.

Some updates:

I'm using clear Wordpress 5.2.2

I think the bug due to this component:

gutenberg/packages/editor/src/components/post-title/index.js

Line 4 in e0d2f4e

import Textarea from 'react-autosize-textarea';

Apparently he doesn't always have time to calculate the altitude correctly.

[talldan]

Thanks for the extra details. I wasn't able to reproduce it with twentynineteen as the theme. I switched to the Gutenberg Starter Theme (https://github.com/WordPress/gutenberg-starter-theme) and it was easy to reproduce with that.

[TeachMeHowToUse2FA]

You're welcome! I will try to find more possible reasons - maybe it's because of the delay in drawing fonts? twentynineteen uses system fonts (minimum delays load), but Gutenberg starter theme and mine - Noto from Google Fonts.

Some updates:

@talldan try installing a Twenty Seventeen theme, which also uses fonts from Google Fonts and reproduce a bug. I did it. But with four attempts.

Perhaps this is how it works - when page initialize, React Autosize Textarea calculates the height of the block based on the standard system font, then the font is loaded - but since it has different line spacing, letter height and other subtleties - we have this problem. Is there anything we can do about it? In React Autosize Textarea has an async option, but I'm not sure it'll help.

[talldan]

Yep, I think you're right, it probably is the async loading of fonts that causes it. When the bug occurs if I then set font-family: auto; in the dev tools the text fits perfectly.

[iandunn]

I just saw it happen w/ the o2 Breathe theme, which also uses Noto Serif. Setting font-family:auto fixed it there too.

[u1qqlv]

so is there a patch? / was this fixed?

If yes then we can close this...

[paaljoachim]

@iandunn and @talldan is this a theme issue or is this something we can get fixed directly in Gutenberg?
I have myself come across the same problem a few times with different themes.

[iandunn]

It seems like a bug in Gutenberg to me, and the intersection w/ fonts is just a symptom of the underlying problem.

Unless truncating the title is an intentional design decision, then I think it should be displayed in full, regardless of any CSS the theme sets.

[paaljoachim]

Yes, I do I agree with you Ian!

I believe @ellatrix Ella has been working on something similar to this before.
Perhaps she is available to take a closer look at this problem.

[paaljoachim]

Testing with WordPress 5.7. Twenty Twenty One. Gutenberg plugin 10.3.2.

This is what I see:

Long-title-bug-been-fixed.mp4

So it looks like it is working alright in Twenty Twenty One. But it could use some additional developer research.

[gwwar]

So one way of solving this might be triggering a recalculation once fonts have loaded. We might be able to use https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet to help with this. Though IE might need a polyfill or alternative method.

If it's a more general issue, we can try to recalculate using a different strategy. Something simple like wait for __unstableIsEditorReady ready might be good enough.

[t-hamano]

I have examined this issue again.

The post title was changed from textarea to richtext with h1 tag by #31569, and react-autosize-textarea is no longer used.
As far as I've confirmed, the problem didn't occur even when the web fonts area applied.

I think we can close this issue, but is there anyone else who can test?

[ellatrix]

This is no longer an issue because the problem was the text area, which we no longer use.