search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.36k stars 4.13k forks source link

Responsive vw font sizes & query columns flex layout with em margins. Alternatives? #37330

Open Andrew-Starr opened 2 years ago

Andrew-Starr commented 2 years ago

What problem does this address?

In an attempt to provide responsive font sizes, I've noticed that using viewport width vw breaks the layout of the Query Loop columns in the Firefox browser. Video here: https://github.com/WordPress/gutenberg/issues/37295#issuecomment-992422353

Examples of font sizes I have tried:

1.6vw
clamp( 1rem, 1.6vw, 1.5rem )
max( calc( 12px + 0.6vw ), 16px )

and many other variations each with a vw value, all break the query columns layout.

What is your proposed solution?

I don't have a definite solution.

Grid layout for the query loop?

Alternative to vw for providing responsive font sizes?

Would love to hear some alternative solutions.

Andrew-Starr commented 2 years ago

I thought about defining a fixed font size for the Query Loop or Post Template, and then defining each inner block font size (Post Title, Excerpt, Post Author, Post Date etc) separately with the responsive global font size.

This would fix the layout breaking issue, but neither the Query Loop or Post Template blocks have typography support in the editor.

So how about wrapping the query in a Group block, and defining a fixed font size there? Well this also cannot be done because surprisingly the Group block also does not have typography support in the editor.

aristath commented 2 years ago

Have you tried an approach like this? https://github.com/aristath/q/blob/7e034026b335fbd6659d1ad9413dad12313e7cc9/theme.json#L4-L56

Andrew-Starr commented 2 years ago

That's really interesting, thank you.

It still breaks the layout in Firefox because of the one instance of 1vw which is fundamental to all of the font size slugs.

Replace the 1vw with something like e.g. 19px and the layout doesn't break, but then of course the font sizes stay fixed and don't respond/scale to the viewport.

Andrew-Starr commented 2 years ago

In case anyone wants to recreate the breaking layout, this is the very basic html page I created for testing with the same CSS that Gutenberg uses for the Query Loop. You'll notice the font size is defined with vw to make it scale according to the viewport width.

Resize the viewport slowly and notice the breaking layout in the firefox browser.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>vw font scaling</title>
    <style type="text/css">
        body {
            background-color: #000;
            font-size: 1.6vw;
        }
        .container {
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
        }
        ul {
            list-style: none;
            max-width: 100%;
            padding: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        li {
            background-color: #fff;
            width: calc(50% - .625em);
            margin-top: 0;
            margin-right: 1.25em;
            margin-bottom: 1.25em;
            margin-left: 0;
            clear: both;
        }
        li:nth-child(2n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>This is column ONE</li>
            <li>This is column TWO</li>
            <li>This is column THREE</li>
            <li>This is column FOUR</li>
        </ul>
    </div>
</body>
</html>

Guess I'm going about this the wrong way in attempting to find a fix at the block level, when it maybe needs addressing in mozilla/firefox??

Andrew-Starr commented 2 years ago

The issue does not appear with an odd number of columns, only even e.g. 2 or 4 columns.

The width of each post (2 columns) is defined like so: width: calc(50% - .625em)

If this is rounded up e.g. width: calc(50% - .63em) it fixes the issue and the actual on screen difference in each column is approx a tenth of a pixel narrower, which does not look noticeable to the human eye.

Would this be something that could be given consideration to be adjusted in Gutenberg?

Andrew-Starr commented 2 years ago

It would be tricky to round up the em value like in the previous example, so an alternative would be to simply take away another 0.1px from the calculated value in the relevant SCSS file.

This:

width: calc((100% / #{ $i }) - 1.25rem + (1.25rem / #{ $i }));

Could be changed to this:

width: calc((100% / #{ $i }) - 1.25rem + (1.25rem / #{ $i }) - .1px);
Andrew-Starr commented 2 years ago

Another possibility would be to use grid layout for the query loop columns instead of flex.

For example:

.wp-block-post-template.columns-2 {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - .625em));
    grid-gap: 1.25em;
}

With grid layout, the width and spacing is taken care of by the parent <ul> container, and we don't need to specify a width and margin for the <li> posts, and no need for :nth-child pseudo-classes to "fix" the right margin of the last column in the row.

Also in testing I'm not seeing any layout conflicts with vw defined font sizes.

jordesign commented 1 year ago

Hey @Andrew-Starr - looping back to this older issue - do you still see this present when testing in Firefox?

Andrew-Starr commented 1 year ago

Hi @jordesign

The issue seems to be mostly fixed in the latest Firefox release.

Using the font size examples above no longer presents an issue in my testing.

Using font-size: clamp(0.825rem, 0.825rem + ((1vw - 0.48rem) * 0.458), 1.0625rem) (as in the upcoming TT4 theme) also does not present any issues.

However, something with a bit more of a mix of units such as font-size: clamp(15px, 0.938rem + ((1vw - 7.68px) * 0.24), 17px) does still have the issue.