Blockbase: Non default font families don't update text styling properly in Button block

[jeyip]

Description

This appears to be a conflict with button block styling specificity, and not the webfonts API.

When a font is registered with the new webfonts API, the button block doesn't respect font selection.

Steps to reproduce

1. Set up the new webfonts API and register a webfont ( link )
2. Navigate to the post editor
3. Add a new button block with some text
4. Open the block settings menu
5. Modify the font family selection in the typography panel and choose the newly registered font
6. Verify that the button text font-family does not change
7. Verify that other blocks with adjustable font families ( like site title or tagline ) do work as expected

What you expected to happen

Selecting the newly registered web font would change the font family of the button text.

What actually happened

Selecting the newly registered web font did not change the font family of the button text.

[Addison-Stavlo]

Nothing this may be a blockbase / universal-theme issue.

[Addison-Stavlo]

cc @jeffikus to get this on your radar, some restricting font styles settings in blockbase break this functionality.

[pbking]

This might be happening because we have a separate variable for buttons fonts in Blockbase (and children). This was primarily because many non-button-block buttons still needed to be styled with the same settings we were applying to button blocks.

We're trying to transition out of needing to do that, however we might not have everything in place to accomplish this in WP 6 (sans-Gutenberg).

[pbking]

I tested with the Fonts management change to Blockbase (which should be landing soon-ish). Changing the global button font-family worked as expected, but the per-block of the same wasn't working as expected.

[pbking]

So the problem is a little deeper than just Blockbase.

Setting the font-family attribute for the Button Block via theme.json or the Global Styles FSE form applies that font via the selector: .wp-block-button__link. However when assigning the font-family via the block it is applied via the class .has-FONTFAMILY-font-family on the wp-block-button element (which is the parent of the `.wp-block-button__link element). Thus whatever is assigned via Global Styles wins.

This is a problem with Gutenberg rather than now Blockbase is built to customize buttons (except for the fact that Blockbase explicitly defines the Button block's font family). There may be a work-around for themes where the Button font-family is the default font.

This may hopefully be fixed by transitioning to the Button ELEMENT styling instead of button BLOCK styling (but this is not available in WP 6.0).

[Addison-Stavlo]

So the problem is a little deeper than just Blockbase.
This is a problem with Gutenberg

Oo good find! I can repro as well on TT2 as well this way:

• Go to Global Styles -> Blocks -> Button -> Typography. Set a font family.
• Go to an individual button block and try to set a different font family.
• See that it does not update and uses the block level global styles setting.

Where we would expect individual block level settings to override the Global Styles block type setting.

[Addison-Stavlo]

WordPress/gutenberg#42398 - Gutenberg issue to track here

[pbking]

Thank you @Addison-Stavlo! I'm going to close this issue as I don't think that Blockbase could/should do anything about it. Hoping for a speedy fix!