Switch social links to fixed sizes

Uses small, normal, large, and huge sizes matching the same presets as the font sizes. Uses the CustomSelectControl to pick which size Introduces class names `has-SIZE-icon-size` that applies to social link
WordPress · Oct 14, 2020 · f046167 · f046167
1 parent 38d3a6a
commit f046167
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 13 deletions.
diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json
@@ -6,6 +6,9 @@
 		"openInNewTab": {
 			"type": "boolean",
 			"default": false
+		},
+		"iconSize": {
+			"type": "string"
 		}
 	},
 	"providesContext": {

diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -9,7 +14,11 @@ import {
 	useBlockProps,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { ToggleControl, PanelBody } from '@wordpress/components';
+import {
+	CustomSelectControl,
+	PanelBody,
+	ToggleControl,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const ALLOWED_BLOCKS = [ 'core/social-link' ];
@@ -27,22 +36,67 @@ const TEMPLATE = [
 	[ 'core/social-link', { service: 'youtube' } ],
 ];
 
+// The default_option is used for the CustomSelectControl if no value is found.
+// This prevents deprecation issues for social links without a default size set.
+const defaultOption = {
+	name: __( 'Normal' ),
+	key: 'has-normal-icon-size',
+	style: { fontSize: '100%' },
+};
+
+const iconOptions = [
+	{
+		key: 'has-small-icon-size',
+		name: __( 'Small' ),
+		style: { fontSize: '75%' },
+	},
+	defaultOption,
+	{
+		name: __( 'Large' ),
+		key: 'has-large-icon-size',
+		style: { fontSize: '150%' },
+	},
+	{
+		name: __( 'Huge' ),
+		key: 'has-huge-icon-size',
+		style: { fontSize: '200%' },
+	},
+];
+
 export function SocialLinksEdit( props ) {
 	const {
-		attributes: { openInNewTab },
+		attributes: { iconSize, openInNewTab },
 		setAttributes,
 	} = props;
-	const blockProps = useBlockProps();
+
+	const className = classNames( iconSize );
+	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
 		templateLock: false,
 		template: TEMPLATE,
 		orientation: 'horizontal',
 		__experimentalAppenderTagName: 'li',
 	} );
+
 	return (
 		<Fragment>
 			<InspectorControls>
+				<PanelBody title={ __( 'Icon size' ) }>
+					<CustomSelectControl
+						className={ 'components-icon-size-picker__select' }
+						label={ __( 'Icon size' ) }
+						options={ iconOptions }
+						value={
+							iconOptions.find(
+								( option ) => option.key === iconSize
+							) || defaultOption
+						}
+						onChange={ ( { selectedItem } ) => {
+							setAttributes( { iconSize: selectedItem.key } );
+						} }
+					/>
+				</PanelBody>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
 						label={ __( 'Open links in new tab' ) }

diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js
@@ -1,11 +1,22 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-export default function save() {
+export default function save( props ) {
+	const {
+		attributes: { iconSize },
+	} = props;
+
+	const className = classNames( iconSize );
+
 	return (
-		<ul { ...useBlockProps.save() }>
+		<ul { ...useBlockProps.save( { className } ) }>
 			<InnerBlocks.Content />
 		</ul>
 	);

diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
@@ -1,6 +1,23 @@
-.wp-social-link {
-	--social-link-size: 36px;
-	--social-link-logo-size: 24px;
+
+// Normal / default size
+:root {
+	--wp-social-link-size: 36px;
+	--wp-social-link-logo-size: 24px;
+}
+
+.has-huge-icon-size > .wp-social-link {
+	--wp-social-link-size: 60px;
+	--wp-social-link-logo-size: 48px;
+}
+
+.has-large-icon-size > .wp-social-link {
+	--wp-social-link-size: 48px;
+	--wp-social-link-logo-size: 36px;
+}
+
+.has-small-icon-size > .wp-social-link {
+	--wp-social-link-size: 30px;
+	--wp-social-link-logo-size: 18px;
 }
 
 .wp-block-social-links {
@@ -25,10 +42,10 @@
 
 .wp-social-link {
 	display: block;
-	width: var(--social-link-size);
-	height: var(--social-link-size);
+	width: var(--wp-social-link-size);
+	height: var(--wp-social-link-size);
 	// This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
-	border-radius: var(--social-link-size);
+	border-radius: var(--wp-social-link-size);
 	margin: 0 8px 8px 0;
 	transition: transform 0.1s ease;
 	@include reduce-motion("transition");
@@ -47,8 +64,8 @@
 	svg {
 		color: currentColor;
 		fill: currentColor;
-		width: var(--social-link-logo-size);
-		height: var(--social-link-logo-size);
+		width: var(--wp-social-link-logo-size);
+		height: var(--wp-social-link-logo-size);
 	}
 
 	&:hover {