Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 3 years ago

#52477 closed defect (bug) (fixed)

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

Reported by: mukesh27's profile mukesh27 Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 5.7 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: good-first-bug has-patch commit
Focuses: Cc:

Description

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/

Attachments (2)

Screen Shot 2021-02-12 at 10.51.20.png (13.2 KB) - added by tikifez 4 years ago.
Screenshot showing the nested var properly wrapped in a var() function.
Screen Shot 2021-02-12 at 10.44.42.png (12.7 KB) - added by tikifez 4 years ago.
Screenshot showing the fallback argument being properly called.

Download all attachments as: .zip

Change History (13)

#1 @dd32
4 years ago

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 ',\s*\-\-'
./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.

Last edited 4 years ago by dd32 (previous) (diff)

#2 @acerempel
4 years ago

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

#3 @SergeyBiryukov
4 years ago

  • Milestone changed from Awaiting Review to 5.7

This ticket was mentioned in PR #985 on WordPress/wordpress-develop by acerempel.


4 years ago
#4

  • Keywords has-patch added; needs-patch removed

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

#5 @acerempel
4 years ago

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

#6 @poena
4 years ago

  • Keywords commit added

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

The pull request looks good to me.

#7 @SergeyBiryukov
4 years ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 50273:

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

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

This ticket was mentioned in Slack in #core-committers by dd32. View the logs.


4 years ago

This ticket was mentioned in Slack in #core by monikarao. View the logs.


4 years ago

@tikifez
4 years ago

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

@tikifez
4 years ago

Screenshot showing the fallback argument being properly called.

This ticket was mentioned in Slack in #core-themes by ironprogrammer. View the logs.


3 years ago

Note: See TracTickets for help on using tickets.