Make WordPress Core

Opened 3 years ago

Closed 2 weeks ago

#54173 closed feature request (wontfix)

Twenty Twenty-One: Social icons

Reported by: marcomilone's profile marco.milone Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch 2nd-opinion close
Focuses: Cc:



in that beautiful theme
mail is take into account and
and mailto: links are shown with an envelope icon

shouldn't be the same with a
tel: link ? (a phone icon)

IMHO yes

Attachments (2)

54173.patch (13.8 KB) - added by hilayt24 3 years ago.
Phone svg added in the social icon array
54173.2.patch (12.6 KB) - added by hilayt24 3 years ago.
package-lock.json removed

Download all attachments as: .zip

Change History (11)

#1 @SergeyBiryukov
3 years ago

  • Component changed from General to Bundled Theme
  • Summary changed from twentytwentyone social icons to Twenty Twenty-One: Social icons

3 years ago

Phone svg added in the social icon array

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.

3 years ago

#3 @ryokuhi
3 years ago

  • Focuses accessibility removed

Hello @marcomilone, and thanks for the suggestion.
We reviewed this ticket during the weekly Accessibility Team's bug-scrub.
We agreed that this is a good idea, but it's only loosely related to accessibility (as the associated icon can increase comprehension for low-literacy populations): as such, I'm removing the focus.

#4 @sabernhardt
3 years ago

  • Keywords has-patch needs-refresh added

@hilayt24 Could you re-create the patch from the root directory, without the package-lock file?

#5 @hilayt24
3 years ago

@sabernhardt sure

3 years ago

package-lock.json removed

#6 @hilayt24
3 years ago

  • Keywords needs-refresh removed

#7 @sabernhardt
3 years ago

  • Keywords 2nd-opinion added

I'm not sure we should automatically replace a visible phone number with an icon in Twenty Twenty-One. I have added phone number links—among other text links—on clients' sites, where I would not want the number changed to an icon only. On the other hand, this change would make the call link visually consistent with (most) other links in the secondary menu location. Ultimately, this might benefit the majority of users who add links in that menu, but I think some other people would not be happy about it.

In Seedlet 1.1.7, that theme added a phone icon to the social group, after Twenty Twenty-One became available. With bundled themes, though, we closed requests for new Twenty Twenty icons in favor of creating a filter (see ticket:48713#comment:7). (For what it's worth, I would prefer a phone icon instead of the generic link icon in Twenty Seventeen and Twenty Twenty.)

Regardless of how we decide for this ticket, you could use Twenty Twenty-One's existing filters. The SVG in the example below comes from Seedlet, as others did for Twenty Twenty-One.

function wptrac54173_twenty_twenty_one_social_icons_map( $social_icons_map ) {
	$social_icons_map['phone'] = array(

	return $social_icons_map;
add_filter( 'twenty_twenty_one_social_icons_map', 'wptrac54173_twenty_twenty_one_social_icons_map' );

function wptrac54173_twenty_twenty_one_svg_icons_social( $social_icons ) {
	$social_icons['phone'] = '<svg viewBox="-5 -5 24 24" version="1.1" xmlns=""><path fill-rule="evenodd" clip-rule="evenodd" d="M1 1l1 4.5L4 3 3 1H1zm7.5 11l4.5 1v-2l-2-1-2.5 2z" fill="currentColor"/><path d="M2 5.5l-.732.163a.75.75 0 001.318.306L2 5.5zM1 1V.25a.75.75 0 00-.732.913L1 1zm3 2l.586.469a.75.75 0 00.085-.804L4 3zM3 1l.67-.335A.75.75 0 003 .25V1zm10 12l-.163.732A.75.75 0 0013.75 13H13zm-4.5-1l-.469-.586a.75.75 0 00.306 1.318L8.5 12zm4.5-1h.75a.75.75 0 00-.415-.67L13 11zm-2-1l.335-.67a.75.75 0 00-.804.084L11 10zM2.732 5.337l-1-4.5-1.464.326 1 4.5 1.464-.326zm.682-2.806l-2 2.5 1.172.938 2-2.5-1.172-.938zM2.33 1.335l1 2 1.342-.67-1-2-1.342.67zM1 1.75h2V.25H1v1.5zm12.163 10.518l-4.5-1-.326 1.464 4.5 1 .326-1.464zM12.25 11v2h1.5v-2h-1.5zm-1.585-.33l2 1 .67-1.34-2-1-.67 1.34zm-1.696 1.916l2.5-2-.938-1.172-2.5 2 .938 1.172zM.25 1C.25 8.042 5.958 13.75 13 13.75v-1.5C6.787 12.25 1.75 7.213 1.75 1H.25z"></path></svg>';

	return $social_icons;
add_filter( 'twenty_twenty_one_svg_icons_social', 'wptrac54173_twenty_twenty_one_svg_icons_social' );
Last edited 3 years ago by sabernhardt (previous) (diff)

#8 @karmatosed
3 weeks ago

  • Keywords close added

I'm not sure we should automatically replace a visible phone number with an icon in Twenty Twenty-One.

I also don't agree with this approach, particularly when it wasn't the case in a theme already and would be a change in expectations. I would actually recommend for now closing this for a few reasons:

  • This feels like something would have been decided at the time of the theme.
  • No theme is going to solve all cases or needs, even if a default theme.
  • Sometimes having additional functionality is ok in child themes or plugins.
  • Other themes have options for those wanting this which can either be used as an example in code to take to child theme or swapped to.
  • This theme has had a particular behavior for a while.

Thank you everyone for your collaboration, in adding the close keyword it doesn't mean discussion is stopped it just means we focus on if we should do that or there is information to continue to explore.

#9 @karmatosed
2 weeks ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

As this has been given some time for feedback, I am going to progress this as recommended to close. Thank you everyone.

Note: See TracTickets for help on using tickets.