Social Icons block label is using WP-Admin styles for text

[bgardner]

Description

When the Social Icons block is being used with Link settings > Show labels option enabled, the WP-Admin styles are kicking in for the text in the editor. (Front end is using the theme font, while back end is using system font).

Step-by-step reproduction instructions

1. Add Social Icons
2. Enable Link settings > Show labels option
3. See system fonts loaded from the following CSS:

.edit-post-visual-editor .components-button {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
    font-size: 13px;
    padding: 6px 12px;
}

Screenshots, screen recording, code snippet

Environment info

WordPress 6.1.1, Gutenberg 14.8

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

Yes

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

Yes

[jordesign]

Confirmed this in testing - still present in WP 6.2.2

[bgardner]

Any updates on this? Seems like a relatively light fix, no?

[himanshupathak95]

Hey @bgardner, Thanks for reporting this.

I can confirm that the Social Icons block label styling issue reported in WordPress 6.1.1 and Gutenberg 14.8 continues to persist in the latest WordPress 6.8 and Gutenberg 19.7 versions.

Social Icons block labels use WP-Admin system fonts in the editor when "Show labels" is enabled, overriding theme typography.

Screenshots

As you correctly mentioned, the fix must be relatively light and simple.

I would like to take a swing at this.