Default style proof-of-concept

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

@@ -19,7 +19,7 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getIconBySite, getNameBySite } from './social-list';
+import { getNameBySite } from './social-list';
 
 const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 	const { url, site, label } = attributes;
@@ -31,7 +31,7 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 	);
 
 	// Import icon.
-	const IconComponent = getIconBySite( site );
+
 	const socialLinkName = getNameBySite( site );
 
 	return (
@@ -52,7 +52,7 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
 				className={ classes }
 				onClick={ () => setPopover( true ) }
 			>
-				<IconComponent />
+				<em />
 				{ isSelected && showURLPopover && (
 					<URLPopover
 						onClose={ () => setPopover( false ) }

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

@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import edit from './edit';
+import save from './save';
 import socialList from './social-list';
 
 const commonAttributes = {
@@ -17,6 +18,7 @@ const commonAttributes = {
 		html: false,
 	},
 	edit,
+	save,
 };
 
 // Create individual blocks out of each site in social-list.js

packages/block-library/src/social-link/index.php

@@ -88,7 +88,6 @@ function register_block_core_social_link() {
 						'type' => 'string',
 					),
 				),
-				'render_callback' => 'render_core_social_link',
 			)
 		);
 	}

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

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+const SocialLinkSave = ( { attributes } ) => {
+	const { url, site, label } = attributes;
+	const classes = classNames(
+		'wp-social-link',
+		'wp-social-link-' + site,
+		{ 'wp-social-link__is-incomplete': ! url },
+	);
+
+	return (
+		<li className={ classes }>
+			<a href={ url }>
+				<em>{ label }</em>
+			</a>
+		</li>
+	);
+};
+
+export default SocialLinkSave;

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

@@ -0,0 +1,79 @@
+
+.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.
+	em {
+		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;
+
+	em {
+		background: url($logo) no-repeat center center;
+	}
+
+	@supports (mask-size: cover) or (-webkit-mask-size: cover) {
+		background-color: $color;
+		box-shadow: none;
+
+		em {
+			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/social-links/style.scss

@@ -5,45 +5,8 @@
 	padding-right: 0;
 	// Some themes give all <ul> default margin instead of padding.
 	margin-left: 0;
-
-	// Some themes add underlines, false underlines (via shadows), and borders to <a>.
-	.wp-social-link a,
-	.wp-social-link a:hover {
-		text-decoration: none;
-		border-bottom: 0;
-		box-shadow: none;
-	}
 }
 
-.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;
-	}
-
-	&:hover {
-		transform: scale(1.1);
-	}
-}
 
 // Center flex items. This has an equivalent in editor.scss.
 // It also needs to override some of the default classes usually applied to the centering class.
@@ -52,7 +15,6 @@
 	display: flex;
 }
 
-
 // Provide colors for a range of icons.
 .wp-block-social-links:not(.is-style-logos-only) {
 	// Generic items such as mail, feed, etc.

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";