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

[wildworks]

Originally reported by @upadalavipul in the Gutenberg project.
​https://github.com/WordPress/gutenberg/issues/53338

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.

[karmatosed]

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.

[karmatosed]

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

[wildworks]

Thanks for the report.

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.

[wildworks]

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

[sabernhardt]

I reopened this ticket because the issue occurs with Twenty Twenty-One, but it also happens with eight nine 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 (#61437 was opened; earlier 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-Three's Whisper variation
• Twenty Twenty-Four (#61807)

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.

[sabernhardt]

I updated the list in comment:5 to include Twenty Twenty-Three's Whisper variation and to mention recent tickets #61437 and #61807.

Related Gutenberg issues: GB55681, GB60403