Amp-wp: [AMP Stories] Resizing doesn't properly apply to Story blocks for Title, Author, and Date

[westonruter]

I added blocks for the story title, story author, and story date and then tried resizing them to cause the text to be auto-fit like the Text block, but no resizing happened:

The resized blocks don't change their height in the editor, but nevertheless their heights are changed on the frontend:

So either auto-fit should be applied to these blocks like it does for the Text block, or the hight of the element should be reflected in the editor as it will be on the frontend.

[swissspidy]

There's #2282 for adding amp-fit-text to these blocks

[miina]

Instructions for testing:

1. Add title, author, date blocks.
2. Add background color.
3. Resize the blocks.
4. Make sure that the background color fills in the full area.
5. Make sure that the font size changes according to the new resized area if "Automatically fit text to container" setting is set.
6. Make sure that the FE and editor view match.

[csossi]

Very different results on front end

Editor:

Preview:

[miina]

@swissspidy This might be related to #2296, assigning this to you, let me know if it seems it's not related.

[miina]

Closing as ready for re-testing for QA.

[csossi]

Still seeing a diff between editor and front-end re: font size/style
Editor:

FE:

[swissspidy]

@csossi To confirm, those are: text block, author block, date block, in that order? Or is the top one a title block?

[csossi]

Correct - in that order, @swissspidy

[swissspidy]

I cannot seem to reproduce the font size difference.

But I noticed that the minimum block height should be improved here, see #2368.

[westonruter]

Change deployed

[kienstra]

Question About Test Story

Hi @csossi,
Thanks for testing this. Would you be able to share a link to the test story with this issue?

I tried to reproduce it with a similar story, and it looked very similar on the front-end. Maybe this was fixed in the meantime.

Editor (link)

Front-end (link)

[miina]

@swissspidy The only difference that I could reproduce is the font size difference caused by maximum font size being 54 in the editor.

For example, adding a short text into a huge Text block causes the font size in the editor to be 54 but in the frontend to be 72 -- that seems to cause a visible difference, e.g. like Claudio has in the author block above on the screenshot. Perhaps we should increase the maximum font size in the editor a little bit and then close the issue? Thoughts?

[swissspidy]

Makes sense. Let's use the same values as in the actual amp-fit-text component:

https://github.com/ampproject/amphtml/blob/e7a1b3ff97645ec0ec482192205134bd0735943c/extensions/amp-fit-text/0.1/amp-fit-text.js#L81-L85

[miina]

@csossi Could you re-test this again?

[csossi]

Verified in QA