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

Social Icon: Try auto-matching variation based on URL #59303

Open
wants to merge 10 commits into
base: trunk
Choose a base branch
from

Conversation

Mamaduka
Copy link
Member

@Mamaduka Mamaduka commented Feb 23, 2024

What?

Resolves #56259.

PR updates Social Icon's block to auto-match service variation based on the URL pattern. It also enables direct insertion of the block.

Note

Some variations like Mastodon, which allow services to be hosted on different domains, can't be auto-matched. But they can be inserted using the global block inserter.

Co-authored-by: Dave Smith [email protected]

Why?

See #56259.

How?

Define pattern matches for each variation, similar to how Embeds block implementation.

Testing Instructions

  1. Open a post or page.
  2. Insert the Social Icons block.
  3. Add a social icon.
  4. Type URLs for a few social networks.
  5. The block's variation should change with URLs.
  6. When a URL doesn't match the variation, it should display a link icon.

Testing Instructions for Keyboard

Same.

Screenshots or screencast

CleanShot.2024-02-23.at.09.40.34.mp4

@Mamaduka Mamaduka added [Type] Enhancement A suggestion for improvement. [Block] Social Affects the Social Block - used to display Social Media accounts labels Feb 23, 2024
@Mamaduka Mamaduka self-assigned this Feb 23, 2024
@Mamaduka Mamaduka requested review from getdave, jasmussen, richtabor, ndiego and ntsekouras and removed request for ajitbohra February 23, 2024 06:06
const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
'wp-social-link__is-incomplete': ! url,
[ `has-${ iconColor }-color` ]: iconColor,
[ `has-${ iconBackgroundColor }-background-color` ]:
iconBackgroundColor,
} );

const [ showPopover, setShowPopover ] = useState( ! url && ! service );
Copy link
Member Author

Choose a reason for hiding this comment

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

The inital state change allows Popover to be opened for freshly inserted blocks.

Copy link

github-actions bot commented Feb 23, 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: Mamaduka <[email protected]>
Co-authored-by: getdave <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: carlomanf <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: ndiego <[email protected]>
Co-authored-by: krokodok <[email protected]>

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

}

setAttributes( nextAttributes );
} }
Copy link
Member Author

Choose a reason for hiding this comment

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

Maybe we should provide a hit below the URL input for this new feature. Not sure about the design or text thought 😅

Copy link

github-actions bot commented Feb 23, 2024

Size Change: +722 B (+0.04%)

Total Size: 1.78 MB

Filename Size Change
build/block-library/index.min.js 218 kB +722 B (+0.33%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 951 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/index.min.js 7.31 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/content-rtl.css 4.57 kB
build/block-editor/content.css 4.56 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
build/block-editor/index.min.js 257 kB
build/block-editor/style-rtl.css 16.3 kB
build/block-editor/style.css 16.3 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 149 B
build/block-library/blocks/audio/editor.css 151 B
build/block-library/blocks/audio/style-rtl.css 132 B
build/block-library/blocks/audio/style.css 132 B
build/block-library/blocks/audio/theme-rtl.css 134 B
build/block-library/blocks/audio/theme.css 134 B
build/block-library/blocks/avatar/editor-rtl.css 115 B
build/block-library/blocks/avatar/editor.css 115 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 265 B
build/block-library/blocks/button/editor.css 265 B
build/block-library/blocks/button/style-rtl.css 538 B
build/block-library/blocks/button/style.css 538 B
build/block-library/blocks/buttons/editor-rtl.css 291 B
build/block-library/blocks/buttons/editor.css 291 B
build/block-library/blocks/buttons/style-rtl.css 328 B
build/block-library/blocks/buttons/style.css 328 B
build/block-library/blocks/calendar/style-rtl.css 240 B
build/block-library/blocks/calendar/style.css 240 B
build/block-library/blocks/categories/editor-rtl.css 132 B
build/block-library/blocks/categories/editor.css 131 B
build/block-library/blocks/categories/style-rtl.css 152 B
build/block-library/blocks/categories/style.css 152 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 122 B
build/block-library/blocks/code/theme.css 122 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 420 B
build/block-library/blocks/columns/style.css 420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 124 B
build/block-library/blocks/comment-author-avatar/editor.css 124 B
build/block-library/blocks/comment-author-name/style-rtl.css 72 B
build/block-library/blocks/comment-author-name/style.css 72 B
build/block-library/blocks/comment-content/style-rtl.css 120 B
build/block-library/blocks/comment-content/style.css 120 B
build/block-library/blocks/comment-date/style-rtl.css 65 B
build/block-library/blocks/comment-date/style.css 65 B
build/block-library/blocks/comment-template/style-rtl.css 200 B
build/block-library/blocks/comment-template/style.css 199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 228 B
build/block-library/blocks/comments-pagination/editor.css 217 B
build/block-library/blocks/comments-pagination/style-rtl.css 234 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 832 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 631 B
build/block-library/blocks/cover/editor-rtl.css 641 B
build/block-library/blocks/cover/editor.css 642 B
build/block-library/blocks/cover/style-rtl.css 1.62 kB
build/block-library/blocks/cover/style.css 1.6 kB
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 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 331 B
build/block-library/blocks/embed/editor.css 331 B
build/block-library/blocks/embed/style-rtl.css 419 B
build/block-library/blocks/embed/style.css 419 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 326 B
build/block-library/blocks/file/style-rtl.css 278 B
build/block-library/blocks/file/style.css 279 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 198 B
build/block-library/blocks/footnotes/style.css 197 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 229 B
build/block-library/blocks/form-input/style-rtl.css 342 B
build/block-library/blocks/form-input/style.css 342 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 344 B
build/block-library/blocks/form-submission-notification/editor.css 341 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 470 B
build/block-library/blocks/freeform/editor-rtl.css 2.6 kB
build/block-library/blocks/freeform/editor.css 2.6 kB
build/block-library/blocks/gallery/editor-rtl.css 955 B
build/block-library/blocks/gallery/editor.css 958 B
build/block-library/blocks/gallery/style-rtl.css 1.83 kB
build/block-library/blocks/gallery/style.css 1.82 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 344 B
build/block-library/blocks/group/editor.css 344 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 79 B
build/block-library/blocks/group/theme.css 79 B
build/block-library/blocks/heading/style-rtl.css 188 B
build/block-library/blocks/heading/style.css 188 B
build/block-library/blocks/html/editor-rtl.css 346 B
build/block-library/blocks/html/editor.css 347 B
build/block-library/blocks/image/editor-rtl.css 894 B
build/block-library/blocks/image/editor.css 892 B
build/block-library/blocks/image/style-rtl.css 1.59 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.65 kB
build/block-library/blocks/latest-comments/style-rtl.css 355 B
build/block-library/blocks/latest-comments/style.css 354 B
build/block-library/blocks/latest-posts/editor-rtl.css 179 B
build/block-library/blocks/latest-posts/editor.css 179 B
build/block-library/blocks/latest-posts/style-rtl.css 509 B
build/block-library/blocks/latest-posts/style.css 510 B
build/block-library/blocks/list/style-rtl.css 107 B
build/block-library/blocks/list/style.css 107 B
build/block-library/blocks/loginout/style-rtl.css 61 B
build/block-library/blocks/loginout/style.css 61 B
build/block-library/blocks/media-text/editor-rtl.css 304 B
build/block-library/blocks/media-text/editor.css 303 B
build/block-library/blocks/media-text/style-rtl.css 516 B
build/block-library/blocks/media-text/style.css 515 B
build/block-library/blocks/more/editor-rtl.css 427 B
build/block-library/blocks/more/editor.css 427 B
build/block-library/blocks/navigation-link/editor-rtl.css 644 B
build/block-library/blocks/navigation-link/editor.css 645 B
build/block-library/blocks/navigation-link/style-rtl.css 192 B
build/block-library/blocks/navigation-link/style.css 191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 295 B
build/block-library/blocks/navigation-submenu/editor.css 294 B
build/block-library/blocks/navigation/editor-rtl.css 2.2 kB
build/block-library/blocks/navigation/editor.css 2.2 kB
build/block-library/blocks/navigation/style-rtl.css 2.25 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 392 B
build/block-library/blocks/nextpage/editor.css 392 B
build/block-library/blocks/page-list/editor-rtl.css 378 B
build/block-library/blocks/page-list/editor.css 378 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 236 B
build/block-library/blocks/paragraph/editor.css 236 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 340 B
build/block-library/blocks/post-author-biography/style-rtl.css 74 B
build/block-library/blocks/post-author-biography/style.css 74 B
build/block-library/blocks/post-author-name/style-rtl.css 69 B
build/block-library/blocks/post-author-name/style.css 69 B
build/block-library/blocks/post-author/editor-rtl.css 107 B
build/block-library/blocks/post-author/editor.css 107 B
build/block-library/blocks/post-author/style-rtl.css 188 B
build/block-library/blocks/post-author/style.css 189 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 527 B
build/block-library/blocks/post-comments-form/style.css 528 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-content/style-rtl.css 79 B
build/block-library/blocks/post-content/style.css 79 B
build/block-library/blocks/post-date/style-rtl.css 62 B
build/block-library/blocks/post-date/style.css 62 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 155 B
build/block-library/blocks/post-excerpt/style.css 155 B
build/block-library/blocks/post-featured-image/editor-rtl.css 729 B
build/block-library/blocks/post-featured-image/editor.css 726 B
build/block-library/blocks/post-featured-image/style-rtl.css 347 B
build/block-library/blocks/post-featured-image/style.css 347 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 399 B
build/block-library/blocks/post-template/style.css 398 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 70 B
build/block-library/blocks/post-time-to-read/style.css 70 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 134 B
build/block-library/blocks/pullquote/editor.css 134 B
build/block-library/blocks/pullquote/style-rtl.css 342 B
build/block-library/blocks/pullquote/style.css 342 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 121 B
build/block-library/blocks/query-pagination-numbers/editor.css 118 B
build/block-library/blocks/query-pagination/editor-rtl.css 225 B
build/block-library/blocks/query-pagination/editor.css 215 B
build/block-library/blocks/query-pagination/style-rtl.css 287 B
build/block-library/blocks/query-pagination/style.css 283 B
build/block-library/blocks/query-title/style-rtl.css 64 B
build/block-library/blocks/query-title/style.css 64 B
build/block-library/blocks/query/editor-rtl.css 452 B
build/block-library/blocks/query/editor.css 451 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 238 B
build/block-library/blocks/quote/style.css 238 B
build/block-library/blocks/quote/theme-rtl.css 233 B
build/block-library/blocks/quote/theme.css 236 B
build/block-library/blocks/read-more/style-rtl.css 138 B
build/block-library/blocks/read-more/style.css 138 B
build/block-library/blocks/rss/editor-rtl.css 101 B
build/block-library/blocks/rss/editor.css 101 B
build/block-library/blocks/rss/style-rtl.css 288 B
build/block-library/blocks/rss/style.css 287 B
build/block-library/blocks/search/editor-rtl.css 199 B
build/block-library/blocks/search/editor.css 199 B
build/block-library/blocks/search/style-rtl.css 672 B
build/block-library/blocks/search/style.css 671 B
build/block-library/blocks/search/theme-rtl.css 113 B
build/block-library/blocks/search/theme.css 113 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 100 B
build/block-library/blocks/separator/editor.css 100 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 195 B
build/block-library/blocks/separator/theme.css 195 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 806 B
build/block-library/blocks/site-logo/editor.css 803 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-tagline/style-rtl.css 65 B
build/block-library/blocks/site-tagline/style.css 65 B
build/block-library/blocks/site-title/editor-rtl.css 85 B
build/block-library/blocks/site-title/editor.css 85 B
build/block-library/blocks/site-title/style-rtl.css 90 B
build/block-library/blocks/site-title/style.css 90 B
build/block-library/blocks/social-link/editor-rtl.css 338 B
build/block-library/blocks/social-link/editor.css 338 B
build/block-library/blocks/social-links/editor-rtl.css 757 B
build/block-library/blocks/social-links/editor.css 756 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.5 kB
build/block-library/blocks/spacer/editor-rtl.css 346 B
build/block-library/blocks/spacer/editor.css 346 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-of-contents/style-rtl.css 83 B
build/block-library/blocks/table-of-contents/style.css 83 B
build/block-library/blocks/table/editor-rtl.css 394 B
build/block-library/blocks/table/editor.css 394 B
build/block-library/blocks/table/style-rtl.css 640 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/editor-rtl.css 144 B
build/block-library/blocks/tag-cloud/editor.css 144 B
build/block-library/blocks/tag-cloud/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 B
build/block-library/blocks/template-part/editor-rtl.css 368 B
build/block-library/blocks/template-part/editor.css 368 B
build/block-library/blocks/template-part/theme-rtl.css 113 B
build/block-library/blocks/template-part/theme.css 113 B
build/block-library/blocks/term-description/style-rtl.css 126 B
build/block-library/blocks/term-description/style.css 126 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 165 B
build/block-library/blocks/text-columns/style.css 165 B
build/block-library/blocks/verse/style-rtl.css 98 B
build/block-library/blocks/verse/style.css 98 B
build/block-library/blocks/video/editor-rtl.css 396 B
build/block-library/blocks/video/editor.css 397 B
build/block-library/blocks/video/style-rtl.css 192 B
build/block-library/blocks/video/style.css 192 B
build/block-library/blocks/video/theme-rtl.css 134 B
build/block-library/blocks/video/theme.css 134 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.8 kB
build/block-library/editor.css 11.8 kB
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-library/style-rtl.css 14.8 kB
build/block-library/style.css 14.8 kB
build/block-library/theme-rtl.css 708 B
build/block-library/theme.css 712 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 52.4 kB
build/commands/index.min.js 16.1 kB
build/commands/style-rtl.css 955 B
build/commands/style.css 952 B
build/components/index.min.js 224 kB
build/components/style-rtl.css 12.1 kB
build/components/style.css 12.1 kB
build/compose/index.min.js 12.9 kB
build/core-commands/index.min.js 2.82 kB
build/core-data/index.min.js 73.2 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.35 kB
build/customize-widgets/style.css 1.35 kB
build/data-controls/index.min.js 641 B
build/data/index.min.js 8.98 kB
build/date/index.min.js 18 kB
build/deprecated/index.min.js 458 B
build/dom-ready/index.min.js 325 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-post/index.min.js 12.7 kB
build/edit-post/style-rtl.css 2.31 kB
build/edit-post/style.css 2.31 kB
build/edit-site/index.min.js 217 kB
build/edit-site/posts-rtl.css 7.28 kB
build/edit-site/posts.css 7.28 kB
build/edit-site/style-rtl.css 12.6 kB
build/edit-site/style.css 12.6 kB
build/edit-widgets/index.min.js 17.7 kB
build/edit-widgets/style-rtl.css 4.2 kB
build/edit-widgets/style.css 4.2 kB
build/editor/index.min.js 101 kB
build/editor/style-rtl.css 9.28 kB
build/editor/style.css 9.29 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.09 kB
build/format-library/style-rtl.css 476 B
build/format-library/style.css 476 B
build/hooks/index.min.js 1.54 kB
build/html-entities/index.min.js 445 B
build/i18n/index.min.js 3.58 kB
build/interactivity/debug.min.js 16.4 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.78 kB
build/interactivity/index.min.js 13.2 kB
build/interactivity/navigation.min.js 1.16 kB
build/interactivity/query.min.js 742 B
build/interactivity/router.min.js 2.8 kB
build/interactivity/search.min.js 615 B
build/is-shallow-equal/index.min.js 526 B
build/keyboard-shortcuts/index.min.js 1.31 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.18 kB
build/list-reusable-blocks/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.3 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.61 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/index.min.js 7.34 kB
build/patterns/style-rtl.css 687 B
build/patterns/style.css 685 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/preferences/style-rtl.css 554 B
build/preferences/style.css 554 B
build/primitives/index.min.js 829 B
build/priority-queue/index.min.js 1.54 kB
build/private-apis/index.min.js 1.01 kB
build/react-i18n/index.min.js 630 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.76 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.55 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.96 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.04 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.85 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react-jsx-runtime.min.js 560 B
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 965 B
build/warning/index.min.js 250 B
build/widgets/index.min.js 7.2 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

Copy link

github-actions bot commented Feb 23, 2024

Flaky tests detected in 0014fde.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10598789915
📝 Reported issues:

Copy link
Member

@fabiankaegy fabiankaegy left a comment

Choose a reason for hiding this comment

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

Love this and works as advertised :)

Feel free to wait for more technical / design feedback but from my perspective this is a great enhancement as is and I don't see any issues with the code :)

@Mamaduka
Copy link
Member Author

Thank you, @fabiankaegy!

What do you think about services that can be matched via URL? Do you think inserting them via the global inserter is a good option?

@fabiankaegy
Copy link
Member

Hmmmm good point. I missed that. I had assumed (not tested well enough) that clicking the plus icon would still bring up the block picker.

How do you feed about solving this by adding scope: [ 'transform' ] to the variations?

CleanShot 2024-02-23 at 08 49 33@2x
CleanShot 2024-02-23 at 08 49 23@2x

It looks odd right now because it doesn't use the dropdown but instead shows all the icons which I think is way too much. But kind of nice to have the ability to switch manually

@fabiankaegy
Copy link
Member

I think it would make sense to adjust this conditional here:

const Component = hasUniqueIcons ? ButtonComponent : VariationsDropdown;
to limit it to maybe 8 or so before it just always switches to the select?

@fabiankaegy fabiankaegy self-requested a review February 23, 2024 08:09
@Mamaduka
Copy link
Member Author

Currently, transformations in the Inspector panel don't scale well. @ntsekouras, is working to improve that in #46726. Once that PR is merged, we can add the `scope' to the variations.

Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

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

This is working better than expected. Before you merge, I'd love a quick gut-check from @richtabor as well, but from my end, this works great:

social icons transforming when typing a particular URL

That said, it seems nice to potentially explore a separate improvement to also auto-complete the https:// part of the URL. I.e. I'd love to be able to type in codepen.i and as soon as I type in the final o, it updates the whole to https://codepen.io.

Also separately, I feel like this PR potentially unlocks the Social Icon block to work on its own, without the Social Icons container:

List view showing social icons

I'd love to be able to insert just that one block and have it transform based on the URL. It does not need to deprecate the container block, and we'd want to copy over the color/style controls to work on the block itself. But it would be a huge win for things like adding social links in a navigation block or elsewhere.

@richtabor
Copy link
Member

Also separately, I feel like this PR potentially unlocks the Social Icon block to work on its own, without the Social Icons container:

That's quite interesting.

@richtabor
Copy link
Member

richtabor commented Feb 23, 2024

This feels nice. My one hesitation is a lack of understanding from this view on what I can do. Perhaps we need help text that makes it clearer? Even "Enter address" is unclear.

CleanShot 2024-02-23 at 11 57 37

@richtabor
Copy link
Member

It looks odd right now because it doesn't use the dropdown but instead shows all the icons which I think is way too much. But kind of nice to have the ability to switch manually

CleanShot 2024-02-23 at 12 00 19

I don't think this would work, as we're introducing the concept that a link relates to a social icon, but if we open up transforms, then we're breaking that relationship — as you can transform to a Facebook block, but have a Twitter link.

We could clear the link when transforming, but then again, with this new relationship, it's not a Facebook icon without a Facebook link.

@Mamaduka
Copy link
Member Author

That said, it seems nice to potentially explore a separate improvement to also auto-complete the https:// part of the URL. I.e. I'd love to be able to type in codepen.i and as soon as I type in the final o, it updates the whole to https://codepen.io.

Definitely doable.I am happy to follow up on this one.

Perhaps we need help text that makes it clearer? Even "Enter address" is unclear.

100%. A hint or help text below the input would be nice, and I would appreciate your help.

@getdave
Copy link
Contributor

getdave commented Feb 23, 2024

Definitely doable.I am happy to follow up on this one.

LinkControl has a isURLLike function which is pretty flexible and aims to detect possible URLs.

@ndiego
Copy link
Member

ndiego commented Feb 23, 2024

This is looking great, but I still would want to be able to add a Facebook icon with a dummy link for testing purposes. You also see this in patterns fairly often where the URL is set to # or something similar. I'm not necessarily saying that's good practice, but I just don't want that workflow/implementation to break.

@Mamaduka
Copy link
Member Author

@ndiego, that was also brought up in the issue . You should be able to use https://facebook.com/# like URLs for test content or patterns.

@Mamaduka
Copy link
Member Author

I believe that was the reason @ntsekouras closed PR, which was exploring enabling transformations for the Social Icons.

Another point that led me to closing the above PR is that even if we change the variation, the url would still point in a wrong 'place', so it still needs an additional step. This also makes me think that this PR(and thus updating the flow of inserting social icons) is a good way forward and probably resolves #46726 too. With this PR we just add the URL and we find the proper match.

@jasmussen
Copy link
Contributor

It's noble in principle to seek a correct URL, but we should also not jump through hoops or hold off meaningful improvements because it's possible to create a situation that isn't ideal. This will always be possible in editing software, no matter how much you do, at worst you could edit the markup manually. I like to think of us providing useful guardrails and smart defaults instead. Especially in the mastodon case, we have to open up those guardrails because the URL will often differ.

@Mamaduka
Copy link
Member Author

Valid point, @jasmussen!

I'll try to finalize feature early next week.

@Mamaduka Mamaduka force-pushed the try/social-icons-url-to-variation-matcher branch 2 times, most recently from 241287b to 5ad0ed4 Compare May 15, 2024 16:52
@getdave getdave force-pushed the try/social-icons-url-to-variation-matcher branch from 5ad0ed4 to 1586c6b Compare August 28, 2024 14:29
@getdave getdave self-assigned this Aug 30, 2024
@getdave
Copy link
Contributor

getdave commented Aug 30, 2024

@Mamaduka reached out to me on WP Slack and he's happy for me to take this PR forward towards merge.

@jeryj @MaggieCabrera @ajlende If you're able to help with testing and reviews that would be awesome 🙏

import { getProtocol, isValidProtocol } from '@wordpress/url';

// Please see packages/block-editor/src/components/link-control/is-url-like.js
export default function isURLLike( val ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

If we decide to ship this PR, I'm going to raise a PR to get this moved into the @wordpress/url package. Then I'll reuse it in both here and LinkControl.

@getdave getdave force-pushed the try/social-icons-url-to-variation-matcher branch from 0014fde to 4b67c7d Compare August 30, 2024 08:17
@getdave
Copy link
Contributor

getdave commented Aug 30, 2024

My only remaining concern here is that we've effectively made it harder to add specific icons. Unless you type in the URL of the service correctly it's now pretty hard to insert a specific social icon.

I'd say we should consider something akin to the way the LinkControl behaves in the Navigation block where you can click to add a particular block. In the case of Social clicking on Add block would show the most common social link block variations.

However, this would require moving the code to use LinkControl which is a major refactor and not something I'd recommend in this PR. So we might need to introduce a stepping stone here which simply displays a list of blocks directly below the URLPopover currently used in this PR.

I'd be curious to hear whether folks agree (cc @richtabor @jasmussen).

@jasmussen
Copy link
Contributor

Adding social links is already so difficult and complex a process due to how the block is built, that with this PR the user experience will be a net win, even if adding obscure icons may be slightly less obvious.

If we're concerned, Aki's suggestion of a "Replace" dropdown in the block toolbar for each item, would be a good addition.

@getdave
Copy link
Contributor

getdave commented Aug 30, 2024

Adding social links is already so difficult and complex a process due to how the block is built...

Hopefully this has been somewhat improved in #64877

...that with this PR the user experience will be a net win

Yes I agree it is an improvement.

...even if adding obscure icons may be slightly less obvious.

My primary concern would be that some people don't think about URLs like we do. Instead they think "I want to add a Facebook icon". So when they are faced with an form input they will be unsure about how to get the Facebook icon.

Moreover, they won't get the Facebook icon unless they type https://facebook.com. Any typo will result in a "Link" icon.

I'm suggesting we consider providing a UI which also provides a means to

  • see a list of social service icons
  • click to add their chosen service

Something like this...

Screen.Capture.on.2024-08-30.at.12-48-21.1.mp4

I appreciate it's a little rough in this implementation, but it's a pattern we use elsewhere (Navigation block).

Note: the code for the above demo is not on this PR.

If we're concerned, Aki's suggestion of a "Replace" dropdown in the block toolbar for each item, would be a good addition.

That might be a good stop gap, but for me it's too hidden to offer a long term solution to the problem I'm attempting to illustrate above.


To be clear, I don't want to block this PR, but I do want to flag the alternative user flow that I'm concerned about.

We had a similar issue with the Nav block where we over optimised for a particular linear flow which then caused knock on confusion for another set of users who expected a different flow.

@jasmussen
Copy link
Contributor

There could be something to it. I'm wary of adding too much complexity to the URL component, but effectively you could think of the 2nd level icon selector as an auto-complete preview, and explicit choice.

@ndiego
Copy link
Member

ndiego commented Aug 30, 2024

My primary concern would be that some people don't think about URLs like we do. Instead they think "I want to add a Facebook icon". So when they are faced with a form input they will be unsure about how to get the Facebook icon.

I agree with this. In my mind, the flow is: add the icon I want, then set the link.

Another flow I use personally, especially when building patterns, is inserting the most common icons and setting the link to #. The user can then update the links as needed. Would this still be possible?

@getdave
Copy link
Contributor

getdave commented Aug 30, 2024

Another flow I use personally, especially when building patterns, is inserting the most common icons and setting the link to #. The user can then update the links as needed. Would this still be possible?

Once the service is set, it's set. So with the UI I'm suggesting above folks could still use the flow you are outlining.

@getdave getdave removed their assignment Nov 12, 2024
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 [Type] Enhancement A suggestion for improvement.
Projects
Development

Successfully merging this pull request may close these issues.

Polish Social Icons setup state to make adding blocks more intuitive
10 participants