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 Links: Add filter to services data to enable extendibility #30749

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

Conversation

mkaz
Copy link
Member

@mkaz mkaz commented Apr 12, 2021

Description

Enable the ability to extend Social Links.

Adds a PHP filter to social links services to add a definition for a link and SVG.

Fixes #19041

How has this been tested?

Create a plugin with that adds a filter to extend the services list, defining an icon and SVG for render side
Add JS that extends the variant and adds the icon for editor side.

Example

PHP (tester.php)

<?php
/*
        Plugin Name: Tester Plugin
        Description: A plugin for testing
*/

// Add admin JS file
add_action( 'enqueue_block_editor_assets',  function() {


        wp_enqueue_script(
                'tester-js',
                plugins_url( 'tester.js', __FILE__ ),
                array( 'wp-editor', 'wp-blocks', 'wp-dom-ready', 'wp-element' ),
                filemtime( plugin_dir_path( __FILE__ ) . 'tester.js' ), // cache buster
                true // in footer
        );

});

add_filter( 'block_editor_social_link_services', function( $data ) {
        $data[ 'mkaz' ] = array(
                'name' => 'mkaz',
                'icon' => '<svg width="24" height="24" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"></path></svg>',
        );
        return $data;
} );

and JS (tester.js)

( function( wp ) {

        wp.domReady(function() {

                const myIcon = wp.element.createElement(
                        'svg',
                        {
                                'viewBox': '0 0 32 32',
                                'width': '32',
                                'height': '32',
                        },
                        wp.element.createElement(
                                'path',
                                {
                                        'd': "M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z",
                                }
                        )
                );

                wp.blocks.registerBlockVariation( 'core/social-link',
                        {
                                name: 'mkaz',
                                title: 'mkaz',
                                description: 'Test icon',
                                icon: () => myIcon,
                                attributes: { service: 'mkaz' },
                } );


                wp.blocks.unregisterBlockVariation( 'core/social-link', 'amazon' );

        } );


} )( window.wp );

Types of changes

  • Add a PHP filter, so an icon can be added on dynamic render.
  • This required updating fetching icon and site name to pull from store and not hard-coded variant file

@github-actions
Copy link

github-actions bot commented Apr 12, 2021

Size Change: +23 B (0%)

Total Size: 1.04 MB

Filename Size Change
build/block-library/index.min.js 145 kB +23 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.min.js 1.12 kB 0 B
build/annotations/index.min.js 2.93 kB 0 B
build/api-fetch/index.min.js 2.44 kB 0 B
build/autop/index.min.js 2.28 kB 0 B
build/blob/index.min.js 672 B 0 B
build/block-directory/index.min.js 6.61 kB 0 B
build/block-directory/style-rtl.css 989 B 0 B
build/block-directory/style.css 990 B 0 B
build/block-editor/index.min.js 119 kB 0 B
build/block-editor/style-rtl.css 13.5 kB 0 B
build/block-editor/style.css 13.5 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 61 B 0 B
build/block-library/blocks/archives/editor.css 60 B 0 B
build/block-library/blocks/archives/style-rtl.css 65 B 0 B
build/block-library/blocks/archives/style.css 65 B 0 B
build/block-library/blocks/audio/editor-rtl.css 58 B 0 B
build/block-library/blocks/audio/editor.css 58 B 0 B
build/block-library/blocks/audio/style-rtl.css 112 B 0 B
build/block-library/blocks/audio/style.css 112 B 0 B
build/block-library/blocks/audio/theme-rtl.css 125 B 0 B
build/block-library/blocks/audio/theme.css 125 B 0 B
build/block-library/blocks/block/editor-rtl.css 161 B 0 B
build/block-library/blocks/block/editor.css 161 B 0 B
build/block-library/blocks/button/editor-rtl.css 475 B 0 B
build/block-library/blocks/button/editor.css 474 B 0 B
build/block-library/blocks/button/style-rtl.css 603 B 0 B
build/block-library/blocks/button/style.css 602 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 315 B 0 B
build/block-library/blocks/buttons/editor.css 315 B 0 B
build/block-library/blocks/buttons/style-rtl.css 375 B 0 B
build/block-library/blocks/buttons/style.css 375 B 0 B
build/block-library/blocks/calendar/style-rtl.css 208 B 0 B
build/block-library/blocks/calendar/style.css 208 B 0 B
build/block-library/blocks/categories/editor-rtl.css 84 B 0 B
build/block-library/blocks/categories/editor.css 83 B 0 B
build/block-library/blocks/categories/style-rtl.css 79 B 0 B
build/block-library/blocks/categories/style.css 79 B 0 B
build/block-library/blocks/code/style-rtl.css 90 B 0 B
build/block-library/blocks/code/style.css 90 B 0 B
build/block-library/blocks/code/theme-rtl.css 131 B 0 B
build/block-library/blocks/code/theme.css 131 B 0 B
build/block-library/blocks/columns/editor-rtl.css 190 B 0 B
build/block-library/blocks/columns/editor.css 190 B 0 B
build/block-library/blocks/columns/style-rtl.css 422 B 0 B
build/block-library/blocks/columns/style.css 422 B 0 B
build/block-library/blocks/cover/editor-rtl.css 644 B 0 B
build/block-library/blocks/cover/editor.css 646 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.22 kB 0 B
build/block-library/blocks/cover/style.css 1.23 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 486 B 0 B
build/block-library/blocks/embed/editor.css 486 B 0 B
build/block-library/blocks/embed/style-rtl.css 401 B 0 B
build/block-library/blocks/embed/style.css 400 B 0 B
build/block-library/blocks/embed/theme-rtl.css 124 B 0 B
build/block-library/blocks/embed/theme.css 124 B 0 B
build/block-library/blocks/file/editor-rtl.css 301 B 0 B
build/block-library/blocks/file/editor.css 300 B 0 B
build/block-library/blocks/file/frontend.min.js 773 B 0 B
build/block-library/blocks/file/style-rtl.css 255 B 0 B
build/block-library/blocks/file/style.css 255 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB 0 B
build/block-library/blocks/freeform/editor.css 2.44 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 704 B 0 B
build/block-library/blocks/gallery/editor.css 705 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.06 kB 0 B
build/block-library/blocks/gallery/style.css 1.06 kB 0 B
build/block-library/blocks/gallery/theme-rtl.css 122 B 0 B
build/block-library/blocks/gallery/theme.css 122 B 0 B
build/block-library/blocks/group/editor-rtl.css 160 B 0 B
build/block-library/blocks/group/editor.css 160 B 0 B
build/block-library/blocks/group/style-rtl.css 57 B 0 B
build/block-library/blocks/group/style.css 57 B 0 B
build/block-library/blocks/group/theme-rtl.css 93 B 0 B
build/block-library/blocks/group/theme.css 93 B 0 B
build/block-library/blocks/heading/editor-rtl.css 152 B 0 B
build/block-library/blocks/heading/editor.css 152 B 0 B
build/block-library/blocks/heading/style-rtl.css 76 B 0 B
build/block-library/blocks/heading/style.css 76 B 0 B
build/block-library/blocks/home-link/style-rtl.css 259 B 0 B
build/block-library/blocks/home-link/style.css 259 B 0 B
build/block-library/blocks/html/editor-rtl.css 281 B 0 B
build/block-library/blocks/html/editor.css 281 B 0 B
build/block-library/blocks/image/editor-rtl.css 729 B 0 B
build/block-library/blocks/image/editor.css 727 B 0 B
build/block-library/blocks/image/style-rtl.css 481 B 0 B
build/block-library/blocks/image/style.css 485 B 0 B
build/block-library/blocks/image/theme-rtl.css 124 B 0 B
build/block-library/blocks/image/theme.css 124 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 281 B 0 B
build/block-library/blocks/latest-comments/style.css 282 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B 0 B
build/block-library/blocks/latest-posts/editor.css 137 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 529 B 0 B
build/block-library/blocks/latest-posts/style.css 529 B 0 B
build/block-library/blocks/list/style-rtl.css 63 B 0 B
build/block-library/blocks/list/style.css 63 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 176 B 0 B
build/block-library/blocks/media-text/editor.css 176 B 0 B
build/block-library/blocks/media-text/style-rtl.css 492 B 0 B
build/block-library/blocks/media-text/style.css 489 B 0 B
build/block-library/blocks/more/editor-rtl.css 434 B 0 B
build/block-library/blocks/more/editor.css 434 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 633 B 0 B
build/block-library/blocks/navigation-link/editor.css 634 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B 0 B
build/block-library/blocks/navigation-link/style.css 94 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.55 kB 0 B
build/block-library/blocks/navigation/editor.css 1.55 kB 0 B
build/block-library/blocks/navigation/frontend.min.js 2.86 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 1.63 kB 0 B
build/block-library/blocks/navigation/style.css 1.63 kB 0 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B 0 B
build/block-library/blocks/nextpage/editor.css 395 B 0 B
build/block-library/blocks/page-list/editor-rtl.css 310 B 0 B
build/block-library/blocks/page-list/editor.css 311 B 0 B
build/block-library/blocks/page-list/style-rtl.css 240 B 0 B
build/block-library/blocks/page-list/style.css 240 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B 0 B
build/block-library/blocks/paragraph/editor.css 157 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 247 B 0 B
build/block-library/blocks/paragraph/style.css 248 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 209 B 0 B
build/block-library/blocks/post-author/editor.css 209 B 0 B
build/block-library/blocks/post-author/style-rtl.css 183 B 0 B
build/block-library/blocks/post-author/style.css 184 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 140 B 0 B
build/block-library/blocks/post-comments-form/style.css 140 B 0 B
build/block-library/blocks/post-comments/style-rtl.css 360 B 0 B
build/block-library/blocks/post-comments/style.css 359 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 139 B 0 B
build/block-library/blocks/post-content/editor.css 139 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B 0 B
build/block-library/blocks/post-excerpt/editor.css 73 B 0 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B 0 B
build/block-library/blocks/post-excerpt/style.css 69 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B 0 B
build/block-library/blocks/post-featured-image/editor.css 338 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 141 B 0 B
build/block-library/blocks/post-featured-image/style.css 141 B 0 B
build/block-library/blocks/post-template/editor-rtl.css 100 B 0 B
build/block-library/blocks/post-template/editor.css 99 B 0 B
build/block-library/blocks/post-template/style-rtl.css 379 B 0 B
build/block-library/blocks/post-template/style.css 380 B 0 B
build/block-library/blocks/post-title/style-rtl.css 60 B 0 B
build/block-library/blocks/post-title/style.css 60 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 103 B 0 B
build/block-library/blocks/preformatted/style.css 103 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B 0 B
build/block-library/blocks/pullquote/editor.css 183 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 318 B 0 B
build/block-library/blocks/pullquote/style.css 318 B 0 B
build/block-library/blocks/pullquote/theme-rtl.css 169 B 0 B
build/block-library/blocks/pullquote/theme.css 169 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B 0 B
build/block-library/blocks/query-pagination/editor.css 262 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B 0 B
build/block-library/blocks/query-pagination/style.css 168 B 0 B
build/block-library/blocks/query-title/editor-rtl.css 86 B 0 B
build/block-library/blocks/query-title/editor.css 86 B 0 B
build/block-library/blocks/query/editor-rtl.css 131 B 0 B
build/block-library/blocks/query/editor.css 132 B 0 B
build/block-library/blocks/quote/style-rtl.css 169 B 0 B
build/block-library/blocks/quote/style.css 169 B 0 B
build/block-library/blocks/quote/theme-rtl.css 221 B 0 B
build/block-library/blocks/quote/theme.css 221 B 0 B
build/block-library/blocks/rss/editor-rtl.css 201 B 0 B
build/block-library/blocks/rss/editor.css 202 B 0 B
build/block-library/blocks/rss/style-rtl.css 290 B 0 B
build/block-library/blocks/rss/style.css 290 B 0 B
build/block-library/blocks/search/editor-rtl.css 211 B 0 B
build/block-library/blocks/search/editor.css 211 B 0 B
build/block-library/blocks/search/style-rtl.css 359 B 0 B
build/block-library/blocks/search/style.css 362 B 0 B
build/block-library/blocks/search/theme-rtl.css 64 B 0 B
build/block-library/blocks/search/theme.css 64 B 0 B
build/block-library/blocks/separator/editor-rtl.css 99 B 0 B
build/block-library/blocks/separator/editor.css 99 B 0 B
build/block-library/blocks/separator/style-rtl.css 251 B 0 B
build/block-library/blocks/separator/style.css 251 B 0 B
build/block-library/blocks/separator/theme-rtl.css 172 B 0 B
build/block-library/blocks/separator/theme.css 172 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 512 B 0 B
build/block-library/blocks/shortcode/editor.css 512 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 440 B 0 B
build/block-library/blocks/site-logo/editor.css 441 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 154 B 0 B
build/block-library/blocks/site-logo/style.css 154 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 164 B 0 B
build/block-library/blocks/social-link/editor.css 165 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 800 B 0 B
build/block-library/blocks/social-links/editor.css 799 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.34 kB 0 B
build/block-library/blocks/social-links/style.css 1.34 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 308 B 0 B
build/block-library/blocks/spacer/editor.css 308 B 0 B
build/block-library/blocks/spacer/style-rtl.css 48 B 0 B
build/block-library/blocks/spacer/style.css 48 B 0 B
build/block-library/blocks/table/editor-rtl.css 478 B 0 B
build/block-library/blocks/table/editor.css 478 B 0 B
build/block-library/blocks/table/style-rtl.css 480 B 0 B
build/block-library/blocks/table/style.css 480 B 0 B
build/block-library/blocks/table/theme-rtl.css 188 B 0 B
build/block-library/blocks/table/theme.css 188 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 118 B 0 B
build/block-library/blocks/tag-cloud/editor.css 118 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B 0 B
build/block-library/blocks/tag-cloud/style.css 94 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 551 B 0 B
build/block-library/blocks/template-part/editor.css 550 B 0 B
build/block-library/blocks/template-part/theme-rtl.css 101 B 0 B
build/block-library/blocks/template-part/theme.css 101 B 0 B
build/block-library/blocks/term-description/editor-rtl.css 90 B 0 B
build/block-library/blocks/term-description/editor.css 90 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B 0 B
build/block-library/blocks/text-columns/editor.css 95 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 166 B 0 B
build/block-library/blocks/text-columns/style.css 166 B 0 B
build/block-library/blocks/verse/style-rtl.css 87 B 0 B
build/block-library/blocks/verse/style.css 87 B 0 B
build/block-library/blocks/video/editor-rtl.css 569 B 0 B
build/block-library/blocks/video/editor.css 570 B 0 B
build/block-library/blocks/video/style-rtl.css 173 B 0 B
build/block-library/blocks/video/style.css 173 B 0 B
build/block-library/blocks/video/theme-rtl.css 124 B 0 B
build/block-library/blocks/video/theme.css 124 B 0 B
build/block-library/common-rtl.css 1.26 kB 0 B
build/block-library/common.css 1.26 kB 0 B
build/block-library/editor-rtl.css 9.68 kB 0 B
build/block-library/editor.css 9.67 kB 0 B
build/block-library/reset-rtl.css 506 B 0 B
build/block-library/reset.css 507 B 0 B
build/block-library/style-rtl.css 10.2 kB 0 B
build/block-library/style.css 10.2 kB 0 B
build/block-library/theme-rtl.css 692 B 0 B
build/block-library/theme.css 693 B 0 B
build/block-serialization-default-parser/index.min.js 1.3 kB 0 B
build/block-serialization-spec-parser/index.min.js 3.06 kB 0 B
build/blocks/index.min.js 47.3 kB 0 B
build/components/index.min.js 180 kB 0 B
build/components/style-rtl.css 16.2 kB 0 B
build/components/style.css 16.1 kB 0 B
build/compose/index.min.js 10.2 kB 0 B
build/core-data/index.min.js 12.2 kB 0 B
build/customize-widgets/index.min.js 9.98 kB 0 B
build/customize-widgets/style-rtl.css 1.45 kB 0 B
build/customize-widgets/style.css 1.45 kB 0 B
build/data-controls/index.min.js 829 B 0 B
build/data/index.min.js 7.22 kB 0 B
build/date/index.min.js 31.8 kB 0 B
build/deprecated/index.min.js 739 B 0 B
build/dom-ready/index.min.js 576 B 0 B
build/dom/index.min.js 4.62 kB 0 B
build/edit-navigation/index.min.js 14 kB 0 B
build/edit-navigation/style-rtl.css 3.08 kB 0 B
build/edit-navigation/style.css 3.08 kB 0 B
build/edit-post/classic-rtl.css 454 B 0 B
build/edit-post/classic.css 454 B 0 B
build/edit-post/index.min.js 58.6 kB 0 B
build/edit-post/style-rtl.css 7.05 kB 0 B
build/edit-post/style.css 7.04 kB 0 B
build/edit-site/index.min.js 26 kB 0 B
build/edit-site/style-rtl.css 4.75 kB 0 B
build/edit-site/style.css 4.75 kB 0 B
build/edit-widgets/index.min.js 16 kB 0 B
build/edit-widgets/style-rtl.css 3.45 kB 0 B
build/edit-widgets/style.css 3.45 kB 0 B
build/editor/index.min.js 38.6 kB 0 B
build/editor/style-rtl.css 3.91 kB 0 B
build/editor/style.css 3.9 kB 0 B
build/element/index.min.js 3.44 kB 0 B
build/escape-html/index.min.js 739 B 0 B
build/format-library/index.min.js 5.68 kB 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/hooks/index.min.js 1.76 kB 0 B
build/html-entities/index.min.js 628 B 0 B
build/i18n/index.min.js 3.73 kB 0 B
build/is-shallow-equal/index.min.js 709 B 0 B
build/keyboard-shortcuts/index.min.js 1.74 kB 0 B
build/keycodes/index.min.js 1.43 kB 0 B
build/list-reusable-blocks/index.min.js 2.07 kB 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/media-utils/index.min.js 3.08 kB 0 B
build/notices/index.min.js 1.07 kB 0 B
build/nux/index.min.js 2.31 kB 0 B
build/nux/style-rtl.css 718 B 0 B
build/nux/style.css 716 B 0 B
build/plugins/index.min.js 1.99 kB 0 B
build/primitives/index.min.js 1.03 kB 0 B
build/priority-queue/index.min.js 791 B 0 B
build/react-i18n/index.min.js 924 B 0 B
build/redux-routine/index.min.js 2.82 kB 0 B
build/reusable-blocks/index.min.js 2.56 kB 0 B
build/reusable-blocks/style-rtl.css 225 B 0 B
build/reusable-blocks/style.css 225 B 0 B
build/rich-text/index.min.js 10.6 kB 0 B
build/server-side-render/index.min.js 1.64 kB 0 B
build/shortcode/index.min.js 1.68 kB 0 B
build/token-list/index.min.js 847 B 0 B
build/url/index.min.js 1.95 kB 0 B
build/viewport/index.min.js 1.28 kB 0 B
build/warning/index.min.js 1.13 kB 0 B
build/widgets/index.min.js 6.48 kB 0 B
build/widgets/style-rtl.css 693 B 0 B
build/widgets/style.css 693 B 0 B
build/wordcount/index.min.js 1.24 kB 0 B

compressed-size-action

@mkaz mkaz force-pushed the try/social-allowed-filter branch from 81d4e3e to 3b127a7 Compare April 13, 2021 01:07
@mkaz mkaz requested a review from ellatrix as a code owner April 13, 2021 01:07
@mkaz mkaz changed the title Social Links: Add filter to enable extending allowed blocks Inner Blocks: Add filter to allowed blocks Apr 13, 2021
@mkaz mkaz added the [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P label Apr 13, 2021
@gziolo gziolo added the [Feature] Extensibility The ability to extend blocks or the editing experience label Apr 13, 2021
@gziolo gziolo requested a review from mcsf April 13, 2021 10:00
@youknowriad
Copy link
Contributor

In a previous PR we added a "templateLock" attribute to the "column" block to be able to edit it there. In a lot of ways "templateLock" is similar to "allowedBlocks" and "template". An attribute allows templates to override these things for specific instances which is arguably more powerful.

I'm personally not at ease with using filters here (or any js filter for the record), it breaks too often depending on how/when scripts are loaded, components rerendered...

@mkaz
Copy link
Member Author

mkaz commented Apr 13, 2021

@youknowriad The issue I see using an attribute is it requires the developer to add or extend that component. For example, if I wanted to create my own MyNavigationBlock that extends the core block and allows for an additional MyBlock I could; however that adds complexity, plus for themes using a core navigation block it would not include my new navigation block.

So what I think developers really want is to just a way to add their MyBlock to the core allowed blocks list, which is why filters seems like the right approach, but I understand your hesitance on component rendering and loading, it isn't consistent.

I'll test out as an attribute, because then a plugin developer can override the setting using a register filter and achieve a similar result.

@mkaz mkaz force-pushed the try/social-allowed-filter branch from 3b127a7 to 583d6fb Compare April 13, 2021 16:49
@mkaz mkaz changed the title Inner Blocks: Add filter to allowed blocks Social Links: Move allowed blocks to attributes to allow extendibility Apr 13, 2021
@mkaz mkaz added [Block] Social Affects the Social Block - used to display Social Media accounts and removed [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P labels Apr 13, 2021
@mkaz
Copy link
Member Author

mkaz commented Apr 13, 2021

Updated, to use an attribute. I also updated the PR and testing instructions to match.

@raaaahman
Copy link

raaaahman commented Apr 14, 2021

Using attributes to list the allowed blocks makes sense to me. And it is filterable through the existing blocks.registerBlockType filter, which is good for extensibility by third-party plugins.

However, how would you proceed when the list is dynamically generated like in social-links/edit.native.js ?

const ALLOWED_BLOCKS = variations.map(
( v ) => `core/social-link-${ v.name }`
);

Does it need to be dynamically generated in the first place? It is not obvious to me why the edit.js script allow the core/social-link block, while the edit.native.js needs the full list of social links variations.

@gziolo gziolo requested a review from hypest April 14, 2021 08:27
@hypest hypest requested review from fluiddot and removed request for hypest April 14, 2021 11:51
@mkaz mkaz requested review from ajitbohra, nerrad and ntwb as code owners April 14, 2021 13:37
@gziolo
Copy link
Member

gziolo commented Apr 14, 2021

I like the refined proposal after the feedback shared by @youknowriad. It's possible to change the list of default allowed attributes through registerBlockType filter when registering a block, or use core/block-editor store to set a different list of blocks by updating the value of the block attribute inside the edit implementation or externally through the data store.

Comment on lines 6 to 9
"allowedBlocks": {
"type": "array",
"default": [ "core/social-link" ]
},
Copy link
Contributor

Choose a reason for hiding this comment

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

I was wondering if this might be redundant since the block core/social-link will be always allowed because its parent is this block. In fact, I tried to set the allowedBlocks to an empty array and I could still see all the social link variants displayed in the inserter.

Copy link
Member

@gziolo gziolo Apr 15, 2021

Choose a reason for hiding this comment

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

Good catch. I completely forgot about it. It would be great to investigate how those two features interact with each other. The biggest limitation of parent is that it won't work with more than one level of nesting.

Choose a reason for hiding this comment

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

So I tried fiddling with the parent property, and so far I am able to insert a custom block from a third-party plugin just by setting it a parent attribute.

Since child blocks are only available through their parent blocks, we could simply register two blocks that uses the same components for a block to be both available as an inner block and as a 'standalone' block.

For the nesting level concern, may it be something we want? Let's say third-plugin A adds its a/social-share-link in core/social-link inner blocks, while third-party plugin B adds its own b/social-profile-avatar-display which accepts an inner core/social-link block, and retrieves the profile picture from the passed social link (throughout some CORS bypass black magic).

Wouldn't we, in this case, want to prevent the a/social-share-link to be available as an inner block of b/social-profile-avatar-display?

Copy link
Contributor

Choose a reason for hiding this comment

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

The biggest limitation of parent is that it won't work with more than one level of nesting.

Yeah, good point. Are the allowed blocks list passed through allowedBlocks prop propagated to nested children? I haven't checked this further but it looks like it doesn't neither, right?

Copy link
Member Author

Choose a reason for hiding this comment

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

This was a great catch because I was testing Navigation with the same update and trying to limit the list of blocks and hadn't figured out yet why it was still showing the other blocks.

@mcsf
Copy link
Contributor

mcsf commented Apr 15, 2021

👋

I'm not sure how this fixes the parent issue, #19041. Is the goal to be able to insert third-party icon-like blocks alongside core/social-link children? If so, it seems to me like a missed opportunity to look at how core/social-link itself can be leveraged by third parties. Since that type is already taking advantage of the block variations mechanism, which is inherently flexible, I'd look there first.

Allowing new child types inside Social Links would lead to a more fragmented user experience, where some of the icons no longer behave identically — the toolbar would shift, as would the block settings UI. Also, we would miss out on Gutenberg's multi-select feature that lets the user set attributes for multiple blocks of the same type.

@fluiddot
Copy link
Contributor

fluiddot commented Apr 15, 2021

Using attributes to list the allowed blocks makes sense to me. And it is filterable through the existing blocks.registerBlockType filter, which is good for extensibility by third-party plugins.

However, how would you proceed when the list is dynamically generated like in social-links/edit.native.js ?

const ALLOWED_BLOCKS = variations.map(
( v ) => `core/social-link-${ v.name }`
);

Does it need to be dynamically generated in the first place? It is not obvious to me why the edit.js script allow the core/social-link block, while the edit.native.js needs the full list of social links variations.

Thanks @raaaahman for pointing this out!

I think we don't really need to dynamically generate them, I'm not sure what was the purpose of doing it this way, I checked the PR that introduced it but I didn't get any clue regarding this.

I ran some tests and I found out that it doesn't look like it's necessary to pass the social link variants in the allowedBlocks, the reason is that these variants are registered using the core/social-link settings which defines core/social-links as its parent. This means that by default they will always be allowed and displayed in the inserter for the core/social-links block.

Here I reference some code pieces related to this:

EDIT: Unless there's any potential issue I might be overlooking, I think we could apply the same logic in the native version of the core/social-links component.

@geriux
Copy link
Member

geriux commented Apr 15, 2021

I think we don't really need to dynamically generate them, I'm not sure what was the purpose of doing it this way, I checked the PR that introduced it but I didn't get any clue regarding this.

I can't remember exactly why this decision was made but I believe it was mostly UX decisions, some things that come to mind:

  • We probably wanted to sort them by title hence the sortBy to simplify the search of the desired block, we didn't have the search box back then but now that we do maybe we don't need to sort them.
  • I remember we also had some issues with the floating toolbar to show some specific data icon/title:
    Screenshot 2021-04-15 at 13 24 36

I'm sure we could solve this in another way if we want to remove this custom registerBlockVariations.

@fluiddot
Copy link
Contributor

I think we don't really need to dynamically generate them, I'm not sure what was the purpose of doing it this way, I checked the PR that introduced it but I didn't get any clue regarding this.

I can't remember exactly why this decision was made but I believe it was mostly UX decisions, some things that come to mind:

  • We probably wanted to sort them by title hence the sortBy to simplify the search of the desired block, we didn't have the search box back then but now that we do maybe we don't need to sort them.
  • I remember we also had some issues with the floating toolbar to show some specific data icon/title:
    Screenshot 2021-04-15 at 13 24 36

I'm sure we could solve this in another way if we want to remove this custom registerBlockVariations.

Thanks @geriux for the insights!

That was my impression too, it looks like the way the native version is registering the block variants is related to what you commented.

For this case what I suggest is only to modify the way the allowed blocks list is calculated in the core/social-links block for passing it to the InnerBlock component. I don't think we would need to modify how the variations are registered, just to match the logic with the web version of this component regarding this part.

Suggested change
diff --git a/packages/block-library/src/social-links/edit.native.js b/packages/block-library/src/social-links/edit.native.js
index b52be29e70382c536245422e0a8160d38611f8ca..52d8b61934bfb7ae0b3cfe9cb13e7ab406d985dc 100644
--- a/packages/block-library/src/social-links/edit.native.js
+++ b/packages/block-library/src/social-links/edit.native.js
@@ -17,11 +17,6 @@ import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
  * Internal dependencies
  */
 import styles from './editor.scss';
-import variations from '../social-link/variations';
-
-const ALLOWED_BLOCKS = variations.map(
-	( v ) => `core/social-link-${ v.name }`
-);
 
 // Template contains the links that show when start.
 const TEMPLATE = [
@@ -47,7 +42,7 @@ function SocialLinksEdit( {
 } ) {
 	const [ initialCreation, setInitialCreation ] = useState( true );
 	const shouldRenderFooterAppender = isSelected || isInnerIconSelected;
-	const { align } = attributes;
+	const { align, allowedBlocks } = attributes;
 	const { marginLeft: spacing } = styles.spacing;
 
 	useEffect( () => {
@@ -91,7 +86,7 @@ function SocialLinksEdit( {
 
 	return (
 		<InnerBlocks
-			allowedBlocks={ ALLOWED_BLOCKS }
+			allowedBlocks={ allowedBlocks }
 			templateLock={ false }
 			template={ initialCreation && TEMPLATE }
 			renderFooterAppender={

One thing I'd like to note is that the core/social-link block is explicitly disabled for the inserter in the native version, this shouldn't be a problem because the variants are still added via the parent setting.

@mkaz
Copy link
Member Author

mkaz commented Sep 22, 2021

@tomjn Thanks for the ping Tom, I've got this tab open and will follow up and make sure it's ready. I believe when I last left it was but can read through it all again and see if anything has changed.

@BeholdPL
Copy link

BeholdPL commented Nov 13, 2021

Is code from above is still working? Unfortunately I have problem with proper icon - in elements browser looks good, but the rendered icon is wrong.

js:

(function(wp) {
  wp.domReady(function() {
    const messengerIcon = wp.element.createElement(
      'svg', {
        'viewBox': '0 0 512 512',
        'width': '512',
        'height': '512',
      },
      wp.element.createElement(
        'path', {
          'd': "M256.55 8C116.52 8 8 110.34 8 248.57c0 72.3 29.71 134.78 78.07 177.94 8.35 7.51 6.63 11.86 8.05 58.23A19.92 19.92 0 0 0 122 502.31c52.91-23.3 53.59-25.14 62.56-22.7C337.85 521.8 504 423.7 504 248.57 504 110.34 396.59 8 256.55 8zm149.24 185.13l-73 115.57a37.37 37.37 0 0 1-53.91 9.93l-58.08-43.47a15 15 0 0 0-18 0l-78.37 59.44c-10.46 7.93-24.16-4.6-17.11-15.67l73-115.57a37.36 37.36 0 0 1 53.91-9.93l58.06 43.46a15 15 0 0 0 18 0l78.41-59.38c10.44-7.98 24.14 4.54 17.09 15.62z",
        }
      )
    );
    wp.blocks.registerBlockVariation('core/social-link', {
      name: 'messenger',
      title: 'Facebook Messenger',
      description: 'Facebook Messenger',
      icon: () => messengerIcon,
      attributes: {
        className: 'ml-messenger',
        providerNameSlug: 'facebook-messenger',
        responsive: true
      },
    });
  });
})(window.wp);

php:

function messengerSocialMediaIcon() {
	wp_enqueue_script( 'social_media', get_template_directory_uri() . '/js/social_media.js', array( 'wp-editor', 'wp-blocks', 'wp-dom-ready', 'wp-element' ), true );
}
add_action( 'enqueue_block_editor_assets', 'messengerSocialMediaIcon' );

add_filter( 'block_editor_social_link_services', function( $data ) {
	$data[ 'messenger' ] = array(
			'name' => 'messenger',
			'icon' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256.55 8C116.52 8 8 110.34 8 248.57c0 72.3 29.71 134.78 78.07 177.94 8.35 7.51 6.63 11.86 8.05 58.23A19.92 19.92 0 0 0 122 502.31c52.91-23.3 53.59-25.14 62.56-22.7C337.85 521.8 504 423.7 504 248.57 504 110.34 396.59 8 256.55 8zm149.24 185.13l-73 115.57a37.37 37.37 0 0 1-53.91 9.93l-58.08-43.47a15 15 0 0 0-18 0l-78.37 59.44c-10.46 7.93-24.16-4.6-17.11-15.67l73-115.57a37.36 37.36 0 0 1 53.91-9.93l58.06 43.46a15 15 0 0 0 18 0l78.41-59.38c10.44-7.98 24.14 4.54 17.09 15.62z"></path></svg>',
	);
	return $data;
} );

results:

Screenshot 2021-11-13 at 23 21 24

Is block_editor_social_link_services filter working?

Tested at Wordpress v.5.8.2

@tomjn
Copy link
Contributor

tomjn commented Nov 13, 2021

@BeholdPL are you testing the code with this PR?

@BeholdPL
Copy link

@BeholdPL are you testing the code with this PR?

Tested on WP 5.8.2

@tomjn
Copy link
Contributor

tomjn commented Nov 13, 2021

Tested on WP 5.8.2

Then there's the problem, the code in this pull request is intended for testing this pull request, not as an example for general use. This PR has not been merged.

To use this code, you would need to pull down this branch of the gutenberg plugin, build it, and activate it. There is no guarantee it will work, or that the PR does not need additional work. It is not a copy pasta example for common use.

@tomjn
Copy link
Contributor

tomjn commented Nov 13, 2021

Any results you have gotten in 5.8.2 are accidental/coincidences. I know that the filter proposed here is in use in the twentytwentyone theme for use on the frontend though with slight differences

@BeholdPL
Copy link

BeholdPL commented Nov 13, 2021

Any results you have gotten in 5.8.2 are accidental/coincidences. I know that the filter proposed here is in use in the twentytwentyone theme for use on the frontend though with slight differences

Got it. As far as I know there is no way for extending this block in current WP version (5.8.2), isn't it?

@mkkeck
Copy link

mkkeck commented Dec 21, 2021

Got it. As far as I know there is no way for extending this block in current WP version (5.8.2), isn't it?

You can try the Patched Block:

https://gist.github.com/mkkeck/84fe5fda939002fcf210d66b99de7c0f

@NickHeurter
Copy link

NickHeurter commented Oct 24, 2022

Got it. As far as I know there is no way for extending this block in current WP version (5.8.2), isn't it?

You can try the Patched Block:

https://gist.github.com/mkkeck/84fe5fda939002fcf210d66b99de7c0f

@mkkeck How can I use this in my WordPress website without the need to be afraid for updated? :)

@mkkeck
Copy link

mkkeck commented Oct 25, 2022

Use it simply as a plugin.
I'm using this since WP 5.6 and it Work with current WP version.

@NickHeurter
Copy link

I'm sorry to ask @mkkeck, but I can't get it working. Could you share your full plugin with social-services.json file by any change? Sorry for asking!

@mkkeck
Copy link

mkkeck commented Oct 26, 2022

Please take look at lines #84 until #97:

$json_file = apply_filters(
   'PatchBlocks/SocialServicesJsonFile', 
  // Theme class to check if file exists and is readable
  // add here your own   
  Theme_Defaults::instance()->get_style_dir('social-services.json') 
  // or use 
  // get_stylesheet_directory() . 'social-services.json'
);

I think you have to replace it with:

$json_file = apply_filters(
   'PatchBlocks/SocialServicesJsonFile', 
  get_stylesheet_directory() . 'social-services.json'
);

@sgeray
Copy link

sgeray commented Jul 5, 2023

Thanks to Cameron Jones ( https://cameronjonesweb.com.au/blog/adding-a-custom-icon-to-the-social-links-block-should-not-be-this-hard/ ) I am able to add TripAdvisor icon as well.

add_filter(
	'render_block',
	function( $block_content, $block ) {
		if ( isset($block['attrs']['service']) && 'core/social-link' === $block['blockName'] && 'tripadvisor' === $block['attrs']['service']  ) {
			$icon          = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6.781 12.894v.016c0 .266-.11.505-.286.677-.17.177-.408.286-.672.286-.004 0-.007 0-.011 0h.001s-.001 0-.002 0c-.54 0-.978-.438-.978-.978 0-.001 0-.001 0-.002 0-.003 0-.007 0-.01 0-.264.11-.502.286-.672.172-.177.412-.287.677-.287h.017-.001c.533.005.963.436.969.968v.001zm12.019-.013c0 .541-.438.979-.979.979s-.979-.438-.979-.979c0-.005 0-.011 0-.017 0-.263.11-.501.286-.67.179-.174.423-.281.693-.281s.514.107.693.282c.177.169.287.407.287.671v.017-.001zm-10.832.01c-.001-1.109-.9-2.007-2.009-2.007s-2.009.899-2.009 2.009.899 2.009 2.009 2.009c.555 0 1.057-.225 1.421-.589.363-.364.587-.867.588-1.421zm12.009-.01c0-1.109-.9-2.008-2.009-2.008s-2.009.899-2.009 2.009.899 2.009 2.009 2.009c.555 0 1.057-.225 1.42-.588.363-.353.589-.846.589-1.391 0-.011 0-.021 0-.032v.002zm-11.125.01c0 1.602-1.299 2.901-2.901 2.901s-2.901-1.299-2.901-2.901c0-.012 0-.026 0-.041 0-.788.328-1.499.854-2.005l.001-.001c.51-.521 1.221-.844 2.007-.844h.048-.002.041c.785 0 1.494.324 2.001.846l.001.001c.524.508.85 1.218.85 2.005v.044-.002zm12.02-.01v.004c0 1.602-1.299 2.901-2.901 2.901s-2.901-1.299-2.901-2.901 1.299-2.901 2.901-2.901c.801 0 1.527.325 2.052.85.524.508.849 1.218.849 2.004v.045zm-10.041.031c0-.021.001-.045.001-.07 0-1.307-.541-2.487-1.41-3.33l-.001-.001c-.844-.871-2.024-1.412-3.331-1.412-.025 0-.049 0-.074.001h.004c-.01 0-.021 0-.032 0-.875 0-1.694.24-2.394.658l.021-.012c-1.443.85-2.397 2.397-2.397 4.166s.953 3.316 2.374 4.154l.022.012c.679.406 1.498.646 2.373.646h.036-.002c.021 0 .045.001.07.001 1.307 0 2.487-.541 3.33-1.41l.001-.001c.871-.844 1.412-2.024 1.412-3.331 0-.024 0-.049-.001-.073v.004zm6.96-5.969c-1.66-.729-3.594-1.154-5.628-1.154-.057 0-.115 0-.172.001h.009c-.071-.001-.154-.002-.238-.002-2.068 0-4.038.422-5.827 1.184l.097-.037h.017c.832 0 1.624.175 2.34.489l-.037-.015c.739.315 1.37.746 1.901 1.276.526.534.955 1.167 1.255 1.867l.015.039c.3.679.474 1.471.474 2.303v.018-.001c0-1.619.641-3.088 1.682-4.168l-.002.002c.519-.524 1.131-.955 1.811-1.264l.038-.016c.662-.311 1.436-.501 2.252-.521h.007zm4.99 5.968c-.003-2.653-2.154-4.802-4.807-4.802-2.655 0-4.807 2.152-4.807 4.807s2.152 4.807 4.807 4.807c1.329 0 2.531-.539 3.402-1.41.868-.844 1.406-2.023 1.406-3.327 0-.026 0-.053-.001-.079zm-2.77-5.895h3.989c-.298.346-.558.738-.766 1.16l-.014.032c-.181.344-.325.743-.412 1.163l-.005.03c.715.972 1.144 2.193 1.144 3.515 0 3.297-2.673 5.97-5.97 5.97-1.864 0-3.529-.855-4.624-2.194l-.008-.011c-.436.541-.879 1.15-1.291 1.781l-.054.087c-.191-.333-.376-.613-.576-.882l.016.023q-.442-.63-.776-1.015c-1.103 1.324-2.753 2.161-4.598 2.161-3.298 0-5.971-2.673-5.971-5.971 0-1.298.414-2.499 1.117-3.478l-.012.018c-.092-.45-.236-.849-.429-1.218l.012.025c-.223-.455-.484-.847-.789-1.2l.006.007h3.802c1.062-.701 2.293-1.26 3.61-1.611l.088-.02c1.327-.373 2.851-.588 4.425-.588h.079-.004.107c1.523 0 2.995.213 4.39.611l-.113-.027c1.378.383 2.584.942 3.672 1.665l-.047-.029z"/></svg>';
			$before        = explode( '<svg', $block_content );
			$after         = explode( '</svg>', $before[1] );
			$block_content = $before[0] . $icon . $after[1];
		}
		return $block_content;
	},
	10,
	2
);

and the block;

import { Path, SVG } from '@wordpress/primitives';

export const tripadvisorIcon = () => (
    <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <Path d="m6.781 12.894v.016c0 .266-.11.505-.286.677-.17.177-.408.286-.672.286-.004 0-.007 0-.011 0h.001s-.001 0-.002 0c-.54 0-.978-.438-.978-.978 0-.001 0-.001 0-.002 0-.003 0-.007 0-.01 0-.264.11-.502.286-.672.172-.177.412-.287.677-.287h.017-.001c.533.005.963.436.969.968v.001zm12.019-.013c0 .541-.438.979-.979.979s-.979-.438-.979-.979c0-.005 0-.011 0-.017 0-.263.11-.501.286-.67.179-.174.423-.281.693-.281s.514.107.693.282c.177.169.287.407.287.671v.017-.001zm-10.832.01c-.001-1.109-.9-2.007-2.009-2.007s-2.009.899-2.009 2.009.899 2.009 2.009 2.009c.555 0 1.057-.225 1.421-.589.363-.364.587-.867.588-1.421zm12.009-.01c0-1.109-.9-2.008-2.009-2.008s-2.009.899-2.009 2.009.899 2.009 2.009 2.009c.555 0 1.057-.225 1.42-.588.363-.353.589-.846.589-1.391 0-.011 0-.021 0-.032v.002zm-11.125.01c0 1.602-1.299 2.901-2.901 2.901s-2.901-1.299-2.901-2.901c0-.012 0-.026 0-.041 0-.788.328-1.499.854-2.005l.001-.001c.51-.521 1.221-.844 2.007-.844h.048-.002.041c.785 0 1.494.324 2.001.846l.001.001c.524.508.85 1.218.85 2.005v.044-.002zm12.02-.01v.004c0 1.602-1.299 2.901-2.901 2.901s-2.901-1.299-2.901-2.901 1.299-2.901 2.901-2.901c.801 0 1.527.325 2.052.85.524.508.849 1.218.849 2.004v.045zm-10.041.031c0-.021.001-.045.001-.07 0-1.307-.541-2.487-1.41-3.33l-.001-.001c-.844-.871-2.024-1.412-3.331-1.412-.025 0-.049 0-.074.001h.004c-.01 0-.021 0-.032 0-.875 0-1.694.24-2.394.658l.021-.012c-1.443.85-2.397 2.397-2.397 4.166s.953 3.316 2.374 4.154l.022.012c.679.406 1.498.646 2.373.646h.036-.002c.021 0 .045.001.07.001 1.307 0 2.487-.541 3.33-1.41l.001-.001c.871-.844 1.412-2.024 1.412-3.331 0-.024 0-.049-.001-.073v.004zm6.96-5.969c-1.66-.729-3.594-1.154-5.628-1.154-.057 0-.115 0-.172.001h.009c-.071-.001-.154-.002-.238-.002-2.068 0-4.038.422-5.827 1.184l.097-.037h.017c.832 0 1.624.175 2.34.489l-.037-.015c.739.315 1.37.746 1.901 1.276.526.534.955 1.167 1.255 1.867l.015.039c.3.679.474 1.471.474 2.303v.018-.001c0-1.619.641-3.088 1.682-4.168l-.002.002c.519-.524 1.131-.955 1.811-1.264l.038-.016c.662-.311 1.436-.501 2.252-.521h.007zm4.99 5.968c-.003-2.653-2.154-4.802-4.807-4.802-2.655 0-4.807 2.152-4.807 4.807s2.152 4.807 4.807 4.807c1.329 0 2.531-.539 3.402-1.41.868-.844 1.406-2.023 1.406-3.327 0-.026 0-.053-.001-.079zm-2.77-5.895h3.989c-.298.346-.558.738-.766 1.16l-.014.032c-.181.344-.325.743-.412 1.163l-.005.03c.715.972 1.144 2.193 1.144 3.515 0 3.297-2.673 5.97-5.97 5.97-1.864 0-3.529-.855-4.624-2.194l-.008-.011c-.436.541-.879 1.15-1.291 1.781l-.054.087c-.191-.333-.376-.613-.576-.882l.016.023q-.442-.63-.776-1.015c-1.103 1.324-2.753 2.161-4.598 2.161-3.298 0-5.971-2.673-5.971-5.971 0-1.298.414-2.499 1.117-3.478l-.012.018c-.092-.45-.236-.849-.429-1.218l.012.025c-.223-.455-.484-.847-.789-1.2l.006.007h3.802c1.062-.701 2.293-1.26 3.61-1.611l.088-.02c1.327-.373 2.851-.588 4.425-.588h.079-.004.107c1.523 0 2.995.213 4.39.611l-.113-.027c1.378.383 2.584.942 3.672 1.665l-.047-.029z"/>
    </SVG>
);

const tripadvisorSocialLink = {
	name: 'tripadvisor',
	attributes: { service: 'tripadvisor' },
	title: 'Trip Advisor',
	icon: tripadvisorIcon,
};

wp.hooks.addFilter(
	'blocks.registerBlockType',
	'tripadvisor-social-icon',
	function( settings, name ) {
		if ( 'core/social-link' === name ) {
			if ( settings.variations.length ) {
				var variation = tripadvisorSocialLink;
				if ( ! variation.isActive ) {
					variation.isActive = ( blockAttributes, variationAttributes ) => blockAttributes.service === variationAttributes.service;
				}
				settings.variations.push( variation );
			}
		}
		return settings;
	}
);

wp.domReady( function() {
	wp.blocks.registerBlockVariation( 'core/social-link', tripadvisorSocialLink );
});

hope it helps to someone else too.

@mkkeck
Copy link

mkkeck commented Jul 5, 2023

I'm sorry to ask @mkkeck, but I can't get it working. Could you share your full plugin with social-services.json file by any change? Sorry for asking!

I've updated the ghist:
https://gist.github.com/mkkeck/84fe5fda939002fcf210d66b99de7c0f

Simply copy the code and put it into a new file (php class) under your child theme.

Created a json file with all your icons and save it as social-services.json under your child theme:

Example json data:

{
  "socialServices": [
     "share": {
       "name": "Share",
        "icon": "<svg ...><path d='...' /></svg>",  
        "keywords": ["optional", "key", "words"]
       }
  ]
}

@cr0ybot
Copy link
Contributor

cr0ybot commented Jul 10, 2023

I suspect with the recent launch of a new social media site (Threads) that a lot of folks will end up in this PR trying to figure out why it's still so awkward to add a new icon to the social links block.

All I really want is a filter hook added to block_core_social_link_services (as seems to have been done in this PR). All else should be able to be handled by registering a block variation, correct?

Edit: I suppose that doesn't take care of the icon rendered in the block in the editor, but that looks to also be addressed in this PR.

@cr0ybot
Copy link
Contributor

cr0ybot commented Feb 19, 2024

Here I am, back again, trying to add an icon for Bluesky.

Still have to hack it in, and still have no good way of displaying the icon correctly inside the editor.

This is after an icon for Threads has been added in #52685, in the comments of which @mtias says that core should maintain the social icons.

We can already register a block variation, and we can show the correct SVG on the front end by filtering the block render (not a great solution, but it works). The only thing that doesn't have a clear workaround (at least in this thread) is showing the correct icon in the editor. If we can get this far, people are going to do it. I'm doing it to include icons core doesn't support on my own site. I'm sure there are plugins already doing all sorts of wacky things to add more icons. We're just looking for some extensibility for a feature that is begging to be extended, as social platforms pop up all the time.

Copy link

github-actions bot commented Feb 19, 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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @mkaz, @raaaahman, @gwwar, @BeholdPL, @mkkeck, @NickHeurter, @sgeray, @KoiKoneessa, @YogieAnamCara, @aksthelion, @bshuchter, @davidallenlewis, @chs-kasvu, @hundkurserforalla.

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, raaaahman, gwwar, BeholdPL, mkkeck, NickHeurter, sgeray, KoiKoneessa, YogieAnamCara, aksthelion, bshuchter, davidallenlewis, chs-kasvu, hundkurserforalla.

Co-authored-by: fluiddot <[email protected]>
Co-authored-by: gziolo <[email protected]>
Co-authored-by: mcsf <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: geriux <[email protected]>
Co-authored-by: tomjn <[email protected]>
Co-authored-by: cr0ybot <[email protected]>
Co-authored-by: gaambo <[email protected]>
Co-authored-by: creative-andrew <[email protected]>
Co-authored-by: strarsis <[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: 0aveRyan <[email protected]>

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

@gaambo
Copy link
Contributor

gaambo commented Feb 26, 2024

I want to add my voice to this. There will always be social platforms / links that core won't provide - either because they are niche-platforms or because they are very regional/local. Another example: I like to use the social links block to add an icon to download the app and use a custom icon + link there.

@ndiego social sharing link is actually pretty similar to the core social-link one, and he introduced custom icons in a recent commit (ndiego/social-sharing-block#23).

I think the way this should work is pretty simple:

  • In the editor, allow extenders to register custom variations for the core/social-link block with title + name. Already works in core.
  • Use the active variations icon + title in the editor to display custom icons/titles
  • Add a PHP filter to allow adding custom services to the output

I don't think the social icons block needs to be a full-fledged icons block (although in the future, that is absolutely interesting). But I think as a first step, using the variations and adding a PHP filter is a quick fix for this. And something that should have been in there since the beginning - unfortunately, a lot of core blocks are not easily extendable.

Before I saw this PR I even worked on my own PR for this issue, based on the code from the social-sharing-block. You can find it here:
It's similar to this one, but uses the variations' data directly.

What are the blockers here atm? Is this a discussion about registering custom icons or are there concrete bugs with the implementation in the React Native side?

@tomjn
Copy link
Contributor

tomjn commented Feb 26, 2024

Some pragmatic thoughts:

  • backwards compatibility means once a service is added to the core block, removing it or even changing its icon is a non-trivial task
  • being able to add arbitrary services in code means that the intended aims of being able to interchange global styles and templates from multiple themes could be broken by this
  • letting users add their own via code means the block would break when copied to another site, into a pattern, or when the theme is changed (most users mistakenly add this code via functions.php)
  • Some users will abuse this to do things it was never intended for that are semantically bad because it looks similar to what they want (e.g. the person who mentioned here that they use it for app download links)
    • This has consequences for any attempts to use semantic markup to indicate links to social profiles leading to unintended side effects, especially if it's picked up by other things
    • Would a generic icon links block have been a better fit?
  • when a block references a custom social network that the core block does not support the behaviour is undefined, what should it do? Would solving this solve the second bullet point? It uses a generic link icon

Note that this doesn't mean I do not support this, just that there are practical hurdles to overcome that aren't being discussed as much as they should. All of these are issues that need to be solved.

Use the active variations icon + title in the editor to display custom icons/titles

My understanding of block variations is that this is already the case, when defining your variation you can specify its icon. This is how all the core/embed blocks currently work

@cr0ybot
Copy link
Contributor

cr0ybot commented Feb 26, 2024

@tomjn

My understanding of block variations is that this is already the case, when defining your variation you can specify its icon. This is how all the core/embed blocks currently work

This does not work. Specifically we're expecting the icon for the block variation to be used within the actual block displayed in the editor (not just the block selection list), which is how the core icons are displayed, but it's coming from a hardcoded list of variations.

  • when a block references a custom social network that the core block does not support the behaviour is undefined, what should it do? Would solving this solve the second bullet point? It uses a generic link icon

This is very backwards-compatible and defaults to the generic link icon as your edit notes. Copy-pasting blocks with custom variations is already not going to work, why should this block be special?

@gaambo
Copy link
Contributor

gaambo commented Mar 1, 2024

I even think we could do without the custom/new filter on rendering, if instead the variations are registered on the server and used for rendering as well.
With the new get_block_type_variations filter, we kind of have a way to register custom variations on the server side. So the PHP rendering could just be as the editor rendering, by using the attributes/icons provided by the variation.

@creative-andrew
Copy link
Contributor

What is the status on this?

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 [Feature] Extensibility The ability to extend blocks or the editing experience
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Social Links Block: Icon Storage/Extension Architecture