Twenty Sixteen: Button block Letter Spacing control is not working

[darshitrajyaguru97]

In Twenty Twenty Theme & Twenty Sixteen Theme when we add button & try to add letter spacing in frontend & Backend.

Steps to Reproduce the Issue :
=========================

• Activate Twenty Twenty Theme / Twenty Sixteen Theme.
• Add Button in Any Page
• Add Letter Spacing in Button Block

Video Link: ​https://drive.google.com/file/d/1s1i9BS23Oh9DQtmN-pRxTd22_gZVlQhV/view

[harshgajipara]

Patch Added

[shailu25]

Test Report for https://core.trac.wordpress.org/attachment/ticket/58609/58609.diff Patch.

Theme - Twenty Twenty

Backend:
========
Before Patch Backend: ​https://prnt.sc/0Q98pqBYxntx
After Patch Backend : ​https://prnt.sc/O-n1iTifU0PG

Frontend:
=========
Before Patch Frontend: ​https://prnt.sc/_Y5YggkuZEKQ
After Patch Frontend : ​https://prnt.sc/YDAgSgw5MSs9

Theme - Twenty Sixteen

Backend:
========
Before Patch Backend: ​https://prnt.sc/nu313buV0SMi
After Patch Backend : ​https://prnt.sc/fZi3Gqu82D0G

Frontend:
=========
Before Patch Frontend: ​https://prnt.sc/-wejCR6FjTzU
After Patch Frontend : ​https://prnt.sc/e0CicBsdb5E6

https://core.trac.wordpress.org/attachment/ticket/58609/58609.diff Patch is Working fine

Thanks.

[sabernhardt]

edits to Twenty Sixteen only, grouping the letter-spacing and text-transform overrides

[sabernhardt]

moving font-weight, letter-spacing, line-height and text-transform to .wp-block-buttons

[sabernhardt]

Twenty Twenty already had a report on #58024, so this ticket (and patch) can address custom letter-spacing in Twenty Sixteen.

Even with the overrides in 58609.diff/58609.1.diff and [55999], a font-weight option from the Appearance control or a custom line-height would have no effect. In the alternative patch, I tried moving some CSS properties to the Buttons block instead of on the links (similar to @nidhidhandhukiya's 58024.1.patch).

[shailu25]

Test Report for https://core.trac.wordpress.org/attachment/ticket/58609/58609.alternative.diff

Environment:
PHP: 8.1.9
WordPress: 6.2.2
Browser: Firefox
Theme: Twenty Sixteen
Plugin: none

Screenshots:
==========

Before Patch Screenshots:

• Backend : ​https://prnt.sc/JIwsP6cBMEbz
• Frontend: ​https://prnt.sc/mTHLAQUH7NL6

After Patch Screenshots:

• Backend : ​https://prnt.sc/qjez2QyiVwnc
• Frontend: ​https://prnt.sc/q8j68bChVMR3

After Patch Result:
================

• Font-weight, Letter-spacing, Line-height and Text-transform get applied to the button block from frontend as well as backend
• https://core.trac.wordpress.org/attachment/ticket/58609/58609.alternative.diff Patch is Working fine as expected.

[alvitazwar052]

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/58609/58609.alternative.diff

Environment

• OS: macOS 12.4
• Web Server: Nginx
• PHP: 7.4.33
• WordPress: 6.3-alpha-55505-src
• Browser: Chrome
• Theme: Twenty-sixteen

Steps

• Activate Twenty Sixteen Theme.
• Add a Button on Any Page
• Add Letter Spacing in the Button Block

ScreenCast

Before

• Backend: ​https://prnt.sc/pInae-GL3S_5
• Frontend: ​https://prnt.sc/PjfmnA5N-3yU

After

• Backend: ​https://prnt.sc/h9GMf5CCYiUy
• Frontend: ​https://prnt.sc/jIux5_LO6lXR

Actual Results

• Font weight, Letter-spacing, Line-height, and Text-transform changes are visible on the frontend.
• The patch is working as expected✅

[sabernhardt]

refreshed patch that moves font-weight, letter-spacing, line-height and text-transform to .wp-block-buttons

[sabernhardt]

[57300] already fixed the Separator typo.

The refreshed patch also adds box-shadow: none to the editor-blocks stylesheet for consistency.

[karmatosed]

Assigning to myself for testing to see if can get this into commit.

[karmatosed]

In testing this does resolve the reported issue for Twenty Sixteen. An example in the following screenshot. I am now going to move this to commit as a result.

[karmatosed]

In 58725:

Twenty Sixteen: Fixes button block letter spacing control.

The button block had issues with font styling not applying. This not only brings letter-spacing but also line-height, text-transform and font-weight to wp-button-block-buttons. [57300] fixed the separator issue. This fix also added box-shadow none for consistency.

Props darshitrajyaguru97, harshgajipara, shailu25, sabernhardt, alvitazwar052.
Fixes #58609.