Twenty Twenty: button block link does not inherit custom letter spacing

[nidhidhandhukiya]

Steps to reproduce the issue:-

1. Activate Twenty Twenty theme.
2. choose button block.
3. Give letter spacing.

You can able to see there is no spacing between the letters.

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

[nidhidhandhukiya]

After applying this solution the issue is resolved.

[sabernhardt]

I think this would be better to fix in the editor for any theme. If the inline style stays on the parent element, the link could inherit the letter-spacing and any other properties.

Button block links already inherit custom text-decoration from the wp-block-button element, but that is the only CSS property I found in the block library style.css.

.wp-block-button[style*="text-decoration"] .wp-block-button__link {
  text-decoration: inherit;
}

[sabernhardt]

#58023 was marked as a duplicate.

[wesatintellitonic]

I don't think this issue us limited to the Twenty Twenty theme — it is also happening for me when creating a blank theme with the Create Block Theme plugin.

Replying to nidhidhandhukiya:

Steps to reproduce the issue:-

1. Activate Twenty Twenty theme.
2. choose button block.
3. Give letter spacing.

You can able to see there is no spacing between the letters.

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

[nidhidhandhukiya]

I have applied the patch, so according to this solution It will resolve the issue and also not affect the default designs.

[pooja1210]

Hi,

Patch report for - https://core.trac.wordpress.org/attachment/ticket/58024/58024.patch

Environment:
WordPress- v6.2.2
Theme-
Os- Mac
Browser- Chrome

Expected Result - The letter spacing should get applied to the button block ☑️

Screenshot:
Before - ​https://prnt.sc/aYjVOoipBzmU
After - ​https://prnt.sc/PLXSKQAXK4Gp

Thanks!

[sabernhardt]

adding override for custom letter-spacing (props harshgajipara)

[sabernhardt]

I pulled 58204.2.patch from @harshgajipara's 58609.diff​ on #58609.

On that ticket, I also tried moving some CSS properties to the Buttons block instead of on the links (similar to 58024.1.patch).

[sabernhardt]

#60780 was marked as a duplicate.

[shailu25]

Test Report

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/58024/58204.2.patch

Environment:

WordPress - 6.5
OS - Windows
Browser - Chrome
Theme: Twenty Twenty
PHP - 8.1.23
Active Plugin - Test Reports

Actual Results:

• Button Block's Letter Spacing Issue is Resolved with patch.✅

Screenshots:

Backend:
========
Before Patch: ​https://prnt.sc/OSQY8cgoSRcF
After Patch: ​https://prnt.sc/HU8nyEQq38iX

Frontend:
========
Before Patch: ​https://prnt.sc/oaqvHN7SpBws
After Patch: ​https://prnt.sc/pL0H7WdGADND

[karmatosed]

Thank you everyone, it looks like we have testing and are ready to move to commit. I will flag for that to happen now.

[karmatosed]

In 58205:

Twenty Twenty: Fixes button link not inheriting custom letter spacing.

The button block link did not inherit the custom letter spacing. This resolves that issue.

Props nidhidhandhukiya, sabernhardt, wesatintellitonic, pooja1210, shailu25.
Fixes #58024.