Make WordPress Core

Opened 5 years ago

Closed 9 months ago

Last modified 9 months ago

#45950 closed defect (bug) (fixed)

Twenty Nineteen: Fix social media icons to use the correct height & width attribute

Reported by: crunnells's profile crunnells Owned by: peterwilsoncc's profile peterwilsoncc
Milestone: 6.4 Priority: normal
Severity: normal Version: 5.0.3
Component: Bundled Theme Keywords: has-screenshots good-first-bug has-patch
Focuses: Cc:

Description

This comes from a PR in GitHub: https://github.com/WordPress/twentynineteen/pull/754

The PR in question proposes to change social icon sizes to 26px, because of what _seems_ to be an erroneous setting in twentynineteen_nav_menu_social_icons(). I suggest removing the 26, since the CSS is set to show the icons at 32px, which overrides the 26px _anyway_.

Maybe update the default from 24 to 32 as well?

Attachments (3)

24px SVG icon.png (45.9 KB) - added by mukesh27 5 years ago.
32px SVG icon.png (46.8 KB) - added by mukesh27 5 years ago.
45950.diff (802 bytes) - added by tahmidulkarim 20 months ago.

Download all attachments as: .zip

Change History (18)

#1 @mukesh27
5 years ago

@crunnells Yes theme use css of 32 height and width of SVG icon and icon render 26 social and link icon with 24.

#2 @mukesh27
5 years ago

  • Component changed from General to Bundled Theme

#3 @laurelfulford
5 years ago

  • Keywords 2nd-opinion added

Thanks @mukesh27 and @crunnells!

Just to make sure: @allancole or @kjellr, was the smaller size (24 or 26) meant to override anything in the social menu? As Chris pointed out, the CSS is setting the actual size (32); I agree that switching it to 32 in the code as well makes sense if that's the intended display size. I just want to make sure I'm not missing something here - thanks!

#4 @laurelfulford
5 years ago

  • Keywords has-screenshots needs-patch added; 2nd-opinion removed
  • Milestone changed from Awaiting Review to Future Release

Got confirmation that this can be switched to 32 in twentynineteen_nav_menu_social_icons(), so the code matches how the icons actually display.

#5 @desrosj
20 months ago

  • Keywords good-first-bug added

#6 @tahmidulkarim
20 months ago

  • Keywords has-patch added; needs-patch removed

I have changed it to 32. Patch attached.

This ticket was mentioned in PR #3668 on WordPress/wordpress-develop by dkeech.


18 months ago
#7

I updated the instances of svg icons in icon-functions.php to 26px from 24px.

Trac ticket: https://core.trac.wordpress.org/ticket/45950

This ticket was mentioned in PR #3668 on WordPress/wordpress-develop by dkeech.


18 months ago
#8

I updated the instances of svg icons in icon-functions.php to 26px from 24px.

Trac ticket: https://core.trac.wordpress.org/ticket/45950

This ticket was mentioned in PR #5060 on WordPress/wordpress-develop by @JordanPak.


9 months ago
#9

Trac ticket: #45950

#10 @JordanPak
9 months ago

@tahmidulkarim I tested this patch and created an updated pull request for it: https://github.com/WordPress/wordpress-develop/pull/5060. LGTM.

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/45950/45950.diff

Environment

  • OS: Linux 5.15.49-linuxkit-pr x86_64
  • Web Server: nginx/1.25.2
  • PHP: 7.4.33
  • WordPress: 6.4-alpha-56267-src
  • Browser: Chrome 115, FireFox 115, Safari 15.6.1
  • Theme: Twenty Nineteen
  • Active Plugins: None

Actual Results

✅ Issue resolved with patch. Inline <svg> width and height attributes are 32, which matches the dimensions applied with CSS.

Automated Test Results

I created an updated PR to run automated tests/actions and they all passed except a seemingly unrelated PHP 7.4 + Multisite + MySQL 8 test.

#11 @peterwilsoncc
9 months ago

  • Milestone changed from Future Release to 6.4
  • Owner set to peterwilsoncc
  • Status changed from new to assigned

@peterwilsoncc commented on PR #3668:


9 months ago
#12

@dkeech Can you drop a link to your WordPress profile in this this PR? I'm about to commit an iteration of this patch to WordPress and will add you to the props list once I hear back.

If you visit https://profiles.wordpress.org/me/profile/edit/group/1/ you can link your GitHub and WordPress profiles to make the process smoother in the future.

Thanks,
Peter

#13 @peterwilsoncc
9 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 56447:

Bundled Theme: Twenty Nineteen: Improve social media icon dimension attributes.

Set the default width and height attributes of the SVG social icons to match the dimensions used within the CSS. This increases the attributes to 32px x 32 px.

Props crunnells, mukesh27, laurelfulford, tahmidulkarim, jordanpak.
Fixes #45950.

@peterwilsoncc commented on PR #5060:


9 months ago
#14

Merged in r56447 / 40df0ec5e2976da0e1ab4fb45788964ca04fb661

@peterwilsoncc commented on PR #3668:


9 months ago
#15

Iteration of this PR committed in r56447 / 40df0ec5e2976da0e1ab4fb45788964ca04fb661, Dan's props to be added manually.

Note: See TracTickets for help on using tickets.