Block: social links. (#16897)

* Added social links.

* Applied changes suggested by Marcus Kazmierczak.

* Add social list of icons, SVGs in stylsheets

Initially add SVG as background images to get UX down.  We probably will
want to use real SVGs if possible to give more control over the color,
fill, stroke, etc...

Add listing of icons and associated matching domain/text. Automatically
check if URL entered matches and select icon.

* Add fixture files

* Alignment cleanup

* Add icon picker, to pick icon

* Move attributes to block.json

* Move singular social-link to top-level

* Pass parameter, dont use data-icon

I went done the wrong path, and took far too long to realize it.

* Move social-link CSS to own scss

* Switch inner-blocks to flex to inline

* Add social inks to block transforms e2e tests

* Show icons when block inserted, click to select

Removes switching icon based on URL typed because someone is
selecting the icon first. This makes it harder to change an icon
after the fact, will require delete and insert.

* Improve inserting slightly

- Remove text link, just use icon button (+)

- Start with template, so you dont have to click (+) after inserting
block, you immediately select the icon

* Display URLInput Popover on insert

Switches URLInput field to Popover so it can be controlled to display
on insert. This allows the user to know they have to fill in the URL for
the icon and removes an extra click on initial insert to set.

* Make progress towards minimal UI.

- This removes margins, paddings, and lots of UI from child blocks. It also adds comments that we should look at refactoring this away in a separate PR that makes it a prop on a parent container.
- This tweaks the layout a little bit, so frontend and backend match, and adds a circle around the social icons.

* Refactor Social Links to create individual blocks

Creates individual blocks for each social site. This uses the standard
InnerBlocks appender and display to show icon/site to select. Not only
does this use a standard widget, it benefits by getting search
capabilities.

Modeled after the embed include, however each of the sites are not a
"public" block shown in the inserter, but only seen when using the
Social Links block. There would be confusion using the inserter with
two entries for example adding a link to Twitter vs. embedding a Tweet

* Add is-incomplete class for empty URL

- Adds wp-social-icon__is-incomplete class to social icon
block if the URL is not set.

- Checks for URL on save and does not include icon if not set

* Show default icon, set icon attribute fixes save

* Polish appender and inactive state.

* Remove unnecessary fragment

* Convert icons over to React components, show in inserter

* Clean up

- standardize on social-link naming, fix CSS
- use icon attribute set as default in register

* Tidy things up, rename, consistent

- Update icon names to component case
- Use IconComponents in edit view
- Updates variables so site is for sites, icon is for icons ;-)
- Switch to use <ul> and <li> for markup

* Size icons correctly, front and back. Add focus style.

* Add colors.

* Add style variation for icon only.

* Hide incomplete link if parent or child not selected

* Remove a couple of icons. Comment out for now.

* Improve URLInpout, switch to URLPopover

* Update and fix tests, get to green

- Add tests for individual social link blocks
- Generate fixtures
- Add block transforms (Group)
- PHP has lint rules too

* Update facebook icon and instagram colors.

* Polish, add variation, bugfix

- This adds explicit widths heights to SVGs, fixing the "giant svg" issue.
- It adds colors to the now called "Logos Only" variation
- It improves the snapchat style
- It adds a pill variation

* Polish, and actually remove icons.

This removes some comments.

It restores some icons, but it permanently removes others:

- Apple
- Slideshare
- Stumbleupon
- Digg

* Fix URL popover.

* This improves the preview.

* Try a new "unselected state".

* Apply suggestions from code review

Thanks for taking the time and reviewing

Co-Authored-By: Daniel Richards <daniel.richards@automattic.com>

* Touch up remaining user interactions

- Add WordPress as default logo, so does not collapse to nothing
- Per @talldan review, add preventDefault on submit
- Clean up removed icons
- Fix ! url logic

* Hit area & frontend refinement.

* Remove abbreviation in variable name

* Remove apple, digg, slideshare, stumbleupon from register

* Add e2e tests for dropbox, google, meetup, yelp

* Don't open URL popover by default, requires click in

* Fix e2e-test case fixtures

* Make icons in the "logos only" style bigger.

* Remove save, using server-side render so not needed

* Comment polish, remove redundant rule, fix gray.

* Remove TODO comment, icon issue solved

* Update e2e tests with pure server-side rendering

* Polish. Remove obsolete code, add generic colors.

* Add centering.

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

Dig it.

Co-Authored-By: Andrés <nosolosw@users.noreply.github.com>

* Remove duplicate icon definition

lib/blocks.php

@@ -28,6 +28,7 @@ function gutenberg_reregister_core_block_types() {
 		'rss.php'             => 'core/rss',
 		'shortcode.php'       => 'core/shortcode',
 		'search.php'          => 'core/search',
+		'social-link.php'     => 'core/social-link',
 		'tag-cloud.php'       => 'core/tag-cloud',
 	);
 

packages/block-library/src/editor.scss

@@ -28,6 +28,8 @@
 @import "./rss/editor.scss";
 @import "./search/editor.scss";
 @import "./shortcode/editor.scss";
+@import "./social-link/editor.scss";
+@import "./social-links/editor.scss";
 @import "./spacer/editor.scss";
 @import "./subhead/editor.scss";
 @import "./table/editor.scss";

packages/block-library/src/index.js

@@ -59,8 +59,9 @@ import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
 import * as tagCloud from './tag-cloud';
-
 import * as classic from './classic';
+import * as socialLinks from './social-links';
+import * as socialLink from './social-link';
 
 /**
  * Function to register an individual block.
@@ -130,6 +131,8 @@ export const registerCoreBlocks = () => {
 		search,
 		separator,
 		reusableBlock,
+		socialLinks,
+		...socialLink.sites,
 		spacer,
 		subhead,
 		table,

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

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { URLPopover } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import {
+	Button,
+	IconButton,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getIconBySite } from './social-list';
+
+const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
+	const { url, site } = attributes;
+	const [ showURLPopover, setPopover ] = useState( false );
+	const classes = classNames(
+		'wp-social-link',
+		'wp-social-link-' + site,
+		{ 'wp-social-link__is-incomplete': ! url },
+	);
+
+	// Import icon.
+	const IconComponent = getIconBySite( site );
+
+	return (
+		<Button
+			className={ classes }
+			onClick={ () => setPopover( true ) }
+		>
+			<IconComponent />
+			{ isSelected && showURLPopover && (
+				<URLPopover
+					onClose={ () => setPopover( false ) }
+				>
+					<form
+						className="block-editor-url-popover__link-editor"
+						onSubmit={ ( event ) => {
+							event.preventDefault();
+							setPopover( false );
+						} } >
+						<div className="editor-url-input block-editor-url-input">
+							<input type="text"
+								value={ url }
+								onChange={ ( event ) => setAttributes( { url: event.target.value } ) }
+								placeholder={ __( 'Enter Address' ) }
+							/>
+						</div>
+						<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
+					</form>
+				</URLPopover>
+			) }
+		</Button>
+	);
+};
+
+export default SocialLinkEdit;

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

@@ -0,0 +1,31 @@
+.wp-social-link {
+	// Frontend outputs a link, backend a button. Both should have the same padding.
+	// Therefore, the following exactly matches the padding on the frontend link.
+	padding: 6px;
+}
+
+.wp-block-social-links.is-style-pill-shape .wp-social-link {
+	padding-left: 16px;
+	padding-right: 16px;
+}
+
+// The following two rules have their classes doubled to increase specificity.
+.has-child-selected .wp-social-link__is-incomplete.wp-social-link__is-incomplete,
+.is-selected .wp-social-link__is-incomplete.wp-social-link__is-incomplete {
+	background-color: $dark-gray-150;
+}
+
+.has-child-selected .is-style-logos-only .wp-social-link__is-incomplete.wp-social-link__is-incomplete,
+.is-selected .is-style-logos-only .wp-social-link__is-incomplete.wp-social-link__is-incomplete {
+	color: $dark-gray-150;
+	background-color: transparent;
+}
+
+
+[data-type*="core/social-link-"].is-selected .wp-social-link, // Matches the selected social logo block.
+.wp-social-link:focus {
+	box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500;
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+}

packages/block-library/src/social-link/icons/amazon.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	Path,
+	SVG,
+} from '@wordpress/components';
+
+export const AmazonIcon = ( ) => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M13.582,8.182C11.934,8.367,9.78,8.49,8.238,9.166c-1.781,0.769-3.03,2.337-3.03,4.644 c0,2.953,1.86,4.429,4.253,4.429c2.02,0,3.125-0.477,4.685-2.065c0.516,0.747,0.685,1.109,1.629,1.894 c0.212,0.114,0.483,0.103,0.672-0.066l0.006,0.006c0.567-0.505,1.599-1.401,2.18-1.888c0.231-0.188,0.19-0.496,0.009-0.754 c-0.52-0.718-1.072-1.303-1.072-2.634V8.305c0-1.876,0.133-3.599-1.249-4.891C15.23,2.369,13.422,2,12.04,2 C9.336,2,6.318,3.01,5.686,6.351C5.618,6.706,5.877,6.893,6.109,6.945l2.754,0.298C9.121,7.23,9.308,6.977,9.357,6.72 c0.236-1.151,1.2-1.706,2.284-1.706c0.584,0,1.249,0.215,1.595,0.738c0.398,0.584,0.346,1.384,0.346,2.061V8.182z M13.049,14.088 c-0.451,0.8-1.169,1.291-1.967,1.291c-1.09,0-1.728-0.83-1.728-2.061c0-2.42,2.171-2.86,4.227-2.86v0.615 C13.582,12.181,13.608,13.104,13.049,14.088z M20.683,19.339C18.329,21.076,14.917,22,11.979,22c-4.118,0-7.826-1.522-10.632-4.057 c-0.22-0.199-0.024-0.471,0.241-0.317c3.027,1.762,6.771,2.823,10.639,2.823c2.608,0,5.476-0.541,8.115-1.66 C20.739,18.62,21.072,19.051,20.683,19.339z M21.336,21.043c-0.194,0.163-0.379,0.076-0.293-0.139 c0.284-0.71,0.92-2.298,0.619-2.684c-0.301-0.386-1.99-0.183-2.749-0.092c-0.23,0.027-0.266-0.173-0.059-0.319 c1.348-0.946,3.555-0.673,3.811-0.356C22.925,17.773,22.599,19.986,21.336,21.043z" />
+	</SVG>
+);

packages/block-library/src/social-link/icons/bandcamp.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	Path,
+	SVG,
+} from '@wordpress/components';
+
+export const BandcampIcon = ( ) => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M15.27 17.289 3 17.289 8.73 6.711 21 6.711 15.27 17.289" />
+	</SVG>
+);

packages/block-library/src/social-link/icons/deviantart.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	Path,
+	SVG,
+} from '@wordpress/components';
+
+export const DeviantartIcon = ( ) => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M 18.19 5.636 18.19 2 18.188 2 14.553 2 14.19 2.366 12.474 5.636 11.935 6 5.81 6 5.81 10.994 9.177 10.994 9.477 11.357 5.81 18.363 5.81 22 5.811 22 9.447 22 9.81 21.634 11.526 18.364 12.065 18 18.19 18 18.19 13.006 14.823 13.006 14.523 12.641 18.19 5.636z" />
+	</SVG>
+);

packages/block-library/src/social-link/icons/dribbble.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	Path,
+	SVG,
+} from '@wordpress/components';
+
+export const DribbbleIcon = ( ) => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M12,22C6.486,22,2,17.514,2,12S6.486,2,12,2c5.514,0,10,4.486,10,10S17.514,22,12,22z M20.434,13.369 c-0.292-0.092-2.644-0.794-5.32-0.365c1.117,3.07,1.572,5.57,1.659,6.09C18.689,17.798,20.053,15.745,20.434,13.369z M15.336,19.876c-0.127-0.749-0.623-3.361-1.822-6.477c-0.019,0.006-0.038,0.013-0.056,0.019c-4.818,1.679-6.547,5.02-6.701,5.334 c1.448,1.129,3.268,1.803,5.243,1.803C13.183,20.555,14.311,20.313,15.336,19.876z M5.654,17.724 c0.193-0.331,2.538-4.213,6.943-5.637c0.111-0.036,0.224-0.07,0.337-0.102c-0.214-0.485-0.448-0.971-0.692-1.45 c-4.266,1.277-8.405,1.223-8.778,1.216c-0.003,0.087-0.004,0.174-0.004,0.261C3.458,14.207,4.29,16.21,5.654,17.724z M3.639,10.264 c0.382,0.005,3.901,0.02,7.897-1.041c-1.415-2.516-2.942-4.631-3.167-4.94C5.979,5.41,4.193,7.613,3.639,10.264z M9.998,3.709 c0.236,0.316,1.787,2.429,3.187,5c3.037-1.138,4.323-2.867,4.477-3.085C16.154,4.286,14.17,3.471,12,3.471 C11.311,3.471,10.641,3.554,9.998,3.709z M18.612,6.612C18.432,6.855,17,8.69,13.842,9.979c0.199,0.407,0.389,0.821,0.567,1.237 c0.063,0.148,0.124,0.295,0.184,0.441c2.842-0.357,5.666,0.215,5.948,0.275C20.522,9.916,19.801,8.065,18.612,6.612z" />
+	</SVG>
+);

packages/block-library/src/social-link/icons/dropbox.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	Path,
+	SVG,
+} from '@wordpress/components';
+
+export const DropboxIcon = ( ) => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M12,6.134L6.069,9.797L2,6.54l5.883-3.843L12,6.134z M2,13.054l5.883,3.843L12,13.459L6.069,9.797L2,13.054z M12,13.459 l4.116,3.439L22,13.054l-4.069-3.257L12,13.459z M22,6.54l-5.884-3.843L12,6.134l5.931,3.663L22,6.54z M12.011,14.2l-4.129,3.426 l-1.767-1.153v1.291l5.896,3.539l5.897-3.539v-1.291l-1.769,1.153L12.011,14.2z" />
+	</SVG>
+);

packages/block-library/src/social-link/icons/etsy.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	Path,
+	SVG,
+} from '@wordpress/components';
+
+export const EtsyIcon = ( ) => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M9.16033,4.038c0-.27174.02717-.43478.48913-.43478h6.22283c1.087,0,1.68478.92391,2.11957,2.663l.35326,1.38587h1.05978C19.59511,3.712,19.75815,2,19.75815,2s-2.663.29891-4.23913.29891h-7.962L3.29076,2.163v1.1413L4.731,3.57609c1.00543.19022,1.25.40761,1.33152,1.33152,0,0,.08152,2.71739.08152,7.20109s-.08152,7.17391-.08152,7.17391c0,.81522-.32609,1.11413-1.33152,1.30435l-1.44022.27174V22l4.2663-.13587h7.11957c1.60326,0,5.32609.13587,5.32609.13587.08152-.97826.625-5.40761.70652-5.89674H19.7038L18.644,18.52174c-.84239,1.90217-2.06522,2.038-3.42391,2.038H11.1712c-1.3587,0-2.01087-.54348-2.01087-1.712V12.65217s3.0163,0,3.99457.08152c.76087.05435,1.22283.27174,1.46739,1.33152l.32609,1.413h1.16848l-.08152-3.55978.163-3.587H15.02989l-.38043,1.57609c-.24457,1.03261-.40761,1.22283-1.46739,1.33152-1.38587.13587-4.02174.1087-4.02174.1087Z" />
+	</SVG>
+);

packages/block-library/src/social-link/icons/facebook.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	Path,
+	SVG,
+} from '@wordpress/components';
+
+export const FacebookIcon = ( ) => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z" />
+	</SVG>
+);

packages/block-library/src/social-link/icons/feed.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	Path,
+	SVG,
+} from '@wordpress/components';
+
+export const FeedIcon = ( ) => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M2,8.667V12c5.515,0,10,4.485,10,10h3.333C15.333,14.637,9.363,8.667,2,8.667z M2,2v3.333 c9.19,0,16.667,7.477,16.667,16.667H22C22,10.955,13.045,2,2,2z M4.5,17C3.118,17,2,18.12,2,19.5S3.118,22,4.5,22S7,20.88,7,19.5 S5.882,17,4.5,17z" />
+	</SVG>
+);

packages/block-library/src/social-link/icons/flickr.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	Path,
+	SVG,
+} from '@wordpress/components';
+
+export const FlickrIcon = ( ) => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M6.5,7c-2.75,0-5,2.25-5,5s2.25,5,5,5s5-2.25,5-5S9.25,7,6.5,7z M17.5,7c-2.75,0-5,2.25-5,5s2.25,5,5,5s5-2.25,5-5 S20.25,7,17.5,7z" />
+	</SVG>
+);