Skip to content

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

7 participants