Trying to add a custom social icon to a Twenty Twenty-One child theme

Question

I am trying to add an icon to the Twenty Twenty-One social icons, but having trouble registering it.

This support article refers to a Themes field guide for WordPress 5.5 which gives instructions on how to add a custom icon and hook it in so that it appears when the relevant url is typed in as a menu item custom link.

I copied the function from the Field Guide, changing the hook to match 2021 theme rather than 2020 (since the hook in twentytwentyone/classes/class-twenty-twenty-one-svg-icons.php is twenty_twenty_one_svg_icons_social).

Here are the functions I added to functions.php: (apologies -- including full svg vectors in case they are causing the error)

function mychildtheme_twenty_twenty_one_social_icons_map( $icons ) {
    $icons['rhs-calendar'] = array(
        'rhs-1.test',
        'rhs-1.test/events/list/',
    );

    return $icons;
}
add_filter( 'twenty_twenty_one_social_icons_map', 'mychildtheme_twenty_twenty_one_social_icons_map' );

// add the calendar icon
function mychildtheme_twenty_twenty_one_svg_icons_social( $icons ) {
    $icons['rhs-calendar'] = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill-rule="evenodd" d="M 6.75,0 C 7.1642136,0 7.5,0.33578644 7.5,0.75 V 3 h 9 V 0.75 c 0,-0.99999957 1.5,-0.99999957 1.5,0 V 3 h 2.75 c 0.966,0 1.75,0.784 1.75,1.75 v 16 c 0,0.966498 -0.783502,1.75 -1.75,1.75 H 3.25 C 2.2835017,22.5 1.5,21.716498 1.5,20.75 v -16 C 1.5,3.784 2.284,3 3.25,3 H 6 V 0.75 C 6,0.33578644 6.3357864,0 6.75,0 Z M 21,7.9375 H 3 V 20.75 C 3,20.888 3.112,21 3.25,21 h 17.5 C 20.888071,21 21,20.888071 21,20.75 Z" id="path833"/>
      <path d="m 7.2944571,17.386715 h 4.1851359 v 1.803463 H 4.9127844 v -0.743412 q 0,-0.75718 0.2546876,-1.356039 0.2546875,-0.605744 0.6401605,-1.080702 0.3854731,-0.481841 0.8397806,-0.846664 0.4611909,-0.371706 0.8741978,-0.667694 0.4336571,-0.309755 0.7571791,-0.591976 0.3304055,-0.282222 0.5506758,-0.55756 0.2271538,-0.282221 0.3372889,-0.564442 0.1101352,-0.289105 0.1101352,-0.612627 0,-0.633277 -0.3579393,-0.956799 -0.3579392,-0.323522 -1.0944681,-0.323522 -1.2734377,0 -2.4367402,1.011866 V 9.9870092 q 1.2872046,-0.8328971 2.9048146,-0.8328971 0.7502958,0 1.3422722,0.19962 0.5988599,0.1927365 1.0118669,0.5575592 0.413007,0.3648227 0.626394,0.8879647 0.22027,0.516258 0.22027,1.156419 0,0.681461 -0.213387,1.211487 -0.206503,0.530025 -0.557559,0.963682 -0.344173,0.433657 -0.7984801,0.79848 Q 9.4696264,15.287263 8.9809016,15.624552 8.6504962,15.85859 8.3407411,16.092627 8.0378694,16.31978 7.8038322,16.546934 7.569795,16.767205 7.432126,16.980591 7.2944571,17.193978 7.2944571,17.386715 Z" />
    <path d="m 12.97644,18.93549 v -1.85853 q 1.011866,0.61951 2.154518,0.61951 0.860431,0 1.342273,-0.406123 0.488724,-0.413007 0.488724,-1.115119 0,-1.466174 -2.071917,-1.466174 -0.764063,0 -1.762163,0.117018 l 0.371707,-5.5067572 h 5.224536 v 1.7759292 h -3.565626 l -0.137669,1.975549 q 0.530026,-0.0413 0.915499,-0.0413 1.521242,0 2.381672,0.79848 0.860431,0.79848 0.860431,2.147635 0,1.493708 -1.025633,2.443624 -1.025634,0.943032 -2.780913,0.943032 -1.424873,0 -2.395439,-0.426774 z"/>
    </svg>';
    return $icons;
}

add_filter( 'twenty_twenty_one_svg_icons_social', 'mychildtheme_twenty_twenty_one_svg_icons_social' );

The new functions and filters throw this error:

Warning: preg_match(): Unknown modifier 'v' in C:\laragon\www\rhs-1\wp-content\themes\twentytwentyone\
classes\class-twenty-twenty-one-svg-icons.php on line 243

The relevant line in class-twenty-twenty-one-svg-icons.php:

242 foreach ( $regex_map as $icon => $regex ) {
243         if ( preg_match( $regex, $uri ) ) {
244             return self::get_svg( 'social', $icon, $size ) . '<span class="screen-reader-text">';
245         }
246     }

Now, the instructions in this answer include the icon in the "icons_map" function in a completely different way, should I be doing it like that?

Secondly, per that answer, I'm not sure I understand if and why I would have to unhook the parent theme social icons?

Third, am I pushing my luck if I also want to use this icon in the Gutenberg "Social Icons" block, or is there some other way to include the social icons (secondary) menu as a Gutenberg block?

Answer 1

The linked answer was written in 2019, yet the new field guide ("Adding icons in Twenty Twenty") was written about a year later (2020), so you should just use that new field guide, and in response to the main issue:

I am trying to add an icon to the Twenty Twenty-One social icons, but having trouble registering it.

You're getting the preg_match(): Unknown modifier 'v' error because of the unescaped / (slash) as in rhs-1.test/events/list/ which you supplied via the twenty_twenty_one_social_icons_map filter.

And unfortunately, there's no way to escape it correctly because the function which applies the filter calls preg_quote(), so back-slashes (\) will be escaped. Also, just so you know, the / is not escaped because preg_quote() is called without the second parameter specified. (see source on Trac)

However, the values in the array ($icons['rhs-calendar']) should actually be just domains, subdomains and/or IPs like example.com and foo.example2.com, e.g. array( 'example.com', '127.0.0.1' ). And if you added a domain/IP there, then all URLs with that very domain/IP would use your custom icon, so there's no need to specify a URL path like the rhs-1.test/events/list/.

---

I also want to use this icon in the Gutenberg "Social Icons" block

As of writing, the core Social Icons block does not provide any PHP or JS filters that we could use to easily add custom icons to the default list (and note that the Social Icons block is a dynamic block and it also has its own editor script), but you could alternatively create a block that would add your custom icon to the editor. However, you would need to ask in another question for more details on that.

Or another option is, add your custom icon using the Link block via the Social Icons block, then set a custom CSS class for the icon, and just style the button accordingly:

1. Save your icon's SVG as assets/images/rhs-calendar.svg in your child theme folder (e.g. at wp-content/themes/twentytwentyone-child).

2. Add this to your editor style file (assets/css/style-editor.css):

   .wp-block-social-link.rhs-calendar-icon > button {
       background-image: url(../images/rhs-calendar.svg);
       background-repeat: no-repeat;
       background-position: center;
       background-size: 24px;
       width: 36px;
       height: 36px;
   }
   
   .wp-block-social-link.rhs-calendar-icon > button > svg {
       display: none;
   }
   

3. Add this to your main style.css file, or wherever you want, just ensure the styles are applied on the front-end side of the site:

   .wp-social-link.rhs-calendar-icon > a {
       background-image: url(assets/images/rhs-calendar.svg);
       background-repeat: no-repeat;
       background-position: center;
       background-size: 24px;
       width: 36px;
       height: 36px;
   }
   
   .wp-social-link.rhs-calendar-icon > a > svg {
       display: none;
   }
   

4. Add the icon using the Link block.

   

5. Set the custom icon class via the "Additional CSS class(es)" field.

   

Additional Notes

1. There's an unwanted </g> tag in your SVG code.

2. In my SVG file (rhs-calendar.svg), I removed the sodipodi:nodetypes="ssccsscsssssssscssccssssc"..