Button Block: Can't set typography

[shimotmk]

Description

If typography is set for the button element in theme.json, the settings in the block will not work.

Step-by-step reproduction instructions

1. Set Twenty Twenty-Four theme
2. Place Button block
3. Set the Appearance to Bold, etc.

You can see that the Appearance has not changed in either the editor screen or the front screen.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.6.1
• Gutenberg 19.0.0

Please confirm that you have searched existing issues in the repo.

• [X] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [X] Yes

[talldan]

Confirmed, I can also reproduce this.

It looks like the block styles apply to the button wrapper wp-block-button, whereas the element styles apply to the inner element wp-element-button and that's why they take precedence.

I tested 6.5, and it was the same in that version, so it doesn't seem to be a new bug.

[aaronrobertshaw]

@talldan hit the nail on the head.

Global styles for the button block type will also target the inner element. The button block seems to have some ad hoc styles to force inheritance but they don't seem to cover all typography styles.

For example:

.wp-block-button[style*=font-weight] .wp-block-button__link {
    font-weight: inherit;
}

There might be two options for a fix;

1. Add some extra styles to force inheritance
2. Update the button block to skip serialization and manually apply styles to the inner element and include a deprecation to migrate old buttons where the styles are still on the wrapper.

Option 1 might be the simplest but would need to be updated for any new typography supports added in the future.