From 2f92336f51b473348d9dea82c624483028c81fc7 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 16 Apr 2024 16:13:48 +0200 Subject: [PATCH] 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 Co-authored-by: richtabor Co-authored-by: ramonjd Co-authored-by: Mamaduka --- docs/reference-guides/core-blocks.md | 4 +- .../block-library/src/social-link/block.json | 2 +- .../block-library/src/social-link/edit.js | 53 ++++++++++--------- .../block-library/src/social-link/index.php | 6 ++- .../block-library/src/social-links/block.json | 2 +- .../block-library/src/social-links/edit.js | 2 +- 6 files changed, 36 insertions(+), 33 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index d0eb25b807e6d..3c8ee800d31aa 100644 --- 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 index d487465ef7966..37e8376f22ff0 100644 --- 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 index e08f8e6697cba..8873a4ae22082 100644 --- 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 ( <> - + - setAttributes( { label: value || undefined } ) + setAttributes( { label: value } ) } + placeholder={ socialLinkName } /> @@ -168,18 +169,18 @@ const SocialLinkEdit = ( { 'screen-reader-text': ! showLabels, } ) } > - { socialLinkLabel } + { socialLinkText } - { isSelected && showURLPopover && ( - - ) } + { isSelected && showURLPopover && ( + + ) } ); diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php index 69a145c0ff602..5e2bc616d0e5a 100644 --- 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 = '
  • '; $link .= ''; $link .= $icon; - $link .= '' . esc_html( $label ) . ''; + $link .= '' . esc_html( $text ) . ''; $link .= '
    • '; $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 index 0c8c7be1eba9a..45dbd9d698953 100644 --- 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 index 38a68e7f2dab2..52d26be50a6c9 100644 --- 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 ) { /> setAttributes( { showLabels: ! showLabels } )