Twenty Twenty-One: Social icons have duplicate height and width values

[Max dAyala]

This applies to the twenty twenty-one bundled theme.

Refer to the class:

Twenty_Twenty_One_SVG_Icons

in the file:

class-twenty-twenty-one-icons.php

The header of the file says that the svg icons should not have a height or width specified. This is because the height and width are added later by the get_svg() function.

The social icons, however, have the height and width specified in the svg definitions. This means that the height and width attributes end up appearing twice in the final string representing the svg element. This is obviously invalid XML, although browsers will still parse it.

Here is example output obtained from viewing the source of a web page in the browser:

<svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">

Note that the user interface icons in the same source file do not have the height and width specified. These appear to be correct.

Hence, unless there is a good reason not to, the height and width should be removed from the social icon svg definitions to avoid confusion and potential problems when people create child or custom themes based on these svg definitions.

[Laxman Prajapati]

Hi @max-dayala

Thanks for the ticket and welcome to WordPress Trac!

1) Could you please share a screenshot of view-source of the browser OR "Inspect Elements"?
2) Please confirm the file name with the directory path of it?

We can't fine this file in "twentytwentyone" theme on WordPress 5.8.1 version.

We have added the social icons from wordpress admin on one page and it's working fine from my view. Please find attached screenshot with the single time value of the height and width in the svg icon.

Thanks!

[sabernhardt]

SVG social icons in secondary navigation

[Laxman Prajapati]

What are the step you follow to add svg icons in secondary navigation menu?

Please describe me?

[sabernhardt]

To reproduce the error:

1. Go to Appearance > Menus and create a new menu.
2. Assign it to the Secondary menu location.
3. Add custom links to your menu, including some with various social URLs. For example, you could use WordPress.com and/or WordPress.org.
4. Save menu.
5. Visit the site and view source for the footer markup.
6. Observe that the width and height attributes are included twice for each SVG in the footer menu links. (In Firefox, the duplicate attributes are highlighted in red.)

The Secondary menu's $social_icons array needs editing in ​classes/class-twenty-twenty-one-svg-icons.php.

The primary navigation's open and close buttons do not have the duplicate attributes because the $icons array does not include the width and height for those graphics.

[Laxman Prajapati]

Static height and width removed from svg icons.

[Laxman Prajapati]

Hi @sabernhardt

Thanks for details and clarification for the same.

We have removed the static height and width from the svg icons and after that we have checked with the social svg icons with header,content and footer, It's working fine from my side.

Thanks!

[Laxman Prajapati]

Screenshot for the same.

[mukesh27]

Thanks for the patch.

54208.patch​ working fine for me.

Marking this ticket for commit.

[SergeyBiryukov]

In 51893:

Twenty Twenty-One: Remove duplicate width and height values from social icons.

These values are added dynamically by the Twenty_Twenty_One_SVG_Icons::get_svg() method and are not needed in the source array.

Follow-up to [49216].

Props max-dayala, laxman-prajapati, sabernhardt, Presskopp, mukesh27.
Fixes #54208.