Add font family and text-decoration typography supports to paragraph blocks

[randhirexpresstech]

This PR adds some missing typography like font family and text-decoration supports to paragraph block, which are already available in Gutenberg.
With the help of this PR block theme developers and website admin will have more customization options to create more beautiful website and design patterns.
In some places, designers require to have different typography as compare to global typography like font-family, text-decoration etc. to create unique designs.
In the absence of these typography settings on block level, block theme developers are rely on custom css for these typography options which are not editable by website admin using frontend editor tools. So this PR will provide more flexibility and help admin to get more controls over design and UI elements.

Testing Steps

1. Activate Twenty Twenty-Two theme
2. Add a new page
3. Add a paragraph.
4. Assign font-family and text-decoration.
5. Publish the page
6. View and check the page for assigned typography options

Please check this screen-cast
For more details please check this comment

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @randhirexpresstech! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[ramonjd]

Related discussions on typography defaults over at #35604

[talldan]

Thanks for working on this @randhirexpresstech. I've added some reviewers who will be more aware of which blocks are ready for which particular features.

[amustaque97]

Hi @randhirexpresstech, thank you for working on this. 🥳 There is a minor review comment from my side. Rest of the changes looks good to me. 😃

[amustaque97]

Also I'm not 100% sure if this is out of scope of the current PR or not. It would be really appreciated if we can show what default font is? I'm sharing few screenshots both for paragraph and heading.I got confused why style didn't change when I changed from default font to the same actual font. Another benefit is user will not waste time by selecting same default font again. 😅

Heading

Paragraph

cc @ntsekouras @paaljoachim

[marctison75]

@mtias would you please confirm that we can use the new font-family setting for the Heading block #40970, and that it won't be reverted in a future Gutenberg release?

[ndiego]

Thanks @randhirexpresstech, I updated the title accordingly. Generally, it is easier to break out enhancements per block.

Can someone point me to the technical issues that are blocking the addition of font-family to typography controls? We already have font-family on a number of Core blocks, not including the Heading block. I am not aware of any issues impacting those blocks that support font-family but obviously could be missing something. If there are issues, I would like to help get them fixed. This would be a HUGE win for the community to expand typography controls.

[andrewserong]

@ndiego, if I'm reading the earlier comments right, the issue to opting-in more blocks to the font-family support was due to the Webfonts API's enqueuing support (this comment: #39642 (comment))

It looks like the Webfonts API work is being tracked in this issue: #41479 and the programmatic enqueueing is in #40363 and #40386 — if I understand correctly from those issue descriptions, the problem with opting-in prematurely could be that for a user who has access to the control to select the font, when they interact with the control, the font they've selected may not actually be available / enqueued in the editor at that time, so they will not see the appropriate font that they've selected.

I haven't been involved in working in that particular area, but just thought I'd share those links in case it helps give a bit more context to the discussions (I've only done a quick read of the issues, I haven't tested out the current state of things yet 🙂)

[ndiego]

@mtias and/or @hellofromtonya would either of you be able to provide any clarification on the discussion above. I assume that for 6.1 we want to have fonts stabilized and at a place where we can enable font-family across nearly all blocks. This has been a very common "ask" in the community.

Currently, we have font-family enabled across a handful of blocks but obviously not all. Time is slipping by quickly and I would like to have PRs ready to go for all blocks we want to have font-family support, so as soon as the necessary font API PRs are merged, we can have block supports updated accordingly. Let me know what you think!

[ndiego]

Just created this tracking issue for font-family support. It's interesting to see how many blocks do and don't support this feature 🤔 #42646

[aaronrobertshaw]

🎉 We've got a green light to add missing typography supports as part of greater efforts to achieve consistency in our design tools.

If it interests you, you can track the overall progress towards consistent block support adoption in: #43241. Or, there's a tracking issue specifically for typography supports.

With that said, @randhirexpresstech, would you mind updating this PR also to include adding the missing text-decoration support to the paragraph block? i.e. "__experimentalTextDecoration": true,

If you are short on time, I'd be happy to push the required changes or create an alternate PR. Thanks!

[mtias]

The issues with the webfonts API are related to the distinction of setting a font family for a block type and setting it for a block instance. Block instances should only get access to already vetted fonts by the global styles declaration, and users should not be encouraged to setting font-family locally, which is why it should not be visible by default (ellipsis menu) on block instances. For block types, access to font family should be consistent and clear, and we also need to expand the reporting of what blocks are using what font on the global styles typography settings.

[randhirexpresstech]

tada We've got a green light to add missing typography supports as part of greater efforts to achieve consistency in our design tools.

If it interests you, you can track the overall progress towards consistent block support adoption in: #43241. Or, there's a tracking issue specifically for typography supports.

With that said, @randhirexpresstech, would you mind updating this PR also to include adding the missing text-decoration support to the paragraph block? i.e. "__experimentalTextDecoration": true,

If you are short on time, I'd be happy to push the required changes or create an alternate PR. Thanks!

Thanks @aaronrobertshaw for the good news and providing me such a great opportunity to contribute in WordPress gutenberg repository. I am happy to update this PR to include adding the missing text-decoration support to the paragraph block? i.e. "__experimentalTextDecoration": true, as per requirement.

[aaronrobertshaw]

Thanks for updating this PR @randhirexpresstech 👍

This is testing well for me.

✅ Font family and text decoration selections are applied in the block editor
✅ Selections are reflected on the frontend
✅ New controls are not displayed by default (they're only available via the ellipsis menu)
✅ Font family is available by default in the paragraph block's Global Styles panel

Click for block editor demo

Screen.Recording.2022-08-22.at.3.52.15.pm.mp4

Click for Paragraph block's Global Styles panel demo

Screen.Recording.2022-08-22.at.4.03.42.pm.mp4

The failed e2e tests are currently being re-run. When they pass this should almost be ready to land.

@randhirexpresstech It might also help for clarity and posterity if you could update the PR description here to reflect the actual changes in the current version of the PR i.e. make the description about updating the paragraph typography block supports.

[randhirexpresstech]

Thanks for updating this PR @randhirexpresstech +1

This is testing well for me.

white_check_mark Font family and text decoration selections are applied in the block editor white_check_mark Selections are reflected on the frontend white_check_mark New controls are not displayed by default (they're only available via the ellipsis menu) white_check_mark Font family is available by default in the paragraph block's Global Styles panel

Click for block editor demo
Click for Paragraph block's Global Styles panel demo
The failed e2e tests are currently being re-run. When they pass this should almost be ready to land.

@randhirexpresstech It might also help for clarity and posterity if you could update the PR description here to reflect the actual changes in the current version of the PR i.e. make the description about updating the paragraph typography block supports.

Thanks @aaronrobertshaw for approving this PR. As per requirement, I have updated title and description of this PR for more clarity.

[github-actions]

Congratulations on your first merged pull request, @randhirexpresstech! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!