Make WordPress Core

Opened 10 months ago

Last modified 2 months ago

#58991 reopened defect (bug)

Twenty Twenty-One: Button block link does not use font-weight from Appearance setting

Reported by: wildworks's profile wildworks Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 6.1
Component: Bundled Theme Keywords: needs-patch 2nd-opinion
Focuses: css Cc:


Originally reported by @upadalavipul in the Gutenberg project.

The Button block can have their font-weight changed using the Appearance control in the block sidebar. This style is applied to the element with the .wp-block-button class as inline style. However, Twenty Twenty One applies font-weight to the element with the .wp-block-button__link class in it, so that style is not applied.

Attachments (1)

twenty-twenty-one-font-weight.png (441.1 KB) - added by wildworks 2 months ago.
Theme's font weight overrides the block's font weight

Download all attachments as: .zip

Change History (6)

#1 @karmatosed
2 months ago

  • Keywords close added

I think this is resolved now or at least I can't replicate. I am going to add the close keyword for now but if further steps to replicate can be found I am happy about reviewing. Thank you.

#2 @karmatosed
2 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

For now, let's close this for now - we can always come back to things.

#3 @wildworks
2 months ago

Thanks for the reply.

I tested this issue again with WP6.5 and was still able to reproduce the issue. For example, apply font-weight: normal (300) to a button block via the typography panel in the block sidebar. However, as shown in the screenshot below, you can see that the theme's weight of 500 is applied.

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

2 months ago

Theme's font weight overrides the block's font weight

#4 @sabernhardt
2 months ago

  • Focuses css added
  • Keywords needs-patch added; close removed
  • Milestone set to Future Release
  • Resolution worksforme deleted
  • Status changed from closed to reopened
  • Summary changed from Twenty Twenty One: font-weight setting doesn't work on button block to Twenty Twenty-One: Button block link does not use font-weight from Appearance setting
  • Version set to 6.1

#5 @sabernhardt
2 months ago

  • Keywords 2nd-opinion added

I reopened this ticket because the issue occurs with Twenty Twenty-One, but it also happens with eight other bundled themes and probably many themes we do not control.

  • Twenty Twelve
  • Twenty Fourteen
  • Twenty Fifteen
  • Twenty Sixteen (part of "alternative" patch suggestion on #58609)
  • Twenty Seventeen (#60937)
  • Twenty Nineteen (I suggested moving some more style rules to .wp-block-buttons on ticket:58443 but did not include font-weight in the patch that was committed)
  • Twenty Twenty (#58030)
  • Twenty Twenty-One (#58991)
  • Twenty Twenty-Four

This could be worth fixing in the block styles with inherit for any theme:

.wp-block-buttons[style*="font-weight"] .wp-block-button,
.wp-block-buttons[style*="font-weight"] .wp-block-button__link {
	font-weight: inherit;
.wp-block-button[style*="font-weight"] .wp-block-button__link {
	font-weight: inherit;

The Button block and Buttons block stylesheets both inherit the text-decoration property already.

Note: See TracTickets for help on using tickets.