WIP: Social links block.

packages/block-library/src/index.js

@@ -48,6 +48,7 @@ import * as search from './search';
 import * as group from './group';
 import * as separator from './separator';
 import * as shortcode from './shortcode';
+import * as social from './social';
 import * as spacer from './spacer';
 import * as subhead from './subhead';
 import * as table from './table';
@@ -111,6 +112,7 @@ export const registerCoreBlocks = () => {
 		search,
 		separator,
 		reusableBlock,
+		social,
 		spacer,
 		subhead,
 		table,

packages/block-library/src/social/block.json

@@ -0,0 +1,35 @@
+{
+	"name": "core/social",
+	"category": "layout",
+	"attributes": {
+		"url": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "a",
+			"attribute": "href"
+		},
+		"title": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "a",
+			"attribute": "title"
+		},
+		"text": {
+			"type": "string",
+			"source": "html",
+			"selector": "a"
+		},
+		"backgroundColor": {
+			"type": "string"
+		},
+		"textColor": {
+			"type": "string"
+		},
+		"customBackgroundColor": {
+			"type": "string"
+		},
+		"customTextColor": {
+			"type": "string"
+		}
+	}
+}

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

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Component,
+	Fragment,
+} from '@wordpress/element';
+import { compose } from '@wordpress/compose';
+import {
+	Dashicon,
+	IconButton,
+} from '@wordpress/components';
+import {
+	URLInput,
+	ContrastChecker,
+	InspectorControls,
+	withColors,
+	PanelColorSettings,
+} from '@wordpress/block-editor';
+
+class SocialLinksEdit extends Component {
+	constructor() {
+		super( ...arguments );
+		this.nodeRef = null;
+		this.bindRef = this.bindRef.bind( this );
+	}
+
+	bindRef( node ) {
+		if ( ! node ) {
+			return;
+		}
+		this.nodeRef = node;
+	}
+
+	render() {
+		const {
+			attributes,
+			backgroundColor,
+			textColor,
+			setBackgroundColor,
+			setTextColor,
+			fallbackBackgroundColor,
+			fallbackTextColor,
+			setAttributes,
+			isSelected,
+			className,
+		} = this.props;
+
+		const {
+			url,
+			title,
+		} = attributes;
+
+		return (
+			<Fragment>
+				<div className={ className } title={ title } ref={ this.bindRef }>
+					Social media account address:
+					<InspectorControls>
+						<PanelColorSettings
+							title={ __( 'Color Settings' ) }
+							colorSettings={ [
+								{
+									value: backgroundColor.color,
+									onChange: setBackgroundColor,
+									label: __( 'Background Color' ),
+								},
+								{
+									value: textColor.color,
+									onChange: setTextColor,
+									label: __( 'Text Color' ),
+								},
+							] }
+						>
+							<ContrastChecker
+								{ ...{
+									// Text is considered large if font size is greater or equal to 18pt or 24px,
+									// currently that's not the case for button.
+									isLargeText: false,
+									textColor: textColor.color,
+									backgroundColor: backgroundColor.color,
+									fallbackBackgroundColor,
+									fallbackTextColor,
+								} }
+							/>
+						</PanelColorSettings>
+					</InspectorControls>
+				</div>
+				{ isSelected && (
+					<form
+						className="block-library-button__inline-link"
+						onSubmit={ ( event ) => event.preventDefault() }>
+						<Dashicon icon="facebook" />
+						<URLInput
+							value={ url }
+							onChange={ ( value ) => setAttributes( { url: value } ) }
+						/>
+						<IconButton className="submit" icon="plus" label={ __( 'Add an icon' ) } type="submit" />
+					</form>
+				) }
+			</Fragment>
+		);
+	}
+}
+
+export default compose( [
+	withColors( 'backgroundColor', { textColor: 'color' } ),
+] )( SocialLinksEdit );

packages/block-library/src/social/icon.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path d="M0 0h24v24H0z" fill="none" /><Path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" /></SVG>
+);

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

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	RichText,
+	getColorClassName,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import icon from './icon';
+import metadata from './block.json';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Social Links' ),
+
+	description: __( 'Display a row of icons of your social media accounts.' ),
+
+	icon,
+
+	category: 'layout',
+
+	keywords: [ __( 'link' ) ],
+
+	edit,
+
+	save( { attributes } ) {
+		const {
+			url,
+			text,
+			title,
+			backgroundColor,
+			textColor,
+			customBackgroundColor,
+			customTextColor,
+		} = attributes;
+
+		const textClass = getColorClassName( 'color', textColor );
+		const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+
+		const buttonClasses = classnames( 'wp-block-button__link', {
+			'has-text-color': textColor || customTextColor,
+			[ textClass ]: textClass,
+			'has-background': backgroundColor || customBackgroundColor,
+			[ backgroundClass ]: backgroundClass,
+		} );
+
+		const buttonStyle = {
+			backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+			color: textClass ? undefined : customTextColor,
+		};
+
+		return (
+			<div>
+				<RichText.Content
+					tagName="a"
+					className={ buttonClasses }
+					href={ url }
+					title={ title }
+					style={ buttonStyle }
+					value={ text }
+				/>
+			</div>
+		);
+	},
+};

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

@@ -0,0 +1,56 @@
+$blocks-button__height: 56px;
+
+.wp-block-button {
+	color: $white;
+	margin-bottom: 1.5em;
+
+	&.aligncenter {
+		text-align: center;
+	}
+
+	&.alignright {
+		/*rtl:ignore*/
+		text-align: right;
+	}
+}
+
+.wp-block-button__link {
+	background-color: $dark-gray-700;
+	border: none;
+	border-radius: $blocks-button__height / 2;
+	box-shadow: none;
+	color: inherit;
+	cursor: pointer;
+	display: inline-block;
+	font-size: $big-font-size;
+	margin: 0;
+	padding: 12px 24px;
+	text-align: center;
+	text-decoration: none;
+	white-space: normal;
+	overflow-wrap: break-word;
+
+	&:hover,
+	&:focus,
+	&:active,
+	&:visited {
+		color: inherit;
+	}
+}
+
+.is-style-squared .wp-block-button__link {
+	border-radius: 0;
+}
+
+.is-style-outline {
+	color: $dark-gray-700;
+
+	.wp-block-button__link {
+		background-color: transparent;
+		border: 2px solid currentcolor;
+	}
+}
+
+.submit {
+	font-size: 30px;
+}