Skip to content

Conversation

karthikeya-io
Copy link
Contributor

@karthikeya-io karthikeya-io commented Jun 10, 2025

What?

Closes #70318

This PR updates the SocialLinksEdit component to:

  • Introduce a "Default" option for icon size in the toolbar dropdown.
  • Ensure the "Default" state maps to undefined in the size attribute instead of hardcoding has-normal-icon-size
  • Ensure that resetting the size removes the has-normal-icon-size class.

Why?

Currently, when the icon size is set and reset, the has-normal-icon-size class remains in the markup. This overrides custom styles set via theme.json or additional CSS due to higher specificity.

By introducing an explicit "Default" option that doesn't apply a class, this change ensures the block respects styles defined in theme.json. It also improves clarity in the UI, indicating when the default size is being used.

How?

  • Added a "Default" option with an empty string value ('') to the SelectControl options.
  • Updated logic to treat this as undefined internally.
  • Ensured that selecting or resetting to "Default" results in no size class being written to the block.

Testing Instructions

  1. Insert a Social Links block into a post or page.
  2. Open the block settings sidebar.
  3. Expand the "Icon size" dropdown:
  • Confirm that "Default" is now an option.
  1. Select other sizes like Small, Normal, Large.
  • Confirm the correct class is applied (e.g., .has-small-icon-size).
  1. Switch back to "Default" or Reset the size:
  • Confirm the class is removed from markup.
  1. Add font size overrides in theme.json for the Social Links block.
  • Confirm that they now apply correctly when "Default" is selected.

Testing Instructions for Keyboard

Same

Screenshots or screencast

When the following style is added to theme.json

"core/social-links": {
		"typography": {
			"fontSize": "var(--wp--preset--font-size--x-large)"
		}
	},

After Icon size is reset

Before After
image image

@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended [Block] Social Affects the Social Block - used to display Social Media accounts labels Jun 11, 2025
@karthikeya-io karthikeya-io marked this pull request as ready for review June 11, 2025 11:17
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @EldarAgalarov.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: EldarAgalarov.

Co-authored-by: karthikeya-io <karthikeya01@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! I believe this is the ideal approach to solve the fundamental problem.

@t-hamano t-hamano merged commit 0eb8977 into WordPress:trunk Jun 12, 2025
85 of 103 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.1 milestone Jun 12, 2025
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
…WordPress#70380)

Unlinked contributors: EldarAgalarov.

Co-authored-by: karthikeya-io <karthikeya01@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Social Affects the Social Block - used to display Social Media accounts [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

core/social-links: Cannot override styles via Theme.json
3 participants