Twenty Twenty-One: Typo in style.css – missing `var( … )`

[mukesh27]

In the style.css file of Twenty Twenty One, there is a typo on line 2873:

p { line-height: var(--wp--typography--line-height, --global--line-height-body); }

The second argument to var is clearly meant to be var(--global--line-height-body), not the bare variable name --global--line-height-body. The latter is simply an invalid value.

Normally I would file this kind of thing as a ticket or issue in the source control repository, but I couldn’t find a way to do that. I hope this gets the attention of someone who has the power to fix it!

props to @acerempel for support ticket - ​https://wordpress.org/support/topic/typo-in-style-css-missing-var/

[dd32]

Normally I would file this kind of thing as a ticket or issue in the source control repository, but I couldn’t find a way to do that.

That's exactly where you are :)

Looking for cases in twentytwentyone where var() is used with a variable as the second value:

$ grep 'var' . -ri | grep '\-\-' | grep ', \-\-'
./style.css:	line-height: var(--wp--typography--line-height, --global--line-height-body);
./style-rtl.css:	line-height: var(--wp--typography--line-height, --global--line-height-body);
./assets/css/style-editor.css:	line-height: var(--wp--typography--line-height, --global--line-height-body);
./assets/css/style-editor.css:	line-height: var(--wp--typography--line-height, --global--line-height-body);
./assets/sass/05-blocks/heading/_editor.scss:		line-height: var(--wp--typography--line-height, --global--line-height-body);
./assets/sass/05-blocks/paragraph/_editor.scss:	line-height: var(--wp--typography--line-height, --global--line-height-body);
./assets/sass/05-blocks/paragraph/_style.scss:	line-height: var(--wp--typography--line-height, --global--line-height-body);

Looks like the first four are just generated from the next three sass rules.

If you wish to submit a patch, you can submit a diff to this ticket, or a GitHub PR to ​https://github.com/wordpress/wordpress-develop/ - you can simply avoid touching the compiled CSS files and just the source sass files.

[acerempel]

I see! I will submit a PR shortly. Thanks for replying so swiftly!

This patch fixes three cases where the fallback parameter to a var(…) call was meant to be a CSS variable, but was not itself surrounded in var(…).

Trac ticket: https://core.trac.wordpress.org/ticket/52477

[acerempel]

I have submitted a patch via GitHub; is there anything more I should do?

[poena]

@acerempel I think you did everything correct, and thank you. :)

The pull request looks good to me.

[SergeyBiryukov]

In 50273:

Twenty Twenty-One: Use correct value for the global line-height CSS variable.

Props acerempel, mukesh27, dd32, poena.
Fixes #52477.

[tikifez]

Screenshot showing the nested var properly wrapped in a var() function.

[tikifez]

Screenshot showing the fallback argument being properly called.

Merged in changeset https://core.trac.wordpress.org/changeset/50273