Ticket #39350: 39350.1.patch

src/wp-content/themes/twentyseventeen/inc/icon-functions.php

@@ -163 +163 @@
 add_filter( 'nav_menu_item_title', 'twentyseventeen_dropdown_icon_to_menu_link', 10, 4 );
 
 /**
+ * Display SVG social link icons in custom menu widget.
+ *
+ * @param  array   $nav_menu_args An array of arguments passed to wp_nav_menu().
+ * @param  WP_Term $nav_menu      Nav menu object.
+ * @param  array   $args          Display arguments for the current widget.
+ * @param  array   $instance      Array of settings for the current widget.
+ * @return array   $nav_menu_args An array of arguments passed to wp_nav_menu() with social icons.
+ */
+function twentyseventeen_widget_social_menu( $nav_menu_args, $nav_menu, $args, $instance ) {
+        if ( ! has_nav_menu( 'social' ) ) {
+                return $nav_menu_args;
+        }
+
+        $menu_location = 'social';
+        $menu_name     = wp_get_nav_menu_object( get_nav_menu_locations( $menu_location )[ $menu_location ] )->name;
+
+        if ( $menu_name === $nav_menu->name ) {
+                $nav_menu_args['theme_location']  = 'social';
+                $nav_menu_args['link_before']     = '<span class="screen-reader-text">';
+                $nav_menu_args['link_after']      = '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) );
+                $nav_menu_args['menu_class']      = 'social-links-menu';
+                $nav_menu_args['depth']           = 1;
+                $nav_menu_args['container_class'] = 'widget-social-navigation';
+        }
+
+        return $nav_menu_args;
+}
+add_filter( 'widget_nav_menu_args', 'twentyseventeen_widget_social_menu', 10, 4 );
+
+/**
  * Returns an array of supported social links (URL and icon name).
  *
  * @return array $social_links_icons

src/wp-content/themes/twentyseventeen/style.css

@@ -2305 +2305 @@
 
 /* Social nav */
 
-.social-navigation {
+.social-navigation,
+.widget-social-navigation {
         font-size: 16px;
         font-size: 1rem;
         margin-bottom: 1em;
 }
 
-.social-navigation ul {
+.social-navigation ul,
+.widget-social-navigation ul {
         list-style: none;
         margin-bottom: 0;
         margin-left: 0;
 }
 
-.social-navigation li {
+.social-navigation li,
+.widget-social-navigation li {
         display: inline;
 }
 
-.social-navigation a {
+.social-navigation a,
+.widget-social-navigation a {
         background-color: #767676;
         -webkit-border-radius: 40px;
         border-radius: 40px;
@@ -2334 +2338 @@
 }
 
 .social-navigation a:hover,
-.social-navigation a:focus {
+.social-navigation a:focus,
+.widget .widget-social-navigation a:hover,
+.widget .widget-social-navigation a:focus {
         background-color: #333;
 }
 
-.social-navigation .icon {
+.widget .widget-social-navigation a:hover,
+.widget .widget-social-navigation a:focus {
+        webkit-box-shadow: none;
+        box-shadow: none;
+        color: #fff;
+}
+
+.social-navigation .icon,
+.widget-social-navigation .icon {
         height: 16px;
         top: 12px;
         width: 16px;
@@ -2345 +2359 @@
         vertical-align: top;
 }
 
+.widget .widget-social-navigation ul li {
+        border-bottom: 0;
+        border-top: 0;
+        padding: 0;
+}
+
 /* Site info */
 
 .site-info {