Bolding part of a heading has no visual indication

[sarahmonster]

When bolding part of a heading, this has no effect on the visual appearance of the heading:

There's a <strong> tag that gets wrapped around the section of "bolded" text, but because the heading is already displayed at the 600 weight, and Noto Serif only has two weights, there's no visual indication of what is and what isn't bolded.

Theoretically of course, you could be using a theme that either a) doesn't bold-by-default its headings or b) uses a heading typeface with multiple weights. However, I suspect that for most themes, that's unlikely to be the case, and the bolding would have no effect. I tested in a bunch of themes and:

in twentyfifteen bold text appears in a lighter weight:

in twentysixteen the bold text is the same weight:

in twentyseventeen the bold text is bold:

in twentynineteen the bold is bold:

in Atomic Blocks, it's the same weight:

in the Gutenberg starter theme, it's the same weight:

and the same in _s as well:

(Note: the latter two seem to be using browser default weights for heading elements, ie, they aren't explicitly set to a particular weight via the CSS, but the <strong> is set to 700, which seems like it might be introducing some faux-bolding but I could also be hallucinating it.)

There are a few ways to resolve this, all of which have drawbacks (what fun!):

1. Remove the bold button altogether. This may not be ideal, since it would reduce consistency across text blocks, but we already have some inconsistencies with the formatting buttons for the heading block (alignments) where it doesn't match with other text blocks. (see also Unify the block toolbar for all text blocks #3785)
2. Have the bold button actually act as a toggle—it's on by default (since the heading is displayed in a bold weight) and then the user can selectively turn it off. This might be strange to make work in themes though, especially since we don't know what weight the theme might be using.
3. Use text-shadow to "fake" the bolding. This is a cardinal sin of typography but might actually work here to indicate what's going on, whilst leaving themes to sort out how best to display the bolding. This could be confusing when the editor appearance doesn't match the front-end output, but we already have that situation right now, so it would really be a lateral move.

[ellatrix]

This is not different at all from the old editor. I have recommended in the past for the default stylesheet and themes to handle bold in headings to e.g. increase or decrease (if no increase is possible) the font weight of the text so that it is visually different.

This is more of a theme issue.

[karmatosed]

I have recommended in the past for the default stylesheet and themes to handle bold in headings to e.g. increase or decrease (if no increase is possible) the font weight of the text so that it is visually different.

I like this idea. The default for me would be to just not show bold unless there is a style. Let's consider iteration on this in 5.0.1

[aduth]

Update: As of Gutenberg 5.5, there will always be a visual indication at least in the sense of the highlighted format "inline boundary" (the grayed background).

[hedgefield]

I've discovered some bugs with this.

What I did was:

• Converted a classic block in an old post to gutenblocks.
• The 'headings' in this block were just bolded text with a line break after them, so they didn't convert into headings automatically.
• I added a proper line break to split the block in two, and converted the bolded paragraph to a heading.
• It seems like some of those headings kept the bold styling, but the bold button somehow didn't register that, and now the bold behavior is inverted...

Then, things got really interesting.

I tried to replicate this behavior in another post

• added a new paragraph
• added a soft line break between two lines
• bolded the first line
• added a proper line break to split the block
• converted the bolded paragraph to a heading

oops now the heading text is gone...

[ellatrix]

@hedgefield The problem you're reporting seems unrelated to this issue. Could you create a new issue?

---

As for the problem reported here, it's purely a theme issue I think, and in my opinion, it should be addressed by themes that decide to increase font weight for heading text. They increase the default font weight, so it's their responsibility to account for strong tags in headings. These themes have a few options:

• Increase the font weight even more for h2 strong etc.
• If the font does not have "black" (bolder) weight, you could experiment with a text shadow.
• Perhaps you could make the font weight lighter for h2 strong, which would still look ok and emphasise the text.

I would recommend adding a section on this in a theme handbook, and perhaps fix the core themes and _s.

Unfortunately, this is not something we can fix in the editor.

1. Removing the bold button is not a solution.
   • There are themes where you can see the strong tag.
   • The tag is about meaning, not about styling.
2. Even if we know the weight that the theme uses, we shouldn't activate the button if there is no strong tag. Again, the button is to add meaning (the strong tag), not to add styling.
3. Correcting the styling is good! But it should be changed in the theme, not just in the editor. It also needs to be visible on the front-end.

Feel free to reopen the issue if you disagree with this.