Small screen layout & typography

[ryelle]

This is not a specific issue, but something to pay attention to. GB doesn't let you set different spacing or font size based on screen sizes (though I remember an issue about this, so we should confirm), so getting this to look nice on smaller screens will probably require CSS.

I've added the "Needs design" label since we can't do anything here until there is a finished mockup 🙂

[StevenDufresne]

I relied on clamping for typography to get it working for the /gutenberg page. It worked but was definitely tricky.

We could also wrap the group block to set up a styled-system-like interface for layout.

[ryelle]

This is the PR for fluid font size, looks like it just merged last week - https://github.com/WordPress/gutenberg/pull/39529. It's not in place for any other property yet.

I relied on clamping for typography to get it working for the /gutenberg page.

Clamping values works in the editor for typography, but I've had trouble with that for padding/margins - the editor expects those values to be static numbers, not custom properties or clamp strings, so it doesn't render it correctly. That's why I think we'll need to use CSS overrides, at least for now.

[StevenDufresne]

I thought of an idea, not sure how good/bad it is:

Is there a way for us to use REM units for all the copy/heading and then utilize em units for padding? Extend the column/group block to allow us to set font-sizes for different breakpoints to the parent container. The font sizes could be abstracted. Maybe just provide presets so we can maintain consistent padding.

https://github.com/WordPress/wporg-parent-2021/pull/16/files#r932771232

[ryelle]

I think now that the spacing uses presets (and therefor custom properties), we could do something like we do for the font sizes, and shrink them down at smaller screen sizes. I also tried out using clamp for the Large spacing size, and that seems to work well.

[adamwoodnz]

The clamping for the Large size is working fairly well for my columns with CTA pattern. Seems like most of the columns in the homepage could use this too.

[ryelle]

Looks like we may have missed the paragraph below Get Started on home?

[ryelle]

I was using the same ID on this page as on the download page, which caused some style bleed. I swapped out the arrow pattern for the new pattern + block style, and updated the ID for the download page section (https://github.com/WordPress/wporg-main-2022/commit/17f5ace957b42913efd3c8da6c0a1e405cc754b0), so it looks better now:

Download section still looks good: