Wp-calypso: SPT: Menu template butting up against viewport sides on smaller screens

[retrofox]

Although the large _preview_ of the Menu template is good (width 1200px), once inserted into the Post Editor canvas the template itself doesn't look right in narrower viewport as the Blocks butt up against the edges of the canvas.

SPT Block Preview

Post Editor Canvas

[getdave]

I'll look at this

[getdave]

~@retrofox Which Theme are you using?~

It was Mayland

[retrofox]

~@retrofox Which Theme are you using?~

It was Mayland

Yes, but I think it doesn't depend on the theme since guessing that the issue happens at a template definition level.

[getdave]

Analysis: Front end styles

I've started looking into this on the "front end" (user facing, _not_ the Editor).

It appears that this is due to the alignfull setting on the Columns Block that is used to create the Menu layout.

The alignfull class has:

• a max-width: 100%
• auto setting for horizontal margins
• no horizontal padding
• a _complex_ width calculation

This means that at larger viewport sizes the width setting constrains the Menu layout so that it is "cented" in the viewport. This is good.

However, at smaller viewports, the width setting is larger than the viewport which means the max-width kicks in to stop the content bleeding outside the viewport area. However, as the max-width is 100% it means the edges of the Menu butt up against the edges of the viewport.

To clarify, unlike the alignfull setting which _should_ butt up against the edges at all viewports, the alignwide setting _should not_ butt up against the edges of the viewport on smaller viewports.

Examining the layout further we see that if the alignwide setting is removed then the Columns obey the layout rule established by the top parent site-main <div>. This has 16px of horizontal padding which ensures that no content butts up against the viewport.

If we apply the 16px of padding to the alignwide setting then on small viewports the Menu does not butt up against the edges.

Suggested fix is to see whether we can alter the align-width Sass mixin in Varia to add a 16px margin. If not then we'll have to fix on a Theme level.

[nielslange]

This issue seems to be related to https://github.com/Automattic/themes/issues/1773

[getdave]

May be fixed by https://github.com/WordPress/gutenberg/pull/20589

[getdave]

Update

We have a few options to fix this:

1. Applying a patch directly in SPT. However, as this is not direclty a SPT issue (it happens in the Editor) I think this would be unwise.
2. Applying a patch to Varia Theme. Not sure of the implications of fixing all Columns, but this is much better than option 1 above.
3. Fix in Core. This is the root cause of the issue. It depends on whether Core feel this is something that they need to solve, or whether it's for Themes to choose whether they want spacing to the left/right of the Block on small viewports.

I've started on a fix in Core to see if we can fix the root cause and pinged the Themes team for advice on Varia fixes (I understand that @allancole will advise).

[getdave]

I'm not 100%, but @jasmussen has addressed a regression on Core Columns that might be causing this:

https://github.com/WordPress/gutenberg/pull/20589#pullrequestreview-367788678

Will need testing against our Themes to check this resolves things. This means:

• Set up local WP install
• Pull in latest Gutenberg from Github master (it's not released yet!)
• Pull in latest Automattic Themes
• Activate Themes and test to see if Menu Layout Template is fixed.

[getdave]

@ianstewart This should be fixed by this PR https://github.com/WordPress/gutenberg/pull/20597 as of Gutenberg 7.7 being released to WPCom.

Would you be able to re-test this once Gutenberg 7.7 is available?

cc @iamtakashi

[ianstewart]

@getdave for sure.