Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 10 commits into from
Apr 16, 2024
+36 −33
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
334fca2
Make sure social links are not empty.
afercia Mar 20, 2024
f9696e8
Improve labels and descriptions.
afercia Mar 20, 2024
302f22c
Move popover outside of button to make the Apply button tooltip work.
afercia Mar 21, 2024
8248dfe
socialLinkLabel fallbacks to the social media name so no need for und…
afercia Mar 21, 2024
682aa2d
Link text setting panel open by default.
afercia Mar 21, 2024
6b08f40
Remove the term media from social media.
afercia Mar 21, 2024
f637158
Change panel title to Settings.
afercia Mar 21, 2024
b3608e1
Improve labels.
afercia Mar 21, 2024
cecdb6f
Prevent empty social links on front end.
afercia Mar 21, 2024
07c17f9
Fallback to social name in the editing UI.
afercia Mar 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/social-link/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
53 changes: 27 additions & 26 deletions packages/block-library/src/social-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
PanelRow,
TextControl,
} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { __ } from '@wordpress/i18n';
import { keyboardReturn } from '@wordpress/icons';

/**
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -91,7 +93,7 @@ const SocialLinkEdit = ( {
setAttributes,
clientId,
} ) => {
const { url, service, label, rel } = attributes;
const { url, service, label = '', rel } = attributes;
const {
showLabels,
iconColor,
Expand All @@ -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: {
Expand All @@ -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' ) }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't use "Link text" as a control label elsewhere. Perhaps we should just use "Text" and allow for the help prop to communicate what it is.

LinkControl uses "Text" and the navigation link block uses "Label" (which needs to be changed to "Text", to map to the LinkControl). I suspect we can do the same here for consistency.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't use "Link text" as a control label elsewhere.

We should. See also #59993

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I disagree. In LinkControl, it's duplicative to have "Link text" and "Link URL" when you're opening/editing a link.

But what we should do here is the same controls as the Navigation Item blocks (like Custom Link), where you have the same "Text" and "Link" fields, in the same order.

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 }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A nice addition!

/>
</PanelRow>
</PanelBody>
Expand All @@ -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>
</>
);
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/social-link/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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 );
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/social-links/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/social-links/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ export function SocialLinksEdit( props ) {
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show labels' ) }
label={ __( 'Show text' ) }
checked={ showLabels }
onChange={ () =>
setAttributes( { showLabels: ! showLabels } )
Expand Down
Loading