Social: Allow custom link icons using block variations

[Mamaduka]

What?

Closes #19041. Related #30749, #39419, #39868, #55142.

PR fixes variation handling in the Social Link block and adds a filter for consumers to allow rendering their custom variations on the frontend.

[!NOTE] PR is based on previous excellent work by @gaambo - #59368 and is similar to @ndiego's work on the Social Sharing block.

Why?

The update enables extenders to create and add their own Social Links, eliminating the need for the core to maintain a lengthy list of social services.

How?

• Introduce the new block_core_social_link_services filter. Note: https://github.com/WordPress/gutenberg/pull/70261#discussion_r2113612030.
• Dynamically derive the current social service based on active variation in the block editor.

Testing Instructions

1. Register the custom Social Link variation. See example below.
2. Create a post.
3. Add Social Links and your custom variation.
4. Save the post and preview it.
5. Confirm that the custom variation is rendered correctly.

Example

JS variation, can be run in console

const {registerBlockVariation} = wp.blocks;
const {createElement: el} = wp.element;
const {Path, SVG} = wp.primitives

const DropletIcon = el(SVG, {
    viewBox: '0 0 24 24',
    width: 24,
    height: 24
}, el(Path, {
    d: 'M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3zm-5.1 7.6c-2.5 0-4.6-2.1-4.6-4.6 0-.3.1-1 .8-2.3.5-.9 1.1-1.9 2-3.1.7-.9 1.3-1.7 1.8-2.3.7.8 1.3 1.6 1.8 2.3.8 1.1 1.5 2.2 2 3.1.7 1.3.8 2 .8 2.3 0 2.5-2.1 4.6-4.6 4.6z'
}))

registerBlockVariation('core/social-link', {
    name: 'droplet',
    title: 'Droplet',
    icon: DropletIcon,
    attributes: {
        service: 'droplet',
    },
    isActive: [ 'service' ]
});

Server-side filter

// A method responsible for adding the data for rendering the block on frontend.
function droplet_block_core_social_link( $services_data ) {
	$services_data['droplet'] = [
		'name' => 'Droplet',
		'icon' => '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3zm-5.1 7.6c-2.5 0-4.6-2.1-4.6-4.6 0-.3.1-1 .8-2.3.5-.9 1.1-1.9 2-3.1.7-.9 1.3-1.7 1.8-2.3.7.8 1.3 1.6 1.8 2.3.8 1.1 1.5 2.2 2 3.1.7 1.3.8 2 .8 2.3 0 2.5-2.1 4.6-4.6 4.6z"></path></svg>'
	];

	return $services_data;
}
// This is a temp filter.
add_filter( 'gutenberg_block_core_social_link_services', 'droplet_block_core_social_link' );
// The final filter without the Gutenberg prefix.
add_filter( 'block_core_social_link_services', 'droplet_block_core_social_link' );

Optional styling

:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-droplet {
  background-color:#1da1f2;
  color:#fff;
}

Testing Instructions for Keyboard

Same.

Screenshots or screencast

[github-actions[bot]]

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @mkaz, @KoiKoneessa, @mkkeck, @YogieAnamCara, @aksthelion, @bshuchter, @davidallenlewis, @chs-kasvu, @hundkurserforalla, @thekamilpro, @aut0poietic.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: mkaz, KoiKoneessa, mkkeck, YogieAnamCara, aksthelion, bshuchter, davidallenlewis, chs-kasvu, hundkurserforalla, thekamilpro, aut0poietic.

Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: gziolo <[email protected]>
Co-authored-by: bph <[email protected]>
Co-authored-by: costasovo <[email protected]>
Co-authored-by: strarsis <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: talldan <[email protected]>
Co-authored-by: apmeyer <[email protected]>
Co-authored-by: Drivingralle <[email protected]>
Co-authored-by: phil-sola <[email protected]>
Co-authored-by: nurianadal <[email protected]>
Co-authored-by: daveguitaruno <[email protected]>
Co-authored-by: 0aveRyan <[email protected]>

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

[github-actions[bot]]

Size Change: +84 B (0%)

Total Size: 1.85 MB

Filename	Size	Change
build/block-library/index.min.js	228 kB	+84 B (+0.04%)

ℹ️ View Unchanged

Filename	Size
build-module/a11y/index.min.js	482 B
build-module/block-library/file/view.min.js	447 B
build-module/block-library/form/view.min.js	533 B
build-module/block-library/image/view.min.js	1.8 kB
build-module/block-library/navigation/view.min.js	1.19 kB
build-module/block-library/query/view.min.js	767 B
build-module/block-library/search/view.min.js	639 B
build-module/interactivity-router/index.min.js	1.71 kB
build-module/interactivity/debug.min.js	17.5 kB
build-module/interactivity/index.min.js	13.9 kB
build/a11y/index.min.js	952 B
build/annotations/index.min.js	2.26 kB
build/api-fetch/index.min.js	2.4 kB
build/autop/index.min.js	2.12 kB
build/blob/index.min.js	579 B
build/block-directory/index.min.js	7.18 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.42 kB
build/block-editor/default-editor-styles-rtl.css	392 B
build/block-editor/default-editor-styles.css	392 B
build/block-editor/index.min.js	264 kB
build/block-editor/style-rtl.css	15.9 kB
build/block-editor/style.css	15.9 kB
build/block-library/blocks/archives/editor-rtl.css	84 B
build/block-library/blocks/archives/editor.css	83 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	554 B
build/block-library/blocks/button/style.css	554 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	349 B
build/block-library/blocks/buttons/style.css	349 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	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	139 B
build/block-library/blocks/code/style.css	139 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-edit-link/style-rtl.css	70 B
build/block-library/blocks/comment-edit-link/style.css	70 B
build/block-library/blocks/comment-reply-link/style-rtl.css	71 B
build/block-library/blocks/comment-reply-link/style.css	71 B
build/block-library/blocks/comment-template/style-rtl.css	191 B
build/block-library/blocks/comment-template/style.css	191 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	238 B
build/block-library/blocks/comments-pagination/editor.css	231 B
build/block-library/blocks/comments-pagination/style-rtl.css	245 B
build/block-library/blocks/comments-pagination/style.css	241 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	842 B
build/block-library/blocks/comments/editor.css	842 B
build/block-library/blocks/comments/style-rtl.css	637 B
build/block-library/blocks/comments/style.css	637 B
build/block-library/blocks/cover/editor-rtl.css	631 B
build/block-library/blocks/cover/editor.css	631 B
build/block-library/blocks/cover/style-rtl.css	1.7 kB
build/block-library/blocks/cover/style.css	1.69 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/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	349 B
build/block-library/blocks/form-input/style.css	349 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/freeform/editor-rtl.css	2.59 kB
build/block-library/blocks/freeform/editor.css	2.59 kB
build/block-library/blocks/gallery/editor-rtl.css	688 B
build/block-library/blocks/gallery/editor.css	691 B
build/block-library/blocks/gallery/style-rtl.css	1.84 kB
build/block-library/blocks/gallery/style.css	1.84 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	334 B
build/block-library/blocks/group/editor.css	334 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	353 B
build/block-library/blocks/html/editor.css	354 B
build/block-library/blocks/image/editor-rtl.css	763 B
build/block-library/blocks/image/editor.css	763 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/theme-rtl.css	137 B
build/block-library/blocks/image/theme.css	137 B
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	139 B
build/block-library/blocks/latest-posts/editor.css	138 B
build/block-library/blocks/latest-posts/style-rtl.css	520 B
build/block-library/blocks/latest-posts/style.css	520 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	321 B
build/block-library/blocks/media-text/editor.css	320 B
build/block-library/blocks/media-text/style-rtl.css	543 B
build/block-library/blocks/media-text/style.css	542 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	566 B
build/block-library/blocks/navigation-link/editor.css	568 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.23 kB
build/block-library/blocks/navigation/editor.css	2.24 kB
build/block-library/blocks/navigation/style-rtl.css	2.25 kB
build/block-library/blocks/navigation/style.css	2.24 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	192 B
build/block-library/blocks/page-list/style.css	192 B
build/block-library/blocks/paragraph/editor-rtl.css	251 B
build/block-library/blocks/paragraph/editor.css	251 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/style-rtl.css	188 B
build/block-library/blocks/post-author/style.css	189 B
build/block-library/blocks/post-comments-count/style-rtl.css	72 B
build/block-library/blocks/post-comments-count/style.css	72 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-comments-link/style-rtl.css	71 B
build/block-library/blocks/post-comments-link/style.css	71 B
build/block-library/blocks/post-content/style-rtl.css	61 B
build/block-library/blocks/post-content/style.css	61 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	722 B
build/block-library/blocks/post-featured-image/editor.css	720 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/style-rtl.css	414 B
build/block-library/blocks/post-template/style.css	414 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	162 B
build/block-library/blocks/post-title/style.css	162 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	133 B
build/block-library/blocks/pullquote/editor.css	133 B
build/block-library/blocks/pullquote/style-rtl.css	365 B
build/block-library/blocks/pullquote/style.css	365 B
build/block-library/blocks/pullquote/theme-rtl.css	176 B
build/block-library/blocks/pullquote/theme.css	176 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	154 B
build/block-library/blocks/query-pagination/editor.css	154 B
build/block-library/blocks/query-pagination/style-rtl.css	237 B
build/block-library/blocks/query-pagination/style.css	237 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-total/style-rtl.css	64 B
build/block-library/blocks/query-total/style.css	64 B
build/block-library/blocks/query/editor-rtl.css	404 B
build/block-library/blocks/query/editor.css	404 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	131 B
build/block-library/blocks/read-more/style.css	131 B
build/block-library/blocks/rss/editor-rtl.css	126 B
build/block-library/blocks/rss/editor.css	126 B
build/block-library/blocks/rss/style-rtl.css	284 B
build/block-library/blocks/rss/style.css	283 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	674 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/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	773 B
build/block-library/blocks/site-logo/editor.css	770 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	143 B
build/block-library/blocks/site-title/style.css	143 B
build/block-library/blocks/social-link/editor-rtl.css	314 B
build/block-library/blocks/social-link/editor.css	314 B
build/block-library/blocks/social-links/editor-rtl.css	339 B
build/block-library/blocks/social-links/editor.css	338 B
build/block-library/blocks/social-links/style-rtl.css	1.51 kB
build/block-library/blocks/social-links/style.css	1.51 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	92 B
build/block-library/blocks/tag-cloud/editor.css	92 B
build/block-library/blocks/tag-cloud/style-rtl.css	248 B
build/block-library/blocks/tag-cloud/style.css	248 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	441 B
build/block-library/blocks/video/editor.css	442 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.08 kB
build/block-library/common.css	1.08 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.2 kB
build/block-library/editor.css	11.2 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	15 kB
build/block-library/style.css	15 kB
build/block-library/theme-rtl.css	715 B
build/block-library/theme.css	719 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.6 kB
build/commands/index.min.js	16.2 kB
build/commands/style-rtl.css	956 B
build/commands/style.css	952 B
build/components/index.min.js	230 kB
build/components/style-rtl.css	12.5 kB
build/components/style.css	12.5 kB
build/compose/index.min.js	12.8 kB
build/core-commands/index.min.js	3.09 kB
build/core-data/index.min.js	74.3 kB
build/customize-widgets/index.min.js	11 kB
build/customize-widgets/style-rtl.css	1.43 kB
build/customize-widgets/style.css	1.43 kB
build/data-controls/index.min.js	641 B
build/data/index.min.js	8.69 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.68 kB
build/edit-post/classic-rtl.css	577 B
build/edit-post/classic.css	578 B
build/edit-post/index.min.js	13.5 kB
build/edit-post/style-rtl.css	2.77 kB
build/edit-post/style.css	2.77 kB
build/edit-site/index.min.js	222 kB
build/edit-site/posts-rtl.css	7.52 kB
build/edit-site/posts.css	7.52 kB
build/edit-site/style-rtl.css	13.6 kB
build/edit-site/style.css	13.6 kB
build/edit-widgets/index.min.js	17.7 kB
build/edit-widgets/style-rtl.css	4.05 kB
build/edit-widgets/style.css	4.06 kB
build/editor/index.min.js	116 kB
build/editor/style-rtl.css	9.06 kB
build/editor/style.css	9.06 kB
build/element/index.min.js	4.82 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	8.08 kB
build/format-library/style-rtl.css	472 B
build/format-library/style.css	472 B
build/hooks/index.min.js	1.65 kB
build/html-entities/index.min.js	445 B
build/i18n/index.min.js	3.58 kB
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.13 kB
build/list-reusable-blocks/style-rtl.css	847 B
build/list-reusable-blocks/style.css	848 B
build/media-utils/index.min.js	3.69 kB
build/notices/index.min.js	946 B
build/nux/index.min.js	1.62 kB
build/nux/style-rtl.css	767 B
build/nux/style.css	763 B
build/patterns/index.min.js	7.36 kB
build/patterns/style-rtl.css	687 B
build/patterns/style.css	685 B
build/plugins/index.min.js	1.86 kB
build/preferences-persistence/index.min.js	2.06 kB
build/preferences/index.min.js	2.9 kB
build/preferences/style-rtl.css	551 B
build/preferences/style.css	552 B
build/primitives/index.min.js	829 B
build/priority-queue/index.min.js	1.54 kB
build/private-apis/index.min.js	978 B
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.7 kB
build/reusable-blocks/index.min.js	2.53 kB
build/reusable-blocks/style-rtl.css	255 B
build/reusable-blocks/style.css	255 B
build/rich-text/index.min.js	10.3 kB
build/router/index.min.js	5.44 kB
build/server-side-render/index.min.js	1.98 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.96 kB
build/vendors/react-dom.min.js	41.7 kB
build/vendors/react-jsx-runtime.min.js	556 B
build/vendors/react.min.js	4.02 kB
build/viewport/index.min.js	965 B
build/vips/index.min.js	36.2 kB
build/warning/index.min.js	250 B
build/widgets/index.min.js	7.16 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}

[bph]

@WordPress/outreach Hi folks! If you have a few minutes, can you help test this, please?

[gziolo]

This is a great proposal. It will also allow plugin authors to change the existing icons and use different formats when necessary.

[costasovo]

Thanks for the fantastic work! I have a question about the custom link block variations in the editor. It may sound unusual, so I'd like to add a bit of context.

Our team builds an email editor using Gutenberg packages. We support the social links blocks, but because even some popular email clients can't handle SVGs we replace those with PNGs when we generate email for sending. This PR may help us simplify our code and use PNG directly. That's great.

The thing is that we currently operate with a limited list of supported icons we provide PNGs for. As this PR enables adding new services we might run into an issue that the newly registered service by a plugin will not work properly in our email editor and rendered email HTML.

So the strange question is: Is there a way to disable or filter these custom link block variations?

[Mamaduka]

Thanks for the feedback, @costasovo!

You should be able to filter out the unsupported Social Link service. I assume you'll already have a list of services where you're replacing SVGs with PNGs. If the service isn't in that list, you can unset it using the block_core_social_link_get_services filter.

In the editor, you could do the same by using unregisterBlockVariation method.

[costasovo]

@Mamaduka Thanks for the super-fast answer! I just want to confirm we are able to handle that using the way you suggested.

[Mamaduka]

Thank you, everyone, for your feedback. I'm going to merge this.

[gziolo]

I was thinking further about the extensibility on the editor side. Currently, the list of variations is static so it's difficult to change it. It's probably doable at the blocks store level, but that should be tested to confirm whether the same changes as applied on the server are possible to replicate in the editor.

[Mamaduka]

I was thinking further about the extensibility on the editor side. Currently, the list of variations is static, so it's difficult to change it.

What do you mean by static? The Social Links are registered as block variations; you can register the new variations or remove the old ones.

[gziolo]

It looks like you addressed it by introducing getSocialService, which takes an active variation as a parameter. I was looking at trunk before this PR landed 🙈

All good!