Make WordPress Core

#58444 closed defect (bug) (fixed)

Twenty Fourteen: Button block line-height uses pixel measurement

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by: joedolson's profile joedolson
Milestone: 6.3 Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-patch needs-testing has-testing-info commit
Focuses: accessibility, css Cc:

Description

Steps to reproduce the issue.

  1. Activate the Twenty Fourteen theme.
  2. Choose Button block.
  3. Add some text.
  4. Apply font size such as L or XL.

Now check it in user side.
It is looking proper in editor but having issue in user side.

I have attached video for better understanding.
Video URL :- https://share.cleanshot.com/v9fyCGcNsHlWGkSlj1Bh

Attachments (2)

58444.diff (700 bytes) - added by sabernhardt 11 months ago.
58444.1.diff (1.4 KB) - added by sabernhardt 10 months ago.
matching the line-height in editor styles

Download all attachments as: .zip

Change History (19)

#1 @nidhidhandhukiya
11 months ago

The reason behind this issue is below css

wp-block-button__link {
    padding: 10px 30px 11px;
}

If we remove this css the issue is resolved.

#2 @sabernhardt
11 months ago

  • Focuses css added
  • Milestone changed from Awaiting Review to 6.3
  • Summary changed from Twenty Fourteen theme button is having issue when we use font size. to Twenty Fourteen: Button block line-height uses pixel measurement
  • Version changed from 6.2.2 to 5.0

The padding has been exactly the same since the Button and File blocks were available in Core (#45042), so that probably should stay.

I am concerned about using pixel dimensions for the line-height, though. That usually should be relative.

Last edited 11 months ago by sabernhardt (previous) (diff)

@sabernhardt
11 months ago

#3 @sabernhardt
11 months ago

  • Keywords has-patch added

The patch changes the front-end line-height to the relative equivalent with the standard font size.

The editor's Button/File block styles override the theme's editor-blocks.css (since WP6.1), but that does not strictly relate to the font size issue.

Last edited 11 months ago by sabernhardt (previous) (diff)

#4 @algorithmsunlocks
11 months ago

Hello
I am also finding the issue in posts. Please have a look at the recorded video:
https://www.loom.com/share/59e9ae6f763340c38c9614ae423a674f

Thank you!
Ruman Ahmed

#5 @mayur8991
11 months ago

Hi

Test report for - https://core.trac.wordpress.org/attachment/ticket/58444/58444.diff patch

Environment:
WordPress - V6.2.2
Theme - Twenty Fourteen
Os: Windows
Browser: Chrome

Expected Result: The Button block line-height should be relative and same as backend

Before Patch:
Backend button block - https://prnt.sc/ovOMAyRkhu3Z
Frontend button block - https://prnt.sc/OaXl9lTpbrii

After Patch:
Backend button block - https://prnt.sc/ZREV_XRlluj5
Frontend button block - https://prnt.sc/ZlzLUwR8xrvY

Thanks!

#6 @sabernhardt
10 months ago

#56463 was marked as a duplicate.

@sabernhardt
10 months ago

matching the line-height in editor styles

#7 @sabernhardt
10 months ago

It would be good to override the 1.5 and normal line heights in the editor, too.

Note: the background color discrepancy is another issue, caused by classic-themes.css styles that Twenty Fourteen should not need in the first place.

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


10 months ago

#9 @mukesh27
10 months ago

  • Keywords needs-testing added

This ticket was discussed during the bug scrub.

@sabernhardt updated new patch that need testing.

#10 @joedolson
10 months ago

  • Focuses accessibility added
  • Owner set to joedolson
  • Status changed from new to accepted

#11 @costdev
10 months ago

  • Focuses accessibility removed
  • Keywords has-testing-info added

#12 @costdev
10 months ago

  • Focuses accessibility added

#13 @mayur8991
10 months ago

Hi
Test report for - https://core.trac.wordpress.org/attachment/ticket/58444/58444.1.diff patch

Environment:
WordPress - V6.2.2
Theme - Twenty Fourteen
Os: Windows
Browser: Chrome

Expected Result: The Button block line-height should be relative and same as backend

Before Patch:
Backend button block - https://prnt.sc/moihws_bGPQL
Frontend button block - https://prnt.sc/zU1ThYoxOQHE

After Patch:
Backend button block - https://prnt.sc/gyvWrgiqD6bq
Frontend button block - https://prnt.sc/SlPyonXbIaoR

Thanks!

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


10 months ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


10 months ago

#16 @joedolson
10 months ago

  • Keywords commit added

#17 @joedolson
10 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 55932:

Bundled Themes: Fix Twenty Fourteen button block line-height.

Change the button block in Twenty Fourteen to use relative instead of fixed line-height. Prevent visual errors with larger font sizes on the front-end.

Props nidhidhandhukiya, algorithmsunlocks, mayur8991, sabernhardt.
Fixes #58444.

Note: See TracTickets for help on using tickets.