Social Links: Add ability to change social icon sizes (#25921)

* Social Links: Add variables to change icon sizes This adds CSS custom properties to alter the circle/logo sizes. I'm not quite sure how to integrate this in to make it adjustable, maybe as a theme.json optoin? First, we may want to create as fixed sizes (sm, med, large) to make sure things look right. There are two values to adjust, the outer circle and the inner logo. So it is possible to make the icons all out of sorts if the sizes don't match properly. * 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 * Ensure that icons aren't cut off by their button container in the editor. * Switch size control to toolbar * Add check icon for selected menuitem * Add isAlternate prop for Dropdown * Initial refactor work. * Refactor to use ems. * Small tweaks. * Fix variations. * Get the setup state working. * Don't size up placeholder state on hover. * Add checkmark to normal size even if not set The default size is normal, even if the iconsize is not set, so this sets the checkmark in the dropdown to reflect. * Use math for nicer padding. Props @kirilzh * Add specificity to margins to fix a theme issue. * iconSize -> size * Hover cleanup. * Try using DropdownMenu component * Fix calc. * Try text for button instead of icon A test to see what we think of modifying the DropdownMenu/Button to accept a text property which when specified and icon=null than it will show instead of the icon. * Add popover props for isAlternate * Display size name as label Switches the button to display the name as the label for example "Large" instead of just showing "Size" Fix issue with { onClose } not being destructured Pass toggleProps forward. * Switch back to 'Size' in toolbar Co-authored-by: Kjell Reigstad <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Nov 6, 2020 · 422b21c · 422b21c
1 parent 24a4f44
commit 422b21c
Show file tree

Hide file tree

Showing 6 changed files with 188 additions and 72 deletions.
diff --git a/packages/block-library/src/social-link/editor.scss b/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);
 }
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
+		},
+		"size": {
+			"type": "string"
 		}
 	},
 	"providesContext": {

diff --git a/packages/block-library/src/social-links/edit.js b/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

diff --git a/packages/block-library/src/social-links/editor.scss b/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;
-}
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: { size },
+	} = props;
+
+	const className = classNames( size );
+
 	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
@@ -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);
 	}
 }