[AMP Stories] Make sure that the frontend and editor view match

[miina]

AC: All the allowed blocks in the editor look visually the same (or very similar) to how they look like in the frontend. This does not include animations.

• Make sure that all the text containing blocks' font sizes in the editor match the sizes in frontend;
• Make sure that the margins and paddings in the editor match the frontend. For example, the AMP Story Grid Layer seems to have padding but this is not reflected in the editor;
• Make sure that the Text block displays similarly in the editor as in the frontend. At this moment a Text block might display 2 rows in the editor but just one in the frontend.
• Verify other blocks not mentioned here separately.
• Make sure the ratio of the Page is correct (currently per Weston's comment Frontend story is: 390.141/650.250 = 0.59998615917, however, Editor is: 338/553 = 0.61121157323)
• Add basic editor style (e.g. max-width).

[westonruter]

See also discussion about how we should include styles on the frontend: #1958 (comment)

[swissspidy]

Make sure the ratio of the Page is correct

Note that this also affects the reordering UI.

[miina]

I'm wondering what would be the best approach for font sizes -- for example if the default font size is 16px in the editor and is displayed in two rows then the same font size in the frontend might still be in one row -- since the font size is not responsive. We could add some different sizes based on the screen width for the default font sizes, however, what if the user selects a specific font size?

@swissspidy @westonruter Thoughts?

[westonruter]

@miina What if the specific font sizes were stored in vh units instead of px units? That would make them responsive. They'd perhaps have to remain px in the editor since the the viewport is not fully contained by the story, but when rendered on the frontend they could be replaced with some computed equivalent using vh. This would make the font size scale based on the height of the viewport, and thus it would be responsive.

[miina]

@westonruter: Just updated the PR to use vw units instead of px for the font size in the frontend, the editor still displays in px.

[miina]

Closed within #2015.

[csossi]

verified in QA