Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#54671 closed defect (bug) (wontfix)

Font weight doesn't always change

Reported by: sc456a's profile sc456a Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.9
Component: Editor Keywords:
Focuses: ui Cc:

Description

Found a few minor issues in 5.9 beta2. Easier to explain via a quick Loom: https://www.loom.com/share/5649007aba9843b69cccc49572a78118

Summary:
Some elements, like the Pricing table pattern and Heading blocks, don't change font weight when you use the Appearance dropdown in the sidebar under Typography if Bold is enabled within the little quick settings modal.

This may be an issue with the 2022 theme, but H2 is the same font size as the post title's H1 by default, which seems wrong as H2 is usually smaller than H1. When you manually add a heading and change it to H1, it's larger.

This is my first core bug ticket so apologies if I'm not doing it right.

Change History (11)

#1 @sabernhardt
2 years ago

  • Component changed from General to Editor

#2 @audrasjb
2 years ago

  • Milestone changed from Awaiting Review to 5.9

Moving for 5.9 consideration.

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


2 years ago

#4 @audrasjb
2 years ago

  • Milestone changed from 5.9 to 5.9.1

As per today's bug scrub, this ticket needs to be reported upstream on Gutenberg GitHub repository. Since today is WP 5.9 Release Candidate 1, let's move this ticket to 5.9.1 for now.

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


2 years ago

#6 @audrasjb
2 years ago

  • Keywords needs-testing added

Hello and welcome to Trac! Thank you for reporting this issue.
As per today's bug scrub, let's add needs-testing keyword. The idea is to make sure the issue still occurs in WP 5.9 and to identify whether it should be fixed on Core, Gutenberg or in TT2 Theme.

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


2 years ago

#8 @ironprogrammer
2 years ago

Thank you for this report, @sc456a! Your video was very detailed and helped a lot.

What's happening is that the Bold setting via the inline modal toolbar has a higher precedence than the block's Typography > Appearance settings. This functions by design.

Explanation

The Bold (B) button wraps the selected text with a <strong> tag, which WordPress's common CSS sets to font-weight: 600.

The styling is subject to the highest level specificity, which in this case is the <strong> tag itself, which is the closest tag/selector to the text in question. This tag therefore overrides the parent heading's font-weight settings. The sidebar only sets the style at the wrapping heading tag, which is less specific:

<h2>...<strong>...</strong>...</h2>

The same is true of the Italic (I) inline setting. Regardless of the Typography > Appearance font style, an <em> tag set on the text will override the styling applied to the entire block. The resulting behavior may seem weird here because italics is a single font variant, whereas font-weight has multiple variant weights.

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


2 years ago

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


2 years ago

#11 @costdev
2 years ago

  • Keywords needs-testing removed
  • Milestone 5.9.1 deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Hi @sc456a, welcome to Trac!

After reviewing the ticket, manually testing the issue and some discussion, this is the expected behaviour.

Applying bold via B is saying "Make this bold, no matter what". To change the font weight, you need to disable this "Forced Bold", then set your preferred font weight for the block.

I'll close this ticket as wontfix as it is expected behaviour.

Side note: This is actually behaviour from Gutenberg, and should be discussed on the Gutenberg repo. If further discussion is desired, such as changing the tooltip of B to "Force bold", it should happen there.

Note: See TracTickets for help on using tickets.