Test: Switch to background mask

packages/block-library/src/social-link/edit.js

@@ -24,7 +24,7 @@ import { keyboardReturn } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { getIconBySite, getNameBySite } from './social-list';
+import { getTitleForService } from './social-list';
 
 const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 	const { url, service, label } = attributes;
@@ -34,14 +34,13 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 	} );
 
 	// Import icon.
-	const IconComponent = getIconBySite( service );
-	const socialLinkName = getNameBySite( service );
+	const socialLinkTitle = getTitleForService( service );
 
 	return (
 		<Fragment>
 			<InspectorControls>
 				<PanelBody
-					title={ sprintf( __( '%s label' ), socialLinkName ) }
+					title={ sprintf( __( '%s label' ), socialLinkTitle ) }
 					initialOpen={ false }
 				>
 					<PanelRow>
@@ -59,7 +58,7 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 				</PanelBody>
 			</InspectorControls>
 			<Button className={ classes } onClick={ () => setPopover( true ) }>
-				<IconComponent />
+				<span className="icon" />
 				{ isSelected && showURLPopover && (
 					<URLPopover onClose={ () => setPopover( false ) }>
 						<form

packages/block-library/src/social-link/social-list.js

@@ -12,19 +12,6 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import variations from './variations';
-import { ChainIcon } from './icons';
-
-/**
- * Retrieves the social service's icon component.
- *
- * @param {string} name key for a social service (lowercase slug)
- *
- * @return {WPComponent} Icon component for social service.
- */
-export const getIconBySite = ( name ) => {
-	const variation = find( variations, { name } );
-	return variation ? variation.icon : ChainIcon;
-};
 
 /**
  * Retrieves the display name for the social service.
@@ -33,7 +20,7 @@ export const getIconBySite = ( name ) => {
  *
  * @return {string} Display name for social service
  */
-export const getNameBySite = ( name ) => {
-	const variation = find( variations, { name } );
-	return variation ? variation.title : __( 'Social Icon' );
+export const getTitleForService = ( service ) => {
+	const variation = find( variations, { service } );
+	return variation ? variation.title : __( 'Social Link' );
 };

packages/block-library/src/social-link/style.scss

@@ -0,0 +1,78 @@
+.wp-social-link {
+	display: block;
+	width: 36px;
+	height: 36px;
+	border-radius: 36px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
+	margin-right: 8px;
+	transition: transform 0.1s ease;
+	@include reduce-motion("transition");
+
+	a {
+		padding: 6px;
+		display: block;
+		line-height: 0;
+		transition: transform 0.1s ease;
+	}
+
+	a,
+	a:hover,
+	a:active,
+	a:visited,
+	svg {
+		color: currentColor;
+		fill: currentColor;
+
+		// Some themes add underlines, false underlines (via shadows), and borders to <a>.
+		text-decoration: none;
+		border-bottom: 0;
+		box-shadow: none;
+	}
+
+	&:hover {
+		transform: scale(1.1);
+	}
+
+	// We use the inner element as a background for the icon.
+	span {
+		display: block;
+		width: 24px;
+		height: 24px;
+		text-indent: 100%;
+		overflow: hidden;
+	}
+}
+
+@mixin sociallink($logo, $color) {
+	/* This is shown to IE11 and older browsers. */
+	background-color: #fff;
+	box-shadow: 0 0 0 1px #000;
+
+	span {
+		background: url($logo) no-repeat center center;
+	}
+
+	@supports (mask-size: cover) or (-webkit-mask-size: cover) {
+		background-color: $color;
+		box-shadow: none;
+
+		span {
+			background: #fff;
+			-webkit-mask: url($logo) no-repeat center center;
+			mask: url($logo) no-repeat center center;
+			-webkit-mask-size: cover;
+			mask-size: cover;
+		}
+	}
+}
+
+.wp-social-link-mastodon {
+	@include sociallink( "https://cldup.com/a2oE4qAWQz.svg", #3288d4 );
+}
+
+.wp-social-link-twitter {
+	@include sociallink( "https://cldup.com/JPmc-H2Egd.svg", #21a1f3 );
+}
+
+.wp-social-link-wordpress {
+	@include sociallink( "https://cldup.com/w4j97g2E1Y.svg", #3499cd );
+}

packages/block-library/src/style.scss

@@ -19,6 +19,7 @@
 @import "./rss/style.scss";
 @import "./search/style.scss";
 @import "./separator/style.scss";
+@import "./social-link/style.scss";
 @import "./social-links/style.scss";
 @import "./spacer/style.scss";
 @import "./subhead/style.scss";