Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Paragraph Block] add font family support #37586

Merged
merged 1 commit into from
Dec 22, 2021

Conversation

MaggieCabrera
Copy link
Contributor

@MaggieCabrera MaggieCabrera commented Dec 22, 2021

Description

Closes #36234

This PR adds font family support to the paragraph block. I don't know if there's a reason why this wasn't added before, but I agree with the reasons over at #36234. I've encountered a few cases where the paragraph block was the best option in terms of markup but wanted the text to look like a heading block instead.

How has this been tested?

Tested this using Seedlet Blocks.
To test use a theme that provides multiple fonts, check that you can change the font family to the paragraph block, it should look like the screenshot.

Screenshots

Screenshot 2021-12-22 at 13 00 00

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • 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 (please manually search all *.native.js files for terms that need renaming or removal).

@MaggieCabrera MaggieCabrera merged commit 2336519 into trunk Dec 22, 2021
@MaggieCabrera MaggieCabrera deleted the add-fontfamily-support-paragraph branch December 22, 2021 14:38
@github-actions github-actions bot added this to the Gutenberg 12.3 milestone Dec 22, 2021
@aaronrobertshaw
Copy link
Contributor

I don't know if there's a reason why this wasn't added before, but I agree with the reasons over at #36234.

There was a desire to delay surfacing this block support until we have a better way to manage custom fonts. A summary from a chat with @mtias can be found in #34064 (comment)

My understanding was we'd only keep font-family as an option for the blocks that already had opted into that support and ensure it wasn't displayed as a default control within the typography panel.

@MaggieCabrera
Copy link
Contributor Author

There was a desire to delay surfacing this block support until we have a better way to manage custom fonts. A summary from a chat with @mtias can be found in #34064 (comment)

My understanding was we'd only keep font-family as an option for the blocks that already had opted into that support and ensure it wasn't displayed as a default control within the typography panel.

Should we revert this then? I wish we could have this in the block markup even if the UI doesn't show it to the user

@apeatling
Copy link
Contributor

apeatling commented Jan 3, 2022

I think we should revert this based on previous conversations linked. Let's please get more reviews and ping folks working in this area before merging, we are happy to help.

@alan-la-chen-478
Copy link

alan-la-chen-478 commented Jul 13, 2022

Based on the committed file, a temporarily hack:

add_filter('register_block_type_args', function($args, $name) {
    if ($name == 'core/paragraph') {
        $args['supports']['typography']['__experimentalFontFamily'] = true;
    }

    return $args;
}, 10, 2);

or, to show up as default controls:

add_filter('register_block_type_args', function($args, $name) {
    if ($name == 'core/heading') {
        $settings['supports']['typography']['__experimentalFontFamily'] = true;
        $settings['supports']['typography']['__experimentalDefaultControls']['fontFamily'] = true;
    }

    return $args;
}, 10, 2);

will do the trick for now until official solution.

@kevingobert
Copy link

kevingobert commented Jul 29, 2022

@alan-la-chen-478 Thank
I tested your small hack but I have not core blocks in the filter. I have WooCommerce blocks and Gravity block but I don't see core/heading and core/paragraph. Do you know the reason ?

Edit:

I found a solution. I did it in JavaScript and it works

const { addFilter } = wp.hooks
import { set as _set } from 'lodash'

function addFontFamillySupport(settings) {
  const names = ['core/heading', 'core/paragraph']

  if(names.includes(settings.name))
    settings = _set(settings, 'supports.typography.__experimentalFontFamily', true)
  
  return settings
}

addFilter('blocks.registerBlockType', 'koa/font-familly-supports', addFontFamillySupport)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Paragraph Affects the Paragraph Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Font family support for paragraph block
6 participants