Make sure Social icons links aren't empty and improve UI clarity (#60047

) * Make sure social links are not empty. * Improve labels and descriptions. * Move popover outside of button to make the Apply button tooltip work. * socialLinkLabel fallbacks to the social media name so no need for undefined. * Link text setting panel open by default. * Remove the term media from social media. * Change panel title to Settings. * Improve labels. * Prevent empty social links on front end. * Fallback to social name in the editing UI. Co-authored-by: afercia <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: Mamaduka <[email protected]>
WordPress · Apr 16, 2024 · 2f92336 · 2f92336
1 parent 09849d7
commit 2f92336
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 33 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -860,7 +860,7 @@ Displays the name of this site. Update the block, and the changes apply everywhe
 
 ## Social Icon
 
-Display an icon linking to a social media profile or site. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-link))
+Display an icon linking to a social profile or site. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-link))
 
 -	**Name:** core/social-link
 -	**Category:** widgets
@@ -870,7 +870,7 @@ Display an icon linking to a social media profile or site. ([Source](https://git
 
 ## Social Icons
 
-Display icons linking to your social media profiles or sites. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-links))
+Display icons linking to your social profiles or sites. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-links))
 
 -	**Name:** core/social-links
 -	**Category:** widgets

diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json
@@ -5,7 +5,7 @@
 	"title": "Social Icon",
 	"category": "widgets",
 	"parent": [ "core/social-links" ],
-	"description": "Display an icon linking to a social media profile or site.",
+	"description": "Display an icon linking to a social profile or site.",
 	"textdomain": "default",
 	"attributes": {
 		"url": {

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
@@ -23,7 +23,7 @@ import {
 	PanelRow,
 	TextControl,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
 
 /**
@@ -58,7 +58,9 @@ const SocialLinkURLPopover = ( {
 						onChange={ ( nextURL ) =>
 							setAttributes( { url: nextURL } )
 						}
-						placeholder={ __( 'Enter address' ) }
+						placeholder={ __( 'Enter social link' ) }
+						label={ __( 'Enter social link' ) }
+						hideLabelFromVision
 						disableSuggestions
 						onKeyDown={ ( event ) => {
 							if (
@@ -91,7 +93,7 @@ const SocialLinkEdit = ( {
 	setAttributes,
 	clientId,
 } ) => {
-	const { url, service, label, rel } = attributes;
+	const { url, service, label = '', rel } = attributes;
 	const {
 		showLabels,
 		iconColor,
@@ -113,7 +115,12 @@ const SocialLinkEdit = ( {
 
 	const IconComponent = getIconBySite( service );
 	const socialLinkName = getNameBySite( service );
-	const socialLinkLabel = label ?? socialLinkName;
+	// The initial label (ie. the link text) is an empty string.
+	// We want to prevent empty links so that the link text always fallbacks to
+	// the social name, even when users enter and save an empty string or only
+	// spaces. The PHP render callback fallbacks to the social name as well.
+	const socialLinkText = label.trim() === '' ? socialLinkName : label;
+
 	const blockProps = useBlockProps( {
 		className: classes,
 		style: {
@@ -125,25 +132,19 @@ const SocialLinkEdit = ( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody
-					title={ sprintf(
-						/* translators: %s: name of the social service. */
-						__( '%s label' ),
-						socialLinkName
-					) }
-					initialOpen={ false }
-				>
+				<PanelBody title={ __( 'Settings' ) }>
 					<PanelRow>
 						<TextControl
 							__nextHasNoMarginBottom
-							label={ __( 'Link label' ) }
+							label={ __( 'Link text' ) }
 							help={ __(
-								'Briefly describe the link to help screen reader users.'
+								'The link text is visible when enabled from the parent Social Icons block.'
 							) }
-							value={ label || '' }
+							value={ label }
 							onChange={ ( value ) =>
-								setAttributes( { label: value || undefined } )
+								setAttributes( { label: value } )
 							}
+							placeholder={ socialLinkName }
 						/>
 					</PanelRow>
 				</PanelBody>
@@ -168,18 +169,18 @@ const SocialLinkEdit = ( {
 							'screen-reader-text': ! showLabels,
 						} ) }
 					>
-						{ socialLinkLabel }
+						{ socialLinkText }
 					</span>
-					{ isSelected && showURLPopover && (
-						<SocialLinkURLPopover
-							url={ url }
-							setAttributes={ setAttributes }
-							setPopover={ setPopover }
-							popoverAnchor={ popoverAnchor }
-							clientId={ clientId }
-						/>
-					) }
 				</Button>
+				{ isSelected && showURLPopover && (
+					<SocialLinkURLPopover
+						url={ url }
+						setAttributes={ setAttributes }
+						setPopover={ setPopover }
+						popoverAnchor={ popoverAnchor }
+						clientId={ clientId }
+					/>
+				) }
 			</li>
 		</>
 	);

diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
@@ -19,9 +19,11 @@
 function render_block_core_social_link( $attributes, $content, $block ) {
 	$open_in_new_tab = isset( $block->context['openInNewTab'] ) ? $block->context['openInNewTab'] : false;
 
+	$text = ! empty( $attributes['label'] ) ? trim( $attributes['label'] ) : '';
+
 	$service     = isset( $attributes['service'] ) ? $attributes['service'] : 'Icon';
 	$url         = isset( $attributes['url'] ) ? $attributes['url'] : false;
-	$label       = ! empty( $attributes['label'] ) ? $attributes['label'] : block_core_social_link_get_name( $service );
+	$text        = $text ? $text : block_core_social_link_get_name( $service );
 	$rel         = isset( $attributes['rel'] ) ? $attributes['rel'] : '';
 	$show_labels = array_key_exists( 'showLabels', $block->context ) ? $block->context['showLabels'] : false;
 
@@ -57,7 +59,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$link  = '<li ' . $wrapper_attributes . '>';
 	$link .= '<a href="' . esc_url( $url ) . '" class="wp-block-social-link-anchor">';
 	$link .= $icon;
-	$link .= '<span class="wp-block-social-link-label' . ( $show_labels ? '' : ' screen-reader-text' ) . '">' . esc_html( $label ) . '</span>';
+	$link .= '<span class="wp-block-social-link-label' . ( $show_labels ? '' : ' screen-reader-text' ) . '">' . esc_html( $text ) . '</span>';
 	$link .= '</a></li>';
 
 	$processor = new WP_HTML_Tag_Processor( $link );

diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json
@@ -5,7 +5,7 @@
 	"title": "Social Icons",
 	"category": "widgets",
 	"allowedBlocks": [ "core/social-link" ],
-	"description": "Display icons linking to your social media profiles or sites.",
+	"description": "Display icons linking to your social profiles or sites.",
 	"keywords": [ "links" ],
 	"textdomain": "default",
 	"attributes": {

diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
@@ -203,7 +203,7 @@ export function SocialLinksEdit( props ) {
 					/>
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Show labels' ) }
+						label={ __( 'Show text' ) }
 						checked={ showLabels }
 						onChange={ () =>
 							setAttributes( { showLabels: ! showLabels } )