Social Links: Add ability to change social icon sizes

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

@@ -1,9 +1,20 @@
-.wp-block-social-links .wp-social-link button {
-	color: currentColor;
-	padding: 6px;
+// The editor uses the button component, the frontend uses a link.
+// Therefore we unstyle the button component to make it more like the frontend.
+.wp-block-social-links .wp-social-link {
+	line-height: 0;
+
+	button {
+		font-size: inherit;
+		color: currentColor;
+		height: auto;
+		line-height: 0;
+
+		// This rule is duplicated from the style.scss and needs to be the same as there.
+		padding: 0.25em;
+	}
 }
 
 .wp-block-social-links.is-style-pill-shape .wp-social-link button {
-	padding-left: 16px;
-	padding-right: 16px;
+	padding-left: calc((2/3) * 1em);
+	padding-right: calc((2/3) * 1em);
 }

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

@@ -6,6 +6,9 @@
 		"openInNewTab": {
 			"type": "boolean",
 			"default": false
+		},
+		"size": {
+			"type": "string"
 		}
 	},
 	"providesContext": {

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

@@ -1,43 +1,119 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 
 import { Fragment } from '@wordpress/element';
 
 import {
+	BlockControls,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	useBlockProps,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { ToggleControl, PanelBody } from '@wordpress/components';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	PanelBody,
+	ToggleControl,
+	ToolbarItem,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { check } from '@wordpress/icons';
 
 const ALLOWED_BLOCKS = [ 'core/social-link' ];
 
+const sizeOptions = [
+	{ name: __( 'Small' ), value: 'has-small-icon-size' },
+	{ name: __( 'Normal' ), value: 'has-normal-icon-size' },
+	{ name: __( 'Large' ), value: 'has-large-icon-size' },
+	{ name: __( 'Huge' ), value: 'has-huge-icon-size' },
+];
+
 export function SocialLinksEdit( props ) {
 	const {
-		attributes: { openInNewTab },
+		attributes: { size, openInNewTab },
 		setAttributes,
 	} = props;
 
 	const SocialPlaceholder = (
 		<div className="wp-block-social-links__social-placeholder">
-			<div className="wp-block-social-link wp-social-link-facebook"></div>
-			<div className="wp-block-social-link wp-social-link-twitter"></div>
-			<div className="wp-block-social-link wp-social-link-instagram"></div>
+			<div className="wp-social-link wp-social-link-facebook"></div>
+			<div className="wp-social-link wp-social-link-twitter"></div>
+			<div className="wp-social-link wp-social-link-instagram"></div>
 		</div>
 	);
 
-	const blockProps = useBlockProps();
+	const className = classNames( size );
+	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
 		orientation: 'horizontal',
 		placeholder: SocialPlaceholder,
 		templateLock: false,
 		__experimentalAppenderTagName: 'li',
 	} );
+
+	const POPOVER_PROPS = {
+		position: 'bottom right',
+		isAlternate: true,
+	};
+
 	return (
 		<Fragment>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarItem>
+						{ ( toggleProps ) => (
+							<DropdownMenu
+								label={ __( 'Size' ) }
+								text={ __( 'Size' ) }
+								icon={ null }
+								popoverProps={ POPOVER_PROPS }
+								toggleProps={ toggleProps }
+							>
+								{ ( { onClose } ) => (
+									<MenuGroup>
+										{ sizeOptions.map( ( entry ) => {
+											return (
+												<MenuItem
+													icon={
+														( size ===
+															entry.value ||
+															( ! size &&
+																entry.value ===
+																	'has-normal-icon-size' ) ) &&
+														check
+													}
+													isSelected={
+														size === entry.value
+													}
+													key={ entry.value }
+													onClick={ () => {
+														setAttributes( {
+															size: entry.value,
+														} );
+													} }
+													onClose={ onClose }
+													role="menuitemradio"
+												>
+													{ entry.name }
+												</MenuItem>
+											);
+										} ) }
+									</MenuGroup>
+								) }
+							</DropdownMenu>
+						) }
+					</ToolbarItem>
+				</ToolbarGroup>
+			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl

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

@@ -6,17 +6,9 @@
 	}
 }
 
-// Reduce the paddings, margins, and UI of inner-blocks.
-// @todo: eventually we may add a feature that lets a parent container absorb the block UI of a child block.
-// When that happens, leverage that instead of the following overrides.
-.editor-styles-wrapper .wp-block-social-link {
-	margin: 0 8px 8px 0;
-
-	// Prevent toolbar from jumping when selecting / hovering a link.
-	&.is-selected,
-	&.is-hovered {
-		transform: none;
-	}
+// Prevent toolbar from jumping when selecting / hovering a link.
+.wp-social-link:hover {
+	transform: none;
 }
 
 .editor-styles-wrapper .wp-block-social-links {
@@ -26,40 +18,40 @@
 // Placeholder/setup state.
 .wp-block-social-links__social-placeholder {
 	display: flex;
+	opacity: 0.8;
 
-	.wp-block-social-link {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		margin: 0 $grid-unit-10 $grid-unit-10 0;
-		width: 36px;
-		height: 36px;
-		border-radius: $radius-round;
-		opacity: 0.8;
+	.wp-social-link {
+		padding: 0.25em;
+
+		.is-style-pill-shape & {
+			padding-left: calc((2/3) * 1em);
+			padding-right: calc((2/3) * 1em);
+		}
 	}
-}
 
-.is-style-logos-only .wp-block-social-links__social-placeholder .wp-block-social-link::before {
-	content: "";
-	display: block;
-	width: 18px;
-	height: 18px;
-	border-radius: $radius-round;
-	opacity: 0.8;
-	background: currentColor;
-}
+	.wp-social-link::before {
+		content: "";
+		display: block;
+		width: 1em;
+		height: 1em;
+		border-radius: $radius-round;
 
-.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-block-social-link {
-	border-radius: 9999px;
-	padding-left: 16px + 12px;
-	padding-right: 16px + 12px;
+		.is-style-logos-only & {
+			background: currentColor;
+		}
+	}
 }
 
 // Polish the Appender.
 .wp-block-social-links .block-list-appender {
-	margin: 0 0 $grid-unit-10 0;
+	margin: -$grid-unit-10 0;
 	display: flex;
 	align-items: center;
+
+	svg {
+		width: $icon-size;
+		height: $icon-size;
+	}
 }
 
 // Center flex items. This has an equivalent in style.scss.
@@ -69,16 +61,10 @@
 
 // Improve the preview, ensure buttons are fully opaque despite being disabled.
 // @todo: Look at improving the preview component to make this unnecessary.
-.block-editor-block-preview__content .wp-social-link:disabled {
+.block-editor-block-preview__content .components-button:disabled {
 	opacity: 1;
 }
 
-// Selected/unselected states.
-// Unselected block is preview, selected has additional options.
-[data-type="core/social-links"]:not(.is-selected):not(.has-child-selected) .wp-block-social-links {
-	min-height: 36px; // This height matches the height of the buttons and ensures an empty block doesn't collapse.
-}
-
 // Unconfigured placeholder links are semitransparent.
 .wp-social-link.wp-social-link__is-incomplete {
 	opacity: 0.5;
@@ -101,10 +87,3 @@
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
 }
-
-// To ensure a better selection footprint when editing, attach the margin to the block container.
-// @todo: This can very probably be removed entirely when this block receives a lighter DOM.
-.is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block[data-type="core/social-link"].is-selected::after,
-.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/social-link"]:not([contenteditable]):focus::after {
-	right: 8px;
-}

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: { size },
+	} = props;
+
+	const className = classNames( size );
+
 	return (
-		<ul { ...useBlockProps.save() }>
+		<ul { ...useBlockProps.save( { className } ) }>
 			<InnerBlocks.Content />
 		</ul>
 	);

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

@@ -16,19 +16,59 @@
 		border-bottom: 0;
 		box-shadow: none;
 	}
+
+	// Vertically balance the margin of each icon.
+	.wp-social-link {
+		// This needs specificity to override some themes.
+		&.wp-social-link.wp-social-link {
+			margin: 4px 8px 4px 0;
+		}
+
+		// By setting the font size, we can scale icons and paddings consistently based on that.
+		// This also allows themes to override this, if need be.
+		a {
+			padding: 0.25em;
+		}
+
+		svg {
+			width: 1em;
+			height: 1em;
+		}
+	}
+
+	// Icon sizes.
+	// Small.
+	&.has-small-icon-size {
+		font-size: 16px; // 16 makes for a quarter-padding that keeps the icon centered.
+	}
+
+	// Normal/default.
+	&,
+	&.has-normal-icon-size {
+		font-size: 24px;
+	}
+
+	// Large.
+	&.has-large-icon-size {
+		font-size: 36px;
+	}
+
+	// Huge.
+	&.has-huge-icon-size {
+		font-size: 48px;
+	}
 }
 
 .wp-social-link {
 	display: block;
-	width: 36px;
-	height: 36px;
 	border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
-	margin: 0 8px 8px 0;
 	transition: transform 0.1s ease;
 	@include reduce-motion("transition");
 
+	// Dimensions.
+	height: auto;
+
 	a {
-		padding: 6px;
 		display: block;
 		line-height: 0;
 		transition: transform 0.1s ease;
@@ -69,10 +109,6 @@
 
 		// Make these bigger.
 		padding: 4px;
-		svg {
-			width: 28px;
-			height: 28px;
-		}
 	}
 
 	@import "../social-link/socials-without-bg.scss";
@@ -85,7 +121,7 @@
 	}
 
 	.wp-social-link a {
-		padding-left: 16px;
-		padding-right: 16px;
+		padding-left: calc((2/3) * 1em);
+		padding-right: calc((2/3) * 1em);
 	}
 }