Block Library - Buttons: Add Typography support

[lukecarbis]

Description

Adds support for font size and font family to the Button Block

How has this been tested?

In TT1 Blocks and Twenty Twenty-One

• Editing a button in a single Post
• Editing a button in the Site Editor

Screenshots

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).

[lukecarbis]

Closes #29112.

[paaljoachim]

Thanks for adding typography to the Buttons block, Luke!

Changing sizes work fine, but adjusting the numbers having custom sizes look like this:

Custom-typography-change-button.mp4

Perhaps Marcus and/or Kerry can take a closer look.
@mkaz @gwwar

[gwwar]

Thanks for taking this one on @lukecarbis ! I also see the behavior that @paaljoachim noted. The code here looks correct to add support, but it looks like we'll need a few additional changes to the Button block to make sure this works correctly with custom font sizing.

Let us know if you'd be comfortable diving further into that, or if folks should help!

So I 🔍 tested a bit and custom font sizes work with TT1 Blocks but do not on Twenty Twenty.

TT1Blocks.mp4

twentytwenty.mp4

Inspecting the serialized block code we do see the custom font sizes saved, however this is applied to the div wp-block-button instead of the link. This means that other CSS rules win vs our custom value.

As a general hook applying the custom font style to the topmost block makes sense, so we might need to 🤔 a bit on the best way to fix this.

[lukecarbis]

@gwwar I'll take another shot at this next week once the public holidays are out of the way. I'll let you know if it's too tough for me.

[lukecarbis]

@gwwar @paaljoachim I've made a small change that resolves this problem. Ready for you to take another look.

[gwwar]

Closer! This works in the editor but we don't see that reflected on the published page in Twenty Twenty. We'll also want to make sure we add the new class here:

gutenberg/packages/block-library/src/button/save.js

Lines 48 to 50 in 564a6c0

	const wrapperClasses = classnames( className, {
	[ `has-custom-width wp-block-button__width-${ width }` ]: width,
	} );

edit	published page

[lukecarbis]

@gwwar Thanks for your review… and your patience! I've added the custom class to the save state now.

Do you think it would be better to separate this out into a custom function? Similar to the way we're doing it with getColorAndStyleProps()? I suspect that might be a bit overkill, but wanted to raise the question anyway.

[gwwar]

Nice, thanks @lukecarbis this works well! I verified that both the edit/publish view is updated.

Do you think it would be better to separate this out into a custom function?

What we have here is good for now!

I did spot one corner case with styling not applying to a Document -> Button. To see this visit /wp-admin/post-new.php?gutenberg-demo and try to update the font size on the "Help build Gutenberg" button.

It looks like we also don't respect Width Settings in this case, so I think it'd be okay to leave for a follow up fix. I can approve this one as is and merge, but let me know if you'd rather fix that case in this PR.

Twenty Twenty + Document -> Button

[lukecarbis]

@gwwar I'd be happy to take a look that bug – my guess is that the Document > Button doesn't have a wrapper around the button for some reason. But I agree, that's probably best addressed in a separate PR. Thanks for approving!

[gwwar]

I'd be happy to take a look that bug

Sounds great! Feel free to add me as a reviewer.