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.

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

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

Merged
merged 10 commits into from
Apr 16, 2024

Conversation

afercia
Copy link
Contributor

@afercia afercia commented Mar 20, 2024

Fixes #60044

What?

Social links can be empty when users save the link text input field with an empty value or only spaces.

Why?

Empty links are far from ideal for semantics. SEO, and accessibility.

How?

  • Makes sure the social link text isn't empty by implementing a fallback to the social name.
  • The fallback is transparently shown in the editing UI: Users can still empty the link text input field or save only spaces but the UI will show the social name fallback.
  • Terminology: changes 'social media' to 'social'
  • The popover input field placeholder changes from 'Enter address' to 'Enter social link'
  • Changes labeling of the input field from default 'URL' to 'Enter social link' so that it matches the visibile placeholder
  • Simplifies the settings panel title to 'Settings'
  • Changes the label of the input field from 'Link label' to 'Link text'
  • Changes the input description to 'The link text is visible when enabled from the parent Social Icons block.'
  • Adds a placeholder to the input field with the social name, as that's the default value
  • Moves the SocialLinkURLPopover outside of the social link Button so that the tooltip of the button within the popover works.
  • In the parent Social Links block, changes the label 'Show labels' to 'Show text'.

Testing Instructions

  • Add a Social Icons block.
  • To better test, enable 'Show labels' in the block settings panel.
  • Add a Social link.
  • Observe the social link shows the social name.
  • Click the social link to open the popover and apply a social link URL.
  • Hover or focus the 'Apply' button in the popover and observe it shows a tooltip.
  • In the block settings inspector, observe the Link Text input field is empty and shows a placeholder with the social name instead of being entirely empty.
  • Publish the post.
  • Go to the front end and observe the social link does have a link text (the social name).
  • In the editor, change the link text to some custom value and save.
  • Observe that both the editor and the front end show the new link text.
  • In the editor, change the link text to only spaces and save.
  • Observe that both the editor and the front end show the social name as the link text.
  • In the editor, empty the link text and save.
  • Observe that both the editor and the front end show the social name as the link text.
  • Check all the new labels and descriptions listed in the 'How' section.

Testing Instructions for Keyboard

Screenshots or screencast

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Block] Social Affects the Social Block - used to display Social Media accounts labels Mar 20, 2024
Copy link
Member

@richtabor richtabor left a comment

Choose a reason for hiding this comment

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

Nice effort. I left a few notes, leading to this result:

CleanShot 2024-03-20 at 14 05 22

@@ -58,7 +58,9 @@ const SocialLinkURLPopover = ( {
onChange={ ( nextURL ) =>
setAttributes( { url: nextURL } )
}
placeholder={ __( 'Enter address' ) }
placeholder={ __( 'Enter social media link' ) }
Copy link
Member

Choose a reason for hiding this comment

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

I don't think "Enter social media link" is the right placeholder text. Although this is the Social Links block, not all of these are 100% social media links. Meetup, Skype, Mail, to name a few.

Perhaps "Enter social link" is clearer.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

OK then I guess we have to remove 'media' from other descriptions as well, e.g. in the block cards:

Screenshot 2024-03-21 at 10 53 54

Copy link
Member

Choose a reason for hiding this comment

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

That's a bit more descriptive with "or site", but sure, I'm fine with that. It's not a particularly great description as-is, if you have ideas on that front.

@@ -128,19 +130,19 @@ const SocialLinkEdit = ( {
<PanelBody
title={ sprintf(
/* translators: %s: name of the social service. */
__( '%s label' ),
__( '%s 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.

I actually think we don't need the social service name here, as it's clear that this is the %s block. Perhaps just the standard "Settings" label is more than enough.

CleanShot 2024-03-20 at 13 47 08

Copy link
Member

Choose a reason for hiding this comment

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

As an aside, we could probably make the PanelBody start open, like most of the other blocks. There's no reason to really hide it here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

As an aside, we could probably make the PanelBody start open, like most of the other blocks. There's no reason to really hide it here.

Thanks @richtabor yes good point, will look into it.
For the labels, I'd lean towards 'link text' as that's how most users call a link text.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I actually think we don't need the social service name here,

Nice, that would also simplify the label and avoid strings with variable placeholders like __( '%s label' ). Those should always be avoided because they're not fully translatable. They are problematic when translators need to swap the order or adjust to genre etc. Example from the current Italian translation:

Screenshot 2024-03-21 at 14 09 03

Copy link
Member

Choose a reason for hiding this comment

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

For the labels, I'd lean towards 'link text' as that's how most users call a link text.

I'm not sure I'd characterize this as terminology that most users use, but I'm ok with it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I would like to remind everyone 'Link Text' is what users are familiar with since quite a few years as that's what Classic editor always used:

Screenshot 2024-03-22 at 13 46 54

socialLinkName
) }
initialOpen={ false }
>
<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.

@@ -203,7 +203,7 @@ export function SocialLinksEdit( props ) {
/>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show labels' ) }
label={ __( 'Show links text' ) }
Copy link
Member

Choose a reason for hiding this comment

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

"Show links text" doesn't quiet land comprehension-wise. "Show labels" is much more understandable, even though it's not consistent verbiage. Perhaps "Show text" is sufficient.

help={ __(
'Briefly describe the link to help screen reader users.'
'The link text is only visible when Show links text is enabled.'
Copy link
Member

Choose a reason for hiding this comment

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

Perhaps something a bit clearer, like "Visible when enabled from the parent Social Icons block."

@@ -21,7 +21,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {

$service = ( isset( $attributes['service'] ) ) ? $attributes['service'] : 'Icon';
$url = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false;
$label = ( isset( $attributes['label'] ) ) ? $attributes['label'] : block_core_social_link_get_name( $service );
$label = ( ! empty( $attributes['label'] ) ) ? $attributes['label'] : block_core_social_link_get_name( $service );
Copy link
Member

Choose a reason for hiding this comment

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

Sorry! I had already created a PR for this, with an extra check in edit.js. It's been merged, but I attributed you in the commit.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@ramonjd yes I saw #60060 this morning, thanks.
It would be nice to better coordinate. Creating an issue before any non trivial PR, as required by the contributing guidelines of this project, would help avoid duplicated efforts. I don't see any issue associated to #60060. Thanks.

@afercia afercia force-pushed the fix/social-icons-empty-links branch from dff5402 to f637158 Compare March 21, 2024 13:04
Copy link

github-actions bot commented Mar 21, 2024

Size Change: +956 B (0%)

Total Size: 1.72 MB

Filename Size Change
build/block-editor/index.min.js 253 kB +17 B (0%)
build/block-library/blocks/audio/theme-rtl.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/audio/theme.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/cover/style-rtl.css 1.7 kB +7 B (0%)
build/block-library/blocks/cover/style.css 1.69 kB +7 B (0%)
build/block-library/blocks/embed/theme-rtl.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/embed/theme.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/image/theme-rtl.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/image/theme.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/pullquote/theme-rtl.css 174 B +6 B (+4%)
build/block-library/blocks/pullquote/theme.css 174 B +6 B (+4%)
build/block-library/blocks/quote/theme-rtl.css 233 B +10 B (+4%)
build/block-library/blocks/quote/theme.css 235 B +9 B (+4%)
build/block-library/blocks/social-links/editor-rtl.css 678 B -4 B (-1%)
build/block-library/blocks/social-links/editor.css 678 B -3 B (0%)
build/block-library/blocks/table/theme-rtl.css 152 B +6 B (+4%)
build/block-library/blocks/table/theme.css 152 B +6 B (+4%)
build/block-library/blocks/template-part/editor-rtl.css 431 B +28 B (+7%) 🔍
build/block-library/blocks/template-part/editor.css 431 B +28 B (+7%) 🔍
build/block-library/blocks/template-part/theme-rtl.css 107 B +6 B (+6%) 🔍
build/block-library/blocks/template-part/theme.css 107 B +6 B (+6%) 🔍
build/block-library/blocks/video/theme-rtl.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/video/theme.css 133 B +7 B (+6%) 🔍
build/block-library/editor-rtl.css 12.4 kB +25 B (0%)
build/block-library/editor.css 12.4 kB +26 B (0%)
build/block-library/index.min.js 218 kB +59 B (0%)
build/block-library/style-rtl.css 14.8 kB +9 B (0%)
build/block-library/style.css 14.8 kB +5 B (0%)
build/block-library/theme-rtl.css 707 B +19 B (+3%)
build/block-library/theme.css 713 B +20 B (+3%)
build/edit-post/index.min.js 24 kB -57 B (0%)
build/edit-site/index.min.js 217 kB -577 B (0%)
build/edit-site/style-rtl.css 15 kB +74 B (0%)
build/edit-site/style.css 15.1 kB +80 B (+1%)
build/editor/index.min.js 65 kB +960 B (+1%)
build/editor/style-rtl.css 5.42 kB +61 B (+1%)
build/editor/style.css 5.42 kB +61 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.26 kB
build/block-directory/style-rtl.css 1.03 kB
build/block-directory/style.css 1.03 kB
build/block-editor/content-rtl.css 4.43 kB
build/block-editor/content.css 4.43 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
build/block-editor/style-rtl.css 15.6 kB
build/block-editor/style.css 15.6 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 415 B
build/block-library/blocks/button/editor.css 414 B
build/block-library/blocks/button/style-rtl.css 627 B
build/block-library/blocks/button/style.css 626 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 322 B
build/block-library/blocks/embed/editor.css 322 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 327 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 471 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.72 kB
build/block-library/blocks/gallery/style.css 1.72 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 647 B
build/block-library/blocks/group/editor.css 647 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 878 B
build/block-library/blocks/image/editor.css 878 B
build/block-library/blocks/image/style-rtl.css 1.6 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/view.min.js 1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 306 B
build/block-library/blocks/media-text/editor.css 305 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 259 B
build/block-library/blocks/navigation-link/style.css 257 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.02 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 409 B
build/block-library/blocks/post-template/style.css 408 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 354 B
build/block-library/blocks/pullquote/style.css 354 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 B
build/block-library/blocks/read-more/style-rtl.css 140 B
build/block-library/blocks/read-more/style.css 140 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 629 B
build/block-library/blocks/search/style.css 628 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 478 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 229 B
build/block-library/blocks/separator/style.css 229 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/style-rtl.css 1.48 kB
build/block-library/blocks/social-links/style.css 1.48 kB
build/block-library/blocks/spacer/editor-rtl.css 350 B
build/block-library/blocks/spacer/editor.css 350 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.8 kB
build/commands/index.min.js 15.6 kB
build/commands/style-rtl.css 935 B
build/commands/style.css 930 B
build/components/index.min.js 224 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.9 kB
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.77 kB
build/core-data/index.min.js 72.9 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.98 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 558 B
build/edit-post/classic.css 558 B
build/edit-post/style-rtl.css 5.58 kB
build/edit-post/style.css 5.57 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.17 kB
build/edit-widgets/style.css 4.16 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.1 kB
build/format-library/style-rtl.css 492 B
build/format-library/style.css 490 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/index.min.js 13 kB
build/interactivity/navigation.min.js 1.15 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 1.36 kB
build/interactivity/search.min.js 618 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.74 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 851 B
build/list-reusable-blocks/style.css 849 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 2 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 742 B
build/patterns/index.min.js 5.73 kB
build/patterns/style-rtl.css 553 B
build/patterns/style.css 552 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.05 kB
build/preferences/index.min.js 2.81 kB
build/preferences/style-rtl.css 710 B
build/preferences/style.css 712 B
build/primitives/index.min.js 975 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 623 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.73 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.5 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.03 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.72 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 957 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.22 kB
build/widgets/style-rtl.css 1.17 kB
build/widgets/style.css 1.17 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@afercia
Copy link
Contributor Author

afercia commented Mar 21, 2024

Looks like there is a problem with the 'Mail' icon and text color. Not sure why. Will double check all social icons as well.

Update: this happens with the following social links:

  • Link
  • Mail
  • RSS feed
  • Goodreads

They're the only ones that by default have dark text on light background. As such, they behave differently when setting a background color for all the social links, which makes it a bit useless as theny users are forced to set again also the text color. Will create a separate issue.

Screenshot:

Screenshot 2024-03-21 at 14 23 19

@afercia
Copy link
Contributor Author

afercia commented Mar 21, 2024

As a final improvement, I would like to prevent users from saving a link text made of only spaces and fallback to the social name. Will look into it tomorrow.

@afercia
Copy link
Contributor Author

afercia commented Mar 22, 2024

In the latest commit I'm trying to make the editing UI reflect what happens on the front end, where an empty link text now always fallbacks to the social name. I'd appreciate some eyes on it and any better idea is welcome.

Basically:

  • We want to avoid empty links on the front end.
  • The PHP render callback already takes care of the front end.
  • In the UI, let users do whatever they want with the inputu field, also save it empty or with only spaces but...
  • Make the UI show that en empty value (or only spaces) will fallback to the social name.
  • To reflect in the UI the actual behavior, the input field is now initially empty.
  • The input placeholder shows the default value (the social name).

Screenshot of the input placeholder that shows the default to the social name:

Screenshot 2024-04-15 at 12 20 21

@afercia afercia marked this pull request as ready for review March 22, 2024 14:51
Copy link

github-actions bot commented Mar 22, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: afercia <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: Mamaduka <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@afercia
Copy link
Contributor Author

afercia commented Apr 15, 2024

@WordPress/gutenberg-core I'd appreciate a review, when you have a chance 🙇🏽‍♂️

}
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!

Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

Thank you, @afercia!

The changes test well and look good to me from the code perspective ✅

I see there's an ongoing discussion regarding new input labels. I'll defer to you and @richtabor on that one.

@afercia
Copy link
Contributor Author

afercia commented Apr 15, 2024

@Mamaduka 👋🏽 thanks for your review.

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

I think I already mentioned that's somehow an inaccurate feedback. WordPress always used the terminology 'Link text' since ages. That is what users have been used to see for years in the Classic Editor. I'm not sure looking only at Gutenberg is the best way to provide users with what they expect.

Screenshot of the link editing dialog in Classic Editor:

Screenshot 2024-04-15 at 14 25 13

@Mamaduka
Copy link
Member

@afercia, I rarely have strong opinions about the labels. I am happy to trust the a11y and the design teams :)

@richtabor, can you have another look on proposed label changes? 🙇

@afercia
Copy link
Contributor Author

afercia commented Apr 16, 2024

Lack of or late feedback should not block this improvement. I'm going to merge it. Labels can always be discussed later and adjusted in the scope of a broader audit of the link editing labels.

@afercia afercia merged commit 2f92336 into trunk Apr 16, 2024
66 checks passed
@afercia afercia deleted the fix/social-icons-empty-links branch April 16, 2024 14:13
@github-actions github-actions bot added this to the Gutenberg 18.2 milestone Apr 16, 2024
@richtabor
Copy link
Member

I think #60047 (comment) that's somehow an inaccurate feedback. WordPress always used the terminology 'Link text' since ages. That is what users have been used to see for years in the Classic Editor. I'm not sure looking only at Gutenberg is the best way to provide users with what they expect.

Screenshot of the link editing dialog in Classic Editor:

My feedback is accurate. The classic editor is not the same experience.

We should not be making inconsistent one-off changes based on much older iterations. I am always on the side of consistency, with a holistic approach to revising. We don't use "Link text" anywhere in the current WordPress editor.

@afercia
Copy link
Contributor Author

afercia commented Apr 26, 2024

My feedback is accurate.

On a general note, honestly I think all contributors should be more open to the fact that other contributors may have different ideas. Disagreement in an open source project is totally fine. Sharing different ideas may even lead to better results. What is not great in a collaborative open source project is to pretend to be always right.

To me, changing long established conventions based on personal opinions isn't great for users.

I'm not opposed to changes a priori. But, changes that are only based on personal opinions should at the very least be validated with some user testing. In WordPress, the text of a link is called 'Link text' and I don't see any good reason to change it.

@richtabor
Copy link
Member

In WordPress, the text of a link is called 'Link text' and I don't see any good reason to change it.

It's not about being right or wrong. Opinions aside, throughout the WordPress editor it's not called "Link text" — except for this one instance. That's objectively a departure from the rest of the editor experience, which I consider a regression.

@afercia
Copy link
Contributor Author

afercia commented May 3, 2024

I agree the terminology should be consistent throughout the entire WordPress user interface. That's not only the Gutenberg editor. Looking only at the editor doesn't help providing users with a consistent experience.
I will create a new issue to address this terminology more holistically.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Social Affects the Social Block - used to display Social Media accounts [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Social links: Prevent empty links and improve UI description
4 participants