Twenty Fourteen: Button block line-height uses pixel measurement

[nidhidhandhukiya]

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

[nidhidhandhukiya]

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.

[sabernhardt]

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

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

[sabernhardt]

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.

[algorithmsunlocks]

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

[mayur8991]

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!

[sabernhardt]

#56463 was marked as a duplicate.

[sabernhardt]

matching the line-height in editor styles

[sabernhardt]

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.

[mukesh27]

This ticket was discussed during the bug scrub.

@sabernhardt updated new patch that need testing.

[mayur8991]

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!

[joedolson]

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.