Make WordPress Core

Opened 15 months ago

Closed 3 weeks ago

#58024 closed defect (bug) (fixed)

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

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by: karmatosed's profile karmatosed
Milestone: 6.6 Priority: normal
Severity: normal Version: 6.1
Component: Bundled Theme Keywords: has-testing-info has-screenshots has-patch commit
Focuses: css Cc:

Description

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

Attachments (3)

58024.patch (1.9 KB) - added by nidhidhandhukiya 15 months ago.
After applying this solution the issue is resolved.
58024.1.patch (2.7 KB) - added by nidhidhandhukiya 12 months ago.
I have applied the patch, so according to this solution It will resolve the issue and also not affect the default designs.
58204.2.patch (2.4 KB) - added by sabernhardt 12 months ago.
adding override for custom letter-spacing (props harshgajipara)

Download all attachments as: .zip

Change History (16)

@nidhidhandhukiya
15 months ago

After applying this solution the issue is resolved.

#1 @sabernhardt
15 months ago

  • Focuses css added
  • Summary changed from Twenty Twenty theme button block having issue with letter spacing. to Twenty Twenty: button block link does not inherit custom letter spacing

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;
}

#2 @sabernhardt
15 months ago

#58023 was marked as a duplicate.

#3 in reply to: ↑ description @wesatintellitonic
15 months ago

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

This ticket was mentioned in Slack in #core-test by ironprogrammer. View the logs.


15 months ago

#5 @shiponkarmakar
15 months ago

  • Keywords has-testing-info has-screenshots has-patch needs-testing added

@nidhidhandhukiya
12 months ago

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

#6 @pooja1210
12 months ago

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

adding override for custom letter-spacing (props harshgajipara)

#7 @sabernhardt
12 months ago

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

#8 @sabernhardt
2 months ago

#60780 was marked as a duplicate.

#9 @sabernhardt
2 months ago

  • Milestone changed from Awaiting Review to 6.6
  • Version changed from 6.2 to 6.1

#10 @shailu25
2 months ago

Test Report

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

Environment:

WordPress - 6.5
OS - Windows
Browser - Firefox
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

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

This ticket was mentioned in Slack in #core-themes by karmatosed. View the logs.


7 weeks ago

#12 @karmatosed
3 weeks ago

  • Keywords commit added; needs-testing removed
  • Owner set to karmatosed
  • Status changed from new to assigned

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

#13 @karmatosed
3 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.