Headings block: add support for font weight #27639

MaggieCabrera · 2020-12-10T10:27:14Z

Description

This PR is created to partially address #22641 It enables experimental font-weight support for heading blocks.

How has this been tested?

With TT1 blocks, adding this in experimental-theme.json:

	"core/heading/h2": {
		"styles": {
			"typography": {
				"fontSize": "var(--wp--preset--font-size--extra-large)",
				"fontWeight": "var(--wp--preset--font-weight--light)",
				"lineHeight": "var(--wp--custom--line-height--heading)"
			}
		}
	},

Screenshots

Frontend:

Editor:

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

The text was updated successfully, but these errors were encountered:

scruffian · 2020-12-10T11:14:31Z

Looking good. Do you think it also makes sense to add a default for the block to Bold as @kjellr suggested here: #22641

Another question is how does this interact with the Bold button in the Block Controls? The difference is that the Bold button allows you to set only a portion of the text to bold. The problem is that if the block is set to bold then the Bold button will actually make the text less bold.

One option we could explore is to change the behaviour of the strong tag to font-weight: bolder; so that it's always bolder than the block itself. I'm curious what others think...

MaggieCabrera · 2020-12-10T11:20:09Z

Looking good. Do you think it also makes sense to add a default for the block to Bold as @kjellr suggested here: #22641

Yes, I was trying that and I was not getting it to work so I decided to unblock the TT1 issue with this PR and work on the default separately. I'm still unsure about setting the default to bold for the headings as that will affect every theme, I'd like some feedback on that too.

One option we could explore is to change the behaviour of the strong tag to font-weight: bolder; so that it's always bolder than the block itself. I'm curious what others think...

Yes, I would go with controlling what font-weight strong has, and I'd say that should be something that we could maybe control via theme.json? Again I'm unsure about making such a global change that may affect every theme.

jasmussen · 2020-12-10T12:30:05Z

Another question is how does this interact with the Bold button in the Block Controls? The difference is that the Bold button allows you to set only a portion of the text to bold. The problem is that if the block is set to bold then the Bold button will actually make the text less bold.

Important to note here that one is a visual appearance change for the font weight, and the other may be that also has semantic value. For that reason, I don't think we should necessarily change what "bold" does to a heading. I personally think that it's fine that pressing "bold" on an already bold header makes it less bold — it does what the theme registers bold to. More importantly, the less CSS we bake in, the more is in the control of the theme.

kjellr · 2020-12-10T14:47:17Z

Important to note here that one is a visual appearance change for the font weight, and the other may be that also has semantic value. For that reason, I don't think we should necessarily change what "bold" does to a heading. I personally think that it's fine that pressing "bold" on an already bold header makes it less bold — it does what the theme registers bold to. More importantly, the less CSS we bake in, the more is in the control of the theme.

Yeah, I agree with @jasmussen here. I also think (hope?) that eventually, Gutenberg could make that "bold" button recognize the "Bold" appearance, and show up as selected by default when that's the case. In the meantime, this seems like a good next step.

MaggieCabrera · 2020-12-10T15:15:12Z

Yeah, I agree with @jasmussen here. I also think (hope?) that eventually, Gutenberg could make that "bold" button recognize the "Bold" appearance, and show up as selected by default when that's the case. In the meantime, this seems like a good next step.

I'm not sure how we could do that, since that Bold only applies to a part of the heading, not all of it (unless we select it).

jasmussen · 2020-12-10T15:19:33Z

I also think (hope?) that eventually, Gutenberg could make that "bold" button recognize the "Bold" appearance, and show up as selected by default when that's the case

I'm not sure, actually. The bold button is for the strong pronunciation in the semantic sense, the other is purely visual and, to Maggie's point, at the block level.

kjellr · 2020-12-10T15:25:01Z

Yeah, good points — that all makes sense.

In any case, this PR works for me when I set a fontWeight via theme.json, but I'm not seeing the "Appearance" dropdown available for the Headings block:

By comparison, I do see it in the Navigation block's panel:

Does that control need to be added separately?

jasmussen · 2020-12-10T15:28:11Z

I think it may be intentionally limited to global styles and the navigation block for now, as the UI quickly gets clunky with current controls, pending the progressive system outlined in #27331

MaggieCabrera · 2020-12-10T15:30:12Z

I think it may be intentionally limited to global styles and the navigation block for now, as the UI quickly gets clunky with current controls, pending the progressive system outlined in #27331

I actually looked into this and it's a bug. It only appears if support for font styles is also applied, I asked about it on slack and @jorgefilipecosta said he would look into it (I didn't make an issue about it though)

jasmussen · 2020-12-10T15:38:56Z

I'll take your word for it. Cc also @aaronrobertshaw as I think he worked on it.

kjellr

Ok great, thanks for checking. In that case, this PR should be good to go. Thanks for updating the docs too! ⭐

jorgefilipecosta · 2020-12-10T16:07:28Z

I think we should not merge this PR before #27555 is merged otherwise we will have a complex back-compatibility issue.

aaronrobertshaw · 2020-12-11T04:46:15Z

I think it may be intentionally limited to global styles and the navigation block for now, as the UI quickly gets clunky with current controls, pending the progressive system outlined in #27331

There were concerns regarding the UI getting cluttered as mentioned, so it was suggested that this only be opted into by dynamic blocks, starting with the navigation block as it was required to implement some new block pattern designs.

The same reasoning was behind it not initially being added to the global styles. I can't recall off the top of my head who took care of that.

@jorgefilipecosta has already fixed the global styles so weight and style can work independently in #27659. Thanks Jorge!

jorgefilipecosta · 2020-12-14T16:12:41Z

#27555 was merged, so from the technical point of view, I don't have any blocker to merging this PR.
Although Font Weight is still experimental (__experimentalFontWeight), the heading block is not experimental and is not a dynamic bock.

Some places run the Gutenberg plugin in production. Merging this PR makes us need to support the current markup produced for font-weight forever, so we don't break the styles of websites currently running Gutenberg plugin in production. Or the places that run Gutenberg in production will need to have their own back-compatibility code.

For reference this is the markup we produce:

<!-- wp:heading {"style":{"typography":{"fontWeight":"900"}}} -->
<h2 style="font-weight:900">Heading</h2>
<!-- /wp:heading -->

Given that markup is not really "experimental" and we (or the places that run production plugin) must support it, I would like to have more thoughts on this. @mtias, @youknowriad Do you think it is ok to merge this PR and add font-weight support to additional blocks (heading in this case), or would you prefer if we wait a little bit more?

mtias · 2020-12-18T13:26:26Z

I'd like this one to be customizable globally by the user / theme but not present in the typography panel for headings initially until we bring some of the design updates from #27331.

carolinan · 2021-05-12T09:50:24Z

@MaggieCabrera Do you have time to refresh this PR? The merge conflicts need to be solved.

MaggieCabrera · 2021-05-20T09:56:22Z

@carolinan sorry for the wait, I just got to it, now it's rebased

Since I first started this PR the docs have changed quite a bit and I'm not sure if there's a need to mention this change on them anymore (feel free to correct me though).

* enabled experimental font weight

MaggieCabrera requested review from ajitbohra, chrisvanpatten, mkaz and talldan as code owners Dec 10, 2020

MaggieCabrera mentioned this pull request Dec 10, 2020

Twenty Twenty One Blocks: migrated Heading block styles WordPress/theme-experiments#135

Closed

scruffian requested review from kjellr and jasmussen Dec 10, 2020

scruffian assigned MaggieCabrera Dec 10, 2020

scruffian added [Block] Heading [Feature] Full Site Editing [Feature] Themes Global Styles labels Dec 10, 2020

kjellr approved these changes Dec 10, 2020

View changes

aristath approved these changes Dec 15, 2020

View changes

pbking mentioned this pull request Feb 16, 2021

Added (numerical) Font Weight Value to Headings WordPress/theme-experiments#211

Closed

Base automatically changed from master to trunk Mar 1, 2021

carolinan mentioned this pull request Mar 23, 2021

TT1 Blocks Font Weight Value to Headings WordPress/theme-experiments#239

Merged

enabled experimental font weight and added default style

21d941f

MaggieCabrera force-pushed the add/headings-support-custom-font-weight branch from 78f01d9 to 21d941f May 20, 2021

removed old doc file

d13b708

carolinan merged commit 6891aec into WordPress:trunk May 21, 2021
18 checks passed

github-actions bot added this to the Gutenberg 10.8 milestone May 21, 2021

stacimc added a commit to stacimc/gutenberg that referenced this issue May 25, 2021

Headings block: add support for font weight (WordPress#27639)

efa114b

* enabled experimental font weight

getdave added a commit that referenced this issue May 27, 2021

Headings block: add support for font weight (#27639)

fad8f83

* enabled experimental font weight

vcanales added a commit that referenced this issue Jul 7, 2021

Headings block: add support for font weight (#27639)

b1273a7

* enabled experimental font weight

WordPress / gutenberg Public

Headings block: add support for font weight #27639

Headings block: add support for font weight #27639

MaggieCabrera commented Dec 10, 2020 •

edited

scruffian commented Dec 10, 2020 •

edited

MaggieCabrera commented Dec 10, 2020

jasmussen commented Dec 10, 2020

kjellr commented Dec 10, 2020

MaggieCabrera commented Dec 10, 2020

jasmussen commented Dec 10, 2020

kjellr commented Dec 10, 2020 •

edited

jasmussen commented Dec 10, 2020

MaggieCabrera commented Dec 10, 2020

jasmussen commented Dec 10, 2020

kjellr left a comment

jorgefilipecosta commented Dec 10, 2020

aaronrobertshaw commented Dec 11, 2020

jorgefilipecosta commented Dec 14, 2020

mtias commented Dec 18, 2020

carolinan commented May 12, 2021

MaggieCabrera commented May 20, 2021

WordPress / gutenberg Public

Headings block: add support for font weight #27639

Headings block: add support for font weight #27639

Conversation

MaggieCabrera commented Dec 10, 2020 • edited

Description

How has this been tested?

Screenshots

Checklist:

scruffian commented Dec 10, 2020 • edited

MaggieCabrera commented Dec 10, 2020

jasmussen commented Dec 10, 2020

kjellr commented Dec 10, 2020

MaggieCabrera commented Dec 10, 2020

jasmussen commented Dec 10, 2020

kjellr commented Dec 10, 2020 • edited

jasmussen commented Dec 10, 2020

MaggieCabrera commented Dec 10, 2020

jasmussen commented Dec 10, 2020

kjellr left a comment

jorgefilipecosta commented Dec 10, 2020

aaronrobertshaw commented Dec 11, 2020

jorgefilipecosta commented Dec 14, 2020

mtias commented Dec 18, 2020

carolinan commented May 12, 2021

MaggieCabrera commented May 20, 2021

MaggieCabrera commented Dec 10, 2020 •

edited

scruffian commented Dec 10, 2020 •

edited

kjellr commented Dec 10, 2020 •

edited