WIP: Social links block.

packages/block-library/src/index.js

@@ -15,6 +15,8 @@ import {
 /**
  * Internal dependencies
  */
+import * as socialLinks from './social-links';
+import * as socialLink from './social-links/social-link';
 import * as paragraph from './paragraph';
 import * as image from './image';
 import * as heading from './heading';
@@ -111,6 +113,8 @@ export const registerCoreBlocks = () => {
 		search,
 		separator,
 		reusableBlock,
+		socialLinks,
+		socialLink,
 		spacer,
 		subhead,
 		table,

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

@@ -0,0 +1,13 @@
+{
+	"name": "core/social-links",
+	"category": "widgets",
+	"attributes": {
+		"columns": {
+			"type": "number",
+			"default": 2
+		},
+		"verticalAlignment": {
+			"type": "string"
+		}
+	}
+}

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

@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/compose';
+import {
+	PanelBody,
+	RangeControl,
+	IconButton,
+} from '@wordpress/components';
+import { createBlock } from '@wordpress/blocks';
+import { Fragment } from '@wordpress/element';
+import {
+	InspectorControls,
+	InnerBlocks,
+	BlockControls,
+	BlockVerticalAlignmentToolbar,
+} from '@wordpress/block-editor';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { getColumnsTemplate } from './utils';
+
+/**
+ * Allowed blocks constant is passed to InnerBlocks precisely as specified here.
+ * The contents of the array should never change.
+ * The array should contain the name of each block that is allowed.
+ * In columns block, the only block we allow is 'core/column'.
+ *
+ * @constant
+ * @type {string[]}
+*/
+const ALLOWED_BLOCKS = [ 'core/social-link' ];
+
+export const SocialLinksEdit = function( { attributes, setAttributes, className, updateAlignment, addLink } ) {
+	const { columns, verticalAlignment } = attributes;
+
+	const classes = classnames( className, `has-${ columns }-columns`, {
+		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+	} );
+
+	const onChange = ( alignment ) => {
+		// Update all the (immediate) child Column Blocks
+		updateAlignment( alignment );
+	};
+
+	return (
+		<Fragment>
+			<InspectorControls>
+				<PanelBody>
+					<RangeControl
+						label={ __( 'Columns' ) }
+						value={ columns }
+						onChange={ ( nextColumns ) => {
+							setAttributes( {
+								columns: nextColumns,
+							} );
+						} }
+						min={ 1 }
+						max={ 6 }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<BlockControls>
+				<BlockVerticalAlignmentToolbar
+					onChange={ onChange }
+					value={ verticalAlignment }
+				/>
+			</BlockControls>
+			<div className={ classes }>
+				<InnerBlocks
+					template={ getColumnsTemplate( columns ) }
+					templateLock={ 'insert' }
+					allowedBlocks={ ALLOWED_BLOCKS } />
+
+				<div>
+					<IconButton
+						isLarge
+						label={ __( 'Add link' ) }
+						icon="insert"
+						onClick={ () => addLink() } >
+						{ __( 'Add link' ) }
+					</IconButton>
+				</div>
+			</div>
+		</Fragment>
+	);
+};
+
+const DEFAULT_EMPTY_ARRAY = [];
+
+export default compose(
+	withSelect( ( select, { clientId } ) => {
+		const { getBlocksByClientId } = select( 'core/editor' );
+		const [ block ] = getBlocksByClientId( clientId );
+
+		return {
+			childLinks: block ? block.innerBlocks : DEFAULT_EMPTY_ARRAY,
+		};
+	} ),
+	withDispatch( ( dispatch, { clientId, childLinks } ) => {
+		return {
+			addLink() {
+				const created = createBlock( 'core/social-link', { verticalAlignment: 'top' } );
+				dispatch( 'core/editor' ).insertBlock( created, undefined, clientId );
+			},
+		};
+	} ),
+)( SocialLinksEdit );

packages/block-library/src/social-links/editor.scss

@@ -0,0 +1,191 @@
+@mixin flex-full-height() {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+}
+
+
+// These margins make sure that nested blocks stack/overlay with the parent block chrome
+// This is sort of an experiment at making sure the editor looks as much like the end result as possible
+// Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
+// When using CSS grid, margins do not collapse on the container.
+.wp-block-columns .editor-block-list__layout {
+	margin-left: 0;
+	margin-right: 0;
+
+	// This max-width is used to constrain the main editor column, it should not cascade into columns
+	.editor-block-list__block {
+		max-width: none;
+	}
+}
+
+// Fullwide: show margin left/right to ensure there's room for the side UI.
+// This is not a 1:1 preview with the front-end where these margins would presumably be zero.
+.editor-block-list__block[data-align="full"] [data-type="core/columns"][data-align="full"] .wp-block-columns > .editor-inner-blocks {
+	padding-left: $block-padding;
+	padding-right: $block-padding;
+
+	@include break-small() {
+		padding-left: $block-container-side-padding;
+		padding-right: $block-container-side-padding;
+	}
+}
+
+.wp-block-columns {
+	display: block;
+
+	> .editor-inner-blocks > .editor-block-list__layout {
+		display: flex;
+
+		// Responsiveness: Allow wrapping on mobile.
+		flex-wrap: wrap;
+
+		@include break-medium() {
+			flex-wrap: nowrap;
+		}
+		// Set full heights on Columns to enable vertical alignment preview
+		> [data-type="core/column"],
+		> [data-type="core/column"] > .editor-block-list__block-edit,
+		> [data-type="core/column"] > .editor-block-list__block-edit > div[data-block],
+		> [data-type="core/column"] > .editor-block-list__block-edit .block-core-columns {
+			@include flex-full-height();
+		}
+		// Adjust the individual column block.
+		> [data-type="core/column"] {
+
+			// On mobile, only a single column is shown, so match adjacent block paddings.
+			padding-left: 0;
+			padding-right: 0;
+			margin-left: -$block-padding;
+			margin-right: -$block-padding;
+
+			// Prevent the columns from growing wider than their distributed sizes.
+			min-width: 0;
+
+			// Prevent long unbroken words from overflowing.
+			word-break: break-word; // For back-compat.
+			overflow-wrap: break-word; // New standard.
+
+			// Responsiveness: Show at most one columns on mobile.
+			flex-basis: 100%;
+
+			// Beyond mobile, allow 2 columns.
+			@include break-small() {
+				flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2}));
+				flex-grow: 0;
+				margin-left: $block-padding;
+				margin-right: $block-padding;
+			}
+
+			// Add space between columns. Themes can customize this if they wish to work differently.
+			// This has to match the same padding applied in style.scss.
+			// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
+			@include break-small() {
+				&:nth-child(even) {
+					margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
+				}
+			}
+
+			// When columns are in a single row, add space before all except the first.
+			@include break-medium() {
+				&:not(:first-child) {
+					margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
+				}
+			}
+
+			> .editor-block-list__block-edit {
+				margin-top: 0;
+				margin-bottom: 0;
+
+				// Remove Block "padding" so individual Column is flush with parent Columns
+				&::before {
+					left: 0;
+					right: 0;
+				}
+
+				> .editor-block-contextual-toolbar {
+					margin-left: -$border-width;
+				}
+
+				// Zero out margins.
+				> [data-block] {
+					margin-top: 0;
+					margin-bottom: 0;
+				}
+
+				// The Columns block is a flex-container, therefore it nullifies margin collapsing.
+				// Therefore, blocks inside this will appear to create a double margin.
+				// We compensate for this using negative margins.
+				> div > .block-core-columns > .editor-inner-blocks {
+					margin-top: -$default-block-margin;
+					margin-bottom: -$default-block-margin;
+				}
+			}
+		}
+	}
+}
+
+/**
+ * Columns act as as a "passthrough container"
+ * and therefore has its vertical margins/padding removed via negative margins
+ * therefore we need to compensate for this here by doubling the spacing on the
+ * vertical to ensure there is equal visual spacing around the inserter. Note there
+ * is no formal API for a "passthrough" Block so this is an edge case overide
+ */
+[data-type="core/columns"] .block-list-appender {
+	margin-top: $block-padding*2;
+	margin-bottom: $block-padding*2;
+}
+
+/**
+ * Vertical Alignment Preview
+ * note: specificity is important here to ensure individual
+ * * columns alignment is prioritised over parent column alignment
+ *
+ */
+.are-vertically-aligned-top .block-core-columns,
+div.block-core-columns.is-vertically-aligned-top {
+	justify-content: flex-start;
+}
+
+.are-vertically-aligned-center .block-core-columns,
+div.block-core-columns.is-vertically-aligned-center {
+	justify-content: center;
+}
+
+.are-vertically-aligned-bottom .block-core-columns,
+div.block-core-columns.is-vertically-aligned-bottom {
+	justify-content: flex-end;
+}
+
+
+/**
+ * Fixes single Column breadcrumb to RHS of Block boundary
+ */
+[data-type="core/column"] > .editor-block-list__block-edit > .editor-block-list__breadcrumb {
+	right: 0;
+}
+
+// The empty state of a columns block has the default appenders.
+// Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders.
+// Because the column shouldn't be hovered as part of this temporary passthrough, we unset the hover style.
+.wp-block-columns [data-type="core/column"].is-hovered {
+	> .block-editor-block-list__block-edit::before {
+		content: none;
+	}
+
+	.block-editor-block-list__breadcrumb {
+		display: none;
+	}
+}
+
+// In absence of making the individual columns resizable, we prevent them from being clickable.
+// This makes them less fiddly. @todo: This should be revisited as the interface is refined.
+.wp-block-columns [data-type="core/column"] {
+	pointer-events: none;
+
+	// This selector re-enables clicking on any child of a column block.
+	.block-core-columns .block-editor-block-list__layout {
+		pointer-events: all;
+	}
+}

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

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { G, Path, SVG } from '@wordpress/components';
+
+export default (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M4,4H20a2,2,0,0,1,2,2V18a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4ZM4 6V18H8V6Zm6 0V18h4V6Zm6 0V18h4V6Z" /></G></SVG>
+);

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

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import icon from './icon';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Social links' ),
+	icon,
+	description: __( 'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.' ),
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+	},
+	edit,
+	save,
+};
+