Add custom social link icons and use variations

[gaambo]

What?

This PR changes the social-link block to use the variations icon/label in the editor and adds a PHP filter to adding custom social services.
It's similar to ndiegos social sharing link block.

Why?

• add custom icons - maybe for social networks that are regional and not globally available or just a niche
• core doesn't have to provide all possible icons there are
• change icons to fit the style of the website
• have a good editing experience = show the same icon in the editor as on the frontend

Related discussions/PR:
#19041
#39419
#30749
#39868
#55142

How?

• use active variation data in editor (variations already have an icon + label defined)
• add filter in php to allow adding services there ( + cache them since they can be called multiple times)

TODO

• Currently the filter name gets prefixed with gutenberg_ in the build process and I don't know why.
• make changes in edit.native.js

Testing Instructions

Existing social blocks

1. Add a social links block
2. Add a facebook link block and see the facebook logo being used in the editor + on the frontend

Custom social icons

In a custom plugin/theme

1. Register a variation with an icon in the editor. Dashicon-Slugs as well as SVG Icon Components (eg from @wordpress/icons) can be used:

registerBlockVariation("core/social-link", {
  name: "custom-social-service-2",
  title: "Custom Social Service 2",
  description: "A link to a custom social service with a custom SVG icon",
  icon: createElement(
    SVG,
    {
      viewBox: "0 0 24 24",
      xmlns: "http://www.w3.org/2000/svg",
      "aria-hidden": "true",
      focusable: "false",
    },
    createElement(Path, {
      d: "M18 4H6c-1.1 0-2 .9-2 2v12.9c0 .6.5 1.1 1.1 1.1.3 0 .5-.1.8-.3L8.5 17H18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 11c0 .3-.2.5-.5.5H7.9l-2.4 2.4V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v9z",
    })
  ),
  attributes: {
    service: "custom-social-service-2",
  },
  isActive: ["service"],
});

• test existing social blocks
• test cusotm social blocks with plugin

2. Open Editor and add the custom social service to a social links block. The Dashicon for post-format (a speech-bubble) should be shown
3. Add PHP for the frontend:

add_action('enqueue_block_editor_assets', function () {
    wp_enqueue_script(
        'social-link-variation',
        plugins_url('index.js', __FILE__),
        ['wp-element', 'wp-primitives', 'wp-blocks', 'wp-components'],
        filemtime(plugin_dir_path(__FILE__, 'index.js')),
    );
});

function my_add_custom_social_link_data($services_data)
{
    $services_data['custom-social-service'] = [
        'name' => 'Custom Social Service',
        'icon' => '<span class="dashicons dashicons-format-status"></span>'
    ];
    $services_data['custom-social-service-2'] = [
        'name' => 'Custom Social Service 2',
        'icon' => '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M18 4H6c-1.1 0-2 .9-2 2v12.9c0 .6.5 1.1 1.1 1.1.3 0 .5-.1.8-.3L8.5 17H18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 11c0 .3-.2.5-.5.5H7.9l-2.4 2.4V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v9z"></path></svg>'
    ];
    return $services_data;
}

add_filter('gutenberg_block_core_social_link_services', 'my_add_custom_social_link_data');
add_filter('block_core_social_link_services', 'my_add_custom_social_link_data');

4. View post/page on the frontend, the icon should be displayed on the frontend as well.

Testing Instructions for Keyboard

Screenshots or screencast

[Mamaduka]

This probably would be easier to implement after register_block_variation is added to the Gutenberg/core - #47170 (comment).

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: [Block] Social.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[marcwieland95]

@gaambo @ajitbohra What's up with this ticket? Are there some issues, or are they just because of conflicts? It seems legit and I would have solved it very similarly.

In the meantime, the block variant can be registered via PHP (get_block_type_variations) which makes more sense.

add_filter('get_block_type_variations', function($variations, $block_type) {
   if ('core/social-link' === $block_type->name) {
       $variations[] = [
                'name'       => 'custom-social-service-2',
                'title'      => 'Custom Social Service 2',
                'attributes' => [
                    'service' => 'custom-social-service-2',
                    'label' => 'Default Link Label',
                ],
                'isActive' => ['service'],
       ]         
   }
}, 10, 2);

I would invest some time to get this ready to merge.

This feature is needed and asked by many people. A set of 20 services without the possibility to extend isn't enough. I understand that only a limited set should be provided by WordPress, but it should be easy to extend. A hardcoded set isn't great (current solution).