Make WordPress Core

Opened 11 months ago

Last modified 11 months ago

#58609 new defect (bug)

Twenty Sixteen: Button block Letter Spacing control is not working

Reported by: darshitrajyaguru97's profile darshitrajyaguru97 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.2.2
Component: Bundled Theme Keywords: has-patch has-screenshots has-testing-info
Focuses: ui, css Cc:

Description

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

Attachments (3)

58609.diff (3.8 KB) - added by harshgajipara 11 months ago.
Patch Added
58609.1.diff (2.0 KB) - added by sabernhardt 11 months ago.
edits to Twenty Sixteen only, grouping the letter-spacing and text-transform overrides
58609.alternative.diff (2.0 KB) - added by sabernhardt 11 months ago.
moving font-weight, letter-spacing, line-height and text-transform to .wp-block-buttons

Download all attachments as: .zip

Change History (8)

@harshgajipara
11 months ago

Patch Added

#1 @harshgajipara
11 months ago

  • Keywords has-patch added; needs-patch removed

#2 @shailu25
11 months ago

  • Keywords has-screenshots has-testing-info added

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
11 months ago

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

@sabernhardt
11 months ago

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

#3 @sabernhardt
11 months ago

  • Summary changed from Button Letter Spacing is Not Working in Twenty Twenty & Twenty Sixteen Theme to Twenty Sixteen: Button block Letter Spacing control is not working

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).

#4 @shailu25
11 months ago

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:

After Patch Screenshots:

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

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

#5 @alvitazwar052
11 months ago

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

After

Actual Results

  • Font weight, Letter-spacing, Line-height, and Text-transform changes are visible on the frontend.
  • The patch is working as expected✅
Last edited 11 months ago by alvitazwar052 (previous) (diff)
Note: See TracTickets for help on using tickets.