Twenty Nineteen Button is having issue with line height.

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Activate Twenty Nineteen theme.
2. Choose Button block.
3. Add some text.
4. Apply line height.

You can able to see when you apply line height it will add space on above the button.

I have attached video for better unnderstanding.
Video URL :- ​https://share.cleanshot.com/Sy247vzrHM6gWH69y5D1

[monzuralam]

@nidhidhandhukiya, Thanks for your ticket.

We are looking for testing report. More than one test report is a helpful way to validate across different environments.

[shailu25]

@monzuralam

Test Report for - https://core.trac.wordpress.org/attachment/ticket/58443/58443.patch Patch.

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

Backend:
========
Before Patch Backend: ​https://prnt.sc/VoB3ZIbiqwZO
After Patch Backend : ​https://prnt.sc/FIOdY2k8XG-q

Frontend:
=========
Before Patch Frontend: ​https://prnt.sc/plXeZ-xUnuRt
After Patch Frontend : ​https://prnt.sc/UZacP-yMFEKm

https://core.trac.wordpress.org/attachment/ticket/58443/58443.patch patch is working fine.

[hrrarya]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/58443/58443.patch

Environment

• OS: macOS 12.6.7
• Web Server: Nginx
• PHP: 7.4.33
• WordPress: 6.3-beta3-56130-src
• Browser: Brave - Version 1.52.129 Chromium: 114.0.5735.198 (Official Build) (x86_64)
• Theme: Twenty Nineteen
• Active Plugins: - No Active Plugins

Actual Results

• ✅ Issue resolved with patch.

Supplemental Artifacts

Before patch backend - ​https://prnt.sc/MXqw7vmabIZb
After patch backend - ​https://prnt.sc/EzQ4gft0tHZZ

Before patch frontend - ​https://prnt.sc/M_UeEnkMFhZN
After patch frontend - ​https://prnt.sc/MYSuzufmPrSo

[karmatosed]

I am going to commit this as can see it fixed with the patch, thank you.

[karmatosed]

In 56580:

Twenty Nineteen: Fixes button line height.

Line height was broken for button block and adding spacing.

Props nidhidhandhukiya, shailu25.
Fixes #58443.

[karmatosed]

In 56581:

Twenty Ninteen: Revert changes to 'style-rtl.css'.

This revert changes to Twenty Nineteen 'style-rtl.css' file made in [56580] as it auto-generated during the build process.

Unprops karmatosed.
Props costdev.
See #58443.

[karmatosed]

On the basis of consulting regarding some failed tests this needs a little more of a solid fix at the SASS file level. Just fixing the CSS means that tests fail for example for the rtl files which shouldn't be changed.

@nidhidhandhukiya I wanted to give you the opportunity to work on this patch considering you originally did but happy to also tackle this if not.

cc @costdev and @spacedmonkey for those who aided diagnosing why the tests were not passing regarding this issue.

[sabernhardt]

Using inherit was not the best way to fix custom line-height.

On the front end, ​all button-like elements have had a line-height of 1.2 since ​initial commit, and it needs to stay that value when users do not select their own. This ticket did not change the front-end style.css and the RTL was reverted, so the current state is still only wrong with a custom line-height.

The editor's value of 1.8 did not match the front, but removing the entire line can be better than changing to inherit.

Any of the customizable properties probably could be moved to the wp-block-button or wp-block-buttons element instead of the link.

If tests are still giving any errors, that might be related to the missing space after the colon in style-editor.scss.

[harshgajipara]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/58443/58443.1.patch

Environment

OS: Windows
PHP: 8.1.9
WordPress: 6.3.1
Browser: Chrome
Theme: Twenty Nineteen
Plugins: None activated

Actual Results:

Before Patch:
✅ In the editor and frontend, space showing above button when line height applied.
Backend: ​https://prnt.sc/lQl2hEgLCwi8
Frontend: ​https://prnt.sc/Jeo1j1zraYLL

After Patch
✅ In the editor and frontend, space removed above button when line height applied.
Backend: ​https://prnt.sc/WtJaVDtD0I7m
Frontend: ​https://prnt.sc/9CH_svNz2k2H